<template> <dm-pop-view ref='popView' title="选择顾问" :isShowConfirm="false" :maskTapHide='maskTapHide' @confirm="confirmAction"> <view class="content"> <view class="counselorList"> <view class="counselorItem" v-for="(item, index) in newAdviserData" :key="index" @click="selectedCounselor(item,index)"> <image v-if="item.isSelected==false" src="../../static/icons/icon_check_nor@2x.png" mode=""></image> <image v-else src="../../static/icons/icon_check_sel@2x.png" mode=""></image> <text class="title" >{{item.adviserName}}({{item.adviserMobile}})</text> <text class="subtitle">已跟进{{item.followCount || 0}}人</text> </view> </view> <view class="bottomTools"> <text @click="resetClick">重置</text><text @click="confirmClick">确定</text> </view> </view> </dm-pop-view> </template> <script> import dmPopView from './dmPopScrollView.vue' import moment from '../../static/moment.min.js' export default { props: { maskTapHide: { type: Boolean, default: true }, isRadio:Boolean, // 是否单选 dataList: Array, adviserSearchData:Array, }, data() { return { nowDate:'', afterDate:'', startDate: '', endDate: '', oldAdviserData: null, newAdviserData:this.adviserSearchData } }, watch:{ adviserSearchData(val){ this.newAdviserData = val; } }, methods: { show() { this.$refs.popView.show() }, confirmAction() { }, selectedCounselor(item){ if(!this.oldAdviserData){ this.oldAdviserData = JSON.stringify(this.newAdviserData) } if(this.isRadio){ for(let i in this.newAdviserData){ const element = this.newAdviserData[i]; element.isSelected = false; } } item.isSelected = !item.isSelected; this.$forceUpdate(); }, resetClick(){ // 重置 if(!this.oldAdviserData){ return } this.newAdviserData = JSON.parse(this.oldAdviserData); this.$forceUpdate(); }, confirmClick(){ let selAdviserList = []; for(let i in this.newAdviserData){ const element = this.newAdviserData[i]; if(element.isSelected){ selAdviserList.push(element) } } this.oldAdviserData = null this.$refs.popView.hide(); this.$emit('confirmSelAdviser',selAdviserList) } }, components: { dmPopView } } </script> <style scoped lang="scss"> .content { width: 100%; height: 776rpx; font-family: Verdana; .list-content { margin-top: 20rpx; border-radius: 20rpx; background-color: #FFFFFF; margin-left: 20rpx; width: 670rpx; display: flex; flex-direction: column; padding: 30rpx 20rpx; .list-title { color: #333333; font-size: 28rpx; font-weight: bold; } .list-content-detail { margin-top: 14rpx; color: #333333; font-size: 24rpx; line-height: 46rpx; } } .counselorList { width: 750rpx; height: 600rpx; margin: 10rpx 0rpx 20rpx 0rpx; background: #ffffff; border-radius: 10px; overflow-y: scroll; .counselorItem { width: calc(100% - 60rpx); height: 82rpx; border-bottom: 2rpx solid rgba(84,96,116,0.05); margin-left: 30rpx; box-sizing: border-box; line-height: 82rpx; display: flex; justify-content: space-between; align-items: center; image { width: 32rpx; height: 32rpx; } .title { margin-left: 16rpx; flex-grow: 2; font-size: 14px; font-family: Verdana, Verdana-Regular; font-weight: 400; text-align: left; color: #333333; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .subtitle { font-size: 14px; font-family: Verdana, Verdana-Regular; font-weight: 400; text-align: right; color: #999999; } } .counselorSelectedItem { background: #CCC; } } .bottomTools { width: 100%; height: 100rpx; display: flex; align-items: center; padding: 0rpx 60rpx; box-sizing: border-box; text:nth-child(1){ font-size: 14px; font-family: Verdana, Verdana-Bold; font-weight: 700; text-align: center; line-height: 40px; color: #666666; width: 78px; height: 40px; background:rgba(60,217,217,0.25); border-radius: 20px; } text:nth-child(2){ flex-grow: 2; text-align: center; font-size: 14px; font-family: Verdana, Verdana-Bold; font-weight: 700; color: #FFF; background: #3cd9d9; border-radius: 20px; height: 40px; line-height: 40px; margin-left: 30rpx; } } } </style>