hxj/src/pages/sale/cusmter/addCustomer.vue

<template>
	<app-layout :haveBackground="false">
		<view class="tbg">
			<view class="ti">
				请完善客户信息
			</view>
			<image class="bg" src="https://t17.9026.com/web/statics/image/index/addcustomerbg.png" mode=""></image>
			<view class="customerInfo">
				<view class="top">基本信息</view>
				<view class="head" @click="uploadHead">
					<image class="bg"
						:src="form.avatar===''?'https://t17.9026.com/web/statics/image/index/headbg.png':form.avatar" mode="">
					</image>
					<image class="camera" src="https://t17.9026.com/web/statics/image/index/camera.png" mode=""></image>
				</view>
				<view class="main-left cross-center linp border_bottom">
					<view class="field">姓名</view>
					<input type="text" v-model="form.name" placeholder="请输入姓名" placeholder-style="font-size:28rpx" />
				</view>
				<view class="main-left cross-center linp border_bottom">
					<view class="field">手机号</view>
					<input type="text" v-model="form.mobile" placeholder="请输入手机号" placeholder-style="font-size:28rpx" />
				</view>
			</view>
		</view>
		<view class="oinfo" v-for="(item,index) in form.estates" :key="index">
			<view class="main-between cross-center linp border_bottom" >
				<view class="field" style="font-weight: bold;" >{{index===0?'楼盘信息':''}}</view>
				<view class="main-right" style="width: 210rpx;height: 100%;">
					<view class="cross-center curd-btn" @click="addOrDel()" v-if="index==form.estates.length-1">
						<image src="https://t17.9026.com/web/statics/image/sale/tianjia.png" mode=""></image>添加
					</view>
					<view class="cross-center curd-btn" @click="addOrDel(index)" style="margin-left: 30rpx;" v-if="form.estates.length>1">
						<image src="https://t17.9026.com/web/statics/image/sale/shanchu.png" mode=""></image>删除
					</view>
				</view>
			</view>
			<AppAreaPicker @customevent="areaEvent($event,index)" :ids="item.multiIndex" @cancel="areaCancel">
				<view class="main-left cross-center linp border_bottom">
					<view class="field">区域信息</view>
					<input type="text" :value="item.region" disabled placeholder="请选择区域" placeholder-style="font-size:28rpx" />
				</view>
			</AppAreaPicker>
			<view class="main-left cross-center linp border_bottom" @click="selectEstate(index)">
				<view class="field">楼盘名称</view>
				<input type="text" :value="item.estate_name" disabled placeholder="请选择楼盘" placeholder-style="font-size:28rpx" />
			</view>
			<!-- <view class="main-left cross-center linp border_bottom">
				<view class="field">楼盘性质</view>
				<input type="text" value="" placeholder="请选择楼盘性质" placeholder-style="font-size:28rpx"/>
			</view> -->
			<view class="main-left cross-center linp border_bottom">
				<view class="field">楼盘户号</view>
				<view class="main-left cross-center in_in">
					<input type="text" :value="item.estate_no" @input="estate_noInput($event,index)" placeholder="几栋" style="max-width: 120rpx;" placeholder-style="font-size:28rpx" />
					<view class="line_c"></view>
					<input type="text" :value="item.room_no" @input="room_noInput($event,index)" placeholder="几单元几楼几号" style="width: 250rpx;" placeholder-style="font-size:28rpx" />
				</view>
			</view>
		</view>
		<button type="default" class="complete" @click="submit">完成</button>
		<view style="height: 200rpx;"></view>
	</app-layout>
</template>

<script>
	import AppAreaPicker from "@/components/page-component/app-area-picker/app-area-picker.vue"
	import uploadFile from '@/core/upload.js';
	export default {
		components: {
			AppAreaPicker
		},
		data() {
			return {
				formIndex:'',
				form: {
					sale_customer_id: '',
					avatar: '',
					mobile: '',
					name: '',
					estates: []
				}
			};
		},
		onLoad(option) {
			this.form.sale_customer_id=option.id
			if(option.id!=undefined){
				uni.setNavigationBarTitle({
				    title: '编辑客户'
				});
				this.$showLoading()
				this.$request({
					url:this.$api.sale.customer_detail,
					data:{
						sale_customer_id:option.id
					},
					method:'post'
				}).then(res=>{
					if(res.code===0){
						this.form.avatar=res.data.avatar
						this.form.mobile=res.data.mobile
						this.form.name=res.data.name
						for (let i = 0; i < res.data.userEstate.length; i++) {
							let item=res.data.userEstate[i]
							let estateItem={
								estate_id: item.estate_id,
								estate_no: item.estate_no,
								room_no: item.room_no,
								
								regionId:{},
								region:'',
								multiIndex:[item.estate.province_id,item.estate.city_id,item.estate.district_id],
								estate_name: item.estate.name,
							}
							this.form.estates.push(estateItem)
						}
						this.$hideLoading()
					}
				})
			}else{
				uni.setNavigationBarTitle({
				    title: '添加客户'
				});
				this.form.estates.push({
						estate_id: '',
						estate_no: '',
						room_no: '',
						
						regionId:{},
						region:'',
						multiIndex:[],
						estate_name: '',
					})
			}
			
			// wx.enableAlertBeforeUnload({
			// 	message:'还未保存',
			// 	success:()=>{
			// 		console.log('qqqqqqqqqqqqqq')
			// 	}
			// })
		},
		onShow() {
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
			'estateInfo' in currPage.$vm ? this.form.estates[this.formIndex].estate_name = currPage.$vm.estateInfo.name : ''
			'estateInfo' in currPage.$vm ? this.form.estates[this.formIndex].estate_id = currPage.$vm.estateInfo.id : ''
			'estateInfo' in currPage.$vm ? this.form.estates[this.formIndex].multiIndex = currPage.$vm.estateInfo.multiIndex : ''
		},
		methods: {
			addOrDel(i){
				if(i===undefined){
					this.form.estates.push({estate_id: '',estate_no: '',room_no: ''})
				}else{
					if(this.form.estates.length===1)return;
					uni.showModal({
					    title: '提示',
					    content: '确定要删除吗',
					    success: (res)=> {
					        if (res.confirm) {
					            this.form.estates.splice(i,1)
					        } 
					    }
					});
				}
			},
			areaEvent(data,index=this.formIndex) {
				if (data) {
					this.form.estates[index].regionId.province_id = data.province.id;
					this.form.estates[index].regionId.city_id = data.city.id;
					this.form.estates[index].regionId.district_id = data.district.id;
					this.form.estates[index].region = [data.province.name, data.city.name, data.district.name].join('')
				}
			},
			areaCancel(){
				this.region=''
				this.regionId={}
			},
			estate_noInput(e,index){
				this.form.estates[index].estate_no=e.target.value
			},
			room_noInput(e,index){
				this.form.estates[index].room_no=e.target.value
			},
			uploadHead() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res);
						console.log(JSON.stringify(res.tempFilePaths));
						uploadFile({
							url: this.$api.upload.file,
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							fileName: ''
						}).then(res1 => {
							console.log(JSON.parse(res1.data))
							if (JSON.parse(res1.data).code === 0) {
								this.form.avatar = JSON.parse(res1.data).data.url
							}
						})
					}
				});
			},
			selectEstate(index) {
				this.formIndex=index
				uni.navigateTo({
					url: '/pages/sale/properties/addProperties'
				})
			},
			submit(){
				if(this.form.avatar===''){
					uni.showToast({
						title:'请上传头像',
						icon:'none'
					})
					return
				}
				if(this.form.name===''){
					uni.showToast({
						title:'请输入客户姓名',
						icon:'none'
					})
					return
				}
				if(this.form.mobile===''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if(!(/0?(1)[0-9]{10}/.test(this.form.mobile))){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				for (let index = 0; index < this.form.estates.length; index++) {
					let item=this.form.estates[index]
					if(!item.estate_id || !item.estate_no || !item.room_no){
						uni.showToast({
							title:'请填写完整的楼盘信息',
							icon:'none'
						})
						return
					}
				}
				let data={
					avatar:this.form.avatar,
					mobile:this.form.mobile,
					name:this.form.name,
				}
				this.form.sale_customer_id?data.sale_customer_id=this.form.sale_customer_id:''
				for(let i in this.form.estates){
					for (let j in this.form.estates[i]) {
						if(j==='estate_id' || j==='estate_no' || j==='room_no'){
							let key=`estates[${i}][${j}]`
							data[key]=this.form.estates[i][j]
						}
					}
					
				}
				this.$request({
					url:this.$api.sale.customer_save,
					data:data,
					method:'post'
				}).then(res=>{
					if(res.code===0){
						uni.showToast({
							title:this.form.sale_customer_id?'编辑成功':'添加成功',
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}).catch(rej=>{
					uni.showToast({
						title:rej,
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addlp {
		width: 606rpx;
		height: 90rpx;
		border: 1rpx solid #A18353;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #A18353;
		margin-top: 39rpx;
	}

	.complete {
		width: 606rpx;
		height: 90rpx;
		background: #A18353;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 36rpx;
	}

	.oinfo {
		width: 678rpx;
		height: auto;
		background: #FEFEFE;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		padding-bottom: 20rpx;

		.curd-btn {
			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 6rpx;
			}

			font-size: 26rpx;
			font-weight: 500;
			color: #A18353;
		}
	}

	.linp {
		height: 104rpx;
		padding: 0 35rpx;
		.field {
			width: 120rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #222222;
			margin-right: 30rpx;
		}
		input{
			font-size: 28rpx;
		}
		.val {}
		.in_in{
			.line_c{
				width: 21rpx;
				height: 3rpx;
				font-weight: bold;
				background-color: #494848;
				margin-right: 10rpx;
			}
		}
	}

	.border_bottom {

		border-bottom: 1px solid #EAEAEA;
	}

	.tbg {
		width: 100%;
		height: 660rpx;
		position: relative;
		padding-top: 176rpx;

		.ti {
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
			position: absolute;
			top: 75rpx;
			left: 36rpx;
		}

		.bg {
			width: 100%;
			height: 400rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.customerInfo {
			width: 678rpx;
			height: auto;
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin: 0 auto 20rpx;

			.top {
				height: 98rpx;
				background: #FCF7EA;
				font-size: 28rpx;
				font-weight: bold;
				color: #D0C9C1;
				padding: 36rpx 30rpx;
			}

			.head {
				width: 127rpx;
				height: 127rpx;
				position: relative;
				margin: 32rpx auto;
				background-color: #fefefe;
				z-index: 2;

				.bg {
					width: 127rpx;
					height: 127rpx;
					border-radius: 50%;
				}

				.camera {
					width: 41rpx;
					height: 32rpx;
					position: absolute;
					bottom: 5rpx;
					right: -6rpx;
				}
			}
		}
	}
</style>