From 0a206f3acb9af0ec9db650861d34a256cda1c960 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期四, 26 二月 2026 17:48:36 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
mini-program/pages/select-city/select-city.vue | 247 +++++++++++++++++++++++++++++++++++++++---------
1 files changed, 199 insertions(+), 48 deletions(-)
diff --git a/mini-program/pages/select-city/select-city.vue b/mini-program/pages/select-city/select-city.vue
index 3c02bdf..4ce9d11 100644
--- a/mini-program/pages/select-city/select-city.vue
+++ b/mini-program/pages/select-city/select-city.vue
@@ -1,40 +1,157 @@
<template>
<view class="box">
- <view class="box-search">
- <u-search placeholder="鎼滅储鍟嗗搧" height="30" searchIconColor="#999999" borderColor="#eeeeee"
- bgColor="#F9F9FB" :showAction="false" v-model="keyword" />
- </view>
- <view class="box-city">
- <view class="box-city-left">
- <image src="/static/logo.png" mode="widthFix"></image>
- <text>鍚堣偉</text>
+ <view class="head">
+ <view class="box-search">
+ <u-search placeholder="杈撳叆鍩庡競鍚嶇О鎴栨嫾闊�" height="30" searchIconColor="#999999" borderColor="#eeeeee" bgColor="#F9F9FB"
+ :showAction="false" v-model="name" @search="getCity" />
</view>
- <view class="box-city-right">閲嶆柊瀹氫綅</view>
+ <view class="box-city">
+ <view class="box-city-left">
+ <image src="/static/icon/ic_city@2x.png" mode="widthFix"></image>
+ <text>{{cityName}}</text>
+ </view>
+ <view class="box-city-right" @click="checkLocationAuth">閲嶆柊瀹氫綅</view>
+ </view>
</view>
+
<view class="list">
- <view class="list-item">
- <view class="list-item-val" style="color: #999;">A</view>
- </view>
- <view class="list-item">
- <view class="list-item-val">闃垮厠鑻�</view>
+ <view class="list-item" :id="'jiedan-' + item.letter" v-for="(item, index) in list" :key="index">
+ <view class="list-item-val" style="color: #999;">{{item.letter}}</view>
+ <view class="list-item1" v-for="(child, i) in item.children" :key="i" @click="seleCity(child.name)">
+ <view class="list-item-val1">{{child.name}}</view>
+ </view>
</view>
</view>
<view class="tips">
- <view class="tips-row active">A</view>
- <view class="tips-row">B</view>
- <view class="tips-row">C</view>
- <view class="tips-row">D</view>
- <view class="tips-row">E</view>
+ <view :class="index === a ? 'tips-row active' : 'tips-row'" v-for="(item, a) in list" :key="a" @click="gundong(a)">{{item.letter}}</view>
</view>
</view>
</template>
<script>
+ var QQMapWX = require('@/utils/qqmap-wx-jssdk.js')
export default {
data() {
return {
- keyword: ''
+ name: '',
+ index: 0,
+ list: [],
+ cityName: ''
};
+ },
+ onLoad() {
+ this.getCity()
+ this.checkLocationAuth()
+ },
+ methods: {
+ checkLocationAuth() {
+ uni.getSetting({
+ success: (res) => {
+ if (!res.authSetting['scope.userLocation']) {
+ uni.authorize({
+ scope: 'scope.userLocation',
+ success: () => {
+ this.positioning()
+ },
+ fail: () => {
+ uni.showModal({
+ title: '鎻愮ず',
+ content: '闇�瑕佽幏鍙栨偍鐨勪綅缃俊鎭紝璇峰湪璁剧疆涓紑鍚綅缃潈闄�',
+ confirmText: '鍘昏缃�',
+ success: (res) => {
+ if (res.confirm) {
+ this.goToAppSetting();
+ }
+ }
+ });
+ }
+ });
+ } else {
+ this.positioning()
+ }
+ }
+ });
+ },
+ goToAppSetting() {
+ var that = this;
+ uni.openSetting({
+ success: (res) => {
+ if (res.authSetting['scope.userLocation']) {
+ that.positioning()
+ }
+ }
+ });
+ },
+ // 瀹氫綅
+ positioning() {
+ var that = this;
+ uni.getLocation({
+ type: 'gcj02',
+ highAccuracyExpireTime: 3000,
+ isHighAccuracy: true,
+ success: function (addr) {
+ const locParam = { latitude: addr.latitude, longitude: addr.longitude };
+ const qqmapsdk = new QQMapWX({
+ key: 'HEIBZ-QJLLM-SZ36X-6ZBHI-S6Y2J-S6FND'
+ });
+ qqmapsdk.reverseGeocoder({
+ locParam,
+ success: function(res) {
+ console.log(res.result.ad_info.city);
+ that.cityName = res.result.ad_info.city
+ },
+ fail: (err) => {
+ console.error('鑾峰彇浣嶇疆澶辫触===========', err);
+ }
+ });
+ }
+ });
+ },
+ seleCity(city) {
+ uni.$emit('city', city)
+ uni.navigateBack({ delta: 1 });
+ },
+ gundong(index) {
+ this.index = index
+ uni.pageScrollTo({
+ selector: '#jiedan-' + this.list[index].letter, // 鏀寔 ID 閫夋嫨鍣ㄣ�丆lass 閫夋嫨鍣ㄧ瓑 [citation:1]
+ duration: 300, // 鍔ㄧ敾鏃堕暱锛屽崟浣嶆绉掞紝榛樿300ms
+ offsetTop: -100, // 鍋忕Щ璺濈锛屽彲浠ヨ婊氬姩鍚庡厓绱犺窛绂婚《閮ㄦ湁涓�娈佃窛绂� [citation:2]
+ });
+ },
+ getCity() {
+ this.$u.api.getCityInfoList({
+ type: 1,
+ cityName: this.name
+ }).then(res => {
+ if (res.code === 200) {
+ this.list = this.groupByFirstSpell(res.data)
+ }
+ })
+ },
+ groupByFirstSpell(arr) {
+ // 浣跨敤 Map 鏉ユ殏瀛樺垎缁勭粨鏋滐紝閿负 firstSpell锛屽�间负瀵硅薄鏁扮粍
+ const map = new Map();
+
+ arr.forEach(item => {
+ const key = item.firstSpell;
+ if (!map.has(key)) {
+ map.set(key, []);
+ }
+ map.get(key).push(item);
+ });
+
+ // 灏� Map 杞崲涓虹埗瀛愮粨鏋勭殑鏁扮粍
+ const result = [];
+ for (let [key, children] of map.entries()) {
+ result.push({
+ letter: key, // 鍒嗙粍瀛楁锛屽彲鏍规嵁瀹為檯闇�姹傛敼鍚�
+ children: children
+ });
+ }
+
+ return result;
+ }
}
}
</script>
@@ -42,18 +159,21 @@
<style lang="scss" scoped>
.box {
width: 100%;
- padding: 30rpx;
+ padding: 0 30rpx 30rpx 30rpx;
box-sizing: border-box;
+
.tips {
position: fixed;
right: 20rpx;
top: 50%;
- transform: translate(-50%, 0);
+ transform: translate(0, -50%);
display: flex;
flex-direction: column;
+
.active {
color: #004096 !important;
}
+
.tips-row {
font-weight: 400;
font-size: 22rpx;
@@ -61,54 +181,85 @@
margin-bottom: 10rpx;
}
}
+
.list {
width: 100%;
- margin-top: 54rpx;
+ margin-top: 20rpx;
+
.list-item {
width: 100%;
- height: 100rpx;
display: flex;
- align-items: center;
- border-bottom: 1rpx solid #E5E5E5;
+ flex-direction: column;
+
.list-item-val {
font-weight: 400;
font-size: 30rpx;
color: #333333;
+ height: 100rpx;
+ line-height: 100rpx;
+ border-bottom: 1rpx solid #E5E5E5;
+ }
+
+ .list-item1 {
+ width: 100%;
+ height: 100rpx;
+ line-height: 100rpx;
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1rpx solid #E5E5E5;
+
+ .list-item-val1 {
+ font-weight: 400;
+ font-size: 30rpx;
+ color: #333333;
+ }
}
}
}
- .box-search {
+
+ .head {
width: 100%;
+ padding: 30rpx 0;
+ box-sizing: border-box;
position: sticky;
top: 0;
left: 0;
z-index: 999;
background-color: #ffffff;
- }
- .box-city {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 40rpx;
- .box-city-left {
+
+ .box-search {
+ width: 100%;
+ }
+
+ .box-city {
+ width: 100%;
display: flex;
align-items: center;
- image {
- width: 28rpx;
- height: 28rpx;
- margin-right: 20rpx;
+ justify-content: space-between;
+ margin-top: 40rpx;
+
+ .box-city-left {
+ display: flex;
+ align-items: center;
+
+ image {
+ width: 36rpx;
+ height: 36rpx;
+ margin-right: 20rpx;
+ }
+
+ text {
+ font-weight: 500;
+ font-size: 30rpx;
+ color: #222222;
+ }
}
- text {
- font-weight: 500;
- font-size: 30rpx;
- color: #222222;
+
+ .box-city-right {
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #004096;
}
- }
- .box-city-right {
- font-weight: 400;
- font-size: 28rpx;
- color: #004096;
}
}
}
--
Gitblit v1.9.3