NewZkgj/pages/mine/reception/addreception.vue

<template>
	<view class="cented-box">
		<view class="cented-boxs">

			<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>
				<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" @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 class="title" style="border: none;" @click="showTemplateSelect()">
					<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="templateName" style="color: #333333;">{{templateName}}</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: 90rpx;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>

		<!-- 提交按钮 -->
		<view class="clive" @click.stop="$noMultipleClicks(save)"
			:style="{background:(isBand==false?'#2671E2':'#949494')}">确定</view>

		<!-- 客户来源 -->
		<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>

		<!-- 销讲业务 -->
		<u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
			mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></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>

		<!-- 多接待间隔超时提示窗 -->
		<u-modal v-model="showBeyound" :mask-close-able="true" title="接待提醒" :confirm-text="beyoundConfirmText"
			:cancel-text="beyoundCancelText" @cancel="beyoundCancel" @confirm="beyoundConfirm"
			:show-cancel-button="true" :content="beyondContent"></u-modal>
	</view>
</template>

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

	export default {
		data() {
			return {
				noClick: true,
				Showhiddenunits: false,
				list: [], // 客户来源
				parames: {
					name: '',
					// 性别1男 2女
					sex: 1,
					phone: '',
					source: null,
					sourceId: null,
					howMany: 1,
					agentId: null,
					projectId: '',
					replaceReception: 0,
					marketingBusiness: '', // 销讲业务默认为第一个
					endRecordFlag: 1, //   0：结束，1：一起接待
				},
				showSourceName: '', // 展示文字
				shifoinfo: 0, // 高级权限  项目是否能指派顾问
				freeList: [], // 顾问列表
				text: null,
				show: false,
				content: '',
				confirmtext: '', //确认文字
				canceltext: '', //取消文字
				daitiReceptionobj: {},
				saveisshow: true,
				isBand: false, // 阻止二次提交
				tap: true,
				fdFlag: null,
				isPass: false, // 当前顾问是否正在接待
				fromBack: false, // 从选择顾问页面跳回 

				beyoundConfirmText: '结束', // 多接待间隔确定文字
				beyoundCancelText: '一起接待', // 多接待间隔确定文字
				beyondContent: '', // 文字描述内容
				showBeyound: false, // 展示多接待间隔超时提示窗

				templateList: [], // 销讲业务
				showTemplate: false, // 展示选择销讲业务弹窗
				templateName: '', // 销讲业务类型文字
			};
		},

		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;
			})
			this.getMarketingBusiness();
		},

		onUnload() {
			uni.$off('addreception')
		},

		onShow() {
			this.parames.projectId = uni.getStorageSync('buildingID').id;
			this.init()
			this.getFreeList();
			this.getFromSource();
		},
		methods: {
			// 确认的方法（结束）
			beyoundConfirm() {
				this.parames.endRecordFlag = 0
				this.saveAddreception()
			},

			// 取消的方法（取消）
			beyoundCancel() {
				this.parames.endRecordFlag = 1
				this.saveAddreception()
			},

			// 获取销讲业务
			getMarketingBusiness() {
				this.$u.get('/customer/marketingBusiness', {
					houseId: uni.getStorageSync('buildingID').id,
					status: 0,
				}).then(res => {
					this.templateList = res
					if (res && res.length > 0) {
						this.parames.marketingBusiness = res[0].id
						this.templateName = res[0].templateName
					}
				})
			},

			// 获取客户来源
			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) => {
						if (data.data.code == 10000) {
							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()
			},

			save() {
				this.$u.get('/customer/findByAgentIdNotEnd', {
					agentId: this.parames.agentId,
					houseId: this.parames.projectId
				}).then(res => {
					console.log(res, 'asdaskljdalksjdlksajdksl')
					if (res.num > 0) {
						this.beyondContent = `【${this.text}】正在接待客户，是否要结束超过${res.endRecordInterval}分钟的接待？`
						this.showBeyound = true
					} else {
						this.saveAddreception()
					}
				}).catch(() => {
					this.saveAddreception()
				})
			},

			// 新增接待
			saveAddreception() {
				// 校验当前登录人是否是顾问
				let obj = this.freeList.find(item => {
					return item.agentId == this.userInfo.accountId
				}) || null
				if (!obj && this.userInfo.dataCode == 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.$u.test.mobile(this.parames.phone)) {
					uni.showToast({
						icon: "none",
						title: "手机号码格式不正确"
					})
					return;
				}

				// 判断条件2是否选中顾问
				if (this.isPass && !this.parames.agentId) {
					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,
					endRecordFlag: that.parames.endRecordFlag
				}).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 {
							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;
									this.isBand = false
								} else {
									that.daitiReceptionobj = res;
									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()
					}).catch(e => {
						this.isBand = false
					})
				} else {
					this.$u.post("/customer/add", this.parames).then(res => {
						this.saveisshow = true;
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
						uni.navigateBack()
					}).catch(e => {
						this.isBand = false
					})
				}
			},
			changeSex(sex) {
				this.parames.sex = sex;
			},
			changeHowMany(num) {
				this.parames.howMany = num;
			},
			clickShowhid() {
				if (this.shifoinfo != 0) {
					uni.showToast({
						icon: 'none',
						title: '您没有指派权限~',
						duration: 2000
					});
					return
				}

				if (this.userInfo.dataCode == 6 && !this.checkAuthority('顾问指派顾问')) {
					uni.showToast({
						icon: "none",
						title: "您没有指派权限~",
						duration: 2000
					})
					return
				}
				if (this.freeList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '当前无可用排班顾问',
						duration: 2000
					});
				} else {
					uni.navigateTo({
						url: `/pages/mine/reception/consultant?from=addreception&id=${this.parames.agentId}&chosedAgentId=${this.parames.agentId}`
					})

				}
			},

			Buildingselection() {
				this.Showhiddenunits = true;
			},

			showTemplateSelect() {
				this.showTemplate = true;
			},
			cancel() {
				this.Showhiddenunits = false;
			},
			confirm(e) {
				this.showSourceName = e[0].label;
				this.parames.sourceId = e[0].value;
				this.Showhiddenunits = false;
			},

			// 销讲业务方法
			templateCancel() {
				this.showTemplate = false;
			},
			templateConfirm(e) {
				this.showTemplate = false;
				this.templateName = e[0].label;
				this.parames.marketingBusiness = e[0].value;
			},

			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 + "&deptId=" + '' + '&name=' + '')
					.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
							// 从选择顾问页面跳回时需阻断用当前登录人的顾问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: 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%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.cented-boxs {
			flex-grow: 1;
		}
	}

	.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 {
		flex-shrink: 0;
		position: sticky;
		bottom: 32rpx;
		width: 690rpx;
		height: 88rpx;
		background: #2671E2;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 32rpx;
	}
</style>