project/mobile-shop/pages/addressList/addressList.vue

<template>
	<view class="addressList">
		<van-cell-group>
			<van-field :value="addressInfo.receiver" required clearable label="姓名" placeholder="请输入姓名"
				@change="onChange1" />
			<van-field :value="addressInfo.mobile" label="电话" placeholder="请输入电话号码" required @change="onChange2" />
			<van-field :value="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @tap="onClick" />
			<van-popup :show="show" round position="bottom">
				<van-cascader v-if="show" :field-names="fieldNames" :value="cascaderValue" title="请选择所在地区"
					:options="options" @close="onClose" @finish="onFinish" />
			</van-popup>

			<van-field :value="addressInfo.addr" placeholder="街道门牌楼层房间号等信息" @change="onChange3" />
			<view class="switch">
				<text>是否是默认地址</text>
				<van-switch :checked="checked" @change="onChange4" disabled />
			</view>
		</van-cell-group>
		<view class="btn1">
			<van-button type="danger" round size="large" @click="onSave" v-if="addressInfo.addrId == 0">保 存</van-button>
			<van-button type="danger" round size="large" @click="onSave" v-if="addressInfo.addrId != 0">修 改</van-button>
		</view>
		<van-button type="default" round size="large" v-if="addressInfo.addrId != 0" @click="delMain">删 除</van-button>
	</view>
</template>

<script>
	import {
		addAddr,
		listByPid,
		updateAddr,
		deleteAddress
	} from '@/api/address.js'
	import addressData from '@/json/areas.json'
	export default {
		data() {
			return {
				checked: false,
				addressInfo: {
					addrId: 0,
					receiver: "",
					addr: "",
					postCode: "",
					mobile: "",
					provinceId: 0,
					cityId: 0,
					areaId: 0,
					province: "",
					city: "",
					area: "",
					commonAddr: null,
				},
				show: false,
				fieldNames: {
					text: 'label',
					value: 'value',
					children: 'children',
				},
				options: [],
				fieldValue: '',
				cascaderValue: '',
			}
		},
		onLoad(options) {
			if (options) {
				this.addressInfo = JSON.parse(options.data);
				this.checked = this.addressInfo.commonAddr == 1 ? true : false;
			}
		},
		onShow() {
			this.options = addressData;
		},
		methods: {
			onClick() {
				this.show = true;
			},
			onClose() {
				this.show = false;
			},
			onFinish(e) {
				const selectedOptions = e.detail.selectedOptions;
				const value = e.detail.value;
				const fieldValue = selectedOptions.map((option) => option.text || option.label).join('/');
				const newId = selectedOptions.map(obj => obj[Object.keys(obj)[0]]);
				this.addressInfo.provinceId = newId[0];
				this.addressInfo.cityId = newId[1];
				this.addressInfo.areaId = newId[2];
				const newValue = selectedOptions.map(obj => obj[Object.keys(obj)[1]]);
				this.addressInfo.province = newValue[0];
				this.addressInfo.city = newValue[1];
				this.addressInfo.area = newValue[2];
				this.fieldValue = fieldValue;
				this.cascaderValue = value;
			},
			onChange1(event) {
				this.addressInfo.receiver = event.detail;
			},
			onChange2(event) {
				this.addressInfo.mobile = event.detail;
			},
			onChange3(event) {
				this.addressInfo.addr = event.detail;
			},
			onChange4(event) {
				this.checked = event.detail;
				this.addressInfo.commonAddr = this.checked === true ? 1 : 0;
			},
			delMain() {
				if (this.addressInfo.commonAddr == 1) {
					uni.showToast({
						title: "默认地址不能删除",
						icon: "exception"
					})
				} else {
					deleteAddress(this.addressInfo.addrId).then(res => {
						uni.navigateBack({
							url: '/pages/address/address'
						})
					})
				}
			},
			// 保存 or 修改
			async onSave() {
				const province = await listByPid({
					pid: 0
				})
				province.map(async (result) => {
					if (this.addressInfo.province === result.areaName) {
						this.addressInfo.provinceId = result.areaId
						const city = await listByPid({
							pid: result.areaId
						})
						city.map(async (result) => {
							if (this.addressInfo.city === result.areaName) {
								this.addressInfo.cityId = result.areaId
								const city = await listByPid({
									pid: result.areaId
								})
								city.map(async (result) => {
									if (this.addressInfo.area === result
										.areaName) {
										this.addressInfo.areaId = result.areaId
										const postData = {
											receiver: this.addressInfo
												.receiver,
											addr: this.addressInfo.addr,
											mobile: this.addressInfo.mobile,
											province: this.addressInfo
												.province,
											provinceId: this.addressInfo
												.provinceId,
											city: this.addressInfo.city,
											cityId: this.addressInfo.cityId,
											area: this.addressInfo.area,
											areaId: this.addressInfo.areaId,
											commonAddr: this.addressInfo
												.commonAddr
										}
										if (this.addressInfo.addrId) {
											postData.addrId = this.addressInfo
												.addrId
											updateAddr(postData).then(() => {
												uni.navigateBack({
													url: "/pages/address/address"
												})
											})
										} else {
											addAddr(postData).then(() => {
												uni.navigateBack({
													url: "/pages/address/address"
												})
											})
										}
										this.addressInfo = {}
									}
								})
							}
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.addressList {
		padding: 0 25rpx;

		.switch {
			width: 90%;
			height: 90rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.btn1 {
			margin: 30rpx 0;
		}
	}
</style>