puqiang/pages/center/consumer/edit.vue

<template>
	<view class="box">
		<!-- 编辑 -->
		<view class="conmsg">
			<view class="conmsg-title">
				客户信息
			</view>
			<view class="conmsg-msg">
				<view class="conmsg-msg-lab">
					<view class="conmsg-msg-lab-1">
						客户姓名
						<view class="star">
							*
						</view>
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请输入客户姓名" placeholder-style="color:#B2B2B2;" v-model="form.name"/>
					</view>
				</view>
				<view class="conmsg-msg-lab">
					<view class="conmsg-msg-lab-1">
						客户性别
					</view>
					<view class="conmsg-msg-lab-inp" style="margin-top: 20rpx;">
						<view  style="border: none; display: flex;">
								<view  class="sexchose" @click="form.sex=1" :style="{border:form.sex==1?'1px solid #0A6EE9':'1px solid #E0E0E0'}">
									男
								</view>
								<view  class="sexchose" @click="form.sex=2" :style="{border:form.sex==2?'1px solid #0A6EE9':'1px solid #E0E0E0'}">
									女
								</view>
							</view>
					</view>
				</view>
				<view class="conmsg-msg-lab">
					<view class="conmsg-msg-lab-1">
						联系电话
						<view class="star">
							*
						</view>
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  :disabled="dataCode!=6" type="number" placeholder="请输入联系电话" placeholder-style="color:#B2B2B2;" maxlength="11"  v-model="form.phone"/>
					</view>
				</view>
				<view class="conmsg-msg-lab">
					<view class="conmsg-msg-lab-1">
						微信账号
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请输入微信账号" placeholder-style="color:#B2B2B2;" v-model="form.chatNo"/>
					</view>
				</view>
				<view class="conmsg-msg-lab" @click="levelshow = true">
					<view class="conmsg-msg-lab-1">
						客户等级
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请选择客户等级"  v-model="selectform.level" disabled/>
					</view>
					<view class="conmsg-msg-lab-img">
						<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<view class="conmsg-msg-lab">
					<view class="conmsg-msg-lab-1">
						客户来源
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请选择客户来源" @click="Buildingselection" v-model="form.sourceName" disabled/>
					</view>
					<view class="conmsg-msg-lab-img">
						<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<view class="conmsg-msg-lab" style="border: none;">
					<view class="conmsg-msg-lab-1">
						备注内容
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请输入备注内容" placeholder-style="color:#B2B2B2;" v-model="form.remarks"/>
					</view>
				</view>
			</view>
		</view>
		
		<view class="conmsg" v-if="allList.length!=0">
			<view class="conmsg-title">
				客户标签
			</view>
			<view class="conmsg-msg">
				
				<view v-for="(item,index) in allList" :key="index">
					<view class="">
					<view class="conmsg-msg-lab" style="border: none;">
						<view class="conmsg-msg-lab-1">
							{{item.name}}
						</view>
					</view>
					<view class="con-msg-con" :style="{borderBottom:index==allList.length-1?'none':'1px solid #E0E0E0'}">
						<view v-for="(item1,i) in item.children" :key="i" @click="Edittag(item,item1,index,i)" :style="{border:item1.selected==0?'1px solid #0A6EE9':'1px solid #E0E0E0'}" class="chebox" >
							{{item1.label}}
						</view>
					</view>
				</view>
				</view>
				
			</view>
		</view>
		
		<view class="submit">
			<view class="btn" @click="submit">
				确定
			</view>
		</view>
		<view class="" style="height: 220rpx;" >
			<!-- :style="{marginTop:allList.length!=0?'0':'500rpx'}" -->
		</view>
		
		<!-- 客户等级 -->
		<u-select v-model="levelshow" :list="levellist" @confirm="levelshowCallback"></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>
</template>

<script>
	const config = require("@/config");
	export default{
		data(){
			return{
				Showhiddenunits: false, // 控制客户来源弹窗
				form:{
					name:'',
					sex:'1',
					phone:'',
					chatNo:'',
					level:'1',
					remarks:'',
					sourceId: ''
				},
				selectform:{
					level:'A',
					stage:'',
					demand:'',
					area:'',
					budget:'',
					fouce:'',
					soure:'',
					
				},
				
				list: [], // 客户来源数组
				
				levelshow:false,
				customerId:'',
				// 等级
				levellist:[
					{
						value:1,
						label:'A'
					},
					{
						value:2,
						label:'B'
					},
					{
						value:3,
						label:'C'
					},
					{
						value:4,
						label:'D'
					},
				],
				allList:[],
				dataCode:'',
				projectId: '', // 客户ID
			}
		},
		onLoad(e) {
			const {
				dataCode
			} = uni.getStorageSync("weapp_session_userInfo_data");
			this.dataCode=dataCode
			console.log(e)
			// 先调用借口查询数据
			this.customerId=e.id
			if (e.projectId) this.projectId = e.projectId
			this.getdetail()
			this.getFromSource()
		},
		methods:{
			// 获取客户来源
			getFromSource() {
				uni.request({
					url: config.service.sourceList+"?houseId="+this.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.list = data.data.data
						}
					}
				})
			},
			// 选择客户来源
			Buildingselection(){
				this.Showhiddenunits=true;
			},
			cancel(){
				this.Showhiddenunits=false;
			},
			confirm(e) {
				this.form.sourceName = e[0].label;
				this.form.sourceId = e[0].value;
				this.Showhiddenunits=false;
			},
			
			Edittag(item,item1,index,i){
				
				if(this.allList[index].children[i].selected==0){
					this.allList[index].children[i].selected=1;
				}else{
					this.allList[index].children[i].selected=0;
				}
				this.$forceUpdate()
				
			},
			sourecheck(index){
				this.sourelist[index].checked=!this.sourelist[index].checked
				this.$forceUpdate()
			},
			demandcheck(index){
				this.demandlist[index].checked=!this.demandlist[index].checked
				this.$forceUpdate()
			},
			areacheck(index){
				this.arealist[index].checked=!this.arealist[index].checked
				this.$forceUpdate()
			},
			levelshowCallback(e){
				this.selectform.level=e[0].label
				this.form.level=e[0].value
			},
			// 获取用户数据
			getdetail(){
				this.$u.get("customer/findById?",{id:this.customerId})
				.then(res=>{
					this.form=res
					// 给客户等级赋值
					let idx= this.levellist.findIndex(item=>item.value==res.level)
					if(idx!=-1){
						this.selectform.level=this.levellist[idx].label
					}else{
						this.selectform.level='A';
						this.form.level=1;
					}
					this.showSourceName = res.sourceName;
					// 获取置业需求
					this.getListByType()
				})
			},
			// 字典表接口
			getListByType(){
				this.$u.get("/matchKeywords/findPersonalMatchData",{customerId:this.customerId})
				.then(res=>{
					// console.log(res)
					res.forEach(item1=>{
						item1.children.map(item=>{
							if(item.isInterval==0){
							  item.label=item.name+item.unit+'-'+item.endName+item.unit;
							 }else{
							item.label=item.name
							 }
							 item.value=item.id;
						})
					   })
						  // console.log(res)
					this.allList=res
					// return
				})
			},
			// 提交
			submit(){
				let param={}
				let str=[]
				if(this.form.name==''){
					uni.showToast({
						title:'请输入客户姓名',
						icon:'none'
					})
					return
				}
				if(this.form.phone==''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				// if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
				// 			uni.showToast({
				// 			    title: "请检查手机号码格式",
				// 				icon:'none'
				// 			});     
				// 		// this.form.phone=''
				// 			return false; 
				// } 
				if (this.form.phone.length<5) {
					uni.showToast({
						icon: "none",
						title: "手机号码不能小于5位"
					})
					return;
				}
				if (this.form.phone.length>11) {
					uni.showToast({
						icon: "none",
						title: "手机号码不能大于11位"
					})
					return;
				}
				
				this.allList.map(item=>{
					item.children.map(item1=>{
						if(item1.selected==0){
							str.push(item1.keywordsId)
						}
					})
				})
				str=str.join(',')
				param=this.form
				param.keywordIds=str
				console.log(param)
				// return
				this.$u.post("customer/update",param)
				.then(res=>{
					// console.log(res)
					uni.showToast({
						title:'操作成功',
						icon:'none',
						success: () => {
							uni.navigateBack()
						}
					})
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #F8F8F8;
		overflow: hidden;
	}
	.conmsg{
		background: #FFFFFF;
		margin-top: 20rpx;
		.conmsg-title{
			height: 92rpx;
			line-height: 92rpx;
			font-weight: bold;
			padding: 0 30rpx;
			// font-weight: 500;
			color: #303030;
			font-size: 32rpx;
			border-bottom: 1px solid #E0E0E0;
		}
		.conmsg-msg{
			padding: 0 30rpx;
			.conmsg-msg-lab{
				height: 102rpx;
				display: flex;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				border-bottom: 1px solid #E0E0E0;
				line-height: 102rpx;
				.conmsg-msg-lab-1{
					display: flex;
					min-width: 136rpx;
					.star{
						color: #E7483C;
						line-height: 108rpx;
					}
				}
				.conmsg-msg-lab-inp{
					margin-top: 30rpx;
					margin-left: 44rpx;
					
				}
				.conmsg-msg-lab-img{
					width: 14rpx;
					height: 30rpx;
					margin-top: 6rpx;
					margin-left: auto;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.submit{
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		height: 120rpx;
		background: #FFFFFF;
		.btn{
			// margin: 60rpx auto;
			text-align: center;
			width: 690rpx;
			height: 88rpx;
			background: #2671E2;
			border-radius: 8rpx;
			font-size: 32tpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
	.con-msg-con{
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
		border-bottom: 1px solid #E0E0E0;
		padding-bottom: 16rpx;
		.chebox{
			// width: 20%;
			height: 60rpx;
			line-height: 60rpx;
			// margin: 10rpx 0;
			margin-bottom: 25rpx;
			margin-right: 20rpx;
			border: 1px solid #E0E0E0;
			box-sizing: border-box;
			padding: 0 10rpx;
		}
	}
		.sexchose{
			width: 120rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 1px solid #E0E0E0;
			text-align: center;
			line-height: 60rpx;
			margin-right: 20rpx;
			
		}
</style>