修改
This commit is contained in:
辉
parent
1f643a011f
commit
41458f1ed6
@ -1,313 +1,249 @@
|
||||
<template>
|
||||
<view class="location">
|
||||
<view class="top_search">
|
||||
<u-search @change="searchChange" v-model="searchValue" shape="round" @clear="clear" :clearabled="true"
|
||||
:showAction="false" placeholder="请输入城市名"></u-search>
|
||||
<view style="width: 90%;margin: 0 auto; background: #fff;height: 200px; position: absolute;top: 40px;padding: 40rpx;box-shadow: 0pc 0px 10px #ccc;" v-show="isShowFont">
|
||||
<view @click="fontClick">{{ showFont }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="atAddress">
|
||||
<!-- 当前定位 -->
|
||||
<text class="atAddress_txt">当前定位</text>
|
||||
<view class="atAddress_city">
|
||||
<view>
|
||||
<image style="width: 30rpx;height: 38rpx;" src="../../static/dw2x.png" mode=""></image>
|
||||
</view>
|
||||
<view style="margin-left: 15rpx;"><text>{{ address }}</text></view>
|
||||
<view class="atAddress_regain" style="margin-left: 27rpx;" @click="anewGain">重新获取...</view>
|
||||
</view>
|
||||
<!-- 推荐城市 -->
|
||||
<view class="recommend_city">
|
||||
<text class="atAddress_txt">推荐城市</text>
|
||||
<view class="city_con">
|
||||
<view class="city_item" @click="getAddressCon('1')">
|
||||
<text>德州市</text>
|
||||
</view>
|
||||
<view class="city_item" @click="getAddressCon('2')">
|
||||
<text>东营市</text>
|
||||
</view>
|
||||
<!-- <view class="city_item" @click="getAddressCon('3')">
|
||||
<text>济南市</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- city List -->
|
||||
<!-- <view class="city_list">
|
||||
<view v-for="(item,index) in cityList" :key="index">
|
||||
<view class="province_txt">
|
||||
<view style="width: 90%;margin: 0 auto;"> {{ item.sheng }}</view>
|
||||
</view>
|
||||
<view class="city_txt" v-for="(city,cityIndex) in cityList[index].city" :key="cityIndex">
|
||||
<view style="width: 90%;margin: 0 auto;">{{city.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
<view class="location">
|
||||
<view class="top_search">
|
||||
<u-search @change="searchChange" v-model="searchValue" shape="round" @clear="clear" :clearabled="true"
|
||||
:showAction="false" placeholder="请输入城市名"></u-search>
|
||||
<view
|
||||
style="width: 90%;margin: 0 auto; background: #fff;height: 200px; position: absolute;top: 40px;padding: 40rpx;box-shadow: 0pc 0px 10px #ccc;"
|
||||
v-show="isShowFont">
|
||||
<view @click="fontClick">{{ showFont }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="atAddress">
|
||||
<!-- 当前定位 -->
|
||||
<text class="atAddress_txt">当前定位</text>
|
||||
<view class="atAddress_city">
|
||||
<view>
|
||||
<image style="width: 30rpx;height: 38rpx;" src="../../static/dw2x.png" mode=""></image>
|
||||
</view>
|
||||
<view style="margin-left: 15rpx;"><text>{{ address }}</text></view>
|
||||
<view class="atAddress_regain" style="margin-left: 27rpx;" @click="anewGain">重新获取...</view>
|
||||
</view>
|
||||
<!-- 推荐城市 -->
|
||||
<view class="recommend_city">
|
||||
<text class="atAddress_txt">推荐城市</text>
|
||||
<view class="city_con">
|
||||
<view class="city_item" @click="getAddressCon('1')">
|
||||
<text>德州市</text>
|
||||
</view>
|
||||
<view class="city_item" @click="getAddressCon('2')">
|
||||
<text>东营市</text>
|
||||
</view>
|
||||
<view class="city_item" @click="getAddressCon('3')">
|
||||
<text>济南市</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QQMapWX from '@/utils/qqMap/qqmap-wx-jssdk.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 是否显示下拉的框
|
||||
isShowFont: false,
|
||||
// 显示什么字
|
||||
showFont: '',
|
||||
// 接收缓存地址 赋值
|
||||
address: '',
|
||||
searchValue: '',
|
||||
cityList: [{
|
||||
sheng: '山东省',
|
||||
city: [{
|
||||
id: 1,
|
||||
name: "德州市"
|
||||
}, {
|
||||
id: 2,
|
||||
name: "济南市"
|
||||
}, {
|
||||
id: 3,
|
||||
name: "东营市"
|
||||
}, {
|
||||
id: 4,
|
||||
name: "青岛市"
|
||||
}]
|
||||
},
|
||||
{
|
||||
sheng: '河北省',
|
||||
city: [{
|
||||
id: 1,
|
||||
name: "邢台市"
|
||||
}, {
|
||||
id: 2,
|
||||
name: "沧州市"
|
||||
}, {
|
||||
id: 3,
|
||||
name: "唐山市"
|
||||
}, {
|
||||
id: 4,
|
||||
name: "石家庄市"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.address = uni.getStorageSync('location')
|
||||
// console.log('onLoad',this.address);
|
||||
this.qqmapsdk = new QQMapWX({
|
||||
// 在腾讯平台自己申请的秘钥
|
||||
key: 'Q4DBZ-UIMC2-B63UX-CUZ6A-S3UT7-TBF3V'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
searchChange(value) {
|
||||
// console.log(value);
|
||||
if (value == '德' || value == '德州' || value == '东' || value == '东营' || value == '济' || value == '济南') {
|
||||
this.isShowFont = true
|
||||
// this.showFont = '德州市'
|
||||
if (value == '德' || value == '德州') {
|
||||
this.showFont = '德州市'
|
||||
} else if (value == '东' || value == '东营') {
|
||||
this.showFont = '东营市'
|
||||
} else if (value == '济' || value == '济南') {
|
||||
this.showFont = '济南市'
|
||||
}
|
||||
} else {
|
||||
this.isShowFont = false
|
||||
}
|
||||
},
|
||||
fontClick() {
|
||||
uni.setStorageSync('location',this.showFont)
|
||||
this.isShowFont = false
|
||||
this.address = uni.getStorageSync('location')
|
||||
// console.log('fontClick',this.address);
|
||||
},
|
||||
getAddressCon(value) {
|
||||
if (value == '1') {
|
||||
uni.setStorageSync('location', '德州市')
|
||||
uni.setStorageSync("region", 1)
|
||||
this.address = '德州市'
|
||||
} else if (value == '2') {
|
||||
uni.setStorageSync('location', '东营市')
|
||||
uni.setStorageSync("region", 2)
|
||||
this.address = '东营市'
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.searchValue = ''
|
||||
},
|
||||
// 重新获取城市
|
||||
anewGain() {
|
||||
this.getAddress()
|
||||
},
|
||||
//获取当前位置
|
||||
getAddress() {
|
||||
//vm === vue实例对象
|
||||
let vm = this;
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
//成功
|
||||
success: (res) => {
|
||||
// console.log(res);
|
||||
// 赋值经纬度
|
||||
let newlatitude = res.latitude
|
||||
let newlongitude = res.longitude
|
||||
// 逆地址解析 转市
|
||||
vm.qqmapsdk.reverseGeocoder({
|
||||
location: {
|
||||
latitude: newlatitude,
|
||||
longitude: newlongitude
|
||||
},
|
||||
//成功
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
//赋值给变量 存入缓存
|
||||
let address = res.result.ad_info.city
|
||||
uni.setStorage({
|
||||
key: 'location',
|
||||
data: address,
|
||||
success(res) {
|
||||
// console.log(res);
|
||||
// 获取缓存 赋值结构绑定的值
|
||||
uni.getStorage({
|
||||
key: 'location',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
vm.address = res.data
|
||||
},
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//失败
|
||||
fail: (res) => {
|
||||
// console.log('fail' + JSON.stringify(res))
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '获取地址失败,请打开定位',
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 是否显示下拉的框
|
||||
isShowFont: false,
|
||||
// 显示什么字
|
||||
showFont: '',
|
||||
// 接收缓存地址 赋值
|
||||
address: '',
|
||||
searchValue: '',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.address = uni.getStorageSync('location')
|
||||
},
|
||||
methods: {
|
||||
searchChange(value) {
|
||||
if (value == '德' || value == '德州' || value == '东' || value == '东营' || value == '济' || value == '济南' ||
|
||||
value == '东营市' || value == '德州市' || value == '济南市') {
|
||||
this.isShowFont = true
|
||||
if (value == '德' || value == '德州' || value == '德州市') {
|
||||
this.showFont = '德州市'
|
||||
} else if (value == '东' || value == '东营' || value == '东营市') {
|
||||
this.showFont = '东营市'
|
||||
} else if (value == '济' || value == '济南' || value == '济南市') {
|
||||
this.showFont = '济南市'
|
||||
}
|
||||
} else {
|
||||
this.isShowFont = false
|
||||
}
|
||||
},
|
||||
fontClick() {
|
||||
uni.setStorageSync('location', this.showFont)
|
||||
this.isShowFont = false
|
||||
this.address = uni.getStorageSync('location')
|
||||
// console.log('fontClick',this.address);
|
||||
},
|
||||
getAddressCon(value) {
|
||||
if (value == '1') {
|
||||
uni.setStorageSync('location', '德州市')
|
||||
uni.setStorageSync("region", 1)
|
||||
this.address = '德州市'
|
||||
} else if (value == '2') {
|
||||
uni.setStorageSync('location', '东营市')
|
||||
uni.setStorageSync("region", 2)
|
||||
this.address = '东营市'
|
||||
} else if (value == '3') {
|
||||
uni.setStorageSync('location', '济南市')
|
||||
uni.setStorageSync("region", 3)
|
||||
this.address = '济南市'
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.searchValue = ''
|
||||
},
|
||||
// 重新获取城市
|
||||
anewGain() {
|
||||
this.getAddress()
|
||||
},
|
||||
//获取当前位置
|
||||
getAddress() {
|
||||
//vm === vue实例对象
|
||||
let vm = this;
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
//成功
|
||||
success: (res) => {
|
||||
// 逆地址解析 转市
|
||||
let location = res.latitude + ',' + res.longitude
|
||||
//调用逆解析接口
|
||||
uni.request({
|
||||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=location', //腾讯官方逆解析接口，可直接复制
|
||||
data: {
|
||||
location: location,
|
||||
'key': "Q4DBZ-UIMC2-B63UX-CUZ6A-S3UT7-TBF3V", //自己申请的Key
|
||||
},
|
||||
method: "GET",
|
||||
success(res) {
|
||||
console.log(res)
|
||||
uni.setStorageSync('location', res.data.result.address_component.city)
|
||||
},
|
||||
fail: res => {
|
||||
console.log(res.errMsg, '解析失败返回的错误信息');
|
||||
}
|
||||
})
|
||||
},
|
||||
//失败
|
||||
fail: (res) => {
|
||||
// console.log('fail' + JSON.stringify(res))
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '获取地址失败,请打开定位',
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.location {
|
||||
.top_search {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40rpx;
|
||||
.location {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.u-search {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.top_search {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.u-icon__icon {
|
||||
font-size: 26px !important;
|
||||
}
|
||||
.u-search {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.u-search__content {
|
||||
height: 35px;
|
||||
}
|
||||
.u-icon__icon {
|
||||
font-size: 26px !important;
|
||||
}
|
||||
|
||||
.u-search__content__input,
|
||||
.u-search__content {
|
||||
background: rgb(247, 249, 248) !important;
|
||||
border-radius: 34px !important;
|
||||
.u-search__content {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-size: 20rpx !important;
|
||||
}
|
||||
}
|
||||
.u-search__content__input,
|
||||
.u-search__content {
|
||||
background: rgb(247, 249, 248) !important;
|
||||
border-radius: 34px !important;
|
||||
|
||||
input::placeholder {
|
||||
font-size: 20rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.atAddress {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 43rpx;
|
||||
|
||||
.atAddress {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 43rpx;
|
||||
.atAddress_txt {
|
||||
font-size: 28rpx;
|
||||
color: rgb(51, 51, 51);
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.atAddress_txt {
|
||||
font-size: 28rpx;
|
||||
color: rgb(51, 51, 51);
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 900;
|
||||
}
|
||||
.atAddress_city {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 36rpx;
|
||||
|
||||
.atAddress_city {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 36rpx;
|
||||
text {
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 900;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 900;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.atAddress_regain {
|
||||
height: 14px;
|
||||
font-size: 24rpx;
|
||||
color: rgb(93, 204, 227);
|
||||
}
|
||||
}
|
||||
|
||||
.atAddress_regain {
|
||||
height: 14px;
|
||||
font-size: 24rpx;
|
||||
color: rgb(93, 204, 227);
|
||||
}
|
||||
}
|
||||
.recommend_city {
|
||||
margin-top: 62rpx;
|
||||
|
||||
.recommend_city {
|
||||
margin-top: 62rpx;
|
||||
.city_con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
justify-content: space-around;
|
||||
|
||||
.city_con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
justify-content: space-around;
|
||||
.city_item {
|
||||
width: 178rpx;
|
||||
height: 68rpx;
|
||||
background-color: rgb(246, 246, 246);
|
||||
border-radius: 34rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.city_item {
|
||||
width: 178rpx;
|
||||
height: 68rpx;
|
||||
background-color: rgb(246, 246, 246);
|
||||
border-radius: 34rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
font-size: 24rpx;
|
||||
text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// border: 1px solid rgb(23, 20, 22);
|
||||
text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.city_list {
|
||||
.province_txt {
|
||||
width: 100%;
|
||||
background-color: rgb(246, 246, 246);
|
||||
color: rgb(102, 102, 102);
|
||||
font-size: 24rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.city_list {
|
||||
.province_txt {
|
||||
width: 100%;
|
||||
background-color: rgb(246, 246, 246);
|
||||
color: rgb(102, 102, 102);
|
||||
font-size: 24rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.city_txt {
|
||||
font-size: 28rpx;
|
||||
color: rgb(51, 51, 51);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.city_txt {
|
||||
font-size: 28rpx;
|
||||
color: rgb(51, 51, 51);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user