dvcp_v2_wxcp_app/library/project/police/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">用户选择</div>
      <div class="right" @click="toSelect">
        <span>
          <span v-if="!areaIdList.length && !tagIdList.length && !deptList.length && !userList.length">全部</span>
          <span v-else>已选择<!-- <span class="color-1365DD">10</span>人 --></span>
        </span>
        <img src="./components/img/right-icon.png" alt="">
      </div>
    </div>
    <div class="content">
      <p class="title fw500 mar-b32">群发消息设置</p>
      <div class="select-user pad-lr0">
        <div class="label color-666"><span class="tips">*</span>群发方式</div>
        <div class="right">
          <u-radio-group v-model="form.sendType">
            <u-radio v-for="(item, index) in sendTypeList" :key="index" :label="item.name" :name="item.type">{{item.name}}</u-radio>
          </u-radio-group>
        </div>
        <u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="timeSelect"></u-picker>
      </div>
      <div class="select-user pad-lr0" v-if="form.sendType == 1">
        <div class="label color-666"><span class="tips">*</span>群发时间</div>
        <div class="right"  @click="timeShow=true">
          <span v-if="form.sendTime">{{form.sendTime}}</span>
          <span class="color-999" v-else>请选择</span>
        </div>
        <u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="timeSelect"></u-picker>
      </div>
      <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">
        <p class="color-666">其它类型</p>
        <u-radio-group v-model="form.contentType">
          <u-radio v-for="(item, index) in typeList" :key="index" :name="item.type" @change="radioChange" > {{item.name}}</u-radio>
        </u-radio-group>
      </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 v-if="form.contentType == 'link'">
          <div class="flex border-b">
            <p class="label">链接地址</p>
            <div class="value">
              <u-input v-model="formData.accessUrl" type="text" input-align="right" placeholder="请输入链接地址" height="44" />
            </div>
          </div>
          <div class="flex border-b">
            <p class="label">链接图片</p>
            <AiUploader multiple :def.sync="formData.imgList" :limit="1" action="/admin/file/add2"></AiUploader>
          </div>
          <div class="flex">
            <p class="label">链接标题</p>
            <div class="value">
              <u-input v-model="formData.accessTitle" type="text" input-align="right" placeholder="请输入链接标题" height="44" />
            </div>
          </div>
        </div>
        <div v-if="form.contentType == 'miniapp'" class="flex-label">
          <div class="flex border-b">
            <p class="label">小程序标题</p>
            <div class="value">
              <u-input v-model="formData.accessTitle" type="text" input-align="right" placeholder="请输入小程序标题" height="44" />
            </div>
          </div>
          <div class="flex border-b">
            <p class="label">小程序APPID</p>
            <div class="value">
              <u-input v-model="formData.accessAppid" type="text" input-align="right" placeholder="请输入小程序APPID" height="44" />
            </div>
          </div>
          <div class="flex border-b">
            <p class="label">小程序跳转页面</p>
            <div class="value">
              <u-input v-model="formData.accessUrl" type="text" input-align="right" placeholder="如pages/home/home" height="44" />
            </div>
          </div>
          <div class="flex">
            <p class="label" style="width:80px;">小程序图片</p>
            <AiUploader multiple :def.sync="formData.imgList" :limit="1" action="/admin/file/add2"></AiUploader>
          </div>
        </div>
      </div>
      <!-- <div class="upload"><u-icon name="plus-circle-fill" color="#1365DD" size="32"></u-icon>添加附件</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: 'image'}, 
        {name: '视频', type: 'video'}, 
        {name: '文件', type: 'file'}
      ],
      sendTypeList: [
        {name: '立即发送', type: '0'}, 
        {name: '定时发送', type: '1'}
      ],
      form: {
        content: '',
        sendType: '0',
        sendTime: ''
      },
      formData: {},
      fileList: [],
      fileListImg: [],
      fileListVideo: [],
      fileListFile: [],
      areaIdList: [],
      tagIdList: [],
      deptList: [],
      userList: [],
      timeShow: false,
      timeParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
    }
  },
  computed: {...mapState(['user'])},
  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'
          }
        })
      })
    },
    toSelect() {
      uni.navigateTo({url: `./chooseUser?tagIdList=${this.tagIdList}&areaList=${this.areaIdList}&deptList=${this.deptList}&userList=${this.userList}`})
    },
    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.form.sendType == 1 && !this.form.sendTime) {
        return this.$u.toast('请选择群发时间')
      }
      if(!this.form.content) {
        return this.$u.toast('请输入文本内容')
      }
      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, 
        areaId: this.areaIdList.join(','),
        tag: this.tagIdList.join(','),
        deptList: this.deptList,
        userList: this.userList,
        fileList: this.fileList
      }
      this.$http.post("/app/pushmessage/addOrUpdate", params).then(res => {
        if (res?.code == 0) {
          this.$u.toast('发送成功')
          setTimeout(() => {
            this.back()
          }, 500)
          // 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.form) {
        this.form[key] = ''
      }
      this.form.sendType = '0'
      this.fileListImg = []
      this.fileListVideo = []
      this.fileListFile = []
      this.areaIdList = []
      this.tagIdList = []
      this.deptList = []
      this.userList = []
    },
    back() {
      uni.navigateBack()
    }
  },
  created() {
    this.areaId = this.user.areaId
    this.areaName = this.user.areaName
    uni.$on('selectTag', res => {
      this.tagIdList = res.tagIdList
      this.areaIdList = res.areaIdList
      this.deptList = res.deptList
      this.userList = res.userList
    })
  },
}
</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>