NewZkgj/pages/index/customer.vue

<template>
	<view class="cented-box">
		<view v-if="waitCustomList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
			<view style="width: 100%;padding-top: 200rpx;">
				<view style="width: 100%;text-align: center;">
					<image style="width: 220rpx;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 class="customer"  v-if="waitCustomList.length!=0" v-for="(item,index) in waitCustomList" :key='index' @click="tapThevisiting(item)">
			<view class="title">
				<view class="zuo">
					<!-- <view class="zuoimg">A</view> -->
					<view class="zuoname">{{item.name}}</view>
				</view>
				<view class="you">
					<view class="youimg1" v-if="item.status!=0"></view>
					<view class="youimg1-1" v-if="item.status==0"></view>
					<view class="youtext">{{item.status==0?"排队中":item.status==1?"接待中":"已完成"}}</view>
				</view>
			</view>
			<view class="centerbox" v-if="item.status!=0">
				<view class="centerbox-che">手机号码：<text class="shizai">{{item.phone || "--"}}</text></view>
				<view class="centerbox-che">开始时间：<text class="shizai">{{item.createTime}}</text></view>
				<view class="centerbox-che">顾问姓名：<text class="shizai" style="color: #333333;">{{item.agentName}}</text></view>
				
				<view class="centerbox-che2" v-if="item.status==1">
				<view class="Workcard" v-if="item.status==1&&item.zkEquipmentState.onLine==0">设备状态：<text class="shizai" style="color: red;">离线</text></view>
				<view class="Workcard" v-if="item.status==1&&item.zkEquipmentState.onLine!=0">工牌电量：<text class="shizai" style="color: #333333;">{{item.zkEquipmentState.electricity}}%</text></view>
					<view class="Workcard" v-if="item.status==1&&item.zkEquipmentState.onLine==1">录音状态：
						<text v-if="item.zkEquipmentState.audioStatus=='true'" class="shizai" style="color: #333333;">使用中</text>
						<text v-if="item.zkEquipmentState.audioStatus=='false'" class="shizai" style="color: #333333;">未使用</text>
					</view>
				</view>
				
				
			</view>
			<view class="footer-button" v-if="item.status!=0">
				<view class="footer1" @click.stop="addTime(item)">接待延时</view>
				<view class="footer1" @click.stop="assign(item)">重新指派</view>
				<view class="footer3" @click.stop="changeEnd(item.id)">结束接待</view>
			</view>
			
			<view class="centerbox" v-if="item.status==0">
				<view class="centerbox-che">手机号码：<text class="shizai">{{item.phone || "--"}}</text></view>
			</view>
			<view class="footer-button" v-if="item.status==0">
				<view class="footer3" @click.stop="assign(item)">指派顾问</view>
			</view>
			
		</view>
		<image v-if="isAdd == 0 && (dataCode!=6||(dataCode==6&&addAccount==0))" @click="addreception()" class="add" src="/static/images/add.png" mode=""></image>
		<image class="add2" @click="reshCustom()" src="https://static.quhouse.com/zhikong_xcx_img/refresh.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buildingID:'',
				waitCustomList:[],
				isAdd:'',
				dataCode:'',
				addAccount:'',
			};
		},
		components: {},
		onLoad() {},
		onShow() {
			this.buildingID = uni.getStorageSync('buildingID').id;
			const {
				addAccount,
				dataCode
			} = uni.getStorageSync("weapp_session_userInfo_data");
			this.addAccount=addAccount;
			this.dataCode=dataCode;
			this.init()
			this.queryHaveDept()
		},
		methods: {
			reshCustom(){
				this.init()
			},
			tapThevisiting(item) {
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				if(item.status==0){
					setTimeout(function () {
					    uni.hideLoading();
					}, 2000);
					uni.showToast({
						icon: "none",
						title: "排队中"
					})
					return
				}else{
					const parames = {
						pageNum: 1,
						pageSize: 100,
						query: {
							customerId: item.id,
						}
					}		
					var itemsd={
						bg:0,
						customerId:item.id,
						id:'',
						onebest:''
					}
					this.$u.post("/corpus/findByPage", parames).then(res => {
						setTimeout(function () {
						    uni.hideLoading();
						}, 2000);
						if(res){
							let newobj = res[0];
							uni.navigateTo({
								url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(itemsd)}&stateisshow=${"1"}`
							})
						}else{
							uni.showToast({
								icon: "none",
								title: "暂无音频"
							})
							return
						}
					})
				}
	
			},
			queryHaveDept() {
				return new Promise((resolve, reject) => {
					this.$u.get("/user/queryHaveDept?houseId="+this.buildingID).then(res => {
						this.isAdd=res;		
						resolve();
					})
				})
			},
			init(){
				this.waitCustomList=[]
				let parames={
					itemId:this.buildingID
				}
				this.$u.post("/customer/reception", parames).then(data => {
					this.waitCustomList=data;
				});
			},
			//延时接待
			addTime(item) {
				uni.showModal({
					content: "确定延长半小时接待时间?",
					cancelColor: "#999999",
					success: res => {
						if (res.confirm) {
							this.$u.post("/customer/delayed", {
								cusId: item.id
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "操作成功"
								})
							});
						}
					}
				})
			},
			//结束接待
			changeEnd(id) {
				uni.showModal({
					content: "确定更改当前客户接待状态为结束?",
					cancelColor: "#999999",
					success: res => {
						if (res.confirm) {
							this.$u.post("/customer/endReception", {
								id:id,
								houseId:this.buildingID
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "操作成功"
								})
								this.init();
							});
						}
					}
				})
			},
			//新增接待
			addreception(){
				const {
					dataCode,addAccount
				} = uni.getStorageSync("weapp_session_userInfo_data");
				
				if(dataCode==6){
					if(addAccount!=0){
						uni.showToast({
							title: '不允许自建客户！',
							duration: 2000
						});
						return
					}
					if(this.waitCustomList.length==0){
						uni.navigateTo({
							url: '/pages/mine/reception/addreception'
						})
						return
					}else{
						for(var i=0; i<this.waitCustomList.length; i++){
							if(this.waitCustomList[i].status==1){
								uni.showLoading({
								    title: '当前还有未完成的客户项'
								});
								setTimeout(function () {
								    uni.hideLoading();
								}, 1000);
								return
							}else{
								uni.navigateTo({
									url: '/pages/mine/reception/addreception'
								})
								return
							}
						}	
					}	
				}else{
					uni.navigateTo({
					    url: '/pages/mine/reception/addreception'
					});
				}
			},
			assign(item) {
				let url = `/pages/mine/reception/consultant?id=${item.id}`
				if (item.beforeAgentId) {
					url += `&beforeAgentId=${item.beforeAgentId}`;
				}
				uni.navigateTo({
					url: url
				})
			},
			
		},
	
	};
</script>

<style lang="scss" scoped>
.cented-box{
	background: #F8F8F8;
	width: 100%;
	height: 100vh;
	padding-bottom: 30rpx;
}
.customer{
	margin-top: 30rpx;
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
	.title{
		height: 90rpx;
		border-bottom: 1px solid #E0E0E0;
		display: flex;
		align-items: center;
		.zuo{
			width: 80%;
			height: 100%;
			display: flex;
			align-items: center;
			.zuoimg{
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
				border: 1px solid #C9C9C9;
				font-size: 30rpx;
				color: #292929;
				font-weight: 400;
				line-height: 52rpx;
				text-align: center;
				margin-left: 30rpx;
			}
			.zuoname{
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
				margin-left: 20rpx;
			}
		}
		.you{
			width: 20%;
			height: 100%;
			display: flex;
			align-items: center;
			.youimg1{
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #2B6EFF;
			}
			.youimg1-1{
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #F2A269;
			}
			.youtext{
				font-size: 30rpx;
				font-weight: 400;
				color: #292929;
				line-height: 30rpx;
				margin-left: 10rpx;
			}
		}
	}
	.centerbox{
		.centerbox-che{
			width: 100%;
			margin-top: 30rpx;
			height: 30rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #666666;
			line-height: 30rpx;
			text-indent: 30rpx;
			.shizai{
				color: #333333;
			}
		}
		.centerbox-che2{
			width: 100%;
			margin-top: 30rpx;
			height: 30rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #666666;
			line-height: 30rpx;
			text-indent: 30rpx;
			display: flex;
			.Workcard{
				width: 50%;
			}
		}
	}
	.footer-button{
		margin-top: 30rpx;
		width: 100%;
		height: 90rpx;
		display: flex;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		border-top: 1rpx solid #E0E0E0;
		.footer1{
			flex: 1;
			text-align: center;
			line-height: 90rpx;
			border-right: 1rpx solid #E0E0E0;
		}
		.footer3{
			flex: 1;
			text-align: center;
			line-height: 90rpx;
		}
	}
}
.add {
	width: 90upx;
	height: 90upx;
	position: fixed;
	bottom: 180upx;
	right: 44upx;
}
.add2{
	width: 90upx;
	height: 90upx;
	position: fixed;
	bottom: 60upx;
	right: 44upx;
}
</style>