dvcp_v2_wxcp_app/library/apps/AppMessageNotification/AppMessageNotification.vue

<template>
  <section class="AppMessageNotification">
    <div class="header">
      <p>注意</p>
      <p>每个用户每天可以接受10条群发消息，不限企业发布的群发还是个人发布的群发。</p>
      <p>个人群发每天可以给用户发送10条群发消息。</p>
    </div>
    <div class="select-user">
      <div class="label color-666"><span class="tips">*</span>发送方式</div>
      <div class="right">
        <u-radio-group v-model="form.messageSource" @change="radioGroupChange">
          <u-radio v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.type">{{ item.name }}</u-radio>
        </u-radio-group>
      </div>
    </div>
    <div class="select-user">
      <div class="label color-666"><span class="tips">*</span>部门选择</div>
      <div class="right">
        <AiPagePicker type="custom" :selected.sync="deptUserList" nodeKey="id" :ops="{url:`./selectDeptUser`,label:'name'}" valueObj>
          <span class="label" v-if="deptUserList.length">已选择</span>
          <span v-else style="color:#999;">请选择</span>
          <u-icon name="arrow-right" color="#999" size="24" style="margin-left:8px;"/>
        </AiPagePicker>
      </div>
    </div>
    <div class="select-user">
      <div class="label color-666">发送地区</div>
      <div class="right">
        <AiAreaPicker v-model="areaIdList" multiple>
          <span class="label" v-if="areaIdList.length">已选择</span>
          <span v-else style="color:#999;">请选择</span>
          <u-icon name="arrow-down" color="#666" size="24"/>
        </AiAreaPicker>
      </div>
    </div>
    <div class="content">
      <p class="title fw500 mar-b32">群发消息设置</p>
      <div class="mini-title color-666"><span class="tips">*</span>文本内容</div>
      <div class="textarea">
        <u-input v-model="form.content" type="textarea" :height="400" auto-height maxlength="1000" placeholder="请输入文本内容"/>
        <div class="hint">{{ form.content.length }}/1000</div>
      </div>
      <div class="type-content">
        <div class="flex">
          <p class="label" style="width:40px;">图片</p>
          <AiUploader type="image" :limit="9" multiple :def.sync="fileListImg" @data="changeImg"></AiUploader>
        </div>
        <div class="flex" >
          <p class="label" style="width:40px;">视频</p>
          <AiUploader type="video" :limit="9" multiple placeholder="上传视频" :def.sync="fileListVideo" @data="changeVideo"></AiUploader>
        </div>
        <div class="flex">
          <p class="label" style="width:40px;">附件</p>
          <AiUploader type="file" :limit="9" multiple placeholder="上传附件" :def.sync="fileListFile" @data="changeFile"></AiUploader>
        </div>
      </div>
    </div>
    <div class="bg-144"></div>
    <div class="footer">
      <div @click="back">取消</div>
      <div class="confirm" @click="confirm">确认发送</div>
    </div>
    <!-- <u-popup v-model="show" mode="bottom">
      <div class="popup">
        <div class="item" v-for="(item, index) in popupList" :key="index">
          <div class="icon-bg">
            <u-icon :name="item.icon" size="56" color="#333"></u-icon>
          </div>
          <p>{{item.text}}</p>
        </div>
      </div>
    </u-popup> -->
  </section>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "AppMessageNotification",
  appName: "群发通知",
  data() {
    return {
      typeList: [
        {name: '居民群', type: '2'},
        {name: '居民', type: '1'}
      ],
      form: {
        content: '',
        messageSource: '2', // 1居民 2居民群
      },
      fileList: [],
      fileListImg: [],
      fileListVideo: [],
      fileListFile: [],
      areaIdList: [],
      tagIdList: [],
      fileDataImg: null,
      fileDataVideo: null,
      fileDataFile: null,
      userList: [],
      deptList: [],
      deptUserTagList: []
    }
  },
  computed: {
    ...mapState(['user']),
    deptUserList: {
      set(v) {
        this.userList = v.filter(e => e.kind == 'user')
        this.deptList = v.filter(e => e.kind == 'dept')
      },
      get() {
        let {userList, deptList} = this
        return [userList, deptList].flat()
      }
    }
  },
  methods: {
    changeImg(e) {
      this.$nextTick(() => {
        this.fileListImg.map((item) => {
          if(item.id == e.file.id) {
            item.mediaId = e.media.mediaId
            item.contentType = 'image'
          }
        })
      })
    },
    changeVideo(e) {
      this.$nextTick(() => {
        this.fileListVideo.map((item) => {
          if(item.id == e.file.id) {
            item.mediaId = e.media.mediaId
            item.contentType = 'video'
          }
        })
      })
    },
    changeFile(e) {
      this.$nextTick(() => {
        this.fileListFile.map((item) => {
          if(item.id == e.file.id) {
            item.mediaId = e.media.mediaId
            item.contentType = 'file'
          }
        })
      })
    },
    radioGroupChange(e) {
      this.form.messageSource = e
      uni.setStorageSync('messageSource', e)
      this.deptUserTagList = []
      this.deptUserList = []
      uni.setStorageSync('selectDeptUser', [])
    },
    toSelect() {
      uni.navigateTo({url: `./SelectUser?tagIdList=${this.tagIdList}&areaList=${this.areaIdList}`})
    },
    timeSelect(e) {
      var nowTime = new Date().getTime() * 1
      var beginTimes = new Date(e.year + '/' + e.month + '/' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second).getTime() * 1
      if (nowTime > beginTimes) {
        // this.form.sendTime = ''
        return this.$u.toast('群发时间应大于当前时间')
      } else {
        this.form.sendTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
      }
    },
    confirm() {
      this.$loading()
      if (!this.deptUserTagList.length) {
        return this.$u.toast('请选择部门')
      }
      if (!this.form.content) {
        return this.$u.toast('请输入文本内容')
      }

      let result = {}, tags = {}
      this.deptUserTagList.map(e => {
        let {kind, id, tagIdList} = e
        result[e.corpId] = [result[e.corpId], {kind, id}].flat()
        tagIdList = tagIdList.filter(e => !!e)
        if (tagIdList) {
          tags[e.corpId] = [...new Set([tags[e.corpId], tagIdList].flat())]
        }
      })
      var deptList = Object.keys(result).map(corpId => {
        let res
        if (result[corpId]) {
          res = {
            corpId,
            objList: result[corpId].filter(e => !!e)
          }
          let tagIds = tags[corpId].filter(e => !!e)
          if (tagIds?.length > 0) {
            res.tagId = tagIds
          }
        }
        return res
      }).filter(e => !!e)

      this.fileList = []
      var contentFile = {
        content: this.form.content,
        contentType: 'text'
      }
      this.fileList = [...this.fileListImg, ...this.fileListVideo, ...this.fileListFile]
      this.fileList.unshift(contentFile)
      var params = {
        ...this.form,
        fileList: this.fileList,
        areaId: this.areaIdList.join(','),
        deptList: deptList,
      }
      this.$http.post("/app/pushmessage/addOrUpdate", params).then(res => {
        if (res?.code == 0) {
          this.$u.toast('发送成功')
          uni.setStorageSync('selectDeptUser', [])
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        } else {
          this.$u.toast(res.msg)
        }
      }).catch((err) => {
        this.$u.toast(err)
      })
    },
    back() {
      uni.navigateBack()
    }
  },
  created() {
    this.areaId = this.user.areaId
    this.areaName = this.user.areaName
    uni.setStorageSync('selectDeptUser', [])
    uni.setStorageSync('messageSource', this.form.messageSource)
    // uni.$on('selectTag', res => {
    //   this.tagIdList = res.tagIdList
    //   this.areaIdList = res.areaIdList
    // })
  },
  onShow() {
    this.deptUserTagList = uni.getStorageSync('selectDeptUser')
  }
}
</script>
<style lang="scss" scoped>
.AppMessageNotification {
  height: 100%;
  background-color: #f3f6f9;

  .fw500 {
    font-weight: 500;
    font-size: 32px !important;
  }

  .color-666 {
    color: #666;
    font-size: 30px;
  }

  .tips {
    font-size: 34px;
    color: #f46 !important;
    vertical-align: middle;
  }

  .mar-b32 {
    margin-bottom: 32px;
  }

  .header {
    // background-color: #fff;
    padding: 32px 32px 20px 32px;
    box-sizing: border-box;
    margin-bottom: 16px;

    p {
      line-height: 44px;
      margin-bottom: 8px;
      word-break: break-all;
      font-size: 28px;
      color: #666;
    }
  }

  .select-user {
    background-color: #fff;
    padding: 34px 32px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 30px;

    img {
      width: 44px;
      height: 44px;
      vertical-align: middle;
    }

    .color-999 {
      color: #999;
    }

    .color-1365DD {
      color: #1365DD;
    }

    .label {
      width: 160px;
    }

    .right {
      width: calc(100% - 160px);
      text-align: right;
    }
  }

  .pad-lr0 {
    padding: 0;
    margin-bottom: 32px;
  }

  .content {
    padding: 32px;
    box-sizing: border-box;
    background-color: #fff;

    .title {
      line-height: 44px;
      margin-bottom: 24px;
    }

    .mini-title {
      line-height: 44px;
      margin-bottom: 24px;
    }

    .textarea {
      padding: 16px 32px;
      box-sizing: border-box;
      border: 1px solid #ddd;

      .hint {
        padding: 4px 0 8px 0;
        text-align: right;
        color: #999;
      }
    }

    // .upload{
    //   padding: 16px 32px;
    //   line-height: 44px;
    //   border: 1px solid #ddd;
    //   border-top: 0;
    //   .u-icon{
    //     margin-right: 8px;
    //   }
    // }
    .type {
      margin-top: 32px;

      p {
        display: inline-block;
        margin-right: 16px;
      }
    }

    .type-content {
      margin-top: 32px;

      .label {
        display: inline-block;
        margin-right: 16px;
        vertical-align: top;
        font-size: 30px;
        color: #666;
        width: 130px;
      }

      .value {
        width: calc(100% - 130px);
      }

      .ai-uploader {
        display: inline-block;
        width: calc(100% - 130px);
      }

      .flex {
        padding: 34px 0;
        line-height: 44px;
        display: flex;
      }

      .border-b {
        border-bottom: 1px solid #ddd;
      }

      .flex-label {
        .label {
          width: 260px;
        }
      }
    }
  }

  .bg-144 {
    height: 144px;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    background: #fff;
    display: flex;
    font-size: 36px;
    font-family: PingFangSC-Regular, PingFang SC;

    .confirm {
      color: #fff;
      background: #1365dd;
    }

    div {
      flex: 1;
      text-align: center;
      color: #333;
    }
  }

  .popup {
    padding-top: 32px;
    background-color: #f3f6f9;

    .item {
      display: inline-block;
      width: 25%;
      text-align: center;
      padding: 32px 0;

      .icon-bg {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #fff;
        margin: 0 auto;
        border-radius: 8px;
        margin-bottom: 16px;

        .u-icon {
          margin-top: 20px;
        }
      }

      p {
        line-height: 44px;
        font-size: 30px;
        font-weight: 500;
        color: #333;
      }
    }
  }

}
</style>