ysg/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>
			<!-- range是你要显示的数组，range-key是数组中你要显示的那一项，range-key="{{'label'}}" ，range-key中的数据要加引号！！！！！才生效！ -->
			<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>
			<picker mode="multiSelector" :range="cityJs" range-key="name" :value="addressIndexCity" @columnchange="onCityChange" @change="changeCity">
				<view v-if="addressDetailCity">{{ addressDetailCity }}</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 {
			showl: false,//设置是否隐藏村镇选择
			addressIndex: [0, 0, 0], //当前选中的省市区
			addressIndexCity: [0, 0], //当前选中的村镇
			addressDetail: '', //省市区名称
			addressDetailCity: '', //村镇名称
			addressData: {
				name: '',
				mobile: '',
				area: '',
				default: false,
				id: ''
			},
			type: 'add', //判断当前加载类型
			loadCityp: false //判断是否已经初次加载过数据
		};
	},
	computed: {
		...mapState('address', ['area', 'city']),
		// 省市区动态渲染列表
		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, this.city[index1].child];
			}
		}
	},
	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 < 5; i++) {
						if (i < 3) {
							ar1.push(arr[i]);
						}
						if (i >= 3) {
							// 判断是否有值
							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({}, id)
				.then(e => {
					uni.hideLoading();
					this.setCity(e.data);
					if(e.data.length > 0) {
						this.showl = true
					}else {
						this.showl = false
					}
					if (!this.loadCityp) {
						this.loadCityp = true;
						this.changeCity();
					}
				})
				.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.addressIndexCity = [0, 0];
					this.addressDetailCity = '';
				}
				this.getAddressCity(this.areaJs[2][index2].city_id);
			} else {
				this.addressDetail = '';
			}
		},
		// 村镇切换
		changeCity(e) {
			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;
			}
			// 数组
			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
				});
			});
			// 保存村镇信息
			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
					});
				});
			}
			console.log(address);
			uni.showLoading({
				title: '提交中....',
				mask: true
			});
			//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
			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>