template-project/pagesA/my-address/my-address.vue

<template>
	<view>
		<status-container titlet="我的地址">
			<view slot="content">
				<!-- 方式一 start -->
				<view class="disjbac width100 pad-sx20 bbot" @tap="openPicker">
					<view>{{region}}</view>
					<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
				</view>
				<addressOne @choseVal="choseValue" :lotusAddressData="lotusAddressData"></addressOne>
				<!-- 方式一 end -->
				
				<!-- 方式二 start -->
				<view class="disjbac width100 pad-sx20 bbot" @tap="chooseRegion">
					<view>{{region1}}</view>
					<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
				</view>
				<!-- 方式二 end -->
				
				<!-- 方式三 start -->
				<view class="disjbac width100 pad-sx20 bbot" @tap="chooseAddress1">
					<view>{{region2}}</view>
					<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
				</view>
				<!-- 方式三 end -->
				
				<!-- 方式四 start -->
				<addressThree :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<h2>点击选择省市区</h2>
				</addressThree>
				<view class="disjbac width100 pad-sx20 bbot">
					<view>{{regionName}}</view>
					<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
				</view>
				<!-- 方式四 end -->
				
				<!-- 方式五 start -->
				<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres">
					<view>默认打开地址</view>
					<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
				</view>
				<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres2">
					<view>自定义：根据省市区名称打开地址</view>
					<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
				</view>
				<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres3">
					<view>自定义：根据省市区“code”打开地址</view>
					<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
				</view>
				<textarea v-model="pickerText" cols="30" rows="10"></textarea>
				<!--
				 mask-bg-color="rgba(0, 229, 238, 0.4)" // 自定义遮罩层背景颜色
				 -->
				<addressFour ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></addressFour>
				<!-- 方式五 end -->
			</view>
		</status-container>
		<addressTwo @conceal="conceal" v-if="popup"></addressTwo>
	</view>
</template>

<script>
	import addressOne from '@/components/choose-address/address-one/address-one.vue';
	import addressTwo from '@/components/choose-address/address-two/address-two.vue';
	import addressThree from '@/components/choose-address/address-three/address-three.vue';
	import addressFour from '@/components/choose-address/address-four/address-four.vue';
	import statusContainer from '@/components/containers/status-container.vue';
	export default {
		components:{
			addressOne,
			addressTwo,
			addressThree,
			addressFour,
			statusContainer
		},
		data() {
			return {
				lotusAddressData:{
				    visible:false,
				    provinceName:'',
				    cityName:'',
				    townName:'',
				},
				region:'四川省成都市成华区双店路B口',
				newProvice:'',
				newCity:'',
				newDistrict:'',
				region1:'四川省成都市成华区双店路B口',
				region2:'请选择地址',
				popup:false,
				region3:'请选择地址',
				region4:[],
				defaultRegion:['广东省','广州市','番禺区'],
				defaultRegionCode:'440113',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: ''
			}
		},
		mounted() {
			this.getDistrict();
		},
		computed:{
			regionName(){
				// 转为字符串
				return this.region4.map(item=>item.name).join(' ')
			}
		},
		methods: {
			// 选择地区
			chooseRegion(){
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res)=> {
						const latitude = res.latitude;
						const longitude = res.longitude;
						console.log(latitude,longitude,78);
						uni.chooseLocation({
							success: (res)=> {
								console.log(res,81);
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								this.region1 = `${res.address || ''}${res.name}`
							}
						});
					}
				});
			},
			getDistrict() {
				uni.getLocation({
					success:(res)=> {
						uni.request({
							url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
							header: {
								'Content-Type':'application/json'
							},
							success:(res)=> {
								console.log('地址数据：',res)
								this.newProvice = res.data.result.address_component.province
								this.newCity = res.data.result.address_component.city
								this.newDistrict = res.data.result.address_component.district
							}
						})
					},
				})
			},
			//打开picker
			openPicker() {
			    this.lotusAddressData.visible = true;
			    this.lotusAddressData.provinceName = this.newProvice;
			    this.lotusAddressData.cityName = this.newCity;
			    this.lotusAddressData.townName = this.newDistrict;
			},
			//回传已选的省市区的值
			choseValue(res){
			    //res数据源包括已选省市区与省市区code
			    // console.log(res);
			    this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
			    //res.isChose = 1省市区已选 res.isChose = 0;未选
			    if(res.isChose){
			        this.lotusAddressData.provinceName = res.province;//省
			        this.lotusAddressData.cityName = res.city;//市
			        this.lotusAddressData.townName = res.town;//区
			        this.region = `${res.province}${res.city}${res.town}`; //region为已选的省市区的值
			    }
			},
			chooseAddress1(){
				this.popup = true;
			},
			conceal(param) {
				// 获取到传过来的 省 市 区 县数据
				console.log(param);
				this.region2 = `${param.province}${param.city}${param.area}${param.street}`
				// 选择完毕后隐藏
				this.popup = false;
			},
			// 获取选择的地区
			handleGetRegion(region){
				this.region4 = region
			},
			openAddres() {
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			openAddres2() {
				// 根据 label 获取
				var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
				console.log(index);
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			openAddres3() {
				// 根据value 获取
				var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
				console.log(index);
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);
			}
		}
	}
</script>

<style>

</style>