dingdong-mall/pages/my/edit-service-address.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">编辑地址</block>
		</cu-custom>
		<!-- 地址信息form -->
		<view class="bg-white margin-top-sm">
			<form @submit="submit">
				<view class="cu-form-group">
					<view class="title">联系人</view>
					<input name="name" v-model="formData.name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input name="phone" v-model="formData.phone"></input>
				</view>
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="cu-form-group">
					<view class="title">地址选择</view>
					<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="multiIndex" :range-key="'areaName'" :range="areaList">
						<view class="picker">
							{{formData.provinceName + '-' + formData.cityName + '-' + formData.countryName + '-' + formData.streetName}}
						</view>
					</picker>
				</view>
				<!-- #endif -->
				<view class="cu-form-group">
					<view class="title">详细地址</view>
					<input name="address" v-model="formData.address"></input>
				</view>
				<!-- 底部操作栏 -->
				<view class="cu-bar tabbar border shop fixed-bottom-bar">
					<button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" form-type="submit">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				areaList: [],
				multiIndex: [0, 0, 0],
				formData: {
				},
				mode: 0 // 1为新增，0为修改
			}
		},
		onLoad(options) {
			let params = JSON.parse(decodeURIComponent(options.params));
			console.log(params);		
			if (this.mode === 0) {
				// 修改
				this.fillForm(params);
			}
			this.loadData();
		},
		methods: {
			async loadData() {
				// this.areaList = await this.$api.data('areaList');
				this.loadAreaList();
			},
			fillForm(addressInfo) {
				this.formData = addressInfo && Object.keys(addressInfo).length > 0 ? addressInfo : this.formData;
			},
			async loadAreaList(idArr) {
				let areaList = await this.$request.areaListByStep();
				areaList = areaList.data;
				let col1Code = idArr ? idArr[0] : areaList[0].areaCode;
				let subAreaList = await this.$request.areaListByStep({ parentCode: col1Code });
				subAreaList = subAreaList.data;
				let col2Code = idArr ? idArr[1] : subAreaList[0].areaCode;
				let subSubAreaList = await this.$request.areaListByStep({ parentCode: col2Code });
				subSubAreaList = subSubAreaList.data;
				let col3Code = idArr ? idArr[2] : subSubAreaList[0].areaCode;
				let subSub2AreaList = await this.$request.areaListByStep({ parentCode: col3Code });
				subSub2AreaList = subSub2AreaList.data;
				this.areaList.push(areaList);
				this.areaList.push(subAreaList);
				this.areaList.push(subSubAreaList);
				this.areaList.push(subSub2AreaList);
			},
			regionChange(e) {
				this.multiIndex = e.detail.value;
				let chosenArea = [];
				for(let i = 0; i < this.areaList.length; i++) {
					chosenArea.push(this.areaList[i][this.multiIndex[i]]);
				}
				this.formData.area = chosenArea;
				this.formData.provinceId = chosenArea[0].areaId;
				this.formData.provinceName = chosenArea[0].areaName;
				this.formData.cityId = chosenArea[1].areaId;
				this.formData.cityName = chosenArea[1].areaName;
				this.formData.countryId = chosenArea[2].areaId;
				this.formData.countryName = chosenArea[2].areaName;
				this.formData.streetId = chosenArea[3].areaId;
				this.formData.streetName = chosenArea[3].areaName;
				uni.hideLoading()
			},
			async regionColChange(e) {
				let colObj = e.detail;
				if (colObj.column == 0) {
					let subSubAreaList = [], subSub2AreaList = [];
					// 通过一级查询二级，通过二级查三级
					let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
					subAreaList = subAreaList.data;
					if (subAreaList && subAreaList.length) {
						subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
						subSubAreaList = subSubAreaList.data;
						if(subSubAreaList && subSubAreaList.length) {
							subSub2AreaList = await this.$request.areaListByStep({parentCode: subSubAreaList[0].areaCode});
							subSub2AreaList = subSub2AreaList.data;
						}
					}
					this.areaList[1] = subAreaList
					this.areaList[2] = subSubAreaList
					this.areaList[3] = subSub2AreaList
					this.multiIndex = [colObj.value, 0, 0, 0];
				} else if (colObj.column == 1) {
					let subSub2AreaList = []
					// 通过二级查三级
					let subSubAreaList = await this.$request.areaListByStep({parentCode: this.areaList[1][colObj.value].areaCode});
					subSubAreaList = subSubAreaList.data;
					if (subSubAreaList && subSubAreaList.length) {
						subSub2AreaList = await this.$request.areaListByStep({parentCode: subSubAreaList[0].areaCode});
						subSub2AreaList = subSub2AreaList.data;
					}
					this.areaList[2] = subSubAreaList
					this.areaList[3] = subSub2AreaList
					this.multiIndex = [this.multiIndex[0], colObj.value, 0, 0];
				} else if (colObj.column == 2) {
					// 通过二级查三级
					let subSubAreaList = await this.$request.areaListByStep({parentCode: this.areaList[2][colObj.value].areaCode});
					subSubAreaList = subSubAreaList.data;
					this.areaList[3] = subSubAreaList;
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], colObj.value, 0];
				}
			},
			validateForm(addressInfo) {
				let valid = Boolean(addressInfo.name) &&
					Boolean(addressInfo.phone) &&
					Boolean(addressInfo.address) &&
					Boolean(addressInfo.provinceName) && 
					Boolean(addressInfo.cityName) && 
					Boolean(addressInfo.countryName) && 
					Boolean(addressInfo.streetName)
				
				if (!valid) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none',
						mask: true
					})
				} else if (!this.$validate.validContactNum(addressInfo.phone)) {
					valid = false;
					uni.showToast({
						title: '联系号码格式错误',
						icon: 'none',
						mask: true
					})
				}
				return valid;
			},
			async submit(e) {
				const confirmFormData = Object.assign({}, this.formData, e.detail.value)
				let formValid = this.validateForm(confirmFormData);
				if (formValid) {
					uni.$emit(this.$globalFun.CHOOSE_ADDRESS, confirmFormData);
					uni.navigateBack({
						delta: -1
					})
				}
			}
		}
	}
</script>

<style>
</style>