NewZkgj/pages/center/Piabodata/Customerportrait/Receivingrecords.vue

<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.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>