realty/virgo.wzfrontend/workark_wx/subPages/shopPage/addressAdd/addressAdd.vue

<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="address.name" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model="address.tel" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等"
					v-model="addressShowValue" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="address.addressDetail" />
			</view>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><uv-switch v-model="address.isDefault" @change="changeDefault"></uv-switch></view>
			</view>
			<view class="button">
				<uv-button type="error" shape="circle" @click="save">保存</uv-button>
			</view>
			<view class="button">
				<uv-button type="info" shape="circle" v-if="id!=''" @click="del">删除</uv-button>
			</view>
		</view>
		<uv-picker ref="uPicker" :columns="addressList" keyName="label" :defaultIndex="defaultRegion"
			@confirm="confirmArea" @change="change">
		</uv-picker>
	</view>
</template>

<script>
	import {
		getAddressDetail,
		saveAddress,
		setDefaultAddress,
		deleteAddress
	} from '@/request/api/shop.js'
	import cityData from '../static/js/city.js';
	export default {
		data() {
			return {
				choose: true,
				id: '',
				address: {
					isDefault: false
				},
				defaultRegion: ['', '', ''],
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0]
			};
		},
		computed: {
			addressShowValue() {
				if (this.address.province) {
					return this.address.province + ' ' + this.address.city + ' ' + this.address.district;
				}
			},
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		onLoad(option) {
			this.id = option.id
			if (option.choose) {
				this.choose = option.choose
			}
			if (this.id) {
				this.init()
			} else {
				this.id = ''
				//显示默认的地区
				this.defaultRegion = ["11", "1101", "110101"];
				this.getData();
			}
		},
		methods: {
			async init() {
				let addressData = await getAddressDetail(this.id);
				if (addressData.state) {
					let res = addressData.data;
					const code1 = res.areaCode.substr(0, 2);
					const code2 = res.areaCode.substr(0, 4);
					const code3 = res.areaCode;
					this.defaultRegion = [code1, code2, code3]
					this.address = res;
					this.getData();
				}
			},
			getData() {
				this.provinces = cityData;
				this.handlePickValueDefault();
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => item.value === this.defaultRegion[
					0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => item.value === this.defaultRegion[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => item.value === this.defaultRegion[2]);
				// 重置下位置
				this.$refs.uPicker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
			},
			change(e) {
				const {
					columnIndex,
					index,
					indexs
				} = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.uPicker.setIndexs([index, 0, 0], true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.uPicker.setIndexs(indexs, true)
				}
			},
			setDefault() {},
			showRegionPicker() {
				this.$refs.uPicker.open();
				this.handlePickValueDefault();
			},
			confirmArea(e) {
				this.address.areaCode = e.value[2].value;
				//设置选择器默认值
				this.defaultRegion = [e.value[0].value, e.value[1].value, e.value[2].value];
				//设置输入框值
				this.address = Object.assign({}, this.address)
				this.address.province = e.value[0].label;
				this.address.city = e.value[1].label;
				this.address.district = e.value[2].label;
			},
			async changeDefault(e) {
				if (this.address.id) {
					let setData = await setDefaultAddress(this.address.id, e);
					if (setData.state) this.$toast(e ? '设置默认地址' : '取消默认地址');
				}
			},
			async save() {
				let saveData = await saveAddress(this.address);
				if (saveData.state) {
					let res = saveData.data;
					if (this.choose) {
						let idCarts = uni.getStorageSync('idCarts')
						uni.setStorageSync('chooseAddrId', res.id);
					}
					this.$toast('操作成功');
					uni.navigateBack();
				}
			},
			del() {
				uni.showModal({
					title: 'WORKARK提示',
					content: '是否取消该地址',
					success: async (res) => {
						if (res.confirm) {
							let deleteData = await deleteAddress(this.address.id);
							if (deleteData.state) {
								this.$toast('操作成功');
								uni.navigateBack();
							}
						}
					}
				});

			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx 0rpx;

		.top {
			padding: 0 30rpx;
			background: #ffffff;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $uv-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $uv-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #ffffff;
			font-size: 28rpx;

			.button {
				margin-top: 20rpx;
			}

			.tag {
				display: flex;

				.left {
					width: 160rpx;
				}

				.right {
					display: flex;
					flex-wrap: wrap;

					.tags {
						width: 140rpx;
						padding: 16rpx 8rpx;
						border: solid 2rpx $uv-border-color;
						text-align: center;
						border-radius: 50rpx;
						margin: 0 10rpx 20rpx;
						display: flex;
						font-size: 28rpx;
						align-items: center;
						justify-content: center;
						color: $uv-content-color;
						line-height: 1;
					}

					.plus {
						//padding: 10rpx 0;
					}
				}
			}

			.default {
				display: flex;
				justify-content: space-between;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {}
			}
		}
	}
</style>