dvcp_v2_wxcp_app/src/project/huizhili/AppCooperationPropaganda/scopedSelect.vue

<template>
  <div class="scopedSelect">
    <div class="item">
      <div>添加人</div>
      <div v-if="type == 1" style="display: inline-block;">
        <AiPagePicker type="custom" :selected.sync="deptListArr" @select="getDeptList" nodeKey="id" isRequire="0" :ops="{ url: `./selectDeptUser?selectTtype=1`, label: 'id' }">
          <span class="label" v-if="deptListArr.length">已选择{{ deptListArr.length }}个部门</span>
          <span class="color_gray" v-else>请选择</span>
          <u-icon name="arrow-right" color="#CCD0D3" size="28"/>
        </AiPagePicker>
      </div>
      <div @click="selectUser" v-if="type == 2" style="display: inline-block;">
        <span v-if="selectedUser.length">已选择{{ selectedUser.length }}个网格</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 v-if="circleTags.length || ResidentTags.length">已选择{{ circleTags.length || ResidentTags.length }}个标签</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'].includes(sendType)">
      <div>剔除标签</div>
      <div @click="toTagsList(1)">
        <span v-if="circleTagsRemove.length || ResidentTagsRemove.length">已剔除{{ circleTagsRemove.length || ResidentTagsRemove.length }}个标签</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'].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'].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,  // 性别：0-女、1-男、2-全部
      userList: [],
      deptListArr: [],
      selectedUser: [],
      circleTags: [], // 朋友圈包含标签
      circleTagsRemove: [], // 朋友圈剔除标签
      ResidentTags: [],  // 居民包含标签
      ResidentTagsRemove: [],  // 居民剔除标签
    }
  },
  methods: {
    ...mapActions(['selectEnterpriseContact']),
    // 选网格
    selectUser() {
      uni.navigateTo({url: `./selectGridMember`})
    },
    // 选部门
    getDeptList(e) {
      this.deptListArr = e
      uni.setStorageSync('deptList', this.deptListArr)
    },

    //  选择包含、剔除的标签 0包含  1剔除
    toTagsList(e) {
      uni.navigateTo({url: `./tagsList?type=${e}&sendType=${this.sendType}`})
    },

    // 选时间范围
    selectDate(e) {
      this.startTime = e.startDate
      this.endTime = e.endDate
    },
    submit() {
      uni.setStorageSync('gender',this.sex)
      uni.setStorageSync('startTime', this.startTime)
      uni.setStorageSync('endTime', this.endTime)
      uni.setStorageSync('deptList',this.deptListArr)
      uni.navigateBack()
    }
  },
  onLoad(o) {
    this.type = o.type;
    this.sendType = o.sendType;
    document.title = this.type == 1? '按部门选择':'按网格选择'
  },
  onShow() {
    // 网格或者部门
    this.selectedUser = uni.getStorageSync('girdSelect') || []
      this.deptListArr = uni.getStorageSync('deptList') || []

    // 添加时间
    this.startTime = uni.getStorageSync('startTime')
    this.endTime = uni.getStorageSync('endTime')
    // 标签
    if(this.sendType == 'Residents') { 
      this.ResidentTags = uni.getStorageSync('ResidentTags') // 居民包含
      this.ResidentTagsRemove = uni.getStorageSync('ResidentTagsRemove') // 居民剔除
    } else if(this.sendType == 'CircleOfFriends') {
      this.circleTags = uni.getStorageSync('circleTags') // 朋友圈包含
      this.circleTagsRemove = uni.getStorageSync('circleTagsRemove') // 朋友圈剔除
    }
    // 性别
    this.sex = uni.getStorageSync('gender')
  }

}
</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>