yanzong_qianduan/pages/news/park/addressEdit.vue

<template>
	<view class="addressList">
		<view class="addressList-hd">
			<view class="item">
				<view class="a">收货人</view>
				<view class="b">
					<input v-model="form.name" type="text" placeholder="请输入收货人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="a">手机号</view>
				<view class="b">
					<input v-model="form.phone" type="number" placeholder="请输入收货人手机号" />
				</view>
			</view>
			<view class="item">
				<view class="a">所属城市</view>
				<view class="b">
					<picker mode="region" :value="form.region" @change="bindCityChange">
						<view class="select">{{cityInfo.province}}{{cityInfo.city}}{{cityInfo.area}}<u-icon
								name="arrow-right"></u-icon></view>
					</picker>
				</view>
			</view>
			<view class="items">
				<view class="a">详细地址</view>
				<view class="b">
					<input v-model="form.detail" type="text" placeholder="请输入详细地址" />
				</view>
			</view>
		</view>
		<view class="addressList-bd" v-if="type=='edit'">
			<view class="a">设为默认收货地址</view>
			<view class="b">
				<u-switch v-model="checked" active-color="#55BD6A" inactive-color="#eee"
					@change="setDefault"></u-switch>
			</view>
		</view>
		<view class="addressList-fd">
			<view class="btn" @click="saveAddress" v-if="type=='add'">保存收货地址</view>
			<view class="btn" @click="editAddress" v-if="type=='edit'">保存收货地址</view>
		</view>
	</view>
</template>

<script>
	import * as AddressApi from '@/api/address'
	export default {
		data() {
			return {
				type: 'add',
				array: [],
				index: 0,
				checked: false,
				value: "",
				cityInfo: {
					province: '请选择省市区',
					city: '',
					area: ''
				},
				form: {
					// content: '',
					name: '',
					phone: '',
					region: [],
					detail: ''
				},
				addressDetail: null,
				addressId: '',
			};
		},
		onLoad(optios) {
			if (optios.addressDetail) {
				this.type = 'edit'

				this.addressDetail = JSON.parse(optios.addressDetail);
				this.addressId = this.addressDetail.address_id
				this.cityInfo.province = this.addressDetail.region.province;
				this.cityInfo.city = this.addressDetail.region.city;
				this.cityInfo.area = this.addressDetail.region.region;
				this.form.name = this.addressDetail.name;
				this.form.phone = this.addressDetail.phone;
				this.form.region = [{
					value: this.addressDetail.province_id,
					label: this.addressDetail.region.province
				}, {
					value: this.addressDetail.city_id,
					label: this.addressDetail.region.city
				}, {
					value: this.addressDetail.region_id,
					label: this.addressDetail.region.region
				}];
				this.form.detail = this.addressDetail.detail;
			}
		},
		methods: {
			bindCityChange(e) {
				this.cityInfo.province = e.detail.value[0];
				this.cityInfo.city = e.detail.value[1];
				this.cityInfo.area = e.detail.value[2];
				this.form.region = e.detail.code;
				this.form.region = [{
					value: e.detail.code[0],
					label: e.detail.value[0]
				}, {
					value: e.detail.code[1],
					label: e.detail.value[1]
				}, {
					value: e.detail.code[2],
					label: e.detail.value[2]
				}];
			},
			saveAddress() {
				// 保存收货地址
				const that = this
				if (that.form.name == '') {
					return that.$toast('请填写收货人姓名')
				}
				if (that.form.phone == '') {
					return that.$toast('请填写收货人手机号')
				}
				if (that.form.region == []) {
					return that.$toast('请选择所属地市')
				}
				AddressApi.add(that.form)
					.then(result => {
						that.$toast(result.message)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)

					})
					.finally(() => {

					})
			},
			editAddress() {
				// 编辑收货地址
				const that = this
				if (that.form.name == '') {
					return that.$toast('请填写收货人姓名')
				}
				if (that.form.phone == '') {
					return that.$toast('请填写收货人手机号')
				}
				if (that.form.region == []) {
					return that.$toast('请选择所属地市')
				}
				AddressApi.edit(that.form)
					.then(result => {
						that.$toast(result.message)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)

					})
					.finally(() => {

					})
			},
			setDefault(val) {
				// 设置默认地址
				const that = this
				if (val) {
					AddressApi.setDefault(that.addressId)
						.then(result => {
							that.$toast(result.message);
							setTimeout(() => {
								uni.navigateBack()
							}, 500)

						})
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	.addressList {
		padding: 0 0 20rpx;
		overflow: hidden;

		&-hd {
			background-color: #fff;
			padding: 0 25rpx 25rpx;
			overflow: hidden;

			.item {
				padding: 20rpx 0;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F7F7F7;

				.b {
					font-size: 28rpx;
					color: #9D9D9D;
					flex: 1;
					text-align: right;

					input {
						width: 100%;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #212121;
					}

					.select {
						color: #C7C7C7;

						&-on {
							color: #212121;
						}
					}
				}
			}

			.items {
				padding: 20rpx 0;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;

				.b {
					font-size: 28rpx;
					flex: 1;
					text-align: left;

					input {
						width: 100%;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #212121;
						margin-top: 20rpx;
					}
				}
			}

		}

		&-bd {
			background-color: #fff;
			padding: 25rpx;
			overflow: hidden;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&-fd {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 30rpx;
			background-color: #fafafa;
			box-sizing: border-box;

			.btn {
				width: 100%;
				line-height: 96rpx;
				background: #F34A40;
				border-radius: 8rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>