book-hi/pages-mine/pages/address/add-or-update.vue

<template>
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="form" label-width="180rpx">
				<u-form-item label="收货人">
					<u-input v-model="form.name" placeholder="请输入收货人姓名" />
				</u-form-item>
				<u-form-item label="联系方式">
					<u-input v-model="form.mobile" placeholder="请输入联系方式" />
				</u-form-item>
				<u-form-item label="所在地区">
					<uni-data-picker v-model="selAddressCodes" :localdata="dataList" placeholder="请选择所在地区"
						popup-title="请选择所在地区" @change="cityChange"></uni-data-picker>
				</u-form-item>
				<u-form-item label="详细地址">
					<u-input v-model="form.detailAddress" placeholder="请输入详细地址" />
				</u-form-item>
				<u-form-item :border-bottom="false" label="设为默认地址">
					<u-switch slot="right" v-model="form.defaultFlag" :active-value="1" :inactive-value="0"
						:active-color="appThemeColor"></u-switch>
				</u-form-item>
			</u-form>
		</view>
		<view class="btn">
			<u-button type="primary" shape="circle" @click="submit">
				<u-icon name="plus"></u-icon>
				<text>保存地址</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import CityPicker from '@/pages-mine/components/city-picker.vue';
	export default {
		components: {
			CityPicker
		},
		data() {
			return {
				// 标题
				title: '收货地址',
				appThemeColor: this.$appTheme.appThemeColor,
				// 表单
				form: {
					id: null,
					"provinceId": '',
					"cityId": '',
					"districtId": '',
					"detailAddress": "",
					"name": "",
					"mobile": "",
					"defaultFlag": 0
				},
				// 省市区
				selAddressCodes: [],
				dataList: [],
			};
		},
		onLoad(ops) {
			if (ops.id) {
				this.form.id = ops.id;
				this.form.type = 'edit';
				this.title = '修改地址';
				this.getAddressDetail(ops.id);
			} else {
				this.form.id = null;
				this.form.type = 'add';
				this.title = '新建地址';
			}
			uni.setNavigationBarTitle({
				title: this.title
			})

			uni.$u.http.get('/token/getAllDistrict').then(res => {
				if (res.code == 200) {
					this.dataList = res.data
				}
			})
		},
		methods: {
			// 省市区选择回调
			cityChange(e) {
				let {
					value
				} = e.detail
				if (!value.length) return
				this.form.provinceId = value[0].value;
				this.form.cityId = value[1].value
				this.form.districtId = value[2].value || ''
			},

			// 提交表单
			submit() {
				uni.$u.http.post('/token/user/address/add', this.form).then(res => {
					if (res.code == 200) {
						uni.showToast('保存成功');
						uni.navigateBack();
					}
				})
			},
			// 编辑
			getAddressDetail(id) {
				uni.showLoading();
				this.$u.api.getAddressDetailAjax(id).then(({
					code,
					data
				}) => {
					uni.hideLoading();
					if (code == 1) {
						this.form = {
							...this.form,
							id: data.id,
							name: data.name,
							mobile: data.mobile,
							provinceId: data.provinceId,
							city: data.city,
							area: data.area,
							detailAddress: data.detailAddress,
							addressCode: data.addressCode,
							defaultFlag: data.defaultFlag,
						};
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.form {
		background-color: $app-theme-bg-color;
		padding: 30rpx;
	}

	.btn {
		padding: 60rpx 30rpx;
	}
</style>