dvcp_v2_wxcp_app/src/apps/AppCooperationPropaganda/massDispatch.vue

<template>
  <div class="massDispatch">
    <div class="tips">
      <u-icon name="error-circle-fill" size="30" color="#ff9900"></u-icon>请于{{ data.taskEndTime }}前完成群发任务</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>
      <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>
      </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: [],  //审批人
      status: ''
    } 
  },
  onLoad(o) {
    this.id = o.id
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    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', 'shareToExternalChat']),
    prevFile(file) {
      this.$loading()
      this.previewFile({ ...file }).then(()=>{
        this.$hideLoading()
      })
    },

    toSend() {
      // 文本
      const text = {
        content: this.content
      }
      let data = []
      // 图片
      const imgs = this.picList.map(v =>{
        return {
          msgtype: "image",
				  image: {
					  mediaid: v.mediaId,
					  imgUrl: v.imgPicUrl,
				  },
        }
      })
      // 视频
      const videos = this.videoList.map(v =>{
        return {
          msgtype: "video",
				  video:{
						mediaid: v.mediaId,
				 },
        }
      })
      // 文件
      const files = this.fileList.map(v => {
        return {
          msgtype: "file",
				  file:{
						mediaid: v.mediaId,
				 },
        }
      })
      // 链接
      const links = this.webpage.map(v =>{
        return {
          msgtype: "link",
				  link: {
						title: v.linkTitle,
					    imgUrl: v.linkPicUrl,
					    desc: v.linkDesc,
					    url: v.linkUrl,
				  },
        }
      })

      // 小程序
      const miniapps = this.miniapp.map(v =>{
        return {
          msgtype: "miniprogram",
				  miniprogram: {
            appid: v.mpAppid,
            title: v.mpTitle,
            imgUrl : v.sysFile.accessUrl,
            page: v.mpPage,
				  },
        }
      })
      data = [ ...imgs, ...videos, ...files, ...links, ...miniapps ]
      this.shareToExternalChat({ text: text, attachments: data }).then((res) =>{
        // err_msg: "shareToExternalChat:ok"
        if (res.err_msg == "shareToExternalChat:ok") {
          this.status = 'ok'
          this.nextCallback()
        } else {
          this.status = 'fail'
          this.nextCallback()
        }
      })
    },
    nextCallback() {
      this.$http.post(`/app/appmasssendingtask/h5Callback`, null, {
        params: {
          id: this.id,
          status: this.status,
        }
      }).then((res) =>{
        console.log(res);
      })
    }
  },
  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;
      cursor: pointer;
    }
  }
}
</style>