269 lines
6.4 KiB
Vue
269 lines
6.4 KiB
Vue
<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="require('@/pagesC/images/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>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 是否显示下拉的框
|
|
isShowFont: false,
|
|
// 显示什么字
|
|
showFont: '',
|
|
// 接收缓存地址 赋值
|
|
address: '',
|
|
searchValue: '',
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.address = uni.getStorageSync('location')
|
|
if (!uni.getStorageSync('location')) {
|
|
this.getAddress()
|
|
}
|
|
},
|
|
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')
|
|
},
|
|
getAddressCon(value) {
|
|
if (value == '1') {
|
|
uni.setStorageSync('location', '德州市')
|
|
uni.setStorageSync("region", 1)
|
|
this.address = '德州市'
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else if (value == '2') {
|
|
uni.setStorageSync('location', '东营市')
|
|
uni.setStorageSync("region", 2)
|
|
this.address = '东营市'
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else if (value == '3') {
|
|
uni.setStorageSync('location', '济南市')
|
|
uni.setStorageSync("region", 3)
|
|
this.address = '济南市'
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
},
|
|
clear() {
|
|
this.searchValue = ''
|
|
},
|
|
// 重新获取城市
|
|
anewGain() {
|
|
this.getAddress()
|
|
},
|
|
//获取当前位置
|
|
getAddress() {
|
|
let that = 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': "7Y7BZ-PVXRA-IPYKT-C6YKF-YS3VF-LMFWJ", //自己申请的Key
|
|
},
|
|
method: "GET",
|
|
success(res) {
|
|
var address = res.data.result.address_component.city
|
|
if (address == '德州市') {
|
|
uni.setStorageSync("region", 1)
|
|
} else if (address == '东营市') {
|
|
uni.setStorageSync("region", 2)
|
|
} else if (address == '济南市') {
|
|
uni.setStorageSync("region", 3)
|
|
}
|
|
uni.setStorageSync('location', res.data.result.address_component
|
|
.city)
|
|
that.address = 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 {
|
|
margin-top: 20rpx;
|
|
|
|
.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;
|
|
|
|
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> |