群发居民群任务

src/apps/AppCooperationPropaganda/detail.vue

@@ -78,6 +78,9 @@
         </div>
       </div>
     </div>
+
+    <button  @click="toMassDispatch">跳转群发</button>
+
     <div class="btn" v-if="data.status==0 && data.haveExaminPower">
       <div class="refuse" @click="refuseBtn">审核拒绝</div>
       <div class="pass" @click="passBtn">审核通过</div>
@@ -88,6 +91,7 @@
 <script>
 import { mapState ,mapActions } from "vuex";
 export default {
+  name : "detail",
   data() {
     return {
       id: "",
@@ -110,6 +114,9 @@ export default {
     ...mapState(['user'])
   },
   methods: {
+    toMassDispatch() {
+      uni.navigateTo({ url: `./massDispatch?id=${this.id}`})
+    },
     getDetail() {
       this.$http.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`).then(res=> {
         if (res?.data) {

src/apps/AppCooperationPropaganda/massDispatch.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="massDispatch">
+    <div class="tips">
+      <u-icon name="error-circle-fill" size="30" color="#ff9900"></u-icon>请于12月13日24点前完成群发任务</div>
+    <div class="task">
+      <div class="task_title">群发客户群</div>
+      <div class="task_content">
+        <div class="item">
+          <span>任务名称</span>
+          <span>{{ data.taskTitle }}</span>
+        </div>
+        <div class="item">
+          <span>创建人</span>
+          <span>{{ data.createUserName }}</span>
+        </div>
+        <!-- <div class="item" v-if="data.enableExamine == 1">
+          <span>审批人</span>
+          <span>
+            <span v-for="(item, index) in approver" :key="index" style="color: #333;">
+              {{ item.examineUserName }}
+              <span v-show="index < approver.length - 1">、</span>
+            </span>
+          </span>
+        </div>
+        <div class="item">
+          <span>所在部门</span>
+          <span style="display: flex;">
+            <div v-if="data.createUserDeptName">{{ data.createUserDeptName }}</div>
+          </span>
+        </div>
+        <div class="item">
+          <span>群发时间</span>
+          <span>{{ data.choiceTime }}</span>
+        </div> -->
+      </div>
+      <div class="task_results" v-if="data.enableExamine == 1">
+        <img v-if="data.status == 1" src="./images/refuse.png" alt="">
+        <img v-if="data.status == 2" src="./images/pass.png" alt="">
+      </div>
+    </div>
+    <div class="info">
+      <div class="scope">
+        <span>群发范围</span>
+        <span>我的全部居民群</span>
+        <!-- <span v-if="data.sendScope==0">全部{{ data.receiveGroupCount || 0}}个居民群</span> -->
+        <!-- <span v-if="data.sendScope==1 || data.sendScope==2">按条件筛选的{{ data.receiveGroupCount || 0}}个居民群</span> -->
+      </div>
+      <div class="content">
+        <p>群发内容</p>
+        <div>
+          <!-- 文本 -->
+          <div class="textarea" v-show="content.length">{{ content }}</div>
+          <!-- 图片 -->
+          <div class="pictures" v-show="picList.length">
+            <image v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl" @click.stop="previewImages(picList, item.imgPicUrl)"/>
+          </div>
+          <!-- 视频 -->
+          <div class="video" v-show="videoList.length">
+            <video v-for="(item, index) in videoList" :key="index" :src="item.imgPicUrl"/>
+          </div>
+          <!-- 文件 -->
+          <div class="file" v-show="fileList.length">
+            <div class="file_item" v-for="(item,index) in fileList" :key="index" @click="prevFile(item.sysFile)">
+              <img src="./images/files.png" alt="">
+              <div>{{ item.sysFile.name }}</div>
+            </div>
+          </div>
+          <!-- 网页 -->
+          <div class="webpage" v-show="webpage.length">
+            <p>链接地址</p>
+            <a v-for="(item, index) in webpage" :key="index" :href="item.linkUrl">
+              <div v-if="item.linkTitle">{{item.linkTitle}}</div>
+              <div v-else>{{ item.linkUrl }}</div>
+            </a>
+          </div>
+          <!-- 小程序 -->
+          <div class="miniapp" v-show="miniapp.length">
+            <p>小程序</p>
+            <div v-for="(item, index) in miniapp" :key="index">{{item.mpTitle}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subBtn" @click="toSend">
+      <div>前往群发</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState ,mapActions } from "vuex";
+export default {
+  name: "massDispatch",
+  data() {
+    return {
+      id: "",
+      data: {},
+      content: '',
+      picList: [],
+      videoList: [],
+      fileList: [],
+      webpage: [],
+      miniapp: [],
+      pictres: [],
+      options: '',
+      approver: [],  //审批人
+    } 
+  },
+  onLoad(o) {
+    this.id = o.id
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  methods: {
+    ...mapActions(['shareToExternalChat']),
+    getDetail() {
+      this.$http.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`).then(res=> {
+        if (res?.data) {
+          this.data = res.data
+          this.content = res.data.contents.filter(v=> v.msgType == 0)?.[0].content
+          this.picList = res.data.contents.filter(v=> v.msgType == 1)
+          this.videoList = res.data.contents.filter(v=> v.msgType == 2)
+          this.fileList = res.data.contents.filter(v=> v.msgType == 3)
+          this.webpage = res.data.contents.filter(v=> v.msgType == 4)
+          this.miniapp = res.data.contents.filter(v=> v.msgType == 5)
+          this.approver = res.data.examines
+        }
+      })
+    },
+    previewImages(images, img) {
+      uni.previewImage({
+        urls: images.map(v => v.imgPicUrl),
+        current: img
+      })
+    },
+    ...mapActions(['previewFile']),
+    prevFile(file) {
+      this.$loading()
+      this.previewFile({ ...file }).then(()=>{
+        this.$hideLoading()
+      })
+    },
+    toSend() {
+      this.shareToExternalChat({})
+    },
+  },
+  onShow() {
+    document.title = "群发居民群任务"
+    this.getDetail()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.massDispatch {
+  padding: 32px 32px 140px 32px;
+  box-sizing: border-box;
+
+  .tips {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    background: #fff1e8;
+    border: 1px solid #ff9e61;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    padding: 0 30px;
+    box-sizing: border-box;
+  }
+
+  .task {
+    position: relative;
+    margin-bottom: 24px;
+    background: #FFF;
+    border-radius: 8px;
+    box-shadow: inset 0px -1px 0px 0px #DDDDDD;
+    .task_title {
+      padding: 26px 32px;
+      box-sizing: border-box;
+      border-bottom: 2px solid #DDDDDD;
+    }
+    .task_content {
+      padding: 0 32px 26px 32px;
+      box-sizing: border-box;
+      .item {
+        display: flex;
+        padding-top: 26px;
+        box-sizing: border-box;
+        span:first-child {
+          width: 160px;
+          color: #999999;
+        }
+        span:last-child {
+          width: calc(100% - 160px);
+        }
+      }
+    }
+    .task_results {
+      position: absolute;
+      right: 30px;
+      top: 30px;
+      img {
+        width: 160px;
+        height: 130px;
+      }
+    }
+  }
+
+  .info {
+    background: #FFF;
+    border-radius: 8px;
+    padding: 26px 32px;
+    box-sizing: border-box;
+    .scope {
+      display: flex;
+      margin-bottom: 16px;
+      span:first-child {
+        width: 160px;
+        color: #999;
+      }
+      span:last-child {
+        width: calc(100% - 160px);
+      }
+    }
+    .content {
+      p {
+        color: #999;
+      }
+      .textarea,
+      .pictures,
+      .video,
+      .file,
+      .webpage,
+      .miniapp {
+        background: #F9F9F9;
+        border-radius: 4px;
+        padding: 20px;
+        box-sizing: border-box;
+        margin-top: 26px;
+      }
+      .pictures {
+        margin-top: 16px;
+        image {
+          width: 190px;
+          height: 190px;
+          margin-right: 4px;
+          margin-bottom: 4px;
+        }
+        image:nth-child(3n) {
+          margin-right: 0;
+        }
+      }
+      .video {
+        video {
+          height: 300px;
+        }
+      }
+      .file {
+        .file_item {
+          display: flex;
+          align-items: center;
+          img {
+            width: 96px;
+            height: 96px;
+          }
+        }
+      }
+    }
+  }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+    padding: 18px 32px;
+    box-sizing: border-box;
+
+    div {
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #fff;
+      float: right;
+    }
+  }
+}
+</style>

src/project/huizhili/AppCooperationPropaganda/circleDetail.vue

@@ -115,7 +115,7 @@ export default {
     },
 
     toDetail() {
-      uni.navigateTo({ url: `./detail?id=${this.id}` });
+      uni.navigateTo({ url: `./detail?id=${this.id}&type=${this.type}` });
     },
     // 提醒发送
     remindSend() {