NewZkgj/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 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">
					<!-- <image class="titleimg1" src="../../../static/images/arrow.png" mode=""></image> -->
				</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"
						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: 90rpx;padding-left: 10rpx;">
					<text v-if="showSourceName" style="color: #333333;">{{showSourceName}}</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" v-if="shifoinfo==0">顾问</view>
		<view class="chented" v-if="shifoinfo==0" @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: 90rpx;padding-left: 10rpx;">
					<!-- {{text || '请选择接待顾问'}} -->
					<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.stop="btnSave" :style="{background:(isBand==false?'#2671E2':'#949494')}">确定</view>

		<!-- <view v-if="Showhiddenunits"> -->
		<!-- <u-select v-model="show" :list="list"></u-select> -->
		<u-select :mask-close-able="false" label-name="sourceName" value-name="id" v-model="Showhiddenunits"
			mode="single-column" :list="list" @cancel="cancel" @confirm="confirm"></u-select>
		<!-- </view> -->
		<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 {
				Showhiddenunits: false,
				list: [
					// {label: '自然到访',value:'自然到访'}, 
					// {label: '渠道推荐',value:'渠道推荐'},
				],
				parames: {
					name: '',
					// 性别1男 2女
					sex: 1,
					phone: '',
					source: null,
					sourceId: null,
					howMany: 1,
					agentId: null,
					projectId: '',
					replaceReception: 0
				},
				showSourceName: '', // 展示文字
				shifoinfo: 0,
				freeList: [],
				Showhid: false,
				text: null,
				show: false,
				content: '东临碣石，以观沧海',
				confirmtext: '1', //确认文字
				canceltext: '2', //取消文字
				daitiReceptionobj: {},
				saveisshow: true,
				isBand: false, // 阻止二次提交
				tap: true,
				fdFlag:null
			};
		},
		onShow() {
			this.parames.projectId = uni.getStorageSync('buildingID').id;
			console.log(this.$u)
			this.init()
			this.getFreeList();
			this.getFromSource();
		},
		methods: {
			// 获取客户来源
			getFromSource() {
				uni.request({
					url: config.service.sourceList + "?houseId=" + this.parames.projectId,
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						console.log(data)
						if (data.data.code == 10000) {
							// this.shifoinfo=data.data.data.selfAssigned
							this.list = data.data.data
						}
					}
				})
			},

			//取消
			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() {
				this.parames.agentId = this.daitiReceptionobj.replacement.accountId;
				this.parames.replaceReception = 1;
				this.baochunfun()
			},
			btnSave() {
				if (this.isBand) return
				that.save()
				// let that = this
				// clearTimeout(this.fdFlag)
				// this.fdFlag = setTimeout(() => {
				// 	that.fdFlag = null;
				// }, 500)
			},
			
			save() {
				if (this.parames.name.length == 0) {
					uni.showToast({
						icon: "none",
						title: "客户姓名不能为空"
					})
					return;
				}
				if (this.parames.phone && !this.$u.test.mobile(this.parames.phone)) {
					uni.showToast({
						icon: "none",
						title: "手机号码格式不正确"
					})
					return;
				}
				const that = this;
				this.isBand = true
				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()
						this.tap = false;
					} else {
						if (res.zs == 0) {
							that.parames.agentId = res.assign.accountId;
							that.baochunfun()
							this.tap = false;
						} else {
							console.log("zo")
							if (res.assign == null && res.replacement == null) {
								that.baochunfun()
								this.tap = false;
							} 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;
								}
							}
						}
					}
					this.isBand = false
				}).catch(e => {
					that.show = true;
					this.isBand = false
				})
			},
			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 => {
						this.saveisshow = true;
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
						uni.navigateBack()
					})
				} else {
					this.$u.post("/customer/add", this.parames).then(res => {
						this.saveisshow = true;
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
						uni.navigateBack()
					})
				}
			},
			changeSex(sex) {
				this.parames.sex = sex;
			},
			changeHowMany(num) {
				this.parames.howMany = num;
			},
			clickShowhid() {
				if (this.freeList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '当前无可用排班顾问',
						duration: 2000
					});
				} else {
					this.Showhid = true;
				}
			},
			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.showSourceName = e[0].label;
				this.parames.sourceId = e[0].value;
				this.Showhiddenunits = false;
			},
			init() {
				uni.request({
					url: config.service.getSelfAssignedByHouseId + "?houseId=" + this.parames.projectId,
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						if (data.data.code == 10000) {
							this.shifoinfo = data.data.data.selfAssigned
						}
					}
				})
			},
			//获取顾问列表
			getFreeList() {
				this.$u.get("/zkAgentPool/freeList?itemId=" + this.parames.projectId).then(res => {
					this.freeList = res;
					this.freeList.forEach(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
					})
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.sexRadio {
		color: #BFBFBF;
		border: 1rpx solid #BFBFBF;
		font-size: 24upx;
		width: 100rpx;
		height: 43rpx;
		text-align: center;
		line-height: 40rpx;

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

		&.active {
			color: #2B6FFF;
			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: 90rpx;
			border-bottom: 1rpx solid #E0E0E0;
			display: flex;
			align-items: center;

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

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

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

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

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

	.clive {
		width: 690rpx;
		height: 88rpx;
		background: #2671E2;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 300rpx;
		font-size: 32rpx;
	}

	.clive2 {
		width: 690rpx;
		height: 88rpx;
		background: #9999;
		text-align: center;
		line-height: 88rpx;
		color: #666;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 300rpx;
		font-size: 32rpx;
	}
</style>