
<template>
	<view class="vrapile-content-001">
		<view class="vrapile-list-001">
			<view class="vrapile-list-001-item">
				<span class="vrapile-item-span">
					<span class="vrapile-item-span-line"></span>
					选择地区
				</span>
				<vrapile-address class="vrapile-item-address-picker" 
					:region="region1" @adress-change="addressChange1">
					{{region1.replace(/,/g, '-')}}
				</vrapile-address>
			</view>
			<view class="vrapile-list-001-item">
				<span class="vrapile-item-span">
					<span class="vrapile-item-span-line"></span>
					选择地区
				</span>
				<vrapile-address class="vrapile-item-address-picker" 
					:region="region2" @adress-change="addressChange2">
					{{region2.replace(/,/g, ' ')}}
				</vrapile-address>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			region1: "请点击选择地区",
			region2: "湖北省,武汉市,江汉区"
		}
	},
	methods: {
		addressChange1(data) {
			this.region1 = data.region.join(',')
		},
		addressChange2(data) {
			this.region2 = data.region.join(',')
		}
	}
}
</script>

<style lang="scss" scoped>
	.vrapile-content-001{
		padding: 0;
		margin: 0;
		width: 750rpx;
		height: calc(100vh - 0px);
		background-color: #f1f1f1;
		display: flex;
		flex-direction: column;
	}
	.vrapile-list-001{
		padding: 10rpx;
	}
	.vrapile-list-001-item{
		background-color: #fff;
		margin: 10rpx 0;
		padding: 20rpx;
		border-radius: 10rpx;
		display: flex;
	}
	.vrapile-item-span{
		display: flex;
		align-items: center;
		width: 200rpx;
	}
	.vrapile-item-span-line{
		display: block;
		width: 5rpx;
		height: 25rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
		background-color: #2979ff;
	}
	.vrapile-item-address-picker{
		flex: 1;
	}
</style>



    