uniAppXCX/pages/addressEdit/addressEdit.vue

<template>
	<view class="container">
		<uni-forms class="form" :rules="rules" ref="form" :modelValue="form" label-width="80px" label-align="right">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required name="tel">
				<uni-easyinput v-model="form.tel" placeholder="请输手机号" />
			</uni-forms-item>
			<uni-forms-item label="选择地址" required name="areaCode">
				<picker mode="region" @change="onchange">
					<!-- <uni-easyinput v-model="form.name" placeholder="请输入姓名" /> -->
					<view class="inputBox" v-if="form.areaCode">{{form.province}}/{{form.city}}/{{form.county}}</view>
					<view class="inputBox" v-else>
						点击选择地址
					</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="详细地址" required name="addressDetail">
				<uni-easyinput type="textarea" v-model="form.addressDetail" placeholder="请输详细地址" />
			</uni-forms-item>
			<uni-forms-item label="设为默认地址" required name="isDefault">
				<switch :checked="form.isDefault == 1" @change="switchChange" style="transform:scale(0.7)" />
			</uni-forms-item>
		</uni-forms>
		<view class="bottom">
			<button class="m_button" type="default" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		addressSaveApi,
		addressDetailApi
	} from "@/api/address.js"
	export default {
		data() {
			return {
				address: [],
				form: {
					"id": null,
					"areaCode": null,
					"name": null, //姓名
					"province": null, //省
					"city": null, //市
					"county": null, //县区
					"addressDetail": null, //详细地址
					"tel": null, //电话
					"isDefault": 0,
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					areaCode: {
						rules: [{
							required: true,
							errorMessage: '请选择地址'
						}]
					},
					addressDetail: {
						rules: [{
							required: true,
							errorMessage: '详细地址不能为空'
						}]
					},
				},
			}
		},
		onLoad(option) {
			console.log(option, 'option')
			if (option.id) {
				let params = {
					id: option.id
				}
				addressDetailApi(params).then(res => {
					console.log(res, 'res')
					this.form = {
						...res.data
					}
				})
			}
		},
		onShow() {},
		methods: {
			onchange(value) {
				console.log(value, 'value')
				this.form.areaCode = value.detail.code[2]
				this.form.province = value.detail.value[0]
				
				if (value.detail.value[0] == value.detail.value[1]) {
					this.form.city = "市辖区"
				} else {
					this.form.city = value.detail.value[1]
				}
				this.form.county = value.detail.value[2]
			},
			switchChange(value) {
				console.log(value, 'value')
				if (value.detail.value) {
					this.form.isDefault = 1
				} else {
					this.form.isDefault = 0
				}
			},
			save() {
				let _this = this
				console.log(this.form, 'this.form')
				this.$refs.form.validate().then(val => {
					addressSaveApi(this.form).then(res => {
						console.log(res, '提交新增地址')
						wx.navigateTo({
							url: "/pages/addressManage/addressManage"
						})
						wx.showToast({
							title: '保存成功'
						})
					})
				}).catch(err => {
					console.log('err', err);
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #fff;
		padding: 20px;

		.form {
			margin-top: 20px;
		}

		.inputBox {
			border: 1px solid #F0F0F0;
			border-radius: 4px;
			height: 35px;
			line-height: 35px;
			padding-left: 10px;
			color: #333;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		padding: 20px 0;
		text-align: center;
		width: calc(100% - 40px);

		.m_button {
			height: 36px;
			width: 40vw;
			line-height: 36px;
			border-radius: 18px;
			font-size: 13px;
		}
	}
</style>