NewZkgj/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;">
						<!-- <u-radio-group v-model="form.sex"   >
							<view style="display: flex;">
								<u-radio name="1" shape='circle'>男</u-radio>
								<u-radio name="2" shape='circle'>女</u-radio>
							</view>
						</u-radio-group> -->
						<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  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">
					<view class="conmsg-msg-lab-1">
						客户等级
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请选择客户等级" @click="levelshow = true" 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="stageshow = true" v-model="selectform.stage" 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">
											<view v-for="(item1,i) in item.children" :key="index" @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>
		
		<!-- 客户等级 -->
		<u-select v-model="levelshow" :list="levellist" @confirm="levelshowCallback"></u-select>
		<!-- 客户阶段 -->
		<!-- <u-select v-model="stageshow" :list="stagelist" @confirm="stageshowCallback"></u-select> -->
		<!-- 职业需求 -->
		<!-- <u-select v-model="demandshow" :list="demandlist" @confirm="demandshowCallback"></u-select> -->
		<!-- 意向面积 -->
		<!-- <u-select v-model="areashow" :list="arealist" @confirm="areashowCallback"></u-select> -->
		<!-- 预算 -->
		<!-- <u-select v-model="budgetshow" :list="budgetlist" @confirm="budgetshowCallback"></u-select> -->
		<!-- 关注点 -->
		<!-- <u-select v-model="fouceshow" :list="foucelist" @confirm="fouceshowCallback"></u-select> -->
		<!-- 客户来源 -->
		<!-- <u-select v-model="soureshow" :list="sourelist" @confirm="soureshowCallback"></u-select> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form:{
					name:'',
					sex:'1',
					phone:'',
					chatNo:'',
					level:'',
					remarks:'',
					
				},
				selectform:{
					level:'',
					stage:'',
					demand:'',
					area:'',
					budget:'',
					fouce:'',
					soure:'',
					
				},
				levelshow:false,
				customerId:'',
				// 等级
				levellist:[
					{
						value:1,
						label:'A'
					},
					{
						value:2,
						label:'B'
					},
					{
						value:3,
						label:'C'
					},
					{
						value:4,
						label:'D'
					},
				],
				allList:[],
				// stagelist:[],
				// // 置业需求
				// demandlist:[],
				// // 意向面积
				// arealist:[],
				// // 预算
				// budgetlist:[],
				// // 关注点
				// foucelist:[],
				// // 客户来源
				// sourelist:[],
			}
		},
		onLoad(e) {
			console.log(e)
			// 先调用借口查询数据
			this.customerId=e.id
			this.getdetail()
		},
		methods:{
			Edittag(item,item1,index,i){
				// var selected='';
				// console.log(item,item1,index,i)
				// return
				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()
				
				// this.$u.post("/matchKeywords/updatePersonalMatchData", {
				// 	carId: this.customerId,
				// 	selected:selected,
				// 	name:chend.name,
				// 	pid:chend.pid,
				// 	level:chend.level,
				// 	endName:chend.endName,
				// 	keywordsId:chend.keywordsId
				// }).then(res => {
					
				// })
			},
			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=>{
					// console.log(res)
					this.form=res
					// 给客户等级赋值
					let idx= this.levellist.findIndex(item=>item.value==res.level)
					if(idx!=-1){
						this.selectform.level=this.levellist[idx].label
					}
					// 获取置业需求
					this.getListByType()
					// // 获取意向面积
					// this.getListByType()
					// // 获取客户来源
					// 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; 
				} 
				
				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;
					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{
		height: 228rpx;
		.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;
			position: fixed;
			bottom: 20rpx;
			left: 20rpx;
		}
	}
	.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>