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">
			<view class="a">设为默认收货地址</view>
			<view class="b">
				<u-switch v-model="checked" active-color="#55BD6A" inactive-color="#eee"></u-switch>
			</view>
		</view>
		<view class="addressList-fd">
			<view class="btn" @click="saveAddress">保存收货地址</view>
		</view>
	</view>
</template>

<script>
	import * as AddressApi from '@/api/address'
	export default {
		data() {
			return {
				array:[],
				index:0,
				checked: false,
				value: "",
				cityInfo:{
					province:'请选择省市区',
					city:'',
					area:''
				},
				form: {
					content: '',
					name: '',
					phone: '',
					region: [],
					detail: ''
				},
				addressDetail:null,
			};
		},
		onLoad(optios){
			if(optios.addressDetail){
				this.addressDetail =JSON.parse(optios.addressDetail) ;
				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 = [this.addressDetail.province_id,this.addressDetail.city_id,this.addressDetail.region_id];
				this.form.detail = this.addressDetail.detail;
				console.log(this.addressDetail,'收货地址详情')
			}
		},
		methods: {	
			bindCityChange(e){
				console.log(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;
			},
			saveAddress() {
				// 保存收货地址
				const that = this
				let params = that.form
				AddressApi.add(params)
					.then(result => {
						that.$toast(result.message)
						uni.navigateBack()
					})
					.finally(() => {

					})
			},
		}
	}
</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>