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" v-if="saveisshow" @click.stop="save">确定</view>
		<view class="clive2" v-else >确定</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,
				
			};
		},
		onShow() {
			this.parames.projectId=uni.getStorageSync('buildingID').id;
			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()
			},
			save() {
				this.saveisshow=false;
				if (this.parames.name.length==0) {
					uni.showToast({
						icon: "none",
						title: "客户姓名不能为空"
					})
					this.saveisshow=true;
					return;
				}
				if (this.parames.phone && !this.$u.test.mobile(this.parames.phone)) {
					uni.showToast({
						icon: "none",
						title: "手机号码格式不正确"
					})
					this.saveisshow=true;
					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{
							console.log("zo")
							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 => {
						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>