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>
|