xinyilu/xinelu-applet-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
辉 2023-10-24 09:34:39 +08:00
parent 1f643a011f
commit 41458f1ed6
1 changed files with 226 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

516
pages/location/location.vue
View File

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