init

pages/index/customer.vue

@@ -9,11 +9,11 @@
 				<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'
+<!-- 		<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="zuoimg">A</view>
 					<view class="zuoname">{{item.name}}</view>
 				</view>
 				<view class="you">
@@ -56,7 +56,96 @@
 				<view class="footer3" @click.stop="assign(item)">指派顾问</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">顾</view>
+					<view class="zuoname">{{item.agentName}}</view>
+				</view>
+				<view class="cen">
+					自动结束 18:12
+				</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 class="" v-if="item.status!=0" style="display: flex;">
+						<!-- 接待中 -->
+						<view class="">
+							<!-- 工牌标示 -->
+							<image  class="you-img"
+								src="../../static/images/cus1.png" mode=""></image>
+						</view>
+						<!-- 未离线 -->
+						<view class="" v-if="item.zkEquipmentState.onLine!=0" style="display: flex;">
+							<view class="">
+								<!-- 电量 -->
+								<image v-if="item.zkEquipmentState.electricity>=80" class="you-img"
+									src="../../static/images/cus2.png" mode=""></image>
+								<image v-else class="you-img"
+									src="../../static/images/cus5.png" mode=""></image>	
+							</view>
+							<view class="">
+								<!-- 录音 -->
+								<image  v-if="item.zkEquipmentState.simAudioStatus=='true'" class="you-img"
+									src="../../static/images/cus3.png" mode=""></image>
+								<image  v-else class="you-img"
+									src="../../static/images/cus6.png" mode=""></image>
+							</view>
+						</view>
+						<!-- 离线 -->
+						<view class="" v-else>
+							<view class="">
+								<!-- 录音 -->
+								<image  class="you-img"
+									src="../../static/images/cus4.png" mode=""></image>
+							</view>
+						</view>
+					</view>
+					<view class="youtext" v-else>
+						<!--排队中  -->
+						排队中
+					</view>
+				</view>
+			</view>
+			<view class="centerbox" v-if="item.status!=0">
+			<view class="content-sec">
+				<view class="left">
+					<view class="adviser">客</view>
+					<view class="cus">{{item.name || '--'}}</view>
+					<!-- <view class="arriveNum">第{{item.visitRecord || "--"}}次接待</view> -->
+					<view class="arriveNum">{{ item.phone ||'--' }}</view>
+				</view>
+			</view>
+			<view class="content-last">
+				<view class="c-items">
+					<image src="../../static/images/people.png" class="c-items-img" mode=""></image>
+					{{ item.visitRecord || "--" }}次到访
+				</view>
+				<view class="c-items">
+					<image src="../../static/images/time.png" class="c-items-img" mode=""></image>
+					{{ item.createTime }}
+				</view>
+				<view class="c-items">
+					<image src="../../static/images/voice.png" class="c-items-img" mode=""></image>
+					{{ item.mm || '0' }}min
+				</view>
+			</view>
+			</view>
+			<view class="footer-button" v-if="item.status!=0">
+				<view v-if="permissions.commonly3" class="footer1" @click.stop="addTime(item)">接待延时</view>
+				<view v-if="permissions.commonly4" class="footer1" @click.stop="assign(item)">重新指派</view>
+				<view v-if="permissions.commonly5" class="footer3" @click.stop="changeEnd(item.id)">结束接待</view>
+			</view>
+			<view class="footer-button" v-if="item.status==0">
+				<view class="footer3" @click.stop="assign(item)">指派顾问</view>
+			</view>
+		
 		</view>
+		
 		<image v-if="permissions.commonly2" @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="">
@@ -301,9 +390,10 @@
 			border-bottom: 1px solid #E0E0E0;
 			display: flex;
 			align-items: center;
+			justify-content: space-between;
 
 			.zuo {
-				width: 80%;
+				// width: 25%;
 				height: 100%;
 				display: flex;
 				align-items: center;
@@ -312,29 +402,36 @@
 					width: 52rpx;
 					height: 52rpx;
 					border-radius: 50%;
-					border: 1px solid #C9C9C9;
+					// border: 1px solid #C9C9C9;
+					border: 1px solid #2671E2;
 					font-size: 30rpx;
-					color: #292929;
+					color: #2671E2;
 					font-weight: 400;
-					line-height: 52rpx;
+					line-height: 48rpx;
 					text-align: center;
 					margin-left: 30rpx;
 				}
 
 				.zuoname {
 					font-size: 30rpx;
-					font-weight: 500;
+					font-weight: bold;
 					color: #333333;
 					line-height: 30rpx;
 					margin-left: 20rpx;
 				}
 			}
-
+			.cen{
+				// width:50%;
+				color: #E7483C;
+				text-align: center;
+				
+			}
 			.you {
-				width: 20%;
+				// width: 25%;
 				height: 100%;
 				display: flex;
 				align-items: center;
+				margin-right: 30rpx;
 
 				.youimg1 {
 					width: 12rpx;
@@ -342,7 +439,11 @@
 					border-radius: 50%;
 					background: #2B6EFF;
 				}
-
+				.you-img{
+					width: 24rpx;
+					height: 32rpx;
+					margin-left: 24rpx;
+				}
 				.youimg1-1 {
 					width: 12rpx;
 					height: 12rpx;
@@ -394,26 +495,43 @@
 		}
 
 		.footer-button {
-			margin-top: 30rpx;
+			// margin-top: 30rpx;
 			width: 100%;
-			height: 90rpx;
+			height: 108rpx;
 			display: flex;
 			font-size: 30rpx;
 			font-weight: 400;
 			color: #333333;
 			border-top: 1rpx solid #E0E0E0;
-
+			justify-content:flex-end;
+			line-height: 58rpx;
 			.footer1 {
-				flex: 1;
+				// flex: 1;
 				text-align: center;
-				line-height: 90rpx;
-				border-right: 1rpx solid #E0E0E0;
+				margin-top: 24rpx;
+				// line-height: 90rpx;
+				// border-right: 1rpx solid #E0E0E0;
+				width: 156rpx;
+				height: 60rpx;
+				background: #FFFFFF;
+				border-radius: 30rpx;
+				border: 1px solid #999999;
+				margin-left: 30rpx;
+				
 			}
 
 			.footer3 {
-				flex: 1;
+				// flex: 1;
 				text-align: center;
-				line-height: 90rpx;
+				margin-top: 24rpx;
+				// line-height: 90rpx;
+				width: 156rpx;
+				height: 60rpx;
+				background: #FFFFFF;
+				border-radius: 30rpx;
+				border: 1px solid #999999;
+				margin-left: 30rpx;
+				margin-right: 30rpx;
 			}
 		}
 	}
@@ -433,4 +551,75 @@
 		bottom: 100upx;
 		right: 44upx;
 	}
+	
+	.content-sec {
+		padding: 28rpx 30rpx 32rpx;
+		display: flex;
+		justify-content: space-between;
+	
+		.left {
+			display: flex;
+			align-items: center;
+	
+			.adviser {
+				margin-right: 10rpx;
+				padding: 5rpx 11rpx;
+				border-radius: 50%;
+				border: 1rpx solid #2671E2;
+				background: #2671E2;
+				font-size: 30rpx;
+				color: #fff;
+			}
+	
+			.cus {
+				font-size: 30rpx;
+				font-weight: 400;
+				color: #666666;
+				// line-height: 30rpx;
+			}
+	
+			.arriveNum {
+				font-size: 30rpx;
+				font-weight: 400;
+				margin-left: 10rpx;
+			}
+		}
+	
+		.right {
+			font-size: 28rpx;
+			font-weight: 400;
+			color: #2671E2;
+			display: flex;
+			align-items: center;
+	
+			.img {
+				margin-right: 10rpx;
+				width: 32rpx;
+				height: 32rpx;
+			}
+		}
+	}
+	
+	.content-last {
+		padding: 0 30rpx 34rpx;
+		font-size: 30rpx;
+		font-weight: 400;
+		color: #666666;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	
+		.c-items {
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			font-size: 28rpx;
+	
+			.c-items-img {
+				margin-right: 10rpx;
+				width: 32rpx;
+				height: 32rpx;
+			}
+		}
+	}
 </style>