NewZkgj/pages/index/customer.vue

<template>
	<view class="cented-box">
		
		<view class="customer" v-for="(item,index) in waitCustomList" :key='index'>
			<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">{{item.agentName}}</text></view>
				<view class="centerbox-che2" v-if="item.zkEquipmentState.audioStatus!=''">
					<view class="Workcard">工牌电量：<text class="shizai">{{item.zkEquipmentState.electricity}}%</text></view>
					<view class="Workcard">录音状态：
						<text v-if="item.zkEquipmentState.audioStatus=='true'" class="shizai">使用中</text>
						<text v-if="item.zkEquipmentState.audioStatus=='false'" class="shizai">未使用</text>
					</view>
				</view>
			</view>
			<view class="footer-button" v-if="item.status!=0">
				<view class="footer1">接待延时</view>
				<view class="footer1" @click="goConsultant">重新指派</view>
				<view class="footer3">结束接待</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">指派顾问</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buildingID:'',
				waitCustomList:[],
				isAdd:'',
				dataCode:''
			};
		},
		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: {
			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 => {
					console.log(data)
					this.waitCustomList=data;
				});
			},
			//新增接待
			addreception(){
				const {
					dataCode,addAccount
				} = uni.getStorageSync("weapp_session_userInfo_data");
				
				if(dataCode==6){
					if(addAccount!=0){
						uni.showToast({
							title: '不允许自建客户！',
							duration: 2000
						});
						return
					}
					console.log(this.waitCustomList.length)
					if(this.waitCustomList.length==0){
						uni.navigateTo({
							url: "/pages/customer/add/add"
						})
						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/customer/add/add"
								})
								return
							}
						}	
					}	
				}else{
					uni.navigateTo({
						url: "/pages/customer/add/add"
					})
				}
				// uni.navigateTo({
				//     url: '/pages/mine/reception/addreception'
				// });
			},
			goConsultant(){
				uni.navigateTo({
				    url: '/pages/mine/reception/consultant'
				});
			},
		},
	
	};
</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: 90rpx;
	height: 90rpx;
	position: fixed;
	bottom: 70rpx;
	right: 44rpx;
}
</style>