loction
This commit is contained in:
shidongli
parent
0648aa9712
commit
bca1174996
313
pages/location/location.vue
Normal file
313
pages/location/location.vue
Normal file
@ -0,0 +1,313 @@
|
|||||||
|
<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>
|
||||||
|
</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: '获取地址失败,请打开定位',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.location {
|
||||||
|
.top_search {
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.u-search {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-icon__icon {
|
||||||
|
font-size: 26px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-search__content {
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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_txt {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
font-family: "微软雅黑";
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atAddress_city {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 36rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: "微软雅黑";
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atAddress_regain {
|
||||||
|
height: 14px;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgb(93, 204, 227);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend_city {
|
||||||
|
margin-top: 62rpx;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
// 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_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