<template>
|
<!-- 弹窗 -->
|
<uni-popup ref="popup" type="top">
|
<view class="popup-container" :style="{'height':windowHeight}">
|
<view class="popup-content">
|
<view class="filter-content-time">
|
<text>开始时间</text>
|
<picker mode="date" @change="bindStartTimeChange" :end="endDate">
|
<view class=" flex align-center">
|
<text v-if="startTime">{{startTime}}</text>
|
<text v-else class="gray">请选择</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
</picker>
|
</view>
|
<view class="filter-content-time">
|
<text>结束时间</text>
|
<picker mode="date" @change="bindEndTimeChange" :start="startTime" :end="endDate">
|
<view class="flex align-center">
|
<text v-if="endTime">{{endTime}}</text>
|
<text v-else class="gray">请选择</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
</picker>
|
</view>
|
<view class="filter-content-row">
|
<view>
|
<text>客户</text>
|
</view>
|
<view class="img-box">
|
<view v-for="item in vipList" class="flex align-center flex-v mr-10">
|
<image v-if="item.photo" class="header-img" :src="item.photo"></image>
|
<text v-else class="first-name">{{item.vipName | formatName}}</text>
|
<text class="font-12 gray ellipsis">{{item.vipName || '-'}}</text>
|
</view>
|
<navigator :url="'../../member/selectCustomer?multiSelect=true&selectId='+vipIds" hover-class="none">
|
<text class="iconfont iconjia gray-outline-btn-circle ml-5" :class="vipList.length?'mb-20':''"></text>
|
</navigator>
|
</view>
|
</view>
|
<view class="filter-content-row">
|
<view>
|
<text>员工</text>
|
</view>
|
<view class="img-box">
|
<view v-for="item in staffList" class="flex align-center flex-v mr-10">
|
<image v-if="item.photo" class="header-img" :src="item.photo"></image>
|
<text v-else class="first-name">{{item.name | formatName}}</text>
|
<text class="font-12 gray ellipsis">{{item.name || '-'}}</text>
|
</view>
|
<navigator :url="'../../manager/selectEmployee?multiSelect=true&selectId='+staffIds" hover-class="none">
|
<text class="iconfont iconjia gray-outline-btn-circle ml-5" :class="staffList.length?'mb-20':''"></text>
|
</navigator>
|
</view>
|
</view>
|
</view>
|
<view class="btn-group">
|
<button class="white-btn flex-1" @click="_reset()">重置</button>
|
<button class="blue-btn flex-1 ml-10" @click="_confirm()">确定</button>
|
</view>
|
</view>
|
</uni-popup>
|
</template>
|
|
<script>
|
import uniPopup from '../../../components/uni-popup/uni-popup'
|
import DateTimePicker from '../../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
|
export default {
|
components: {
|
uniPopup,
|
DateTimePicker
|
},
|
props:{
|
isShow: {
|
default: false
|
},
|
staffList: {
|
default: []
|
},
|
vipList: {
|
default:[]
|
}
|
},
|
data() {
|
return{
|
windowHeight: "200px",
|
startTime: '',
|
endTime: ''
|
}
|
},
|
watch:{
|
isShow(newVal){
|
if(newVal){
|
this.$refs.popup.open()
|
}else{
|
this.$refs.popup.close()
|
}
|
}
|
},
|
computed:{
|
vipIds(){
|
let idArr = this.vipList.map((item) => {
|
return item.id;
|
});
|
return idArr.join(',')
|
},
|
staffIds(){
|
let idArr = this.staffList.map((item) => {
|
return item.id;
|
});
|
return idArr.join(',')
|
}
|
},
|
created() {
|
this.endDate = this.$utils.formmatTime('YY-mm-dd')
|
},
|
mounted() {
|
uni.getSystemInfo({
|
success: (res) => {
|
this.windowHeight = res.windowHeight+"px";
|
}})
|
},
|
methods:{
|
bindStartTimeChange(e){
|
this.startTime = e.detail.value;
|
if(this.$utils.compareData(this.startTime, this.endTime)){
|
this.endTime = '';
|
}
|
},
|
bindEndTimeChange(e){
|
this.endTime = e.detail.value;
|
},
|
_reset(){
|
this.startTime = '';
|
this.endTime = '';
|
this.$emit('reset')
|
this.$refs.popup.close()
|
},
|
_confirm(){
|
this.$refs.popup.close();
|
this.$emit('change', {
|
startTime: this.startTime,
|
endTime: this.endTime
|
})
|
}
|
},
|
filters:{
|
formatName(val){
|
if(!val){
|
return '无'
|
}
|
val = val.trim();
|
return val.substr(0, 1)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.popup-container{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
background: #FFFFFF;
|
padding: 0 10px;
|
}
|
.filter-content-time{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px solid #EDEAF4;
|
padding: 10px 0;
|
font-size: 14px;
|
}
|
.filter-content-row{
|
padding: 10px 0;
|
font-size: 14px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.img-box{
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
margin-top: 10px;
|
}
|
.header-img{
|
width: 42px;
|
height: 42px;
|
border-radius: 50%;
|
margin-bottom: 5px;
|
}
|
.first-name{
|
display: inline-block;
|
width: 42px;
|
height: 42px;
|
line-height: 42px;
|
margin-bottom: 5px;
|
border-radius: 50%;
|
text-align: center;
|
background: #518EFF;
|
color: #FFFFFF;
|
font-size: 16px;
|
}
|
.ellipsis{
|
max-width: 40px;
|
overflow: hidden;
|
text-overflow:ellipsis;
|
white-space: nowrap;
|
margin-bottom: 6px;
|
}
|
.btn-group{
|
display: flex;
|
margin: 20px 0;
|
}
|
</style>
|
