newEdition/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 maxlength="10" 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">
						<view style="border: none; display: flex;">
							<view class="sexchose" @click="form.sex=1"
								:style="{border:form.sex==1?'1px solid #0A6EE9;background: #0A6EE9;color: #fff;':'1px solid #E0E0E0'}">
								男
							</view>
							<view class="sexchose" @click="form.sex=2"
								:style="{border:form.sex==2?'1px solid #0A6EE9;background: #0A6EE9;color: #fff;':'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="userInfo.showPhoneStatus != 0" 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="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">
			<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" :class="{mustSe: item.level == 1 && item.mustSelected == 0 }" 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;background: #0A6EE9;color: #fff;':'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;background: #fff;">
			<!-- :style="{marginTop:allList.length!=0?'0':'500rpx'}" -->
		</view>

		<!-- 客户等级 -->
		<u-select v-model="levelshow" :list="levellist" @confirm="levelshowCallback"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPhone: '', // 展示用的手机号
				form: {
					name: '',
					sex: '1',
					phone: '',
					chatNo: '',
					level: '1',
					remarks: '',
				},
				selectform: {
					level: 'A',
					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: [],
				dataCode: '',
				userInfo: {}, // 用户信息
			}
		},
		computed: {},

		onLoad(e) {
			const {
				dataCode
			} = uni.getStorageSync("weapp_session_userInfo_data");
			this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');

			this.dataCode = dataCode
			console.log(this.userInfo.showPhoneStatus)
			// 先调用借口查询数据
			this.customerId = e.id
			this.initPage()
		},
		methods: {
			initPage() {
				this.getdetail()
				// 获取置业需求
				this.getListByType()
			},

			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 => {
						res.phone = res.phone || ''
						this.form = res
						if (this.userInfo.showPhoneStatus == 1) {
							this.showPhone = this.form.phone
							this.form.phone = this.form.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
						}
						// 给客户等级赋值
						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;
						}
					})
			},

			// 字典表接口
			getListByType() {
				this.$u.get("/matchKeywords/findPersonalMatchData", {
						customerId: this.customerId
					})
					.then(res => {
						console.log(res, '123123123123')
						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;
				// }
				try {
					this.allList.forEach(item => {
						if (item.mustSelected == 0) {
							if (item.children.findIndex(item => item.selected == 0) == -1) {
								throw new Error(item.name)
							}
						}
						item.children.map(item1 => {
							if (item1.selected == 0) {
								str.push(item1.keywordsId)
							}
						})
					})
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: `${e.message}为必选项~`,
						icon: 'none',
						duration: 2000
					})
					return
				}
				str = str.join(',')
				param = this.form
				// 如果是禁用状态就传入明文手机号，如果没禁用则不用更改
				if (this.userInfo.showPhoneStatus == 1) {
					param.phone = this.showPhone
				}
				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%;
		min-height: 100vh;
		background: #F8F8F8;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.conmsg {
		flex-grow: 1;
		flex-shrink: 0;
		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 {
				position: relative;
				width: 100%;
				height: 102rpx;
				display: flex;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				border-bottom: 1px solid #E0E0E0;
				display: flex;
				align-items: center;

				&.mustSe::before {
					content: '*';
					color: red;
					position: absolute;
					left: -10rpx;
					right: -10rpx;
					z-index: 10;
				}
				
				.conmsg-msg-lab-1 {
					flex-shrink: 0;
					display: flex;
					min-width: 136rpx;

					.star {
						color: #E7483C;
					}
				}

				.conmsg-msg-lab-inp {
					margin-left: 44rpx;
					flex-grow: 1;
					display: flex;

					input {
						flex-grow: 1;
					}

				}

				.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>