<template> <view class="cenbox"> <view class="screeningtop"> <view class="screeningview" @click="clickscreening(1)"> <view>近一周</view> <view class="viewimg"> <image v-if="screeningshow1==false" src="../../../../static/images/down1.png" mode=""></image> <image v-if="screeningshow1==true" src="../../../../static/images/down2.png" mode=""></image> </view> </view> <view class="screeningview" @click="clickscreening(2)"> <view>客户</view> <view class="viewimg"> <image v-if="screeningshow2==false" src="../../../../static/images/down1.png" mode=""></image> <image v-if="screeningshow2==true" src="../../../../static/images/down2.png" mode=""></image> </view> </view> <view class="screeningview" @click="clickscreening(3)"> <view>置业顾问</view> <view class="viewimg"> <image v-if="screeningshow3==false" src="../../../../static/images/down1.png" mode=""></image> <image v-if="screeningshow3==true" src="../../../../static/images/down2.png" mode=""></image> </view> </view> <view style="border: none;" class="screeningview" @click="clickscreening(4)"> <view>语义词</view> <view class="viewimg"> <image v-if="screeningshow4==false" src="../../../../static/images/down1.png" mode=""></image> <image v-if="screeningshow4==true" src="../../../../static/images/down2.png" mode=""></image> </view> </view> </view> <view class="zhuti"> <view v-if="tadelist.length!=0" class="cenforview" v-for="(item,index) in tadelist" :key='index' @click="toinfo(item)"> <view class="cenfortop"> <view class="fortopzuo"> <view class="topzuoimg"> <image src="../../../../static/images/userorder.png" mode=""></image> </view> </view> <view class="fortopyou"> <view class="topyouview1"> <view class="youview1-1">{{item.agentName}}</view> <view class="youview1-2">接待开始时间:{{item.staTime}}</view> </view> <view class="topyouview2">客户姓名:{{item.name}}</view> </view> </view> <view class="cenforbottom"> <view class="forbottomview"> <view class="bottomview1">录音时长 (分钟)</view> <view class="bottomview2">{{item.mm}}分钟</view> </view> <view class="forbottomview"> <view class="bottomview1">需求触达次数</view> <view class="bottomview2">{{item.total}}次</view> </view> <view class="forbottomview" style="border: none;"> <view class="bottomview1">接访得分</view> <view class="bottomview2" v-if="item.fraction==null">0分</view> <view class="bottomview2" v-else>{{item.fraction}}分</view> </view> </view> </view> <view v-if="tadelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;"> <view style="width: 100%;background: #FFFFFF;padding-top: 200rpx;"> <view style="width: 100%;text-align: center;"> <image style="width: 200rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image> </view> <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view> </view> </view> </view> <!-- 1 --> <view v-if="screeningshow1==true" class="call_zhezhao" @click="allcancel()"></view> <view v-if="screeningshow1==true" class="timepick"> <view class="tiempickbox"> <view :class="{ timeactive: activetime == 0 }" @click="activetimetab(0)">今日</view> <view :class="{ timeactive: activetime == 1 }" @click="activetimetab(1)">昨日</view> <view :class="{ timeactive: activetime == 2 }" @click="activetimetab(2)">近一周</view> <view :class="{ timeactive: activetime == 3 }" @click="activetimetab(3)">本月</view> </view> <view class="tiempickzidingyi" @click="activetimetab(5)"> <text v-if="Datesicing.length==0">自定义时间:请选择</text> <text v-else>{{Datesicing}}</text> </view> </view> <!-- 2 --> <view v-if="screeningshow2==true" class="call_zhezhao" @click="allcancel()"></view> <view v-if="screeningshow2==true" class="userinput"> <view class="inputdlex"> <view class="flexzuo"> <input class="flexinput" @confirm="searchinfo()" v-model="name" type="text" placeholder="请输入客户名" /> </view> <view class="flexyou" @click="searchinfo()">搜索</view> </view> </view> <!-- 3 --> <view v-if="screeningshow3==true" class="call_zhezhao" @click="allcancel()"></view> <view v-if="screeningshow3==true" class="userinput"> <view class="inputdlex"> <view class="flexzuo"> <input class="flexinput" @confirm="searchinfo()" v-model="agentName" type="text" placeholder="请输入顾问名" /> </view> <view class="flexyou" @click="searchinfo()">搜索</view> </view> </view> <!-- 4 --> <view v-if="screeningshow4==true" class="call_zhezhao" @click="allcancel()"></view> <view v-if="screeningshow4==true" class="yuyipick"> <view class="inputdlex"> <!-- <view :class="{ timeactive111: keywordsId == item.keywordsId }" @click="semantictap(index)" v-for="(item,index) in semanticlist" :key="index">{{item.name}}</view> --> <view :class="{ timeactive111: item.checked }" @click="itemChcek(index)" v-for="(item,index) in semanticlist" :key="index">{{item.name}}</view> </view> <view class="screen-foot"> <view class="screen-foot-reset" @click="reset"> 重置 </view> <view class="screen-foot-sure" @click="screensure"> 确定 </view> </view> </view> <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar> </view> </template> <script> var app = getApp(); var util = require("../../../../utils/util.js"); var config = require("../../../../config"); export default { data() { return { screeningshow1:false, screeningshow2:false, screeningshow3:false, screeningshow4:false, activetime:2, totalTimeShow:false, Datesicing:'', Inthemiddletime:'', starttime:'',//开始时间 endoftime:'',//结束时间 keywordsId:'',//选中语义词id houseId:'',//项目id semanticlist:[],//语义词集合 name:'', agentName:'', pageNum:1, pageSize:10, tadelist:[], totalpage:0, keywordIds:'', type:0, }; }, onLoad(options) { console.log(options) if(options.datatype==3){ this.activetime=5; this.starttime=options.starttime; this.endoftime=options.endoftime; this.Datesicing=this.starttime+'至'+this.endoftime; }else{ this.activetime=options.datatype; this.starttime=''; this.endoftime=''; this.Datesicing=''; } // this.keywordsId=options.keywordsId this.keywordIds=options.keywordsId this.houseId=uni.getStorageSync('buildingID').id; this.Accesstolevel() }, onReachBottom() { if (this.totalpage < this.pageNum * this.pageSize) { return uni.showToast({ title: "到底了", }) } this.pageNum++; this.getinit(); }, methods: { toinfo(item){ uni.setStorageSync("entrance", 1); //写入缓存 uni.navigateTo({ url: `/pages/center/Piabodata/Customerportrait/Receivedetailabout?customerId=${item.id}` }) }, //搜索 searchinfo(){ this.totalpage=0; this.tadelist=[]; this.pageNum=1; this.getinit() }, itemChcek(index){ this.semanticlist[index].checked=!this.semanticlist[index].checked this.$forceUpdate() }, reset(){ this.semanticlist.map(item=>{ item.checked=false }) this.keywordIds='' this.$forceUpdate() this.allcancel() this.totalpage=0; this.tadelist=[]; this.pageNum=1; this.getinit() }, screensure(){ let arr=[] this.semanticlist.map(item=>{ if(item.checked){ arr.push(item.keywordsId) } }) this.keywordIds=arr.join(',') // console.log(this.keywordIds) this.allcancel() this.totalpage=0; this.tadelist=[]; this.pageNum=1; this.getinit() }, //点击三级 semantictap(index){ this.keywordsId=this.semanticlist[index].keywordsId; this.allcancel() this.totalpage=0; this.tadelist=[]; this.pageNum=1; this.getinit() }, //获取列表数据 getinit(){ uni.showToast({ title: '加载中', icon:'loading', duration: 1500 }); let datatype=''; if(this.activetime==5){ var parames={ pageNum:this.pageNum, pageSize:this.pageSize, query:{ staTime:this.starttime, endTime:this.endoftime, time:1, name:this.name, agentName:this.agentName, type:this.type, keywordIds:this.keywordIds, // keywordsId:this.keywordsId, projectId:this.houseId, } } }else{ datatype=this.activetime; var parames={ pageNum:this.pageNum, pageSize:this.pageSize, query:{ dateType:Number(datatype), staTime:this.starttime, endTime:this.endoftime, time:1, name:this.name, agentName:this.agentName, type:0, keywordIds:this.keywordIds, // keywordsId:this.keywordsId, projectId:this.houseId, } } } this.$u.post("/matchKeywords/receptionRecord", parames).then(data => { this.type=1; if(data.results==null){ console.log("没有") return }else{ this.tadelist=[...this.tadelist, ...data.results]; this.totalpage=data.totalRecord; } }) }, //获取三级 Accesstolevel(){ let datatype=''; if(this.activetime==5){ var parames={ type:0, statDateStart:this.starttime, statDateEnd:this.endoftime, houseId:this.houseId } }else{ datatype=this.activetime; var parames={ type:0, dateType:Number(datatype), statDateStart:this.starttime, statDateEnd:this.endoftime, houseId:this.houseId } } this.$u.post("/matchKeywords/findKeywords", parames).then(data => { data.forEach(item=>{ if(item.isInterval==0){ item.name=item.name+item.unit+'-'+item.endName+item.unit } if(item.keywordsId==this.keywordIds){ item.checked=true }else{ item.checked=false } }) this.semanticlist=data; this.getinit(); }) }, //遮罩取消 allcancel(){ this.screeningshow1=false; this.screeningshow2=false; this.screeningshow3=false; this.screeningshow4=false; }, //自定义时间确认 totalTimeChange(e){ this.Datesicing=e.startDate+'至'+e.endDate; this.starttime=e.startDate; this.endoftime=e.endDate; this.activetime=this.Inthemiddletime; this.totalTimeShow=false; this.tadelist=[] this.allcancel() this.Accesstolevel() }, //时间选择 activetimetab(index){ if(index==5){ this.Inthemiddletime=index; this.totalTimeShow=!this.totalTimeShow; }else{ this.Datesicing=''; this.activetime=index; this.tadelist=[] this.allcancel() this.Accesstolevel() } }, //筛选弹框 clickscreening(i){ if(i==1){ this.screeningshow1=!this.screeningshow1; this.screeningshow2=false; this.screeningshow3=false; this.screeningshow4=false; }else if(i==2){ this.screeningshow2=!this.screeningshow2; this.screeningshow1=false; this.screeningshow3=false; this.screeningshow4=false; }else if(i==3){ this.screeningshow3=!this.screeningshow3; this.screeningshow2=false; this.screeningshow1=false; this.screeningshow4=false; }else{ this.screeningshow4=!this.screeningshow4; this.screeningshow2=false; this.screeningshow3=false; this.screeningshow1=false; } } } }; </script> <style lang="scss" scoped> .timeactive111{ color: #2671E2; } *{ margin:0; padding:0; box-sizing:border-box; } .cenbox{ width: 100%; height: 100%; background-color: #F8F8F8; display:flex; flex-direction:column; .screeningtop{ width: 100%; height: 75rpx; background-color: #FFFFFF; border-bottom: 1px solid #E0E0E0; align-items: center; display: flex; align-items: center; position: relative; } .screeningview{ flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border-right: 1px solid #E0E0E0; } .zhuti{ flex:1; // soverflow:auto; } } .viewimg{ width: 20rpx; height: 100%; line-height: 72rpx; margin-left: 10rpx; image{ width: 20rpx; height: 12rpx; } } .cenforview{ width: 100%; height: 275rpx; background: #FFFFFF; margin-top: 20rpx; .cenfortop{ width: 100%; height: 146rpx; display: flex; // border-bottom: 1px solid #E0E0E0; .fortopzuo{ width: 16%; padding-top: 30rpx; .topzuoimg{ width: 60rpx; height: 60rpx; margin-left: 30rpx; border-radius: 50%; image{ width: 100%; height: 100%; } } } .fortopyou{ width: 84%; height: 146rpx; .topyouview1{ width: 100%; margin-top: 28rpx; display: flex; .youview1-1{ width: 25%; font-size: 28rpx; font-weight: 400; color: #333333; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } .youview1-2{ width: 75%; font-size: 26rpx; font-weight: 400; color: #666666; } } .topyouview2{ width: 100%; font-size: 28rpx; font-weight: 400; color: #333333; margin-top: 20rpx; } } } .cenforbottom{ width: 100%; height: 128rpx; display: flex; align-items: center; .forbottomview{ flex: 1; height: 128rpx; // border-right: 1px solid #E0E0E0; .bottomview1{ width: 100%; height: 26rpx; font-size: 26rpx; font-weight: 400; color: #666666; line-height: 26rpx; text-align: center; margin-top: 24rpx; } .bottomview2{ width: 100%; height: 30rpx; font-size: 30rpx; font-weight: 600; color: #333333; line-height: 30rpx; text-align: center; margin-top: 24rpx; } } } } .timepick{ width: 100%; height: 210rpx; background: #FFFFFF; position: absolute; top: 74rpx; left: 0; z-index: 20; .tiempickbox{ width: 94%; margin: 0 auto; height: 56rpx; display: flex; align-items: center; margin-top: 25rpx; } .tiempickbox>view:nth-of-type(1){ width: 156rpx; height: 56rpx; border-radius: 4rpx; text-align: center; line-height: 56rpx; font-size: 28rpx; border: 1px solid #C9C9C9; } .tiempickbox>view:nth-of-type(2){ width: 156rpx; height: 56rpx; border-radius: 4rpx; text-align: center; line-height: 56rpx; font-size: 28rpx; border: 1px solid #C9C9C9; margin-left: 28rpx; } .tiempickbox>view:nth-of-type(3){ width: 156rpx; height: 56rpx; border-radius: 4rpx; text-align: center; line-height: 56rpx; font-size: 28rpx; border: 1px solid #C9C9C9; margin-left: 28rpx; } .tiempickbox>view:nth-of-type(4){ width: 156rpx; height: 56rpx; border-radius: 4rpx; text-align: center; line-height: 56rpx; font-size: 28rpx; border: 1px solid #C9C9C9; margin-left: 28rpx; } .tiempickzidingyi{ width: 94%; margin: 0 auto; margin-top: 28rpx; height: 60rpx; background: #FFFFFF; border-radius: 4rpx; border: 1px solid #C9C9C9; text-align: center; line-height: 60rpx; color: #666666; } } .call_zhezhao { position: fixed; width: 100%; height: 100%; top: 75rpx; left: 0rpx; opacity: 0.5; background-color: #666666; z-index: 10; } .timeactive{ color: #FFFFFF; background-color: #2671E2; } .userinput{ width: 100%; height: 126rpx; background: #FFFFFF; position: absolute; top: 74rpx; left: 0; z-index: 20; .inputdlex{ width: 90%; margin: 0 auto; height: 56rpx; display: flex; align-items: center; margin-top: 30rpx; .flexzuo{ width: 80%; .flexinput{ width: 96%; height: 100%; border-radius: 20rpx; border: 1px solid #C9C9C9; padding-left: 20rpx; font-size: 24rpx; } } .flexyou{ width: 20%; font-size: 28rpx; color: #2671E2; text-indent: 28rpx; } } } .yuyipick{ width: 100%; min-height: 300rpx; max-height: 500rpx; background: #FFFFFF; overflow-y: auto; // padding-bottom: 20rpx; position: absolute; top: 74rpx; left: 0; z-index: 20; .inputdlex{ width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; margin-top: 30rpx; } .inputdlex view{ width: 50%; font-size: 26rpx; font-weight: 400; text-align: center; margin-top: 26rpx; } } .screen-foot{ width: 100%; height: 88rpx; display: flex; margin-top: 20rpx; border-top: 1px solid #E0E0E0; .screen-foot-reset{ width: 50%; text-align: center; height: 88rpx; line-height: 88rpx; font-size: 30rpx; font-weight: 400; color: #666666; } .screen-foot-sure{ width: 50%; text-align: center; line-height: 88rpx; height: 88rpx; font-size: 30rpx; font-weight: 400; color: #FFFFFF; background: #2671E2; } } </style>