279 lines
9.7 KiB
Plaintext
279 lines
9.7 KiB
Plaintext
<style lang="less">
|
|
.ui-residenceDialog{
|
|
.cu-modal {
|
|
.cu-dialog {
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
}
|
|
}
|
|
|
|
.m_dialog {
|
|
height: 478rpx !important;
|
|
padding: 30rpx;
|
|
border-radius: 32rpx;
|
|
.m_ct {
|
|
width: 400rpx;
|
|
height: 72rpx;
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid #999999;
|
|
box-sizing: border-box;
|
|
}
|
|
.m_ct.sel {
|
|
background: rgba(255, 83, 128, 0.06);
|
|
border: 2rpx solid #FF5380;
|
|
box-sizing: border-box;
|
|
.font_32.sel {
|
|
color: #FF5380;
|
|
}
|
|
.font_family.sel {
|
|
color: #FF5380;
|
|
}
|
|
}
|
|
.icon-location{
|
|
margin-top: 4rpx;
|
|
margin-right: 4rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
.icon-locate{
|
|
margin-top: 2rpx;
|
|
margin-right: 8rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
.m_cus {
|
|
margin: 56rpx 0 40rpx;
|
|
.u_cus_img {
|
|
width: 24rpx;
|
|
height: 32rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
.m_aut {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="ui-residenceDialog">
|
|
<view class="~cu-modal ~bottom-modal" :class="{'~show' : residenceShow}" @tap="onModal">
|
|
<view class="~cu-dialog">
|
|
<view class="m_dialog">
|
|
<view class="~font_32 ~bold ~color333 ~f-fcc">请选择目前居住地</view>
|
|
<selectCity :multiIndex.sync="multiIndex" @selectCity="selectCity" @provinces="allProvinces">
|
|
<view class="~f-fcc">
|
|
<view class="m_cus m_ct ~f-fcc {{selectType == 'custom'?'sel':''}}">
|
|
<view class="~f-fcc">
|
|
<image class="u_cus_img" src="{{selectType == 'custom'?'https://images.ufutx.com/202105/13/9ac1cc6f1753832da16ce19e44f812b6.png':'https://images.ufutx.com/202105/13/687179ce81755d46d25038bd49acf203.png'}}" mode="scaleToFill" lazy-load="true"></image>
|
|
<view class="~font_32 black_6 {{selectType == 'custom'?'sel':''}}">{{selectType == 'custom'?address.province+' '+address.city:'自定义选择'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</selectCity>
|
|
<view class="~f-fcc">
|
|
<view class="m_aut m_ct ~f-fcc {{selectType == 'automatic'?'sel':''}}" @tap="getCenterLocation">
|
|
<view class="font_family black_6 icon-locate ~font_32 {{selectType == 'automatic'?'sel':''}}"></view>
|
|
<view class="~font_32 black_6 {{selectType == 'automatic'?'sel':''}}">{{selectType == 'automatic'?address.province+' '+address.city:'获取地理位置'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="~f-fcc ~font_32 ~color999">取消</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import base from '../mixins/base'
|
|
import https from '../mixins/https'
|
|
import {service} from '../config'
|
|
|
|
wepy.component({
|
|
props: {
|
|
residenceShow: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data: {
|
|
address: {country: '', province: '', city: ''},
|
|
multiIndex: [0, 18, 2],
|
|
selectType: ''
|
|
},
|
|
mixins: [https, base],
|
|
methods: {
|
|
// 使用经纬度获取地址
|
|
getAddress(lat, lng) {
|
|
let vm = this
|
|
let data = {
|
|
local_latitude: lat,
|
|
local_longitude: lng
|
|
}
|
|
vm.$showLoading('定位中...')
|
|
vm.$get({url: `${service.host}/address/location/to/address`, data}).then(({code, data}) => {
|
|
console.log(code, data, '===')
|
|
if (code === 0) {
|
|
vm.address = {country: data.address_component.nation, province: data.address_component.province, city: data.address_component.city}
|
|
vm.selectType = 'automatic'
|
|
vm.multiCity()
|
|
vm.$emit('residenceCity', vm.address)
|
|
}
|
|
wx.hideLoading()
|
|
}).catch(err => {
|
|
wx.hideLoading()
|
|
console.log(err)
|
|
})
|
|
},
|
|
// 回填选择城市组件所需下标
|
|
multiCity() {
|
|
let vm = this
|
|
vm.provinces.forEach((item, index) => {
|
|
if (item.name == vm.address.country) {
|
|
vm.multiIndex = [index, 0, 0]
|
|
item.son.forEach((res, indexA) => {
|
|
if (res.name == vm.address.province) {
|
|
vm.multiIndex = [index, indexA, 0]
|
|
res.son.forEach((data, indexB) => {
|
|
if (data.name == vm.address.city) {
|
|
vm.multiIndex = [index, indexA, indexB]
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 授权获取定位地址
|
|
getCenterLocation() {
|
|
let vm = this
|
|
if (wx.getFuzzyLocation) {
|
|
wx.getSystemInfo({
|
|
success: (res) => {
|
|
console.log(res, 'GPS定位')
|
|
var isopendingwei = res.locationEnabled
|
|
console.log(res.locationEnabled)
|
|
if (isopendingwei == false) {
|
|
console.log('请先开启手机GPS定位,然后重新刷新')
|
|
wx.showToast({
|
|
title: '请打开GPS定位获取地理位置',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
wx.getSetting({
|
|
success: (res) => {
|
|
var statu = res.authSetting
|
|
console.log(statu, '==')
|
|
// wx.authorize({
|
|
// scope: 'scope.userFuzzyLocation',
|
|
// success () {
|
|
// // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
|
|
// wx.openSetting({
|
|
// success: data => {
|
|
// if (data.authSetting['scope.userFuzzyLocation'] || data.authSetting['scope.userLocation']) {
|
|
// wx.getFuzzyLocation({
|
|
// type: 'gcj02',
|
|
// success: function (res) {
|
|
// console.log(res)
|
|
// vm.getAddress(res.latitude, res.longitude)
|
|
// wx.setStorageSync('myLong', res.longitude)
|
|
// },
|
|
// fail: function () {
|
|
// vm.hide = false
|
|
// }
|
|
// })
|
|
// }
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
if (!statu['scope.userFuzzyLocation'] && !statu['scope.userLocation']) {
|
|
wx.authorize({
|
|
scope: 'scope.userFuzzyLocation',
|
|
success () {
|
|
// 用户已经同意小程序使用地址功能，后续调用 接口不会弹窗询问
|
|
console.log('222')
|
|
// wx.openSetting({
|
|
// success: data => {
|
|
// console.log(data, '333--')
|
|
// if (data.authSetting['scope.userFuzzyLocation'] || data.authSetting['scope.userLocation']) {
|
|
wx.getFuzzyLocation({
|
|
type: 'gcj02',
|
|
success: function (res) {
|
|
console.log(res)
|
|
vm.getAddress(res.latitude, res.longitude)
|
|
wx.setStorageSync('myLong', res.longitude)
|
|
},
|
|
fail: function () {
|
|
vm.hide = false
|
|
}
|
|
})
|
|
// }
|
|
// }
|
|
// })
|
|
}
|
|
})
|
|
// wx.showModal({
|
|
// title: '是否授权当前位置',
|
|
// content: '需要获取您的地理位置，请确认授权',
|
|
// confirmColor: '#f16765',
|
|
// success: res => {
|
|
// if (res.confirm) {
|
|
//
|
|
// }
|
|
// }
|
|
// })
|
|
} else {
|
|
wx.getFuzzyLocation({
|
|
type: 'gcj02',
|
|
success: function (res) {
|
|
console.log(res)
|
|
vm.getAddress(res.latitude, res.longitude)
|
|
wx.setStorageSync('myLong', res.longitude)
|
|
},
|
|
fail: function () {
|
|
vm.hide = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
|
})
|
|
}
|
|
},
|
|
// 组件调用此方法返回所有城市地址
|
|
allProvinces(e) {
|
|
let vm = this
|
|
vm.provinces = e
|
|
},
|
|
// 组件调用此方法返回选中的居住地
|
|
selectCity(e, index) {
|
|
let vm = this
|
|
vm.address = {
|
|
country: e[0], province: e[1], city: e[2]
|
|
}
|
|
vm.$emit('residenceCity', vm.address)
|
|
console.log(e, index)
|
|
},
|
|
onModal() {
|
|
let vm = this
|
|
vm.$emit('closeResidenceShow', false)
|
|
}
|
|
},
|
|
created() {
|
|
}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
usingComponents: {
|
|
selectCity: '~@/components/selectCity'
|
|
}
|
|
}
|
|
</config>
|