206 lines
6.5 KiB
Vue
206 lines
6.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="pad20">
|
||
<!-- 方式一 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>
|
||
<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';
|
||
export default {
|
||
components:{
|
||
addressOne,
|
||
addressTwo,
|
||
addressThree,
|
||
addressFour
|
||
},
|
||
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>
|