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

<template>
	<view>
		<u-navbar :title="addrId ? '编辑地址' : '添加地址'" :border="true" :placeholder="true" :autoBack="true"
			bgColor="#fff" />
		<!-- 表单组件 -->
		<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="save-btn">
			<button :loading="loading" type="default" @click="saveAddress">保存</button>
		</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 {
		background-color: #FFFFFF;
		padding: 40rpx;
	}

	/* 底部操作栏 */

	.save-btn {
		padding: 50rpx 20rpx;

		/deep/ button {
			line-height: 76rpx;
			font-size: 28rpx;
			height: 76rpx;
			color: #fff;
			background-color: $uni-bg-color;
			border: none;
			border-radius: 100rpx;
		}
	}
</style>