爱心互助活动详情

src/assets/scss/modules/management/detail-main.scss

@@ -320,6 +320,10 @@
       width:500px;
       padding-top:10px
     }
+    .div_map2 {
+      width:400px;
+      padding-top:10px
+    }
 }
 
 }

src/views/modules/communityParty/heart/heartDetail.vue

@@ -0,0 +1,514 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+
+      <div v-if="initLoading"
+           class="m-row">
+        <div class="m-row-2">
+          <div class="info-prop">
+            <span class="info-title-3">主办方：</span>
+            <span>{{ formData.sponsorName }}</span>
+          </div>
+
+          <div class="info-prop">
+            <span class="info-title-3">联系电话：</span>
+            <span>{{ formData.sponsorTel}}</span>
+          </div>
+        </div>
+
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">活动标题：</span>
+            <span>{{ formData.title}}</span>
+          </div>
+
+          <div class="info-prop">
+            <span class="info-title-3">报名仅限志愿者：</span>
+            <span>{{formData.volunteerLimit?'是':'否'}}</span>
+          </div>
+        </div>
+
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">封面：</span>
+            <!-- <div class="info-pics"> -->
+            <img :src="formData.coverPic"
+                 style="width:80px;height:80px">
+            <!-- </div> -->
+          </div>
+          <div class="info-prop">
+            <span class="info-title-3">报名无需审核：</span>
+            <span>{{formData.auditSwitch?'否':'是' }}</span>
+          </div>
+        </div>
+
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">活动时间：</span>
+            <span>{{ formData.actStartTime?formData.actStartTime:'--' }}</span>至
+            <span>{{ formData.actEndTime?formData.actEndTime:'--' }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-3">报名截止时间：</span>
+            <span>{{ formData.signUpEndTime?formData.signUpEndTime:'--' }}</span>
+          </div>
+        </div>
+
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">活动人数：</span>
+            <span>{{ formData.actQuota?formData.actQuota:0 }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-3">报名条件：</span>
+            <span>{{ formData.requirement?formData.requirement:'--' }}</span>
+          </div>
+        </div>
+
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">活动积分：</span>
+            <span>{{ formData.reward?formData.reward:0}}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-3">签到时间：</span>
+            <span>{{ formData.signInStartTime?formData.signInStartTime:'--' }}</span>至
+            <span>{{ formData.signInEndTime?formData.signInEndTime:'--' }}</span>
+
+          </div>
+
+        </div>
+
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">联系人：</span>
+            <span>{{ formData.sponsorContacts? formData.sponsorContacts:'--'  }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-3">签到有效范围（米）：</span>
+            <span>{{ formData.signInRadius? formData.signInRadius:'--'  }}</span>
+          </div>
+
+        </div>
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">活动地点：</span>
+            <span>{{ formData.actAddress? formData.actAddress:'--'  }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-3">签到地点：</span>
+            <span>{{ formData.signInAddress? formData.signInAddress:'--'  }}</span>
+          </div>
+
+        </div>
+        <div class="m-row-2">
+
+          <div class="info-prop">
+            <span class="info-title-3">活动地图位置：</span>
+            <div class="div_map2">
+              <div id="map_act_id"></div>
+            </div>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-3">签到地图位置：</span>
+            <div class="div_map2">
+              <div id="map_signin_id"></div>
+            </div>
+
+          </div>
+
+        </div>
+
+        <div class="m-info">
+          <div class="info-prop">
+            <span class="info-title-3">活动详情：</span>
+            <p v-if="formData.richTextFlag"
+               class="text_p"
+               v-html="formData.actContentHtml"></p>
+
+            <div v-else>
+              <div v-for="(item,index) in formData.actContent"
+                   :key="index">
+                <div v-if="item.contentType==='text'">{{item.content}}</div>
+                <img v-if="item.contentType==='img'"
+                     class="img_icon"
+                     :src="item.content">
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <div v-if="formData.summaryFlag"
+             class="m-info">
+          <div class="info-prop">
+            <span class="info-title-3">活动回顾：</span>
+            <p v-if="formData.richTextFlag"
+               class="text_p"
+               v-html="formData.summaryContentHtml"></p>
+
+            <div v-else>
+              <div v-for="(item,index) in formData.summaryContent"
+                   :key="index">
+                <div v-if="item.contentType==='text'">{{item.content}}</div>
+                <img v-if="item.contentType==='img'"
+                     class="img_icon"
+                     :src="item.content">
+                <p v-if="item.contentType==='rich_text'"
+                   class="text_p"
+                   v-html="item.content"></p>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+
+
+let loading // 加载动画
+
+var map_act;
+var search_act;
+var markers_act;
+var infoWindowList_act;
+var geocoder_act; // 新建一个正逆地址解析类
+
+var map_signin;
+var search_signin;
+var markers_signin;
+var infoWindowList_signin;
+var geocoder_signin; // 新建一个正逆地址解析类
+
+export default {
+  data () {
+
+
+    return {
+      initLoading: false,
+      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+      btnDisable: false,
+      customerId: '',
+      actId: '',
+
+      formData: {
+      },
+
+
+
+    }
+  },
+
+  mounted () {
+    this.customerId = localStorage.getItem('customerId')
+
+  },
+
+  methods: {
+    diaDestroy () {
+      if (map_act) {
+        map_act.destroy()
+      }
+      if (map_signin) {
+        map_signin.destroy()
+      }
+    },
+
+    async initForm (actId) {
+
+      this.startLoading()
+      this.actId = actId
+      this.formData.actId = actId
+      await this.loadFormData()
+
+      this.initLoading = true
+
+      this.$nextTick(() => {
+        this.initMap()
+      })
+      this.endLoading()
+
+
+    },
+
+
+    //加载form
+    async loadFormData () {
+      const url = '/heart/work/act/detail'
+
+      let params = {
+        actId: this.actId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+
+        this.formData = JSON.parse(JSON.stringify(data));
+        if (this.formData.richTextFlag) {
+
+          if (this.formData.actContent && this.formData.actContent.length > 0) {
+            this.formData.actContentHtml = this.formData.actContent[0].content
+          }
+          if (this.formData.summaryContent && this.formData.summaryContent.length > 0) {
+            this.formData.summaryContentHtml = this.formData.summaryContent[0].content
+          }
+        }
+
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+
+
+    dormatHtml (content) {
+      let c = ''
+      if (content.indexOf('DOCTYPE') != -1) {
+        c = content.slice(45, -16);
+      }
+      console.log('content', typeof content)
+      return c || content
+    },
+
+
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap () {
+      // 定义地图中心点坐标
+      var centerAct = new window.TMap.LatLng(this.formData.actLatitude, this.formData.actLongitude);
+      var centerSign = new window.TMap.LatLng(this.formData.signInLatitude, this.formData.signInLongitude);
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map_act = new window.TMap.Map(document.getElementById("map_act_id"), {
+        center: centerAct, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45, // 设置地图旋转角度
+      });
+      map_signin = new window.TMap.Map(document.getElementById("map_signin_id"), {
+        center: centerSign, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45, // 设置地图旋转角度
+      });
+
+      // search_act = new window.TMap.service.Search({ pageSize: 10 });
+      // 新建一个地点搜索类
+      markers_act = new TMap.MultiMarker({
+        map: map_act,
+        geometries: [],
+      });
+      infoWindowList_act = Array(10);
+
+      geocoder_act = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+
+      // search_signin = new window.TMap.service.Search({ pageSize: 10 });
+      // 新建一个地点搜索类
+      markers_signin = new TMap.MultiMarker({
+        map: map_signin,
+        geometries: [],
+      });
+      infoWindowList_signin = Array(10);
+
+      geocoder_signin = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+
+      // 监听地图平移结束
+      map_act.on("panend", (e) => {
+        this.handleMoveCenterAct(e);
+      });
+      this.handleMoveCenterAct();
+
+      // 监听地图平移结束
+      map_signin.on("panend", (e) => {
+        this.handleMoveCenterSignin(e);
+      });
+      this.handleMoveCenterSignin();
+    },
+
+    setMarkerAct (lat, lng) {
+      markers_act.setGeometries([]);
+      markers_act.add([
+        {
+          id: "4",
+          styleId: "marker",
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: "marker4",
+          },
+        },
+      ]);
+    },
+
+
+
+    handleMoveCenterAct (e) {
+      //修改地图中心点
+      const center = map_act.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      this.formData.actLatitude = lat;
+      this.formData.actLongitude = lng;
+      this.setMarkerAct(lat, lng);
+
+      if (e && e.originalEvent) {
+        geocoder_act
+          .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
+          .then((result) => {
+            this.formData.actAddress = result.result.address;
+          });
+      }
+    },
+    setMarkerSignin (lat, lng) {
+      markers_signin.setGeometries([]);
+      markers_signin.add([
+        {
+          id: "4",
+          styleId: "marker",
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: "marker4",
+          },
+        },
+      ]);
+    },
+
+    handleSearchMapSignin () {
+      infoWindowList_signin.forEach((infoWindow) => {
+        infoWindow.close();
+      });
+      infoWindowList_signin.length = 0;
+      markers_signin.setGeometries([]);
+      // 在地图显示范围内以给定的关键字搜索地点
+      search_signin
+        .searchRectangle({
+          keyword: this.formData.signInAddress,
+          bounds: map_signin.getBounds(),
+        })
+        .then((result) => {
+          let { data } = result;
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng },
+            } = data[0];
+            map_signin.setCenter(new TMap.LatLng(lat, lng));
+            this.setMarkerSignin(lat, lng);
+            this.formData.signInLatitude = lat;
+            this.formData.signInLongitude = lng;
+          } else {
+            this.$message.error("未检索到相关位置坐标");
+          }
+        });
+    },
+
+    handleMoveCenterSignin (e) {
+      //修改地图中心点
+      const center = map_signin.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      this.formData.signInLatitude = lat;
+      this.formData.signInLongitude = lng;
+      this.setMarkerSignin(lat, lng);
+
+      if (e && e.originalEvent) {
+        geocoder_signin
+          .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
+          .then((result) => {
+            this.formData.signInAddress = result.result.address;
+          });
+      }
+    },
+
+    handleCancle () {
+
+      this.resetData()
+      this.$emit('dialogCancle')
+
+    },
+
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+
+
+  },
+  props: {
+
+
+  }
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/management/detail-main.scss";
+</style>
+<style lang="scss" scoped >
+.avatar-uploader {
+  margin: 0 0 0 20px;
+}
+.div-tooltip {
+  margin-left: 10px;
+  color: red;
+}
+
+.text_p {
+  width: 1000px;
+  margin: 0 0;
+  border: 3px;
+
+  p {
+    margin: 0;
+    padding: 0;
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 0;
+  }
+}
+.div_content {
+  width: 1000px;
+}
+.img_icon {
+  width: 200px;
+  height: 200px;
+}
+</style>
+
+<style lang="scss">
+.el-dialog__body {
+  padding: 0 10px 20px !important;
+}
+
+.hide {
+  .el-upload--picture-card {
+    display: none !important;
+  }
+}
+</style>
+

src/views/modules/communityParty/heart/heartList.vue

@@ -234,6 +234,18 @@
                   @dialogOk="addFormOk"></heart-form>
     </el-dialog>
 
+    <!-- 修改弹出框 -->
+    <el-dialog :visible.sync="detailShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="'互动详情'"
+               width="1350px"
+               top="5vh"
+               class="dialog-h"
+               @closed="detailFormCancle">
+      <heart-detail ref="ref_form_detail"></heart-detail>
+    </el-dialog>
+
     <!-- 活动取消原因 -->
 
     <el-dialog :visible.sync="cancleShow"
@@ -330,6 +342,7 @@
 <script>
 
 import heartForm from './heartForm'
+import heartDetail from './heartDetail'
 import heartAudit from './heartAudit'
 import heartPerson from './heartPerson'
 import heartFinish from './heartFinish'
@@ -410,11 +423,12 @@ export default {
       personShow: false,//查看人员
       finishShow: false,//活动结束
       reviewShow: false,//添加回顾
+      detailShow: false,
 
     }
   },
   components: {
-    heartForm, heartAudit, heartPerson, heartFinish, heartReview
+    heartForm, heartAudit, heartPerson, heartFinish, heartReview, heartDetail
   },
   async created () {
 
@@ -493,13 +507,24 @@ export default {
 
 
     handleDetail (row) {
-      this.formTitle = '详情'
-      this.formShow = true
+      // this.formTitle = '详情'
+      // this.formShow = true
+      // this.$nextTick(() => {
+      //   this.$refs.ref_form.initForm('detail', row.actId)
+      // })
+
+      this.detailShow = true
+
       this.$nextTick(() => {
-        this.$refs.ref_form.initForm('detail', row.actId)
+        this.$refs.ref_form_detail.initForm(row.actId)
       })
     },
 
+    detailFormCancle () {
+      this.$refs.ref_form_detail.diaDestroy()
+      this.detailShow = false
+    },
+
     handleAdd () {
       this.formTitle = '新增'
       this.formShow = true

src/views/modules/communityParty/regionalParty/activitysDetail.vue

@@ -87,7 +87,7 @@ export default {
   },
   components: {},
   mounted () {
-    this.initMap()
+
   },
 
   methods: {