mp-ui-user/src/packageOperate/address/create.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :title="addrId ? '编辑地址' : '添加地址'" :border="true" :placeholder="true" :autoBack="true"
			bgColor="#fff" leftIconSize="0" />
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<u-navbar :title="addrId ? '编辑地址' : '添加地址'" :border="true" :placeholder="true" :autoBack="true"
			bgColor="#fff" />
		<!-- #endif -->
		
		<!-- 表单组件 -->
		<view class="address-add">
			<u-form labelPosition="left" ref="form" labelWidth="90">
				<u-form-item label="收货人:" borderBottom required>
					<u-input v-model="form.receiver" border="none" placeholder="请输入收货人"></u-input>
				</u-form-item>
				<u-form-item label="手机号码:" borderBottom required>
					<u-input v-model="form.mobile" type="number" border="none" placeholder="请输入手机号码"></u-input>
				</u-form-item>
				<u-form-item label="所在地区:" borderBottom required @click="selectArea">
					<u-input v-model="form.cityShow" border="none" disabled disabledColor="#ffffff"
						placeholder="请选择地区">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="详细地址:" :borderBottom="false" required>
					<u-textarea v-model="form.addr" placeholder="请输入详细地址"></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<!-- 底部操作按钮 -->
		<view class="footer-fixed">
			<view class="btn-wrapper">
				<button type="default" @click="saveAddress">保存</button>
			</view>
		</view>

		<area-picker :area-show="areaShow" @cancel="cancel" @confirmArea="confirmArea" />
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	import AreaPicker from '../../components/area-picker/area-picker.vue'
	export default {
		components: {
			AreaPicker
		},
		data() {
			return {
				loading: false,
				addrId: '',
				form: {
					receiver: '',
					mobile: '',
					name: '',
					cityShow: '',
					addr: '',
					provinceId: '', // 省ID/编码
					province: '', // 省
					cityId: '', // 市ID/编码
					city: '', // 市
					areaId: '', // 区ID/编码
					area: '', // 区
				},
				areaShow: false,
			}
		},

		onLoad(options) {
			if (options.addrId) {
				this.addrId = options.addrId
				this.getAddrDetail()
			}
		},

		methods: {
			getAddrDetail() {
				uni.hideLoading();
				$http.post('/api/v1/mp/user/addr/query', {
					addrId: this.addrId
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						let item = res.data
						this.form = {
							...item,
							cityShow: `${ item.province }-${ item.city }-${ item.area }`
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			selectArea() {
				this.areaShow = true
			},
			
			cancel(){
				this.areaShow = false
			},

			confirmArea(obj) {
				this.form.province = obj.province
				this.form.provinceId = obj.provinceId
				this.form.city = obj.city
				this.form.cityId = obj.cityId
				this.form.area = obj.area
				this.form.areaId = obj.areaId
				this.form.cityShow = obj.cityShow
				this.areaShow = false
			},

			saveAddress() {
				let _this = this
				if (!_this.form.receiver) {
					uni.$u.toast('请输入收货人');
					return
				}
				if (!_this.form.mobile) {
					uni.$u.toast('请输入手机号码');
					return
				}
				const rule = /^[1][0-9][0-9]{9}$/
				if (!rule.test(_this.form.mobile)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}
				if (!_this.form.cityShow) {
					uni.$u.toast('请选择所在地区');
					return
				}
				if (!_this.form.addr) {
					uni.$u.toast('请输入详细地址');
					return
				}
				let url = this.addrId ? '/api/v1/mp/user/addr/update' : '/api/v1/mp/user/addr/create'
				$http.post(url, this.form).then(res => {
					if (res.code == 0) {
						uni.$u.toast('保存成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.address-add {
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #FFFFFF;
		padding: 40rpx;
		margin: 20rpx;
	}

	// 底部操作栏
	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		min-height: 120rpx;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;

		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.btn-wrapper {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
		}

		::v-deep button {
			width: 80%;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: $uni-bg-color;
			border: none;
			border-radius: 44rpx;
			margin: 0 auto;
		}
	}
</style>