219 lines
6.4 KiB
Vue
219 lines
6.4 KiB
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> -->
|
||
<div v-if="type == 1" style="display: inline-block;">
|
||
<span v-if="deptListArr.length">已选择{{ deptListArr.length }}个部门</span>
|
||
<span class="color_gray" v-else>请选择</span>
|
||
</div>
|
||
<div v-if="type == 2" style="display: inline-block;">
|
||
<span v-if="selectedUser.length">已选择{{ selectedUser.length }}个网格</span>
|
||
<span class="color_gray" v-else>请选择</span>
|
||
</div>
|
||
<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', 'CircleOfFriends'].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() {
|
||
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);
|
||
})
|
||
},
|
||
|
||
// 选择包含、剔除的标签 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> |