fangliaoxiaochengxv/subPages/addAddress/addAddress.vue

<template>
	<view class="add-address-wrapper">
		<view class="form-box mb10">
			<u1-form :model="form" ref="addressForm" label-width="150" :label-style="labelStyle">
				<u1-form-item label="姓名">
					<u1-input placeholder="请输入姓名" v-model="form.name" />
				</u1-form-item>
				<u1-form-item label="手机号码" prop="phone">
					<u1-input placeholder="请输入手机号码" v-model="form.phone" type="number" />
				</u1-form-item>
				<u1-form-item label="所在地区">
					<picker mode="region" :value="form.area" @change="bindAreaChange">
						<view v-if="!form.province" class="color-9">省市区县、乡镇等</view>
						<view v-else class="color-23">{{areaDisplay}}</view>
					</picker>
				</u1-form-item>
				<u1-form-item label="详细地址">
					<u1-input placeholder="街道号、楼牌号等" v-model="form.address" />
				</u1-form-item>
			</u1-form>
		</view>
		<view class="form-box display-flex-between set-default">
			<text>设置为默认地址</text>
			<u-switch v-model="form.type" :activeValue="1" :inactiveValue="0" size="20" active-color="#F39800"
				inactive-color="#DCDCDC"></u-switch>
		</view>
		<view class="common-btn" @click="save">保存并使用</view>
		<!-- <u1-button type="primary" shape="circle" @click="save">保存</u1-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelStyle: {},
				pageOptions: {},
				form: { type: 0, phone: '', province: '', city: '', area: '' },
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur']
						}
					]
				}
			};
		},
		computed: {
			areaDisplay() {
				const { province = '', city = '', area = '' } = this.form
				return province + city + area
			},
		},
		onLoad(options) {
			this.form = Object.assign({}, this.form, options)
			this.pageOptions = options
			if (options.code) {
				this.getDetail()
			}
		},
		onReady() {
			this.$refs.addressForm.setRules(this.rules);
		},
		methods: {
			getDetail() {
				this.$api.getAddressDetail({ code: this.pageOptions.code }).then(res => {
					this.form = Object.assign({}, this.form, res.data)
				})
			},
			save() {
				const currentApi = this.pageOptions.code ? this.$api.updateAddress : this.$api.addAddress
				this.$refs.addressForm.validate().then(res => {
					if (res) {
						currentApi(this.form).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '保存成功'
								})
								// uni.reLaunch({
								// 	url: '../addressMg/addressMg'
								// })
								uni.navigateBack()
							} else {
								uni.showToast({
									title: '添加失败'
								})
							}
						}).catch(() => {

						})
					}
				}).catch(errors => {
					console.log(111111)
				})

			},
			bindAreaChange(data) {
				const { code, value } = data.detail
				this.form.province = value[0]
				this.form.city = value[1]
				this.form.area = value[2]
				// this.areaDisplay = value.join('.')
				console.log(8999, data, this.form)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.add-address-wrapper {
		padding: 30rpx 20rpx;

		.form-box {
			padding: 0 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
		}

		.set-default {
			padding: 28rpx 20rpx;
			margin-bottom: 54rpx;
		}

		.no-value {
			color: red;
		}

		.has-value {
			color: green;
		}
	}
</style>