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;">
						<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>
					<view class="conmsg-msg-lab-inp">
						<input type="number" @focus="callPhoneFocus" @blur="callPhoneBlur" placeholder="请输入联系电话" placeholder-style="color:#B2B2B2;" maxlength="11"
							v-model="form.showPhone" />
					</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" :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':'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
				userInfo: {}, // 当前用户信息
			}
		},
		onLoad(e) {
			this.userInfo = uni.getStorageSync("weapp_session_userInfo_data");
			console.log()
			this.dataCode = this.userInfo.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
						}
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
			// 选择客户来源
			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
						if (!this.form.phone) {
							this.form.showPhone = '--'
						} else {
							if (this.form.isShow == 1 && this.form.phone.length == 11) {
								this.form.showPhone = this.form.phone.substr(0, 3) + '****' + this.form.phone.substr(7)
								
							} else {
								this.form.showPhone = this.form.phone
							}
						}
						this.form.showPhones = this.form.showPhone
						// 给客户等级赋值
						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
					})
			},
			
			// 输入框获取焦点
			callPhoneFocus() {
				if (this.form.isShow == 1 && this.form.showPhone == this.form.showPhones) {
					this.form.showPhone = ''
					this.$forceUpdate()
				}
			},
			
			// 输入框失去焦点
			callPhoneBlur() {
				if (this.form.isShow == 1 && this.form.showPhone == '') {
					this.form.showPhone = this.form.showPhones
					this.$forceUpdate()
				}
			},
			// 提交
			submit() {
				let param = {}
				let str = []
				if (this.form.name == '') {
					uni.showToast({
						title: '请输入客户姓名',
						icon: 'none'
					})
					return
				}
				
				if (this.form.showPhones != this.form.showPhone) {
					this.form.phone = this.form.showPhone
				}
				let isPass = false // 默认通过
				let indexs = 0; // 
				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
				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 {
				position: relative;
				height: 102rpx;
				display: flex;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				border-bottom: 1px solid #E0E0E0;
				line-height: 102rpx;

				&.mustSe::before {
					content: '*';
					color: red;
					position: absolute;
					left: -10rpx;
					right: -10rpx;
					z-index: 10;
				}

				.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;
		border-bottom: 1px solid #E0E0E0;
		padding-bottom: 16rpx;

		.chebox {
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 25rpx;
			margin-right: 20rpx;
			border: 1px solid #E0E0E0;
			box-sizing: border-box;
			padding: 0 10rpx;
			border-radius: 12rpx;
			min-width: 150rpx;
			text-align: center
		}
	}

	.sexchose {
		width: 120rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 1px solid #E0E0E0;
		text-align: center;
		line-height: 60rpx;
		margin-right: 20rpx;

	}
</style>