mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
完成大体功能和样式
This commit is contained in:
203
pages-biz/location/location.vue
Normal file
203
pages-biz/location/location.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="location-page">
|
||||
<custom-navbar title="选择城市" />
|
||||
<view class="selected" >
|
||||
<view class="title">
|
||||
已选 :
|
||||
<text style="color: #FF2F31;margin-left: 12rpx;">
|
||||
{{vuex_city==''?'请选择城市':vuex_city}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="location" @click="setLocation">
|
||||
<view class="title">当前定位</view>
|
||||
<view class="body">
|
||||
<view class="left">
|
||||
<image src="../../static/navigate.png" mode="widthFix" class="img"></image>
|
||||
{{locationCity}}
|
||||
</view>
|
||||
<view class="right">切换城市</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hot" >
|
||||
<view class="title">热门城市</view>
|
||||
<view class="body">
|
||||
<view class="tag" v-for="(item,index) in hotList" :key="index" @click="clickCity(item)">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// import wxGetAddress from '@/common/utils/wxGetAddress.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
locationCity:'',
|
||||
hotList:['杭州市','郑州市','北京市','上海市','广州市','深圳市','武汉市']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.findLocation()
|
||||
},
|
||||
methods: {
|
||||
clickCity(item){
|
||||
this.$u.vuex('vuex_city', item);
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
setLocation(){
|
||||
this.$u.vuex('vuex_city', this.locationCity);
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
findLocation(){
|
||||
let that = this
|
||||
uni.showLoading({title:"定位中....",mask:true})
|
||||
this.$u.get("/location/getRealCity").then(obj => {
|
||||
let cityName = obj.msg
|
||||
if(cityName){
|
||||
this.locationCity = cityName
|
||||
let lifeData = uni.getStorageSync('lifeData');
|
||||
let vuex_city = lifeData.vuex_city
|
||||
if(!vuex_city){
|
||||
this.$u.vuex('vuex_city', cityName);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}else{
|
||||
uni.request({
|
||||
//获取真实IP
|
||||
url:'https://tianqiapi.com/ip?version=v9&appid=23035354&appsecret=8YvlPNrz',
|
||||
success(resp) {
|
||||
let ip = resp.data.ip
|
||||
that.$u.get("/api/profile/getRealCityByIP?ip="+ip).then(obj => {
|
||||
let cityName = obj.msg
|
||||
if(cityName){
|
||||
that.locationCity = cityName
|
||||
let lifeData = uni.getStorageSync('lifeData');
|
||||
let vuex_city = lifeData.vuex_city
|
||||
if(!vuex_city){
|
||||
that.$u.vuex('vuex_city', cityName);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}else{
|
||||
that.$mytip.toast('定位失败')
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
// 微信小程序定位审核太严厉，不使用了。扩展后端接口，使用ip定位
|
||||
// findLocation(){
|
||||
// uni.showLoading({title:"定位中....",mask:true})
|
||||
// uni.getLocation({
|
||||
// type: 'gcj02',
|
||||
// success: async res => {
|
||||
// let { longitude, latitude } = res;
|
||||
// let result = await wxGetAddress({ longitude, latitude });
|
||||
// let province = result.regeocodeData.addressComponent.province
|
||||
// let cityName = result.regeocodeData.addressComponent.city
|
||||
// this.locationCity = cityName
|
||||
// let lifeData = uni.getStorageSync('lifeData');
|
||||
// let vuex_city = lifeData.vuex_city
|
||||
// if(!vuex_city){
|
||||
// this.$u.vuex('vuex_city', cityName);
|
||||
// }
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.location-page{
|
||||
padding-top: 175rpx;
|
||||
}
|
||||
.selected{
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: $u-main-color;
|
||||
margin: 30rpx 20rpx;
|
||||
font-weight: 600;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
.location{
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
padding: 3rpx 0;
|
||||
margin: 20rpx;
|
||||
.title {
|
||||
font-size: 22rpx;
|
||||
color: $u-tips-color;
|
||||
margin: 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.body{
|
||||
margin: 30rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.img{
|
||||
width: 35rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
color: #FF2F31;
|
||||
font-weight: 600;
|
||||
margin-right: 10rpx;
|
||||
};
|
||||
}
|
||||
}
|
||||
.hot{
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: $u-main-color;
|
||||
margin: 30rpx 20rpx;
|
||||
font-weight: 600;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.body{
|
||||
background: #FFFFFF;
|
||||
padding-bottom: 15rpx;
|
||||
border-radius: 18rpx;
|
||||
margin: 20rpx;
|
||||
.tag {
|
||||
display: inline-block;
|
||||
width: 137rpx;
|
||||
height: 75rpx;
|
||||
line-height: 75rpx;
|
||||
font-size: 26rpx;
|
||||
color: $u-content-color;
|
||||
margin: 20rpx 20rpx 5rpx 20rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
text-align: center;
|
||||
background-color: $u-bg-color;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user