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="0" shape='circle'>男</u-radio>
								<u-radio name="1" 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.wx"/>
					</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="conmsg-msg-lab">
					<view class="conmsg-msg-lab-1">
						置业需求
					</view>
					<view class="conmsg-msg-lab-inp">
						<input  type="text" placeholder="请选择置业需求" @click="demandshow = true" v-model="selectform.demand" 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="areashow = true" v-model="selectform.area" 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="budgetshow = true" v-model="selectform.budget" 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="fouceshow = true" v-model="selectform.fouce" 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="soureshow = true" v-model="selectform.soure" disabled/>
					</view>
					<view class="conmsg-msg-lab-img">
						<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
					</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:'0',
					phone:'',
					wx:'',
					lelve:'',
					stage:'',
					txea:'',
					demand:'',
					area:'',
					budget:'',
					fouce:'',
					soure:'',
					
				},
				selectform:{
					lelve:'A',
					stage:'',
					demand:'',
					area:'',
					budget:'',
					fouce:'',
					soure:'',
					
				},
				lelveshow:false,
				stageshow:false,
				demandshow:false,
				areashow:false,
				budgetshow:false,
				fouceshow:false,
				soureshow:false,
				lelvelist:[
					{
						value:1,
						label:'A'
					},
					{
						value:2,
						label:'B'
					},
					{
						value:3,
						label:'C'
					},
					{
						value:4,
						label:'D'
					},
				],
				stagelist:[
					{
						value:1,
						label:'首次到访'
					},
					{
						value:2,
						label:'首次到访B'
					},
					{
						value:3,
						label:'首次到访C'
					},
				],
				demandlist:[
					{
						value:1,
						label:'需求'
					},
					{
						value:2,
						label:'首次到访B'
					},
					{
						value:3,
						label:'首次到访C'
					},
				],
				arealist:[
					{
						value:1,
						label:'面积'
					},
					{
						value:2,
						label:'首次到访B'
					},
					{
						value:3,
						label:'首次到访C'
					},
				],
				budgetlist:[
					{
						value:1,
						label:'预算'
					},
					{
						value:2,
						label:'首次到访B'
					},
					{
						value:3,
						label:'首次到访C'
					},
				],
				foucelist:[
					{
						value:1,
						label:'关注'
					},
					{
						value:2,
						label:'首次到访B'
					},
					{
						value:3,
						label:'首次到访C'
					},
				],
				sourelist:[
					{
						value:1,
						label:'来源'
					},
					{
						value:2,
						label:'首次到访B'
					},
					{
						value:3,
						label:'首次到访C'
					},
				],
			}
		},
		methods:{
			lelveshowCallback(e){
				this.selectform.lelve=e[0].label
				this.form.lelve=e[0].value
			},
			stageshowCallback(e){
				this.selectform.stage=e[0].label
				this.form.stage=e[0].value
			},
			demandshowCallback(e){
				this.selectform.demand=e[0].label
				this.form.demand=e[0].value
			},
			areashowCallback(e){
				this.selectform.area=e[0].label
				this.form.area=e[0].value
			},
			budgetshowCallback(e){
				this.selectform.budget=e[0].label
				this.form.budget=e[0].value
			},
			fouceshowCallback(e){
				this.selectform.fouce=e[0].label
				this.form.fouce=e[0].value
			},
			soureshowCallback(e){
				this.selectform.soure=e[0].label
				this.form.soure=e[0].value
			},
		}
	}
</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;
		}
	}
</style>