dvcp_v2_wxcp_app/src/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.sendType" @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" :def.sync="formData.fileListImg" :limit="1" @data="(v) => fileDataImg = v"></AiUploader>
        </div>
        <div class="flex" >
          <p class="label" style="width:40px;">视频</p>
          <AiUploader type="video" :limit="1" placeholder="上传视频" :def.sync="formData.fileListVideo" @data="(v) => fileDataVideo = v"></AiUploader>
        </div>
        <div class="flex">
          <p class="label" style="width:40px;">附件</p>
          <AiUploader type="file" :limit="1" placeholder="上传附件" :def.sync="formData.fileListFile" @data="(v) => fileDataFile = v"></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: '0'}, 
        {name: '居民', type: '1'}
      ],
      form: {
        content: '',
        contentType: 'text',
        sendType: '1',
      },
      formData: {
        fileListImg: [],
        fileListVideo: [],
        fileListFile: [],
        fileList: [],
      },
      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: {
    radioGroupChange(e) {
      this.form.sendType = e
      uni.setStorageSync('sendType', e)
		},
    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() {
      // if(!this.areaIdList.length) {
      //   return this.$u.toast('请选择用户')
      // }
      this.$loading()
      if(this.form.sendType == 1 && !this.form.sendTime) {
        return this.$u.toast('请选择群发时间')
      }
      if(!this.form.content) {
        return this.$u.toast('请输入文本内容')
      }
      if(this.form.contentType == 'image' && !this.formData.fileList.length) {
        return this.$u.toast('请上传图片')
      }
      if(this.form.contentType == 'video' && !this.formData.fileList.length) {
        return this.$u.toast('请上传视频')
      }
      if(this.form.contentType == 'file' && !this.formData.fileList.length) {
        return this.$u.toast('请上传文件')
      }
      this.formData.fileList = []
      var contentFile = {
        content: this.form.content,
        contentType: 'text'
      }
      // if(this.formData.fileList.length) {
      //   this.formData.file = this.formData.fileList[0]
      //   this.formData.accessUrl = this.formData.fileList[0].url
      //   this.formData.mediaId = this.fileData.media.mediaId
      // }
      this.formData.fileList.push(contentFile)
      if(this.formData.fileListImg.length) {
        var info = {
          contentType: 'image',
          mediaId: this.fileDataImg.media.mediaId,
          accessUrl: this.formData.fileListImg[0].url
        }
        this.formData.fileList.push(info)
      }
      if(this.formData.fileListVideo.length) {
        var info = {
          contentType: 'video',
          mediaId: this.fileDataVideo.media.mediaId,
          accessUrl: this.formData.fileListVideo[0].url
        }
        this.formData.fileList.push(info)
      }
      if(this.formData.fileListFile.length) {
        var info = {
          contentType: 'file',
          mediaId: this.fileDataFile.media.mediaId,
          accessUrl: this.formData.fileListFile[0].url
        }
        this.formData.fileList.push(info)
      }
      var params = {
        ...this.form, 
        ...this.formData,
        areaId: this.areaIdList.join(','),
        tag: this.tagIdList.join(','),
      }
      this.$http.post("/app/pushmessage/addOrUpdate", params).then(res => {
        if (res?.code == 0) {
          this.$u.toast('发送成功')
          this.form =  {
            content: '',
            contentType: 'text',
            sendType: '0',
            sendTime: ''
          }
          this.areaIdList = []
          this.tagIdList = []
          this.formDataInit()
        }else {
          this.$u.toast(res.msg)
        }
      }).catch((err) => {
        this.$u.toast(err)
      })
    },
    formDataInit() {
      for(let key in this.formData) {
        this.formData[key] = ''
      }
      this.formData.fileListImg = []
      this.formData.fileListVideo = []
      this.formData.fileListFile = []
    },
    back() {
      uni.navigateBack()
    }
  },
  created() {
    uni.setStorageSync('sendType', this.form.sendType)
    this.areaId = this.user.areaId
    this.areaName = this.user.areaName
    // 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>