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="请输入客户姓名" v-model="form.name"/>
					</view>
				</view>
				<view class="conmsg-msg-lab">
					<view class="conmsg-msg-lab-1">
						客户性别
					</view>
					<view class="conmsg-msg-lab-inp">
						<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>
				</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="text" placeholder="请输入联系电话" 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="请输入微信账号" 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="lelveshow = true" v-model="selectform.lelve" 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">
					<view class="conmsg-msg-lab-1">
						备注内容
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请输入备注内容" v-model="form.txea"/>
					</view>
				</view>
			</view>
		</view>
		
		<view class="conmsg">
			<view class="conmsg-title">
				客户标签
			</view>
			<view class="conmsg-msg">
				<view class="">
					<view class="conmsg-msg-lab">
						<view class="conmsg-msg-lab-1">
							置业需求
						</view>
<!-- 						<view class="conmsg-msg-lab-img">
							<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
						</view> -->
					</view>
					<view class="con-msg-con">
						<view v-for="(item,index) in demandlist" :key="index" :style="{border:item.checked?'1px solid #0A6EE9':'1px solid #E0E0E0'}" class="chebox" @click="demandcheck(index)">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="">
					<view class="conmsg-msg-lab">
						<view class="conmsg-msg-lab-1">
							意向面积
						</view>
<!-- 						<view class="conmsg-msg-lab-img">
							<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
						</view> -->
					</view>
					<view class="con-msg-con">
						<view v-for="(item,index) in arealist" :key="index" :style="{border:item.checked?'1px solid #0A6EE9':'1px solid #E0E0E0'}" class="chebox" @click="areacheck(index)">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="">
					<view class="conmsg-msg-lab">
						<view class="conmsg-msg-lab-1">
							预算
						</view>
						
<!-- 						<view class="conmsg-msg-lab-img">
							<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
						</view> -->
					</view>
				</view>
				<view class="">
					<view class="conmsg-msg-lab">
						<view class="conmsg-msg-lab-1">
							关注点
						</view>
						
<!-- 						<view class="conmsg-msg-lab-img">
							<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
						</view> -->
					</view>
				</view>
				<view class="">
					<view class="conmsg-msg-lab">
						<view class="conmsg-msg-lab-1">
							客户来源
						</view>
<!-- 						<view class="conmsg-msg-lab-img">
							<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
						</view> -->
					</view>
					<view class="con-msg-con">
						<view v-for="(item,index) in sourelist" :key="index" :style="{border:item.checked?'1px solid #0A6EE9':'1px solid #E0E0E0'}" class="chebox" @click="sourecheck(index)">
							{{item.label}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit">
			<view class="btn">
				确定
			</view>
		</view>
		
		<!-- 客户等级 -->
		<u-select v-model="lelveshow" :list="lelvelist" @confirm="lelveshowCallback"></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:'',
					lelve:'',
					demand:{
						// 户型
						roomModel:'',
						// 面积
						acreage:'',
						// 客户来源
						// 预算
						// 关注点
					}
					
				},
				selectform:{
					lelve:'',
					stage:'',
					demand:'',
					area:'',
					budget:'',
					fouce:'',
					soure:'',
					
				},
				lelveshow:false,
				customerId:'',
				// 等级
				lelvelist:[
					{
						value:1,
						label:'A'
					},
					{
						value:2,
						label:'B'
					},
					{
						value:3,
						label:'C'
					},
					{
						value:4,
						label:'D'
					},
				],
				stagelist:[],
				// 置业需求
				demandlist:[],
				// 意向面积
				arealist:[],
				// 预算
				budgetlist:[],
				// 关注点
				foucelist:[],
				// 客户来源
				sourelist:[],
			}
		},
		onLoad(e) {
			console.log(e)
			// 先调用借口查询数据
			this.customerId=e.id
			this.getdetail()
		},
		methods:{
			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()
			},
			lelveshowCallback(e){
				this.selectform.lelve=e[0].label
				this.form.lelve=e[0].value
			},
			// 获取用户数据
			getdetail(){
				this.$u.get("customer/findById?",{id:this.customerId})
				.then(res=>{
					// console.log(res)
					this.form=res
					// 给客户等级赋值
					let idx= this.lelvelist.findIndex(item=>item.value==res.level)
					if(idx!=-1){
						this.selectform.lelve=this.lelvelist[idx].label
					}
					// 获取置业需求
					this.getListByType('needType','demandlist')
					// 获取意向面积
					this.getListByType('area','arealist')
					// 获取客户来源
					this.getListByType('customerSource','sourelist')
				})
			},
			// 字典表接口
			getListByType(type,list){
				this.$u.get("/sysDict/findListByType",{type})
				.then(res=>{
					// console.log(res)
					this[list]=res
					// 处理回显问题
					if(type=='needType'){
						// 置业需求
						// console.log(this.demandlist)
						this.demandlist.map(item=>{
							// console.log(this.form.demand.demandType)
							if((this.form.demand.demandType+'').includes(item.value)){
								item.checked=true
							}else{
								item.checked=false
							}
						})
					}
					// 意向面积
					if(type=='area'){
						this.arealist.map(item=>{
							item.checked=false
						})
					}
					// 客户来源
					if(type=='customerSource'){
						this.sourelist.map(item=>{
							item.checked=false
						})
					}
					
				})
			},
		}
	}
</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;
			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;
		}
	}
	.con-msg-con{
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
		border-bottom: 1px solid #E0E0E0;
		.chebox{
			// width: 20%;
			height: 60rpx;
			line-height: 60rpx;
			margin: 10rpx 0;
			margin-right: 20rpx;
			border: 1px solid #E0E0E0;
			box-sizing: border-box;
			padding: 0 10rpx;
		}
	}
</style>