newEdition/pages/index/customer.vue

<template>
	<view class="cented-box">
		<view v-if="waitCustomList.length==0" class="empty">
			<view style="width: 100%;display: flex;
			flex-direction: column;justify-content: center;align-items: center;">
				<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">顾</view>
					<view class="zuoname">{{item.agentName || '--'}}</view>
				</view>
				<view class="cen" v-if="timestamp(item.assignedTime) < 60*30">
					<view v-if="item.status!=0">
						自动结束 <u-count-down :timestamp="timestamp(item.assignedTime)" color="#E7483C"></u-count-down>
					</view>
				</view>
				<view class="you">
					<view class="" v-if="item.status!=0" style="display: flex;">
						<block v-if="item.imei!=null">
							<!-- 接待中 -->
							<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>=20" 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>
						</block>
					</view>
					<view class="youtext" v-else>
						<!--排队中  -->
						排队中
					</view>
				</view>
			</view>
			<view class="centerbox">
				<view class="content-sec">
					<view class="left">
						<view class="adviser">客</view>
						<view class="cus">{{item.name || '--'}}</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 || "0" }}次到访
					</view>
					<view class="c-items">
						<image src="../../static/images/time.png" class="c-items-img" mode=""></image>
						{{ item.createTime }}
					</view>
				</view>
			</view>
			<view class="footer-button" v-if="item.status!=0">
				<view v-if="CHECKAUTHORITY('jdys')" class="footer1" @click.stop="addTime(item)">接待延时</view>
				<view v-if="CHECKAUTHORITY('jd_zp')" class="footer1" @click.stop="assign(item)">重新指派</view>
				<view v-if="CHECKAUTHORITY('jsjd')" class="footer3" @click.stop="changeEnd(item.id)">结束接待</view>
			</view>
			<view class="footer-button" v-if="item.status==0">
				<view v-if="CHECKAUTHORITY('scjd')" @tap.stop="deleteReception(item)" class="footer3">删除接待</view>
				<view v-if="CHECKAUTHORITY('jd_zp')" class="footer3" @click.stop="assign(item)">指派顾问</view>
			</view>
		</view>
		<image v-if="CHECKAUTHORITY('jd_xz')" @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>
		<image class="add3" v-if="blueDetail.rec == 1 && equipmentType == 3" @click="closeRec()" src="/static/images/ly-ac.png" mode=""></image>
	</view>
</template>

<script>
	import { sendData, setNotification,ab2hex } from "@/utils/blue.js";
	import { mapState, mapMutations } from 'vuex';
	
	var config = require("../../config");
	export default {
		data() {
			return {
				noClick: true,
				// tabbar配置项
				current: 0,
				//--- end --- tabbar配置项
				buildingID: '',
				waitCustomList: [],
				dataCode: '',
				addAccount: '',
				//蓝牙状态
				blueDetail: '',
				equipmentType: uni.getStorageSync('equipmentType')
			};
		},
		computed: {
			...mapState(['connectDev','connectState']),
			timestamp() {
				return (e) => {
					if (!e) return
					let totalTime = new Date(e).getTime() / 1000 + 60 * 60 * 2
					let nowTime = new Date().getTime() / 1000
					return totalTime - nowTime
				}
			}
		},
		onShow() {
			this.buildingID = uni.getStorageSync('buildingID').id;
			this.getTabBarBadge()
			const {
				addAccount,
				dataCode
			} = uni.getStorageSync("weapp_session_userInfo_data");
			this.addAccount = addAccount;
			this.dataCode = dataCode;
			this.init()
			this.updateInit()
			
		},

		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 删除接待
			deleteReception(data) {
				uni.showModal({
					content: `确认删除“${data.name}”接待吗?`,
					cancelColor: "#999999",
					success: res => {
						if (res.confirm) {
							this.$u.get(`/customer/delete?id=${data.id}`).then(res => {
								if (!res) {
									this.init()
								}
								//停止录音
								if (this.connectDev && this.connectState) {
									sendData([0xA0,0x59,0x00]).catch(e => {
										uni.showToast({
											title: '关闭录音失败，请手动点击关闭录音',
											icon: 'none'
										});
									})
								}
								
								this.getTabBarBadge()
							}).catch(e => {
								console.log(e)
								uni.showToast({
									title: '网络异常，请稍后重试~',
									icon: 'none'
								});
								this.getTabBarBadge()
							})
						}
					}
				})
			},
			closeRec() {
				uni.showModal({
					content: "确认关闭录音?",
					cancelColor: "#999999",
					success: res => {
						if (res.confirm) {
							sendData([0xA0,0x59,0x00]).then(() => {
								this.init()
							}).catch(e => {
								uni.showToast({
									title: '关闭录音失败，请前往个人中心蓝牙设置关闭录音',
									icon: 'none'
								});
							})
						}
					}
				})
			},
			
			// 未读消息数量
			updateInit() {
				this.$u.get(config.service.notReadNum, {
					id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
					projectId: uni.getStorageSync('buildingID').id
				}).then(res => {
					if (res > 0) {
						uni.setTabBarBadge({ //显示数字
							index: 4, //tabbar下标
							text: `${res}` //数字
						})
					} else {
						uni.removeTabBarBadge({
							index: 4
						})
					}
				}).catch(e => {
					uni.removeTabBarBadge({
						index: 4
					})
				})
			},

			reshCustom() {
				this.init()
			},
			tapThevisiting(item) {
				if (this.CHECKAUTHORITY('jd_ck') != true) {
					return
				}
				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
						}
					})
				}

			},
			init() {
				this.waitCustomList = []
				let parames = {
					itemId: this.buildingID
				}
				this.$u.post("/customer/reception", parames).then(data => {
					this.waitCustomList = data;
				});
				
				
				//蓝牙获取信息
				this.notiInit();
				setTimeout(() => {
					if (this.connectDev)sendData([0xA0,0x80,0x00]);
				},1000)
			},
			//延时接待
			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) {
				
				if (uni.getStorageSync('equipmentType') == 3 && (!this.connectDev || !this.connectState)) {
					uni.showModal({
						title: "提示",
						content: "请先链接蓝牙，再执行结束接待的操作，是否前往链接?",
						confirmText: "前往",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/bluetooth/connect"
								})
							}
						}
					})
					return;
				}
				uni.showModal({
					content: "确定更改当前客户接待状态为结束?",
					cancelColor: "#999999",
					success: res => {
						if (this.noClick) {
							this.noClick = false;
							if (res.confirm) {
								this.$u.post("/customer/endReception", {
									id: id,
									houseId: this.buildingID
								}).then(res => {
									//停止录音
									if (this.connectDev && this.connectState && uni.getStorageSync('equipmentType') == 3) {
										sendData([...[0xA0,0x59,0x00]])
									} 
									uni.showToast({
										icon: "none",
										title: "操作成功"
									})
									this.init();
									this.getTabBarBadge()
								});
							}
							setTimeout(() => {
								this.noClick = true;
							}, 2000)
						} else {
							//  这里是重复点击的判断
						}
					}
				})
			},
			//新增接待
			addreception() {
				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
				})
			},
			notiInit() {
				var that = this;
				if (this.connectDev) {
					setNotification().then(() => {
						uni.onBLECharacteristicValueChange((res) => {
							let data = ab2hex(res.value);
							if (data.pre[1] == "80") {
								that.blueDetail = JSON.parse(data.value)
							}
						});
					})
				}
			},

		},

	};
</script>

<style lang="scss" scoped>
	.cented-box {
		background: #F8F8F8;
		width: 100%;
		min-height: calc(100vh - var(--window-bottom) - var(--window-top));
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: column;

		.empty {
			flex-grow: 1;
			display: flex;
			align-items: center;
		}
	}

	.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;
			justify-content: space-between;

			.zuo {
				// width: 25%;
				height: 100%;
				display: flex;
				align-items: center;

				.zuoimg {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					// border: 1px solid #C9C9C9;
					border: 1px solid #2671E2;
					font-size: 30rpx;
					color: #2671E2;
					font-weight: 400;
					line-height: 48rpx;
					text-align: center;
					margin-left: 30rpx;
				}

				.zuoname {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					line-height: 30rpx;
					margin-left: 20rpx;
				}
			}

			.cen {
				// width:50%;
				color: #E7483C;
				text-align: center;

			}

			.you {
				// width: 25%;
				height: 100%;
				display: flex;
				align-items: center;
				margin-right: 30rpx;

				.youimg1 {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #2B6EFF;
				}

				.you-img {
					width: 24rpx;
					height: 32rpx;
					margin-left: 24rpx;
				}

				.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 {
			padding: 0 30rpx;
			width: 100%;
			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;
				text-align: center;
				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;
				text-align: center;
				margin-top: 24rpx;
				// line-height: 90rpx;
				width: 156rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 1px solid #999999;
				margin-left: 30rpx;
			}
		}
	}

	.add {
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		bottom: 270rpx;
		right: 44rpx;
	}

	.add2 {
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		bottom: 150rpx;
		right: 44rpx;
	}
	
	.add3 {
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		bottom: 390rpx;
		right: 44rpx;
	}

	.content-sec {
		padding: 28rpx 30rpx 32rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.left {
			flex-shrink: 0;
			width: 100%;
			display: flex;
			align-items: center;

			.adviser {
				flex-shrink: 0;
				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;
				overflow: hidden;
				/*超出部分隐藏*/
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
				white-space: nowrap;
				/*规定段落中的文本不进行换行 */
			}

			.arriveNum {
				flex-shrink: 0;
				font-size: 30rpx;
				font-weight: 400;
				margin-left: 10rpx;
			}
		}

		.right {
			flex-shrink: 0;
			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>