xiyi/pages/set/addressManage.vue

<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">省市区</text>
			<picker mode="multiSelector" :range="areaJs" range-key="name" :value="addressIndex"
				@columnchange="onCityClick" @change="changeArea">
				<view v-if="addressDetail">{{ addressDetail }}</view>
				<view v-else class="font-color-gray">请选择省市区</view>
			</picker>
		</view>
		<view class="row b-b" v-if="showl">
			<text class="tit">乡/镇/街道</text>
			<!-- range-key -->
			<picker :range="array" @change="changeCity" mode="selector" range-key="name" :value="addressDetailCitys">
				<view v-if="addressDetailCity && addressDetailCity.name">{{ addressDetailCity.name}}</view>
				<view v-else class="font-color-gray">请选择乡/镇/街道</view>
			</picker>
		</view>
		<view class="row b-b">
			<text class="tit">门牌号</text>
			<input class="input" type="text" v-model="addressData.area" placeholder="楼号、门牌"
				placeholder-class="placeholder" />
		</view>
		<uni-list class="margin-t-20">
			<uni-list-item title="设为默认" :switch-checked="addressData.default" :show-switch="true" :show-arrow="false"
				switch-color="#ff4c4c" @switchChange="switchChange"></uni-list-item>
		</uni-list>

		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		addressEdit
	} from '@/api/user.js';
	import {
		getAddressArea,
		getAddressCity,
		getAddressDetail
	} from '@/api/set.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniList,
			uniListItem,
			uniPopup
		},
		data() {
			return {
				array: [],
				showl: false, //设置是否隐藏村镇选择
				addressIndex: [0, 0, 0], //当前选中的省市区
				addressIndexCity: {name: ''}, //当前选中的村镇
				addressDetail: '', //省市区名称
				addressDetailCity: {}, //村镇名称
				addressDetailCitys:0,
				addressData: {
					name: '',
					mobile: '',
					area: '',
					default: false,
					id: ''
				},
				type: 'add', //判断当前加载类型
				loadCityp: false //判断是否已经初次加载过数据
			};
		},
		computed: {
			...mapState('address', ['area', 'city']),
			bindPickerChange(e) {
				console.log(e);
			},
			// 省市区动态渲染列表
			areaJs() {
				if (this.area.length > 0) {
					const index1 = this.addressIndex[0];
					console.log(this.addressIndex, this.area[index1], this.area[index1].child[this.addressIndex[1]]);
					return [this.area, this.area[index1].child, this.area[index1].child[this.addressIndex[1]].child];
				}
			},
			// 村镇切换渲染
			cityJs() {
				if (this.city.length > 0) {
					// const index1 = this.addressIndexCity[0];
					// return [this.city];
					console.log(this.city,'this.city');
					return this.city
				}
			}
		},
		onLoad(option) {
			let title = '新增收货地址';
			this.type = option.type;
			if (this.type === 'edit') {
				title = '编辑收货地址';
				this.getAddressDetail(option.id);
				// this.addressDetail = data.province + data.city + data.district;
			}
			if (this.type === 'add') {
				console.log('');
				this.loadCityp = true;
				this.init();
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			});
		},
		methods: {
			...mapMutations('address', ['setArea', 'setCity']),
			// 初始化
			init() {
				if (this.area.length <= 0) {
					// 获取省市区信息
					this.getAddressArea();
				} else {
					if (this.type == 'edit' && !this.loadCityp) {
						this.changeArea();
					}
				}
			},
			// 获取地址详情
			getAddressDetail(id) {
				getAddressDetail({}, id)
					.then(e => {
						let address = this.addressData;
						let data = e.data;
						address.name = data.real_name; //保存用户姓名
						address.mobile = data.phone; //保存用户手机号
						address.area = data.detail; //保存用户详细地址
						address.default = data.is_default == 1 ? true : false; //保存是否默认地址
						address.id = data.id;
						// 开始加载村镇信息
						let arr = e.data.address_arr.split(',');
						let ar1 = [];
						let ar2 = [];
						for (var i = 0; i < 4; i++) {
							if (i < 3) {
								ar1.push(arr[i]);
							}
							if (i >= 3) {
								this.addressDetailCitys = arr[i]
								// 判断是否有值
								// if (arr[i]) {
								// 	ar2.push(arr[i]);
								// } else {
								// 	ar2.push(0);
								// }
							}
						}
						this.addressIndex = ar1;
						// this.addressIndexCity = ar2;
						// 开始初始化
						this.init();
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 获取省市区信息
			getAddressArea() {
				getAddressArea().then(e => {
					this.setArea(e.data);
					// this.getAddressCity(e.data[0].child[0].child[0].city_id);
					// 判断是否为修改
					if (this.type == 'edit' && !this.loadCityp) {
						console.log('初始化数据');
						this.changeArea();
					}
				});
			},
			// 获取村镇信息
			getAddressCity(id) {
				// uni.showLoading({
				// 	title: '村镇数据加载中....',
				// 	mask: true
				// });
				getAddressCity({
						pid: id
					})
					.then(e => {
						this.array = e.data
						this.setCity(e.data);
						if (e.data.length > 0) {
							this.showl = true
						} else {
							this.showl = false
						}
						if (!this.loadCityp && this.type == 'edit') {
							this.loadCityp = true;
							this.changeCity({
								detail: {
									value: this.addressDetailCitys
								}
							});
						}
					})
					.catch(e => {
						console.log(e);
						// uni.hideLoading();
					});
			},
			//省市区确认后村镇数据更新
			changeArea() {
				if (this.area.length > 0) {
					const index0 = this.addressIndex[0];
					const index1 = this.addressIndex[1];
					const index2 = this.addressIndex[2];
					this.addressDetail = this.areaJs[0][index0].name + this.areaJs[1][index1].name + this.areaJs[2][index2]
						.name;
					// 判断是否已经加载过修改
					if (this.loadCityp) {
						// 初始化选中的村镇
						this.addressDetailCity = {};
						this.addressDetailCitys = ''
					}
					this.getAddressCity(this.areaJs[2][index2].city_id);
				} else {
					this.addressDetail = '';
				}
			},
			// 村镇切换
			changeCity(e) {
				console.log(e);
				this.addressDetailCity = this.array[e.detail.value]
				this.addressDetailCitys = e.detail.value
				console.log(this.addressDetailCity,'this.addressDetailCity');
				// if (this.city.length > 0) {
				// 	const index0 = this.addressIndexCity[0];
				// 	const index1 = this.addressIndexCity[1];
				// 	// this.addressDetailCity = this.cityJs[0][index0].name + this.cityJs[1][index1].name;
				// } else {
				// 	this.addressDetailCity = '';
				// }
			},
			// 选中省市区切换
			onCityClick(data) {
				// 采用map防止直接修改无法触发数组set事件
				this.addressIndex = this.addressIndex.map((e, ind) => {
					if (data.detail.column < ind) {
						e = 0;
					}
					if (ind == data.detail.column) {
						e = data.detail.value;
					}
					return e;
				});
			},
			// 选中村镇切换
			onCityChange(data) {
				// 采用map防止直接修改无法触发数组set事件
				this.addressIndexCity = this.addressIndexCity.map((e, ind) => {
					if (data.detail.column < ind) {
						e = 0;
					}
					if (ind == data.detail.column) {
						e = data.detail.value;
					}
					return e;
				});
			},
			//地图选择地址
			chooseLocation() {
				uni.chooseLocation({
					success: data => {
						this.addressData.addressName = data.name;
						this.addressData.address = data.name;
					}
				});
			},
			// 设置是否为默认地址
			switchChange(e) {
				this.addressData.default = e.value;
			},
			//提交
			confirm() {
				let obj = this;
				let data = this.addressData;
				if (!data.name) {
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!data.area) {
					this.$api.msg('请填写门牌号信息');
					return;
				}
				if (!this.addressDetail) {
					this.$api.msg('请选择省市区');
					return;
				}
				if(this.array.length > 0 && !this.addressDetailCity.city_id) {
					this.$api.msg('请选择乡/镇/街道');
					return;
				}
				// 数组
				let address = [];
				let arrObj = [];
				// 保存省市区信息
				this.areaJs.forEach((e, ind) => {
					arrObj.push(this.addressIndex[ind]);
					address.push({
						city_id: e[this.addressIndex[ind]].city_id,
						name: e[this.addressIndex[ind]].name
					});
				});
				console.log(arrObj,'arrObj');
				if(this.addressDetailCity && this.addressDetailCity.id) {
					address.push({
						city_id:this.addressDetailCity.city_id,
						name: this.addressDetailCity.name
					})
					arrObj.push(this.addressDetailCitys)
				}
				
				// 保存村镇信息
				// if (this.cityJs && this.cityJs.length > 0) {
				// 	this.cityJs.forEach((e, ind) => {
				// 		arrObj.push(this.addressIndexCity[ind]);
				// 		address.push({
				// 			city_id: e[this.addressIndexCity[ind]].city_id,
				// 			name: e[this.addressIndexCity[ind]].name
				// 		});
				// 	});
				// }
				// if(this.addressDetailCity.id) {
				// 	address.push({
				// 		city_id: e[this.addressIndex[ind]].city_id,
				// 		name: e[this.addressIndex[ind]].name
				// 	});
				// }
				console.log(address);
				uni.showLoading({
					title: '提交中....',
					mask: true
				});
				addressEdit({
						real_name: data.name,
						phone: data.mobile,
						address: {
							province: address[0].name,
							city: address[1].name,
							district: address[2].name,
							street: address[3] ? address[3].name : '', //街道
							// village: address[4] ? address[4].name : '', //村
							city_id: address[address.length - 1].city_id //保存id
						},
						address_arr: arrObj,
						detail: data.area,
						is_default: data.default,
						id: data.id || '',
						type: 0
					})
					.then(function(e) {
						uni.hideLoading();
						uni.showToast({
							title: '提交成功',
							duration: 2000
						});
						obj.$api.prePage().refreshList();
						setTimeout(function() {
							uni.navigateBack();
						}, 800);
					})
					.catch(e => {
						uni.hideLoading();
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16rpx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30rpx;
		height: 110rpx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 120rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16rpx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16rpx) scale(0.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10rpx;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.alert-box {
		background-color: #ffffff;
	}
</style>