VIP32/购物商城/project/pages/address/address.vue

<template>
	<view class="address">
		<view class="main">
			<van-cell-group>
				<van-field label="姓名" @change="onChange1" :value="addressInfo.receiver" placeholder="收货人姓名" />
				<van-field label="电话" :value="addressInfo.mobile" placeholder="收货人手机号" />
				<van-field :value="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @tap="onClick" />
				<van-popup :show="show" round position="bottom">
					<van-cascader v-if="show" :field-names="fieldNames" :value="cascaderValue" title="请选择所在地区"
						:options="options" @close="onClose" @finish="onFinish" />
				</van-popup>
				<van-field label="详细地址" :value="value" placeholder="街道门牌 楼层房间号等信息" />
				<view class="switch">
					<view class="default">
						默认收货地址
					</view>
					<van-switch :checked="checked" bind:change="onChange" />
				</view>
			</van-cell-group>
		</view>
		<van-button type="danger" round class="btn1">保存</van-button>
		<van-button round class="btn2">删除</van-button>
	</view>
</template>

<script>
	import addressData from '@/json/areas.json';
	export default {
		data() {
			return {
				list: {}, //存放编辑内容
				value: "",
				show: false,
				fieldValue: '',
				cascaderValue: '',
				options: [],
				checked: false,
				fieldNames: {
					text: 'label',
					value: 'value',
					children: 'children',
				},
				addressInfo: {
					addrId: 0,
					receiver: "",
					addr: "",
					postCode: "",
					mobile: "",
					provinceId: 0,
					cityId: 0,
					areaId: 0,
					province: "",
					city: "",
					area: ""
				}

			}
		},
		onLoad(options) {
			if (options.obj1) {
				this.list = JSON.parse(options.obj1);
				this.checked = this.list.commonAddr === 1 ? true : false;
			}
		},
		onShow() {
			this.options = addressData;
		},
		methods: {
			onClick() {
				this.show = true;
			},

			onClose() {
				this.show = false;
			},
			onFinish(e) {
				const {
					selectedOptions,
					value
				} = e.detail;
				const fieldValue = selectedOptions.map((option) => option.label).join('/');
				const newsId = selectedOptions.map((obj) =>
					obj[Object.keys(obj)[0]]
				)
				this.addressInfo.provinceId = newsId[0];
				this.addressInfo.cityId = newsId[1];
				this.addressInfo.areaId = newsId[2];
				const newsValue = selectedOptions.map((obj) =>
					obj[Object.keys(obj)[1]]
				)
				this.addressInfo.province = newsValue[0];
				this.addressInfo.city = newsValue[1];
				this.addressInfo.area = newsValue[2];
				this.fieldValue = fieldValue;
				this.cascaderValue = value;
				this.show = false;
			},
			onChange1(event) {
				this.addressInfo.receiver = event.detail;
			}
		}
	}
</script>

<style scoped lang="scss">
	.address {
		padding: 20rpx;

		.default {
			margin-left: 28rpx;
		}
	}

	.btn1 {
		width: 100%;
		position: absolute;
		bottom: 220rpx;
		left: 50%;
		margin-left: -40%;
	}

	.btn2 {
		width: 100%;
		position: absolute;
		bottom: 120rpx;
		left: 50%;
		margin-left: -40%;
	}

	::v-deep .van-button--round {
		width: 80%;
	}

	.switch {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
	}

	::v-deep .van-tabs {
		-webkit-tap-highlight-color: transparent;
		position: absolute;
		z-index: 99;
		background: #fff;
		width: 100%;
	}
</style>