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>
			<!-- checkAuthority('顾问指派顾问') -->
			<view class="footer-button" v-if="item.status!=0">
				<view class="footer1" @click.stop="addTime(item)">接待延时</view>
				<template v-if="zhipai">
					<view class="footer1" @click.stop="assign(item)">重新指派</view>
				</template>
				<template v-if="endReception">
					<view class="footer3" @click.stop="changeEnd(item.id)">结束接待</view>
				</template>
			</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">
				<template v-if="zhipai">
					<view class="footer3" @click.stop="assign(item)">指派顾问</view>
				</template>
				<template v-if="checkAuthority('删除接待记录')">
					<view @tap.stop="deleteReception(item)" class="footer3">删除接待</view>
				</template>
			</view>

		</view>
		<image v-if="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>
		<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar>


		<!-- 加载组件  -->
		<loading v-model="LOADING"></loading>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var config = require("../../config");
	import tabbarList from '@/utils/tabbar.js'
	import loading from "@/components/loading/index.vue"
	export default {
		components: {
			loading
		},
		data() {
			return {
				noClick: true,
				tabbarList: tabbarList,
				current: 0,
				buildingID: '',
				waitCustomList: [],
				dataCode: '',
				addAccount: '',
				endReception: true,
				fdFlag: null,
				isAdd: 0, // 默认能指派
			};
		},
		computed: {
			zhipai() {
				if (this.isAdd == 0) {
					// 如果改角色是顾问
					if (this.dataCode == 6) {
						return this.checkAuthority('顾问指派顾问')
					} else return true
				} else {
					return false
				}
			}
		},
		components: {},
		onShow() {
			this.LOADING = true
			this.buildingID = uni.getStorageSync('buildingID').id;
			const {
				addAccount,
				dataCode
			} = uni.getStorageSync("weapp_session_userInfo_data");
			let menulist = uni.getStorageSync('weapp_session_Menu_data')
			this.endReception = menulist.findIndex(item => {
				return item.name == '结束接待'
			}) != -1
			this.addAccount = addAccount;
			this.dataCode = dataCode;
			this.init()
			this.updateInit()
			this.queryHaveDept()
			this.initrealTimeStatistics()
		},
		methods: {
			
			//实时统计
			initrealTimeStatistics() {
				uni.request({
					url: config.service.realTimeStatistics,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					data: {
						houseId: this.buildingID
					},
					success: (data) => {
						if (data.data.data == null) {
							return
						} else {
							this.tabbarList[1].count = data.data.data.receivingCustomer || 0
							this.$forceUpdate()
						}
					},
					fail: () => {
					}
				})
			},
			
			// 删除接待
			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()
								}
							}).catch(e => {
								console.log(e)
								uni.showToast({
									title: '网络异常，请稍后重试~',
									icon: 'none'
								});
							})
						}
					}
				})
			},
			// 获取未读消息数量
			updateInit() {
				uni.request({
					url: config.service.notReadNum,
					method: "GET",
					data: {
						id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
						projectId: uni.getStorageSync('buildingID').id,
					},
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (res) => {
						this.count = res.data.data
						this.tabbarList[3].count = res.data.data || 0
					}
				})
			},
			reshCustom() {
				this.init()
				this.initrealTimeStatistics()
			},
			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
						}
					})
				}

			},
			init() {
				this.waitCustomList = []
				let parames = {
					itemId: this.buildingID
				}
				this.$u.post("/customer/reception", parames).then(data => {
					this.LOADING = false
					this.waitCustomList = data;
				}).catch(e => {
					this.LOADING = false
				});
			},
			//延时接待
			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) {
							uni.showLoading({
								mask: true,
								title: '结束中...'
							})
							this.$u.post("/customer/endReception", {
								id: id,
								houseId: this.buildingID
							}).then(res => {
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: "操作成功"
								})
								this.init();
								this.initrealTimeStatistics()
							}).catch(() => {
								uni.hideLoading()
							});
						}
					}
				})
			},

			// 检测是否有添加顾问的权限
			queryHaveDept() {
				uni.request({
					url: config.service.getSelfAssignedByHouseId + "?houseId=" + uni.getStorageSync('buildingID')
						.id,
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						if (data.data.code == 10000) {
							this.isAdd = data.data.data.selfAssigned
						}
					}
				})
			},

			//新增接待
			addreception() {
				const {
					dataCode,
					addAccount
				} = uni.getStorageSync("weapp_session_userInfo_data");

				if (dataCode == 6) {
					if (addAccount != 0) {
						uni.showToast({
							title: '不允许自建客户！',
							duration: 2000
						});
						return
					}
					uni.navigateTo({
						url: '/pages/mine/reception/addreception'
					});

				} 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-grow: 1;
				text-align: center;
				line-height: 90rpx;
				border-right: 1rpx solid #E0E0E0;
			}

			.footer3 {
				flex-grow: 1;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}

	.add {
		width: 90upx;
		height: 90upx;
		position: fixed;
		bottom: 275upx;
		right: 44upx;
	}

	.add2 {
		width: 90upx;
		height: 90upx;
		position: fixed;
		bottom: 160upx;
		right: 44upx;
	}
</style>