newEdition/pages/mine/consultanonduty/index.vue

<template>
	<view class="box">
		<!-- 顾问选择 -->
		<view class="header">
			<view class="nextcon">
				下一位接待顾问：{{agentList[0].name||'没有下一位了'}}
			</view>
			<view class="tab">
				<view class="tabbox">
					<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">排队顾问</view>
				</view>
				<view class="tabbox">
					<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">暂停顾问</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view v-if="activeAgentList.length>0">
				<view v-for="(item,index) in activeAgentList" :key="index">
					<view class="content-tips">
						<view class="top">
							<view class="tit">
								<view class="img">
									{{item.name.slice(0,1)}}
								</view>
								<view class="test">
									{{item.name}}
								</view>
							</view>
							<!-- <view class="state">
									<view class="point" v-if="activeTotal==1"></view>
									{{activeTotal==1?'接待中':'空闲'}}
								</view> -->
						</view>
						<view class="reception">
							<view class="" style="line-height: 50rpx;">
								今日接待：<test class="num">{{item.receiveNum||0}}</test>
							</view>
							<view class="btn" @click="changeAgentStatus(item.agentId)">
								{{activeTotal==1?'暂停':'恢复'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nolist" v-else>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				activeTotal: 1,
				agentList: [],
				pausedAgentList: [],
				houseId: ''
			}
		},
		onLoad() {
			this.houseId = uni.getStorageSync('buildingID').id;
			this.changeAgentListShow()
			this.changePausedAgentListShow()
		},
		onPullDownRefresh(){
			this.changeAgentListShow()
			this.changePausedAgentListShow()
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			activeAgentList() {
				return this.activeTotal == 1 ? this.agentList : this.pausedAgentList
			},
		},
		methods: {
			tabtimetap(idx) {
				// console.log(idx)
				this.activeTotal = idx

			},
			changeAgentListShow() {
				this.$u.get("/zkAgentPool/nextFreeAgent?itemId=" + this.houseId).then(res => {
					this.agentList = res;
				})
			},
			// 获取暂停的经纪人列表
			changePausedAgentListShow() {
				this.$u.get("/zkAgentPool/stopAgentList?itemId=" + this.houseId).then(res => {
					this.pausedAgentList = res;
				})
			},
			changeAgentStatus(id) {
				let content = "";
				if (this.activeTotal == 1) {
					content = "确定当前顾问暂停接待？";
				} else {
					content = "确定取消暂停？";
				}
				uni.showModal({
					content,
					cancelColor: "#999999",
					success: res => {
						if (res.confirm) {
							this.$u.get("/zkAgentPool/update", {
								agentId: id,
								status: this.activeTotal == 1 ? 2 : 0
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "操作成功",
								})
								this.changeAgentListShow()
								this.changePausedAgentListShow()
							})
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #F8F8F8;
		width: 100%;
		min-height: 100vh;
		font-size: 30rpx;
		font-weight: 400;
		
		.header {
			position: sticky;
			top: var(--window-top);
			z-index: 999;
		}

		// line-height: 30px;
		.tab {
			height: 88rpx;
			border-bottom: 1px solid #E0E0E0;
			background: #FFFFFF;
			display: flex;
			align-items: center;

			.tabbox {
				flex: 1;
				height: 100%;
				text-align: center;
				line-height: 92rpx;
				color: #666666;
				font-size: 28rpx;
				display: flex;
				justify-content: center;

				.activecllasscet {
					border-bottom: 2px solid #2671E2;
					color: #2671E2;
					font-weight: 600;
				}
			}
		}

		.nextcon {
			height: 78rpx;
			background: #F4F8FD;
			color: #2671E2;
			text-align: center;
			line-height: 78rpx;
		}

		.content-tips {
			background: #fff;
			padding: 0 30rpx;
			height: 168rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.top {
				margin-top: 19rpx;
				display: flex;
				justify-content: space-between;

				.tit {
					height: 52rpx;
					display: flex;

					.img {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						line-height: 47rpx;
						text-align: center;
						background: #FFFFFF;
						border: 1px solid #C9C9C9;
						margin-right: 20rpx;
					}

					.test {
						font-weight: 600;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.state {
					display: flex;

					.point {
						width: 12rpx;
						height: 12rpx;
						background: #2B6EFF;
						border-radius: 50%;
						margin-right: 9rpx;
						margin-top: 16rpx;

					}
				}
			}

			.reception {
				display: flex;
				font-weight: 400;
				width: 100%;
				margin-top: 28rpx;
				justify-content: space-between;
				color: #666666;
				line-height: 30rpx;

				.btn {
					width: 100rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #C9C9C9;
					text-align: center;
					line-height: 48rpx;
					color: #333333;
					font-size: 28rpx;
				}
			}

		}
	}

	.nolist {
		text-align: center;
		height: 300rpx;
		color: #CCCCCC;
		line-height: 300rpx;
	}
</style>