dvcp_v2_wxcp_app/library/project/saas/AppNotification/add.vue

<template>
  <div class="add-meeting">
    <div>
      <div class="card">
        <header><em>*</em>公告标题</header>
        <input v-model="form.title" :focus="true" placeholder="请输入" :maxlength="30">
      </div>
      <div class="card">
        <header><em>*</em>公告内容</header>
        <AiEditor v-model="form.content" placeholder="请输入，最多500字" :maxlength="500"/>
      </div>

      <div class="card">
        <AiUploader :multiple="true" type="image" :limit="9" placeholder="上传图片" @list="fileList" :def="form.files"
                    action="/admin/file/add2"></AiUploader>
      </div>

      <div class="card item-wrap">
        <u-row justify="between" class="item" style="border-bottom: 1px solid #eeeeee" @click="handleSelectUser">
          <header><em>*</em>发送对象</header>
          <div class="right">
            <template v-if="!form.selectCount">
              <span>请选择</span>
            </template>
            <template v-else>
              已选择<em>{{ form.selectCount }}</em>人
            </template>
            <div class="right-arrow"/>
          </div>
        </u-row>

        <u-row justify="between" class="item">
          <header><em>*</em>发送时间</header>
        </u-row>
        <u-row justify="between">
          <div class="type" :class="[index==0 && 'active']" @click="index=0,form.releaseTime=null">立即发送
            <img :src="$cdn + 'notice/jiaobiao.png'" alt="" v-show="index==0">
          </div>
          <div class="type" :class="[index==1 && 'active']" @click="index=1">定时发送
            <img :src="$cdn + 'notice/jiaobiao.png'" alt="" v-show="index==1">
          </div>
        </u-row>
        <u-gap height="38"></u-gap>
        <u-row justify="between" class="item" style="box-shadow: none;" @click="show=true" v-show="index==1">
          <header><em>*</em>定时发送时间</header>
          <div class="right">
            <template v-if="!form.releaseTime">
              <span>请选择</span>
            </template>
            <template v-else>
              <span>{{ form.releaseTime }}</span>
            </template>
            <div class="right-arrow"></div>
          </div>
        </u-row>
      </div>

      <div class="footer">
        <div @click="add(0)">保存草稿</div>
        <div @click="add(1)">立即发布</div>
      </div>
    </div>
    <u-picker v-model="show" mode="time" :params="options" @confirm="confirm"></u-picker>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "add",
  data() {
    return {
      show: false,
      index: 0,
      list: [],
      form: {
        id: null,
        title: "",
        content: "",
        persons: [],
        ticket: '',
        selectCount: 0,
        releaseTime: null,
        files: [],
      },
      selectedUserCount: 0,
      flag: null,
      options: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
        timestamp: true,
      },
      clickedUserSelect: false
    }
  },

  onLoad(opt) {
    if (opt.id) {
      this.form.id = opt.id;
      this.flag = opt.flag;
      this.getDetail();
    }
  },

  methods: {
    ...mapActions(['selectPrivilegedContact', 'wxInvoke']),
    handleSelectUser() {
      // if (this.clickedUserSelect) return this.$u.toast("正在打开人员选择器")
      // this.clickedUserSelect = true
      this.$loading()
      this.selectPrivilegedContact({
        fromDepartmentId: 0,
        selectedTickets: this.form.ticket ? [this.form.ticket] : [],
        selectedOpenUserIds: this.form.persons ? this.form.persons.map(e => e.id) : []
      }).then(res => {
        uni.hideLoading()
        this.clickedUserSelect = false
        this.form.persons = res.userList?.map(e => ({id: e.openUserId})) || []
        this.form.ticket = res.selectedTicket
        this.form.selectCount = res.selectedUserCount
      }).catch(e => {
        uni.hideLoading()
      })
    },
    confirm(e) {
      if (e.timestamp < (Date.now() / 1000) || 0) {
        return this.$u.toast("发送时间不能小于当前时间");
      }
      this.form.releaseTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
    },
    fileList(e) {
      this.form.files = e
    },
    change(e) {
      this.form.persons = e
    },
    getDetail() {
      this.$http.post("/app/appannouncement/detail", null, {
        params: {
          id: this.form.id,
          detail: this.flag
        }
      }).then(res => {
        if (res && res.data) {
          this.form.releaseTime = res.data.releaseTime;
          this.form.ticket = res.data.ticket
          this.form.selectCount = res.data.selectCount
          Object.keys(this.form).map(e => {
            this.form[e] = res.data[e];
          })
          this.index = res.data.releaseTime ? 1 : 0;
        }
      })
    },

    add(status) {
      // if(status==1){
      if (!this.form.title) return this.$u.toast("请输入公告标题")

      if (!this.form.content) return this.$u.toast("请输入公告内容")

      if (!this.form.ticket) return this.$u.toast("请选择发送对象")

      if (this.index == 1 && !this.form.releaseTime) return this.$u.toast("请选择定时发送时间")

      if (this.form.releaseTime && new Date(this.form.releaseTime).getTime() < Date.now()) return this.$u.toast("发送时间不能小于当前时间");
      // }

      this.$http.post("/app/appannouncement/addOrUpdate", {
        ...this.form,
        status,
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast(status == 1 ? "发布成功" : "保存成功");
          uni.navigateBack({})
        }
      })
    },
  },

  onShow() {
    document.title = "新增公告";
  },
  computed: {
    background() {
      return `url(${this.$cdn}/notice/jiaobiao.png) no-repeat; background-size: 46px 48px;position: absolute;bottom: 0;right: 0;`
    },
  }
}
</script>

<style lang="scss" scoped>
.add-meeting {
  min-height: 100%;
  background: #F5F5F5;
  padding-bottom: 140px;

  .card {
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 32px;
    margin-top: 16px;

    header {
      font-size: 32px;
      font-weight: 400;
      color: #333333;

      em {
        font-style: normal;
        font-size: 32px;
        color: #FF4466;
        margin-right: 8px;
        vertical-align: middle;
      }
    }

    input {
      margin: 32px 0 16px;
      box-sizing: border-box;
      padding: 0 16px;
    }

    textarea {
      width: 100%;
      height: 160px;
      margin: 32px 0 16px;
      box-sizing: border-box;
      padding: 0 16px;
    }

    .u-row {
      margin-top: 34px;

      .time {
        display: flex;
        flex-direction: column;

        & > span:first-child {
          font-size: 60px;
          font-weight: 600;
          color: #333333;
          line-height: 84px;
        }

        & > span:last-child {
          font-size: 22px;
          color: #333333;
        }
      }

      .arrow {
        width: 28px;
        height: 68px;
        overflow: hidden;
        position: relative;
        transform: rotate(180deg);

        &:before, &:after {
          content: "";
          width: 50px;
          height: 50px;
          position: absolute;
          transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
        }

        &:before {
          top: 59px;
          background-color: #CCCCCC;
        }

        &:after {
          left: 7px;
          top: 59px;
          background-color: #FFFFFF;
        }
      }

      .type {
        width: 320px;
        height: 112px;
        background: #F5F5F5;
        color: #333333;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 1px;
        position: relative;

        & > img {
          width: 46px;
          height: 48px;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }

      .active {
        background-color: #E7F1FE;
        color: #1174FE;
      }
    }

    .item {
      height: 112px;
      box-shadow: 0px -1px 0px 0px #D8DDE6;
      margin-top: 0;

      .right {
        font-size: 28px;
        color: #999999;
        display: flex;
        align-items: center;

        em {
          font-style: normal;
          color: #1365DD;
        }
      }

      .right-arrow {
        width: 16px;
        height: 16px;
        display: inline-block;
        border-top: 5px solid #CCCCCC;
        border-right: 5px solid #CCCCCC;
        transform: rotate(45deg);
      }
    }
  }

  .item-wrap {
    padding: 0 32px;
  }

  .footer {
    height: 112px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 111;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;

    & > div {
      font-size: 36px;
      color: #333333;
    }

    & > div:first-child {
      width: 270px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & > div:last-child {
      width: calc(100% - 270px);
      height: 100%;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1365DD;
    }
  }
}
</style>