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="multiSelector" @change="multiChange" @columnchange="columnChange"
						value="{{multiIndex}}" :range="multiArray" range-key="name">
						<view class="pbox">
							{{cityInfo?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',
				checked: false,
				value: "",
				cityInfo: {
					province: '请选择省市区',
					city: '',
					area: ''
				},
				form: {
					// content: '',
					name: '',
					phone: '',
					region: [],
					detail: ''
				},
				addressDetail: null,
				addressId: '',
				multiIndex: [0, 0, 0],
				multiArray: [],
				multiData: []
			};
		},
		onLoad(optios) {
			console.log(JSON.parse(optios.addressDetail))
			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;
			}
			this.getProvinceAll()
		},
		methods: {
			async getProvinceAll() {
				let {
					status,
					message,
					data
				} = await AddressApi.province();
				if (status == 200) {
					this.multiData = data.list;
					var multiIndex = this.multiIndex;
					this.multiArray = [
						this.multiData,
						this.multiData[0].children,
						this.multiData[0].children[0].children
					]
				}
			},
			// 获取多列的索引
			multiChange: function(e) {
				// console.log(e);
				var _this = this;
				var multiIndex = e.detail.value;
				console.log(multiIndex);
				this.multiIndex = multiIndex;

			},

			// 选择列
			columnChange: function(e) {
				// console.log(e);
				var _this = this;
				var multiData = _this.multiData;
				var multiIndex = _this.multiIndex;
				var columnIndex = e.detail.column;
				var columnValue = e.detail.value;
				multiIndex[columnIndex] = columnValue;
				this.multiArray = [
				multiData,
				multiData[multiIndex[0]].children,
				multiData[multiIndex[0]].children[multiIndex[1]].children,]
			},
			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.id;
				this.form.region = [{
					value: e.detail.id[0],
					label: e.detail.value[0]
				}, {
					value: e.detail.id[1],
					label: e.detail.value[1]
				}, {
					value: e.detail.id[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('请选择所属地市')
				}
				let parame = {

				}
				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.addressId, that.form)
					.then(result => {
						return
						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;
			}
		}
	}

	.list {
		// border-bottom: 1rpx solid #eee;
		padding: 0 0 0 18rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.picker {
			height: 92rpx;
			width: 33%;

			.pbox {
				width: 100%;
				height: 92rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				color: #808080;

				view {
					width: 100%;
					text-align: right;
				}

				.icon-you {
					font-size: 28rpx;
				}
			}

			.pbox_hover {
				color: #383838;
			}

		}

		.name {
			width: 168rpx;
			font-size: 32rpx;
			color: #383838;
		}

		.icon-you {
			font-size: 28rpx;
			color: #999999;
		}

		.input {
			flex: 1;
			height: 100%;
			line-height: 92rpx;
			color: #9080A1;
		}

		.textarea {
			flex: 1;
			height: 100%;
			color: #A9A9A9;
		}
	}
</style>