dvcp_v2_wxcp_app/src/apps/AppCooperationPropaganda/scopedSelect.vue

<template>
  <div class="scopedSelect">
    <div class="item">
      <div>添加人</div>
      <div @click="selectUser">
        <span v-if="selectedUser.length || deptListArr.length">已选择{{ selectedUser.length || deptListArr.length }}
          <span v-if="selectedUser.length">个网格</span><span v-if="deptListArr.length">个部门</span></span>
        <span class="color_gray" v-else>请选择</span>
        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
      </div>
    </div>
    <div class="item" v-if="['Residents', 'CircleOfFriends'].includes(sendType)">
      <div>包含标签</div>
      <div @click="toTagsList(0)">
        <span class="color_gray">请选择</span>
        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
      </div>
    </div>
    <div class="item" v-if="['Residents', 'CircleOfFriends'].includes(sendType)">
      <div>剔除标签</div>
      <div @click="toTagsList(1)">
        <span class="color_gray">请选择</span>
        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
      </div>
    </div>
    <div class="item" v-if="['Residents', 'CircleOfFriends'].includes(sendType)">
      <div>添加时间</div>
      <div @click="showCalendar = true">
        <span v-if="!startTime.length && !endTime.length" class="color_gray">请选择</span>
        <span v-if="startTime.length && endTime.length">{{ startTime }} - {{ endTime }}</span>
        <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
      </div>
    </div>
    <div class="items" v-if="['Residents', 'CircleOfFriends'].includes(sendType)">
      <div>性别</div>
      <div class="sex">
        <span :class="sex == 0? 'active':''" @click="sex = 0">全部</span>
        <span :class="sex == 1? 'active':''" @click="sex = 1">男</span>
        <span :class="sex == 2? 'active':''" @click="sex = 2">女</span>
      </div>
    </div>

    <u-calendar v-model="showCalendar" mode="range" @change="selectDate"></u-calendar>

    <div class="btn">
      <div class="submitBtn" @click="submit">确定</div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "scopedSelect",
  data() {
    return {
      type: "",
      sendType: '',
      showCalendar: false,
      startTime: '',
      endTime: '',
      sex: "0",
      userList: [],
      deptListArr: [],
      selectedUser: []
    }
  },
  methods: {
    ...mapActions(['selectEnterpriseContact']),
    // 选人
    selectUser() {
      if(this.type == "1") {  // 部门
        this.getDeptUser()
      } else if(this.type == "2") {  // 网格
        uni.navigateTo({url: `./selectGridMember`})
      }
    },

    getDeptUser() {
      this.selectEnterpriseContact({
        fromDepartmentId: 0,
        mode: "multi",
        type: ["department"],
        selectedUserIds: this.deptListArr?.map(e => e.id)
      }).then((res)=>{
          if(res?.userList) {
            this.deptListArr = res.userList
          }
        }
      ).catch((err) => {
        console.log(err);
      })
    },

    toTagsList(e) {
      uni.navigateTo({url: `./tagsList?type=${e}`})
    },

    // 选包含标签
    // selectTags() {},

    // 选剔除标签
    // deleteTags() {},

    // 选时间范围
    selectDate(e) {
      this.startTime = e.startDate
      this.endTime = e.endDate
    },
    submit() {
      uni.setStorageSync('girdList',this.selectedUser)
      uni.setStorageSync('deptList',this.deptListArr)
      uni.navigateBack({
        success: () => {
          uni.$emit("girdList", this.selectedUser)
          uni.$emit("deptList", this.deptListArr)
        }
      })
    }
  },
  onLoad(o) {
    this.type = o.type;
    this.sendType = o.sendType;
    document.title = this.type == 1? '按部门选择':'按网格选择'
    uni.$on("pagePicker:custom", res => {
      this.selectedUser = res
    })
    this.selectedUser = uni.getStorageSync('girdList')
    this.deptListArr = uni.getStorageSync('deptList')
  },

}
</script>

<style lang="scss" scoped>
.scopedSelect {
  .item {
    padding: 32px;
    box-sizing: border-box;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    box-shadow: inset 0px -1px 0px 0px #DDDDDD;
    margin-bottom: 8px;
  }

  .items {
    padding: 32px;
    box-sizing: border-box;
    background: #FFF;
    .sex {
      margin-top: 32px;
      span {
        display: inline-block;
        width: 30%;
        border: 2px solid #CCCCCC;
        text-align: center;
        padding: 20px 0;
        box-sizing: border-box;
        margin-right: 16px;
        border-radius: 8px;
      }
      .active {
        background: #1365DD;
        color: #FFF;
      }
    }
  }

  .color_gray {
    color: #CCD0D3;
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #FFF;
    display: flex;
    width: 100%;
    height: 128px;
    padding: 24px 32px;
    box-sizing: border-box;

    .submitBtn {
      flex: 1;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-radius: 8px;
      border: 2px solid #CCCCCC;
      background: #1365DD;
      color: #FFF;
    }
  }
}
</style>