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

<template>
	<view>
		<u-navbar :title="addrId ? '编辑地址' : '添加地址'" :border="true" :placeholder="true" :autoBack="true"
			leftIconColor="#fff" bgColor="#E96737" />
		<!-- 表单组件 -->
		<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" 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>

		<u-picker ref="uPicker" :show="show" :columns="columns" @change="changeHandler" @confirm="confirm"
			@cancel="cancel" keyName="areaName"></u-picker>
	</view>
</template>

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

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.addrId = options.addrId
			if (options.addrId) {
				this.getAddrDetail()
			}
		},

		methods: {
			getAddrDetail() {
				$http.post('/api/v1/mp/channel/mall/addr/query', {
					addrId: this.addrId
				}).then(res => {

					if (res.code == 0) {
						let item = res.data
						this.form = {
							...item,
							cityShow: `${ item.province }-${ item.city }-${ item.area }`
						}
					}
				})
			},

			async getArea() {
				const picker = this.$refs.uPicker

				let provinceRes = await $http.post('/api/v1/mp/area/listByPid', {
					pid: 0
				})

				let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
					pid: provinceRes && provinceRes.data && provinceRes.data[0].areaId
				})
				let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
					pid: cityRes && cityRes.data && cityRes.data[0].areaId
				})
				picker.setColumnValues(0, provinceRes.data)
				picker.setColumnValues(1, cityRes.data)
				picker.setColumnValues(2, areaRes.data)

			},
			selectArea() {
				this.getArea()
				this.show = true
			},

			async changeHandler(e) {
				const {
					columnIndex,
					index,
					value,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
						pid: value && value[0].areaId
					})
					let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
						pid: cityRes && cityRes.data && cityRes.data[0].areaId
					});
					picker.setColumnValues(1, cityRes.data)
					picker.setColumnValues(2, areaRes.data)
				}
				if (columnIndex === 1) {
					let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
						pid: value && value[1].areaId
					})
					picker.setColumnValues(2, areaRes.data)
				}


			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				const picker = this.$refs.uPicker
				const {
					value
				} = e
				this.form.province = value[0].areaName
				this.form.provinceId = value[0].areaId
				this.form.city = value[1].areaName
				this.form.cityId = value[1].areaId
				this.form.area = value[2].areaName
				this.form.areaId = value[2].areaId
				this.form.cityShow = value.map(item => item.areaName).join('-')
				this.show = false
				picker.setColumnValues(0, [])
				picker.setColumnValues(1, [])
				picker.setColumnValues(2, [])
			},
			cancel() {
				this.show = false
			},

			saveAddress() {
				// receiver: '',
				// mobile: '',
				// city: '',
				// addr: '',
				// privinceId: '', // 省ID/编码
				// privince: '', // 省
				// cityId: '', // 市ID/编码
				// city: '', // 市
				// areaId: '', // 区ID/编码
				// area: '', // 区
				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/channel/mall/addr/update' : '/api/v1/mp/channel/mall/addr/create'
				$http.post(url, this.form).then(res => {
					if (res.code == 0) {
						uni.$u.toast('保存成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
		},

		// 表单提交
		// saveAddress() {
		// 	const app = this
		// 	if (app.disabled) {
		// 		return false
		// 	}
		// app.$refs.uForm.validate(valid => {
		//   if (valid) {
		//     app.disabled = true
		//     AddressApi.add(app.form)
		//       .then(result => {
		//         app.$toast(result.message)
		//         uni.navigateBack()
		//       })
		//       .finally(() => app.disabled = false)
		//   }
		// })

	}
</script>

<style lang="scss" scoped>
	/deep/ .u-navbar__content__title.u-navbar__content__title {
		color: #FFFFFF;
	}
</style>
<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>