newEdition/pages/mine/reception/addreception.vue

<template>
	<view class="cented-box">
		<view class="Pinspeak">客户信息</view>
		<view class="chented">

			<view class="title">
				<view class="titletext">客户姓名</view>
				<view class="titletext2">
					<input maxlength="10" class="titletext-input" style="color: #333333;" v-model="parames.name"
						placeholder-class="titletext-input" placeholder-style="color:#B2B2B2;" type="text"
						placeholder="请输入客户姓名（必填）" />
				</view>
				<view class="titleimg">
				</view>
			</view>
			<view class="title">
				<view class="titletext">客户性别</view>
				<view class="titletext2 displayclick" style="display: flex;align-items: center;padding-left: 10rpx;">
					<view class="sexRadio" @click="changeSex(1)" :class="{active:parames.sex == 1}">男士</view>
					<view class="sexRadio" @click="changeSex(2)" :class="{active:parames.sex == 2}">女士</view>
				</view>
			</view>

			<view class="title">
				<view class="titletext">联系电话</view>
				<view class="titletext2">
					<input class="titletext-input" style="color: #333333;" v-model="parames.phone" maxlength="11"
						placeholder-class="titletext-input" placeholder-style="color:#B2B2B2;" type="number"
						placeholder="请输入联系电话" />
				</view>
			</view>

			<view class="title">
				<view class="titletext">接待人数</view>
				<view class="titletext2" style="display: flex;align-items: center;justify-content: space-around;">
					<view class="num" v-for="i in 6" :key="i" :class="{active:parames.howMany == i+1}"
						@click="changeHowMany(i+1)">
						{{i + 1}}
					</view>
				</view>
			</view>

			<view class="title" style="border: none;" @click="Buildingselection()">
				<view class="titletext">客户来源</view>
				<view class="titletext2"
					style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;">
					<!-- {{parames.sourceName||'请选择客户来源'}} -->
					<text v-if="parames.sourceName" style="color: #333333;">{{parames.sourceName}}</text>
					<text v-else>请选择客户来源</text>
				</view>
				<view class="titleimg">
					<image class="titleimg1" src="../../../static/images/arrow.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="Pinspeak">顾问</view>
		<view class="chented" @click="clickShowhid()">
			<view class="title" style="border: none;">
				<view class="titletext">接待顾问</view>
				<view class="titletext2"
					style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;">
					<text v-if="text" style="color: #333333;">{{text}}</text>
					<text v-else>请选择接待顾问</text>
				</view>
				<view class="titleimg">
					<image class="titleimg1" src="../../../static/images/arrow.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="clive" @click="$noMultipleClicks(save)">确定</view>
		<u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" value-name="id" label-name="sourceName" :list="list" @cancel="cancel"
			@confirm="confirm"></u-select>
		<u-select :mask-close-able="false" v-model="Showhid" mode="single-column" :list="freeList" @cancel="cancel1"
			@confirm="confirm1"></u-select>
		<u-modal v-model="show" :mask-close-able="true" :title="'代接待提醒'" :confirm-text="confirmtext"
			:cancel-text='canceltext' @cancel="confirmA" @confirm="confirmB" :show-cancel-button='true'
			:content="content"></u-modal>
	</view>
</template>

<script>
	var app = getApp();
	var config = require("../../../config");

	export default {
		data() {
			return {
				noClick: true,
				Showhiddenunits: false,
				list: [{
						label: '自然到访',
						value: '自然到访'
					},
					{
						label: '渠道推荐',
						value: '渠道推荐'
					},
				],
				parames: {
					name: '',
					// 性别1男 2女
					sex: 1,
					phone: '',
					source: null,
					sourceName: null,
					howMany: 1,
					agentId: null,
					projectId: '',
					replaceReception: 0
				},
				freeList: [],
				Showhid: false,
				text: null,
				show: false,
				content: '东临碣石，以观沧海',
				confirmtext: '1', //确认文字
				canceltext: '2', //取消文字
				daitiReceptionobj: {},
				isShow: false, // 默认隐藏该权限
				isPass: false, // 当前顾问是否正在接待
				fromBack: false, // 从选择顾问页面跳回
			};
		},

		computed: {
			// 用户详情
			userInfo() {
				return uni.getStorageSync("weapp_session_userInfo_data")
			},
		},
		onLoad() {
			uni.$on('addreception', customerId => {
				let obj = this.freeList.find(item => item.agentId == customerId)
				this.fromBack = true
				this.text = obj.name;
				this.parames.agentId = customerId;
			})
		},

		onUnload() {
			uni.$off('addreception')
		},
		
		onShow() {
			let newmenulist = uni.getStorageSync('weapp_session_Menu_data');
			this.isShow = newmenulist.jd_zp
			this.parames.projectId = uni.getStorageSync('buildingID').id;
			this.getFreeList();
			this.zkAgentPoolSourceList();
		},
		methods: {
			// 获取客户来源
			zkAgentPoolSourceList() {
				this.$u.get('/zkAgentPool/source/list', { houseId: this.parames.projectId }).then(res => {
					console.log(res)
					if (res) {
						this.list = res
					}
				})
			},
			
			//取消
			confirmA() {
				if (this.daitiReceptionobj.assign != null) {
					this.parames.agentId = this.daitiReceptionobj.assign.accountId;
					this.baochunfun()
				} else {
					uni.showToast({
						icon: "none",
						title: "【" + this.daitiReceptionobj.owner.name + "】正在接待中"
					})
					return;
				}
			},
			// 确认
			confirmB() {
				console.log(this.daitiReceptionobj.replacement.accountId)
				this.parames.agentId = this.daitiReceptionobj.replacement.accountId;
				this.parames.replaceReception = 1;
				this.baochunfun()
			},
			save() {
				// 校验当前登录人是否是顾问
				let obj = this.freeList.find(item => {
					return item.agentId == this.userInfo.accountId
				}) || null
				if (!obj && this.userInfo.userRoleType == 6) {
					this.isPass = true
				} else {
					this.isPass = false
				}
				
				if (this.parames.name.length == 0) {
					uni.showToast({
						icon: "none",
						title: "客户姓名不能为空"
					})
					return;
				}
				if (this.parames.phone && this.parames.phone.length < 11) {
					uni.showToast({
						icon: "none",
						title: "手机号码不能小于11位"
					})
					return;
				}
				if (this.parames.phone && this.parames.phone.length > 11) {
					uni.showToast({
						icon: "none",
						title: "手机号码不能大于11位"
					})
					return;
				}
				// 判断条件2是否选中顾问
				if (this.isPass && !this.parames.agentId) {
					uni.showToast({
						icon: "none",
						title: "请选择顾问~"
					})
					return;
				}
				const that = this;
				this.$u.post("customer/daitiReception", {
					phone: that.parames.phone,
					projectId: that.parames.projectId,
					agentId: that.parames.agentId
				}).then(res => {
					if (res.unchecked == 0) {
						that.baochunfun()
					} else {
						if (res.zs == 0) {
							that.parames.agentId = res.assign.accountId;
							that.baochunfun()
						} else {
							if (res.assign == null && res.replacement == null) {
								that.baochunfun()
							} else {
								if (res.assign == null) {
									that.daitiReceptionobj = res;
									that.content = "此客户的顾问为【" + res.owner.name + "】，确认让【" + res.replacement.name +
										"】代接待吗？"
									that.confirmtext = res.replacement.name + "代接待", //确认文字
										that.canceltext = res.owner.name + '接待', //取消文字
										that.show = true;
								} else {
									that.daitiReceptionobj = res;
									console.log(that.daitiReceptionobj)
									that.content = "此客户的顾问为【" + res.owner.name + "】，确认让【" + res.replacement.name +
										"】代接待吗？"
									that.confirmtext = res.replacement.name + "代接待", //确认文字
										that.canceltext = res.assign.name + '接待', //取消文字
										that.show = true;
								}
							}
						}
					}
				})
			},
			baochunfun() {
				const {
					dataCode
				} = uni.getStorageSync("weapp_session_userInfo_data");
				if (this.parames.phone.length == 0) {
					this.parames.phone = null
				}
				uni.showLoading({
					title: "保存中",
					mask: true
				})
				if (dataCode == 6) {
					this.$u.post("/customer/gwAdd", this.parames).then(res => {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
						uni.navigateBack()
					})
				} else {
					this.$u.post("/customer/add", this.parames).then(res => {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
						uni.navigateBack()
					})
				}
			},
			changeSex(sex) {
				this.parames.sex = sex;
			},
			changeHowMany(num) {
				this.parames.howMany = num;
			},
			clickShowhid() {
				if (!this.isShow) {
					uni.showToast({
						icon: "none",
						title: '您没有指派权限~'
					})
					return
				}
				if (this.freeList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '当前无可用排班顾问',
						duration: 2000
					});
				} else {
					// this.Showhid = true;
					uni.navigateTo({
						url: `/pages/mine/reception/consultant?from=addreception&id=${this.parames.agentId}&chosedAgentId=${this.parames.agentId}`
					})
				}
			},
			cancel1() {
				this.Showhid = false;
			},
			confirm1(e) {
				this.text = e[0].label;
				this.parames.agentId = e[0].value;
				this.Showhid = false;
			},

			Buildingselection() {
				this.Showhiddenunits = true;
			},
			cancel() {
				this.Showhiddenunits = false;
			},
			confirm(e) {
				console.log(e)
				this.parames.sourceName = e[0].label;
				this.parames.source = e[0].value;
				this.Showhiddenunits = false;
			},
			//获取顾问列表
			getFreeList() {
				this.$u.get("/zkAgentPool/freeList?itemId=" + this.parames.projectId).then(res => {
					this.freeList = res;
					this.freeList.forEach(item => {
						// console.log(item, '顾问')
						if (item.onLine == 0) {
							item.label = item.name + "(离线)";
						} else if (item.onLine == 1) {
							item.label = item.name + "(在线)";
						} else {
							item.label = item.name + "(无设备)";
						}
						item.value = item.agentId
						// 从选择顾问页面跳回时需阻断用当前登录人的顾问id选中自身
						if (!this.fromBack) {
							if (this.userInfo.accountId == item.agentId) {
								this.text = item.label
								this.parames.agentId = item.agentId;
							}
						}
					})
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.sexRadio {
		color: #BFBFBF;
		border: 1rpx solid #BFBFBF;
		font-size: 24rpx;
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		&:last-child {
			margin-left: 20rpx;
		}

		&.active {
			background: #2B6FFF;
			color: #fff;
			border-color: #2B6FFF;
		}
	}

	.num {
		width: 50rpx;
		height: 50rpx;
		background: rgba(43, 110, 253, 0.1);
		color: #2B6EFD;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&.active {
			background: #2B6EFD;
			color: #FFFFFF;
		}
	}

	.cented-box {
		background: #F8F8F8;
		width: 100%;
		height: 100vh;
	}

	.Pinspeak {
		width: 100%;
		height: 92rpx;
		border-bottom: 1rpx solid #E0E0E0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-indent: 30rpx;
		line-height: 92rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding-left: 10rpx;
	}

	.chented {
		width: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #FFFFFF;

		.title {
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #E0E0E0;
			display: flex;
			align-items: center;

			.titletext {
				width: 21%;
				height: 110rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				text-indent: 10rpx;
			}

			.titletext2 {
				width: 71%;
				height: 110rpx;
			}

			.titletext-input {
				width: 100%;
				height: 110rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #B2B2B2;
				line-height: 110rpx;
				padding-left: 10rpx;
			}

			.titleimg {
				width: 8%;
				text-align: right;

				.titleimg1 {
					width: 16rpx;
					height: 36rpx;
				}
			}
		}
	}

	.clive {
		position: absolute;
		bottom: 32rpx;
		left: 30rpx;
		right: 30rpx;
		width: 690rpx;
		height: 88rpx;
		background: #2671E2;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		border-radius: 8rpx;
		font-size: 32rpx;
	}
</style>