book-shop/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.realname" placeholder="请输入收货人姓名" />
				</u-form-item>
				<u-form-item label="联系方式">
					<u-input v-model="form.mobile" placeholder="请输入联系方式" />
				</u-form-item>
				<u-form-item label="所在地区">
					<u-input v-model="cityPickerLabel" type="select" placeholder="请选择所在地区"
						@click="showCityPicker = true" />
				</u-form-item>
				<u-form-item label="详细地址">
					<u-input v-model="form.street" placeholder="请输入详细地址" />
				</u-form-item>
				<u-form-item :border-bottom="false" label="设为默认地址">
					<u-switch slot="right" v-model="form.is_default" :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>
		<!-- 省市区选择器 -->
		<CityPicker v-model="showCityPicker" :area-code="selAddressCodes" @city-change="cityChange"></CityPicker>
	</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,
					type: 'add',
					realname: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					street: '',
					addressCode: '',
					is_default: 0
				},
				// 省市区
				showCityPicker: false,
				cityPickerLabel: '',
				selAddressCodes:[],
			};
		},
		onLoad(ops) {
			console.log(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
			})
		},
		methods: {
			// 省市区选择回调
			cityChange(e) {
				console.log(e);
				this.cityPickerLabel = e.province.name + '-' + e.city.name;
				if(e.area){
					this.cityPickerLabel += ('-' +e.area.name);
				}
				this.form.province = e.province.name;
				this.form.city = e.city.name;
				this.selAddressCodes = [e.province.code , e.city.code];
				if(e.area){
					this.form.area = e.area.name;
					this.selAddressCodes.push(e.area.code);
				}
				this.form.addressCode = this.selAddressCodes.toString();
			},

			// 提交表单
			submit() {
				this.$u.api.updateAddressAjax(this.form).then(({
					code,
					data
				}) => {
					if (code == 1) {
						uni.showToast('保存成功');
						uni.navigateBack();
					}
				}).catch((data)=>{
					console.log(data);
				})
			},
			// 编辑
			getAddressDetail(id) {
				uni.showLoading();
				this.$u.api.getAddressDetailAjax(id).then(({code,data})=>{
					uni.hideLoading();
					if(code==1){
						this.form = {
							...this.form,
							id:data.id,
							realname:data.realname,
							mobile:data.mobile,
							province:data.province,
							city:data.city,
							area:data.area,
							street:data.street,
							addressCode:data.addressCode,
							is_default:data.is_default,
						};
						this.cityPickerLabel = data.province + '-' + data.city;
						if(data.area){
							this.cityPickerLabel += ('-' + data.area);
						}
						this.selAddressCodes = data.addressCode.split(',');
					}
				}).catch(()=>{uni.hideLoading();})
			},
		}
	};
</script>

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

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