xiongmao/pages/my/add-address/add-address.vue

<!-- 添加收货地址 -->
<template>
	<view class="wrap">
		<view class="list">
			<view class="item">
				<view class="label">
					收货人
				</view>
				<input type="text" v-model="params.name" class="input" placeholder="请填写收货人姓名" placeholder-class="placeholder" />
			</view>
			<view class="item">
				<view class="label">
					手机号码
				</view>
				<input type="text" v-model="params.phone" class="input" placeholder="请填写手机号码"
					placeholder-class="placeholder" />
			</view>
			<view class="item">
				<view class="label">
					所在地区        
				</view>
				<picker
					class="picker" 
					mode="multiSelector"
					range-key="short_name"
					@change="bindPickerChange"
					@columnchange="bindColumnchange"
					:value="addressPickerValue"
					:range="addressPickerData"
				>
					<input
						class="input"
						disabled
						:value="addressPickerValueStr"
						placeholder="省、市、区、街道"
						placeholder-class="placeholder" /> 
				</picker>
				<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
			</view>
			<view class="item-other">
				<view class="label">
					详细地址
				</view>
				<textarea class="textarea" v-model="params.detail" placeholder="小区楼栋/乡村名称"
					placeholder-class="placeholder" />
			</view>
			<view class="item">
				<view class="row-between">
					设为默认地址
					<switch :checked="select" style="transform: scale(0.5);" color="#F2501A" @change="switchChange" />
				</view>
			</view>
		</view>
		<view class="btn-box">
			<button type="default" class="active" @tap="setDeliveryAddress()">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		areaGetAreaChildrenByID,
		userManageGetDeliveryAddressDetail,
		userManageSetDeliveryAddress
	} from '../../../common/service.js'; 
	import { validatorFun } from '../../../common/utils/util';

	export default {
		data() {
			return {
				select: false,

				params: {
					id: 0,  // 收货地址记录id（不传值是添加）
					pro_name: '',  // 省名
					city_name: '',  // 市名
					county_name: '',  // 县区名
					street_name: '',  // 街道
					detail: '',  // 详细地址
					phone: '',  // 联系电话
					name: '',  // 联系人
					is_mr: 0,  // 是否是默认（0不默认，1默认）
				},
				
				// 地址
				addressPickerData: [[], [], [], []],
				addressPickerDataNames: [[], [], [], []],
				addressPickerValue: [0, 0, 0, 0],
				addressPickerValueStr: '',
			}
		},
		onLoad(option) {
			const id = parseInt(option.id || 0);
			if (id > 0) {
				this.params.id = id;
				this.getDetail();
			} else {
				this.getAreaChildrenByID();
			}
		},
		methods: {
			setDeliveryAddress() {
				const params = this.params;
				const errList = validatorFun(params, [
					['name', ['notNull', '请输入收货人']],
					['phone', ['notNull', '请输入手机号码'], ['isMobile', '请输入正确手机号']],
					['pro_name', ['notNull', '请输入选择所在地区']],
					['city_name', ['notNull', '请输入选择所在地区']],
					['county_name', ['notNull', '请输入选择所在地区']],
					['street_name', ['notNull', '请输入选择所在地区']],
					['detail', ['notNull', '请输入详细地址']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				userManageSetDeliveryAddress({
					data: params,
					success: ({code, msg, data}) => {
						if (code == 1) {
							uni.navigateBack({
								delta: 1,
							});
						}
						uni.showToast({
							icon: 'none',
							title: msg,
						});
					}
				});
			},
			getDetail() {
				userManageGetDeliveryAddressDetail({
					data: { id: this.params.id },
					success: ({code, msg, data})=> {
						if (code == 1) {
							const {
								id,
								pro_id,
								city_id,
								county_id,
								pro_name,
								city_name,
								county_name,
								street_name,
								detail,
								phone,
								name,
								is_mr,
							} = data;
							this.params = {
								id,
								pro_name,
								city_name,
								county_name,
								street_name,
								detail,
								phone,
								name,
								is_mr,
							};
							const arr = [
								pro_name,
								city_name,
								county_name,
								street_name,
							];
							this.select = is_mr == 1;
							this.addressPickerValueStr = arr.join(' ');
							let count = 0;
							const fn = (id2 = 0, idx2, level = 1) => {
								const name = arr.splice(0, 1)[0];
								this.getAreaChildrenByID(id2, idx2, level, level, () => {
									const idx = this.addressPickerDataNames[level - 1].indexOf(name);
									if ( arr.length > 0 ) {
										let id3 = this.addressPickerData[level - 1][idx].id;
										fn(id3, idx, level + 1);
									} else {
										this.getAreaChildrenByID(0, idx, level + 1, level);
									}
								});
							}
							fn();
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					}
				});
			},
			switchChange(e) {
				this.select = e.detail.value;
				this.params.is_mr = e.detail.value ? 1 : 0;
			},
			getAreaChildrenByID(id = 0, idx = 0, level = 1, maxLevel = 4, callback) {
				const list = [...this.addressPickerData];
				const listIds = [...this.addressPickerDataNames];
				const vals = [...this.addressPickerValue];
				vals[level - 2] = idx;
				const fn = (id = 0, level2 = 1) => {
					if (level2 > maxLevel) {
						this.$set(this, 'addressPickerData', list);
						this.$set(this, 'addressPickerDataNames', listIds);
						this.$set(this, 'addressPickerValue', vals);
						callback && callback();
						return;
					}
					areaGetAreaChildrenByID({
						data: {id},
						success: ({code, msg, data}) => {
							if (code == 1) {
								list[level2 - 1] = data.list;
								listIds[level2 - 1] = data.list.map(item => item.name);
								vals[level2 - 1] = 0;
								fn(data.list[0].id, level2 + 1);
							} else {
								uni.showToast({
									icon: 'none',
									title: msg,
								});
							}
						}
					});
				};
				fn(id, level);
			},
			selectedDefault: function() {
				this.select = !this.select;
			},
			bindPickerChange(e) {
				const [pIdx, cIdx, aIdx, sIdx] = e.detail.value;
				const [province, city, area, street] = this.addressPickerData;
				this.addressPickerValue = e.detail.value;
				this.addressPickerValueStr = `${province[pIdx].name} ${city[cIdx].name} ${area[aIdx].name} ${street[sIdx].name}`;
				this.params.pro_name = province[pIdx].name;
				this.params.city_name = city[cIdx].name;
				this.params.county_name = area[aIdx].name;
				this.params.street_name= street[sIdx].name;
			},
			bindColumnchange(e) {
				const {column, value} = e.detail;
				this.getAreaChildrenByID(this.addressPickerData[column][value].id, value, column + 2);
			},
		}
	}
</script>
<style scoped lang="scss">
	@import "./add-address.css";
</style>