dvcp_v2_wxcp_app/src/apps/AppCooperationPropaganda/AppCooperationPropaganda.vue

<template>
  <div class="AppCooperationPropaganda">
    <AiTopFixed>
      <div class="search">
        <div class="searchBox">
          <u-search placeholder="请输入任务名称" v-model="taskTitle" clearabled @search="searchBtn" @clear="taskTitle='',getList()" :show-action="false"></u-search>
        </div>
        <div class="filterBtn" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
      </div>
    </AiTopFixed>
    <div class="resident_list" v-if="list.length">
      <div class="card" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
        <div class="card_title">
          <div class="card_left">{{ item.taskTitle }}</div>
          <div class="card_right"><span :class="item.status==0? 'status0': item.status==1? 'status1': item.status==2? 'status2':
           item.status == 3? 'status3':item.status==4? 'status4': 'status5'"></span>{{ $dict.getLabel('mstStatus', item.status) }}</div>
        </div>
        <div>群发时间：<span>{{ item.choiceTime }}</span></div>
        <div>共需<span class="num">{{ item.groupOwnerCount || 0 }}</span>名成员完成群发，目前已完成<span class="num">{{ item.completionRate || 0 }}%</span></div>
        <div>
          创建部门：
          <span v-if="item.createUserDeptName">{{ item.createUserDeptName }}</span>
        </div>
      </div>
    </div>
    <AiEmpty description="暂无数据" v-if="!list.length"/>
    <u-popup v-model="filterShow" mode="bottom" border-radius="14">
      <div class="popup">
        <div class="tips"></div>
        <div class="title">
          <div
            class="cancel"
            @click.stop="(filterShow = false), (timeSelect = 0)"
          >
            取消
          </div>
          <p>筛选条件</p>
          <div class="confirm" @click.stop="selectConfirm">确定</div>
        </div>
        <scroll-view class="select-content" scroll-y="true">
          <div class="type-list">
            <div class="type-title">创建人</div>
            <AiPagePicker type="custom" :selected.sync="userIdList" nodeKey="createUserId" :ops="{url:`./selectUser`,label: 'id'}">
              <div class="page_picker">
                <span class="label" v-if="userIdList.length">已选择</span>
                <span v-else style="color:#999;">请选择</span>
                <u-icon name="arrow-right" color="#303133" size="24" style="margin-left:8px;"/>
              </div>
            </AiPagePicker>
          </div>
          <div class="type-list">
            <div class="type-title">群发时间</div>
            <div class="item">
              <div>开始时间</div>
              <div style="display: flex;">
                <u-input v-model="startTime" disabled placeholder="请选择开始时间" @click="showStart = true" />
                <u-icon name="arrow-right"></u-icon>
              </div>
            </div>
            <div class="item">
              <div>结束时间</div>
              <div style="display: flex;">
                <u-input v-model="endTime" disabled placeholder="请选择结束时间" @click="showEnd = true" />
                <u-icon name="arrow-right"></u-icon>
              </div>
            </div>
          </div>
        </scroll-view>
        <u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker>
        <u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></u-picker>
        <div class="popBtn">
          <div @click="reset">重置</div>
          <div @click="selectConfirm">确认</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: 'AppCooperationPropaganda',
  appName: '协同宣发',
  data() {
    return {
      current: 1,
      name: '',
      list: [],
      filterShow: false,
      startTime: '',
      endTime: '',
      start: "",
      end: "",
      showStart: false,
      showEnd: false,
      taskTitle: '',
      createUserId: '',
      userList: [],
      userIdList: []
    }
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({url: `./cooperationDetail?id=${item.id}&time=${item.createTime}`})
    },
    searchBtn() {
      this.current = 1
      this.list = [],
      this.getList()
    },
    getList() {
      this.$http.post(`/app/appmasssendingtask/list`, null, {
        params: {
          current: this.current,
          taskTitle: this.taskTitle,
          startTime: this.start,
          endTime: this.end,
          createUserId: this.createUserId,
        }
      }).then(res=> {
        if(res?.data) {
          this.list = this.current == 1?  res.data.records : [...this.list,...res.data.records]
        }
      })
    },

    reset() {
      this.start = '',
      this.end = '',
      this.startTime = '',
      this.endTime = ''
      this.userIdList = []
      this.createUserId = ''
      uni.setStorageSync('userSelect', [])
    },

    selectConfirm() {
      if(this.userIdList.length) {
        this.createUserId = this.userIdList?.[0].userId
      }

      this.start = this.startTime,
      this.end = this.endTime
      let startTmp = this.start.split("-");
      let endTmp = this.end.split("-");
      let stT = new Date(startTmp[0], startTmp[1], startTmp[2]);
      let edT = new Date(endTmp[0], endTmp[1], endTmp[2]);
      if (stT.getTime() > edT.getTime()) {
        this.$u.toast("开始日期不能大于结束日期！");
        this.filterShow = true
        return
      }
      this.filterShow = false
      this.current = 1
      this.list = []
      this.getList()
    },
    confirmStart(val) {
      this.startTime = val.year + '-' + val.month + '-' + val.day
    },
    confirmEnd(val) {
      this.endTime = val.year + '-' + val.month + '-' + val.day
    },
  },
  onShow() {
    document.title = '协同宣发'
    this.$dict.load(['mstStatus']).then(() => {
      this.list = []
      this.current = 1
      this.getList()
    })
  },
  onReachBottom() {
    this.current ++
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.AppCooperationPropaganda {
  .search {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-between;

    .searchBox {
      width: 562px;
    }
    .filterBtn {
      img {
        width: 28px;
        height: 28px;
      }
    }
  }
  .resident_list {
    padding: 24px 32px 20px 32px;
    box-sizing: border-box;
    .card {
      background: #FFF;
      border-radius: 16px;
      padding: 30px;
      margin-bottom: 24px;
      & > div {
        padding: 10px 0;
      }
      .num {
        color: #3AA0FF;
      }
      .card_title {
        display: flex;
        justify-content: space-between;
        .card_left {
          font-size: 32px;
          color: #000000;
          font-weight: 600;
        }
        .card_right {
          span {
            display: inline-block;
            width: 16px;
            height: 16px;
            // background: #3399FF;
            border-radius: 50%;
            margin-right: 10px;
          }

          .status0 {
            background: #FFA938;
          }
          .status1 {
            background: #FF6758;
          }
          .status2 {
            background: #3399FF;
          }
          .status3 {
            background: #FF6758;
          }
          .status4 {
            background: #3399FF;
          }
          .status5 {
            background: #1CCEB0;
          }
          .status6 {
            background: #666666;
          }
        }
      }
    }
  }
  .popup {
    box-sizing: border-box;
    // height: 800px;
    .tips {
      width: 80px;
      height: 6px;
      background: #dddddd;
      border-radius: 4px;
      padding: 0 32px;
      box-sizing: border-box;
      margin: 32px auto 8px auto;
    }
    .title {
      height: 48px;
      line-height: 48px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222;
      padding: 0 32px;
      box-sizing: border-box;
      padding-bottom: 32px;
      .cancel {
        display: inline-block;
        width: 200px;
        color: #aaa;
      }
      .confirm {
        display: inline-block;
        width: 200px;
        text-align: right;
        color: #333;
      }
      p {
        display: inline-block;
        width: calc(100% - 400px);
        text-align: center;
        font-size: 28px;
      }
    }
    .select-content {
      height: calc(100% - 100px);
      overflow-y: scroll;
    }
    .type-list {
      padding: 0 32px;
      box-sizing: border-box;
      margin-bottom: 32px;
      .type-title {
        line-height: 108px;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
      }
      .item {
        display: flex;
        justify-content: space-between;
        & > div:last-child {
          ::v-deep .uni-input-input,
          ::v-deep .uni-input-placeholder {
            text-align: right;
          }
        }
      }
      .active {
        background: #1365dd;
        color: #fff;
      }
      .user {
        display: flex;
        justify-content: space-between;
      }
    }
    .popBtn {
      display: flex;
      height: 98px;
      line-height: 98px;
      div {
        width: 50%;
        border: 2px solid #3399ff;
        text-align: center;
      }
      div:first-child {
        color: #3399ff;
      }
      div:last-child {
        color: #fff;
        background: #3399ff;
      }
    }
  }
  .page_picker {
    display: flex;
    justify-content: space-between;
  }
}
</style>