选择城市
parent
e2000c389e
commit
c8bad587f4
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,255 @@
|
|||||||
|
<template>
|
||||||
|
<view class="g_pl_16 container" style="background-color: #f5f5f5">
|
||||||
|
<scroll-view class="cities-scroll" scroll-with-animation="true" style="box-sizing: border-box; height: calc(100vh - 87px)" :scroll-into-view="az" scroll-y ref="scrollViewRef">
|
||||||
|
<view class="">
|
||||||
|
<view class="headTxt">当前城市</view>
|
||||||
|
<view class="" hover-class="none" hover-stop-propagation="false">
|
||||||
|
<view @click="selectQuanGuo" class="itemCity" :class="{ active: selectedCity === '全国' }">全国</view>
|
||||||
|
<view class="g_flex_row_center itemCity" v-if="currentCity" @click="selectCity({ shortName: currentCity })" :class="{ active: selectedCity === currentCity }">
|
||||||
|
<i class="iconfont icon-dizhi1 g_mr_4"></i>
|
||||||
|
{{ currentCity }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="cities-list">
|
||||||
|
<block v-for="group in cities">
|
||||||
|
<view class="headTxt" :id="`letter-${group.name[0] == '热' ? 're' : group.name[0]}`">{{ group.name }}</view>
|
||||||
|
<block v-for="city in group.list">
|
||||||
|
<view @click="selectCity(city)" class="itemCity" :class="{ active: selectedCity === city.shortName }">{{ city.shortName }}</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="" style="height: 120px"> </view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 添加字母索引 -->
|
||||||
|
<view class="index-list" v-if="false">
|
||||||
|
<block v-for="(letter, index) in letters">
|
||||||
|
<!-- , activeIndex: currentIndex === index -->
|
||||||
|
<view :class="{ indexItem: true }" @click="scrollToLetter(letter)">
|
||||||
|
{{ letter }}
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<g-panel-fixed>
|
||||||
|
<view class="g_flex_row_center">
|
||||||
|
<g-button btnText="重置" size="small" @clickBtn="back"></g-button>
|
||||||
|
<g-button btnText="确定" type="primary" class="g_ml_24" size="small" @clickBtn="setCity"></g-button>
|
||||||
|
</view>
|
||||||
|
</g-panel-fixed>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// import { cityList } from "../utils/city.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cities: [],
|
||||||
|
cdnBaseImg: this.G.store().cdnBaseImg,
|
||||||
|
selectedCity: "全国",
|
||||||
|
currentIndex: 0,
|
||||||
|
letters: [],
|
||||||
|
az: "",
|
||||||
|
currentInfo: {}, // 当前位置信息
|
||||||
|
currentCity: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.initializeCities();
|
||||||
|
|
||||||
|
this.getLocation().then((res) => {
|
||||||
|
console.log("res", res);
|
||||||
|
this.getCity();
|
||||||
|
});
|
||||||
|
|
||||||
|
// this.calculateLetters();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setCity() {
|
||||||
|
uni.setStorageSync("selectedCity", this.selectedCity);
|
||||||
|
console.log(`城市 ${this.selectedCity} 已保存到缓存`);
|
||||||
|
uni.navigateBack({ delta: 1 });
|
||||||
|
},
|
||||||
|
getCity() {
|
||||||
|
let that = this;
|
||||||
|
this.G.Get(this.api.getCityNameByLatLng, { lng: this.currentInfo.longitude, lat: this.currentInfo.latitude }, (res) => {
|
||||||
|
if (res) {
|
||||||
|
that.currentCity = res.replace("市", "");
|
||||||
|
}
|
||||||
|
console.log("res");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getLocation() {
|
||||||
|
let that = this;
|
||||||
|
console.log("123123");
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.authorize({
|
||||||
|
// 检测是否授权位置信息
|
||||||
|
scope: "scope.userLocation",
|
||||||
|
success() {
|
||||||
|
console.log("用户成功授权位置信息");
|
||||||
|
uni.getLocation({
|
||||||
|
type: "wgs84",
|
||||||
|
success(res) {
|
||||||
|
that.currentInfo = {
|
||||||
|
latitude: res.latitude,
|
||||||
|
longitude: res.longitude,
|
||||||
|
timestamp: new Date().getTime(),
|
||||||
|
};
|
||||||
|
console.log("获取当前经纬度：", that.currentInfo);
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.log(err);
|
||||||
|
},
|
||||||
|
complete() {
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.log(err);
|
||||||
|
console.log("用户拒绝授权位置信息，再次提示用户授权");
|
||||||
|
uni.showToast({
|
||||||
|
title: "请开启定位权限以显示距职位距离",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
resolve();
|
||||||
|
// that.showRefuseLocationPermission();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
back() {
|
||||||
|
this.selectedCity = "全国";
|
||||||
|
uni.setStorageSync("selectedCity", "全国");
|
||||||
|
|
||||||
|
// uni.navigateBack({ delta: 1 });
|
||||||
|
},
|
||||||
|
selectQuanGuo() {
|
||||||
|
this.selectedCity = "全国";
|
||||||
|
console.log("全国被选中");
|
||||||
|
},
|
||||||
|
selectCity(city) {
|
||||||
|
this.selectedCity = city.shortName;
|
||||||
|
console.log(`城市 ${city.shortName} 被选中`);
|
||||||
|
},
|
||||||
|
initializeCities() {
|
||||||
|
this.G.Get(this.api.get_city_list, {}, (res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.letters.push("热");
|
||||||
|
res.forEach((item) => {
|
||||||
|
if (!this.letters.includes(item.name[0])) {
|
||||||
|
this.letters.push(item.name[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.cities = res;
|
||||||
|
const cachedSelectedCity = uni.getStorageSync("selectedCity");
|
||||||
|
if (cachedSelectedCity) {
|
||||||
|
this.selectedCity = cachedSelectedCity;
|
||||||
|
} else {
|
||||||
|
this.selectedCity = "全国";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// const hotCities = originalCities.find(group => group.name === '热门城市');
|
||||||
|
|
||||||
|
// if (hotCities) {
|
||||||
|
// hotCities.name = '热';
|
||||||
|
// this.cities = originalCities.filter(group => group.name !== '热门城市');
|
||||||
|
// this.cities.unshift(hotCities);
|
||||||
|
// } else {
|
||||||
|
// this.cities = originalCities;
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
// calculateLetters() {
|
||||||
|
// this.letters = [];
|
||||||
|
// this.cities.forEach((group) => {
|
||||||
|
// const firstLetter = group.name.charAt(0).toUpperCase();
|
||||||
|
// if (!this.letters.includes(firstLetter)) {
|
||||||
|
// this.letters.push(firstLetter);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
scrollToLetter(letter) {
|
||||||
|
var that = this;
|
||||||
|
if (letter == "热") {
|
||||||
|
letter = "re";
|
||||||
|
}
|
||||||
|
const id = `letter-${letter}`;
|
||||||
|
console.log(id);
|
||||||
|
this.az = id;
|
||||||
|
// console.log(that.$refs.scrollViewRef);
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// this.$refs.scrollViewRef.scrollIntoView(id, 300);
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.container {
|
||||||
|
.itemCity {
|
||||||
|
width: calc(33.33% - 10px);
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
color: #1d1d1d;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #00b666;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.headTxt {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 25px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cities-scroll {
|
||||||
|
// height: calc(100vh - 100px);
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-list {
|
||||||
|
position: fixed;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
|
||||||
|
.indexItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 2px;
|
||||||
|
&.activeIndex {
|
||||||
|
background: #00b666;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue