From b46065a201c09ce69f111806f2bda4a5f476bc4e Mon Sep 17 00:00:00 2001
From: wlzboy <66905212@qq.com>
Date: 星期六, 18 十月 2025 17:20:22 +0800
Subject: [PATCH] fix:用户同步，机构同步
---
app/components/map-selector.vue | 656 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 495 insertions(+), 161 deletions(-)
diff --git a/app/components/map-selector.vue b/app/components/map-selector.vue
index 8d872b9..6c5e540 100644
--- a/app/components/map-selector.vue
+++ b/app/components/map-selector.vue
@@ -5,15 +5,56 @@
class="search-input"
placeholder="璇疯緭鍏ュ湴鍧�"
v-model="searchKeyword"
- @input="onSearchInput"
@focus="onSearchFocus"
/>
<button class="search-btn" @click="searchAddress">鎼滅储</button>
+ <button class="location-btn" @click="getCurrentLocation" :disabled="isGettingLocation">
+ <uni-icons v-if="!isGettingLocation" type="location" size="18" color="white"></uni-icons>
+ <uni-icons v-else type="spinner-cycle" size="18" color="white"></uni-icons>
+ </button>
</view>
- <!-- 寰俊灏忕▼搴忎娇鐢ㄥ師鐢焟ap缁勪欢 -->
+ <!-- 閫変腑鍦板潃鐣岄潰 - 鏄剧ず鍦ㄥ垪琛ㄤ笂鏂� -->
+ <view class="selected-address" v-if="selectedAddress">
+ <view class="selected-header">
+ <uni-icons type="checkmarkempty" size="20" color="#007AFF"></uni-icons>
+ <text class="address-title">宸查�変腑鍦板潃</text>
+ <view class="cancel-btn" @click="cancelSelection">
+ <uni-icons type="closeempty" size="16" color="#999"></uni-icons>
+ </view>
+ </view>
+ <view class="address-info">
+ <view class="address-name">{{ selectedAddress.title }}</view>
+ <view class="address-detail">{{ selectedAddress.address }}</view>
+ </view>
+ <button class="confirm-btn" @click="confirmAddress">
+ <uni-icons type="checkmarkempty" size="18" color="white"></uni-icons>
+ <text>纭閫夋嫨姝ゅ湴鍧�</text>
+ </button>
+ </view>
+
+ <!-- 鍦板潃鎼滅储缁撴灉鍒楄〃 -->
+ <view class="address-list" v-if="showSearchResults && searchResults.length > 0">
+ <view
+ class="address-item"
+ v-for="(item, index) in searchResults"
+ :key="'search-' + index"
+ @click="selectAddress(item)"
+ >
+ <!-- 纭繚浣跨敤鎻掑�艰娉� -->
+ <view class="address-title">{{ item.title }}</view>
+ <view class="address-detail">{{ item.address }}</view>
+ </view>
+ </view>
+
+ <!-- 鎼滅储鏃犵粨鏋滄彁绀� -->
+ <view class="no-results" v-if="showSearchResults && searchResults.length === 0 && searchCompleted">
+ <text>鏈壘鍒扮浉鍏冲湴鍧�</text>
+ </view>
+
+ <!-- UniApp鍘熺敓鍦板浘缁勪欢锛屾敮鎸佸骞冲彴 -->
<view class="map-container" id="mapContainer">
- <!-- #ifdef MP-WEIXIN -->
+ <!-- 鎵�鏈夊钩鍙扮粺涓�浣跨敤uniapp鍘熺敓map缁勪欢 -->
<map
id="map"
:longitude="longitude"
@@ -24,6 +65,14 @@
:controls="controls"
:include-points="includePoints"
:show-location="true"
+ :enable-3D="false"
+ :show-compass="false"
+ :enable-overlooking="false"
+ :enable-zoom="true"
+ :enable-scroll="true"
+ :enable-rotate="false"
+ :enable-satellite="false"
+ :enable-traffic="false"
@markertap="onMarkerTap"
@callouttap="onCalloutTap"
@controltap="onControlTap"
@@ -31,45 +80,17 @@
@tap="onMapTap"
class="map-webview"
></map>
- <!-- #endif -->
-
- <!-- H5骞冲彴浣跨敤web-view鍔犺浇鐧惧害鍦板浘 -->
- <!-- #ifdef H5 -->
- <web-view
- v-if="baiduMapUrl"
- :src="baiduMapUrl"
- class="map-webview"
- @message="onWebviewMessage"
- ></web-view>
- <!-- #endif -->
<view class="map-placeholder" v-if="!isMapLoaded">
<text>鍦板浘鍔犺浇涓�...</text>
</view>
</view>
-
- <view class="address-list" v-if="searchResults.length > 0">
- <view
- class="address-item"
- v-for="(item, index) in searchResults"
- :key="index"
- @click="selectAddress(item)"
- >
- <view class="address-title">{{ item.title }}</view>
- <view class="address-detail">{{ item.address }}</view>
- </view>
- </view>
-
- <view class="selected-address" v-if="selectedAddress">
- <view class="address-title">閫変腑鍦板潃锛�</view>
- <view class="address-detail">{{ selectedAddress.title }}</view>
- <view class="address-detail">{{ selectedAddress.address }}</view>
- <button class="confirm-btn" @click="confirmAddress">纭閫夋嫨</button>
- </view>
</view>
</template>
<script>
+ import { searchAddress, reverseGeocoder } from '@/api/map'
+
export default {
name: 'MapSelector',
props: {
@@ -82,75 +103,149 @@
data() {
return {
searchKeyword: '',
- searchResults: [],
+ searchResults: [], // 纭繚杩欐槸鍝嶅簲寮忔暟鎹�
selectedAddress: null,
isMapLoaded: false,
- // H5骞冲彴鐩稿叧
- baiduMapUrl: '',
- ak: '鎮ㄧ殑鐧惧害鍦板浘AK',
- // 寰俊灏忕▼搴忕浉鍏�
+ showSearchResults: false, // 鎺у埗鏄惁鏄剧ず鎼滅储缁撴灉
+ searchCompleted: false, // 鏍囪鎼滅储鏄惁瀹屾垚
+ showDebug: true, // 璋冭瘯寮�鍏�
+ // 鍦板浘鐩稿叧
longitude: 113.324520,
latitude: 23.099994,
markers: [],
polyline: [],
circles: [],
controls: [],
- includePoints: []
+ includePoints: [],
+ isGettingLocation: false, // 鏄惁姝ｅ湪鑾峰彇浣嶇疆
+ // 闃叉鑷姩鑱氱劍鐨勬爣蹇�
+ shouldPreventAutoFocus: true
}
},
mounted() {
- // #ifdef H5
- // 鍒濆鍖栫櫨搴﹀湴鍥�
- this.initBaiduMap()
- // #endif
+ console.log('鍦板浘閫夋嫨鍣ㄧ粍浠跺凡鎸傝浇');
- // #ifdef MP-WEIXIN
- // 鍒濆鍖栧井淇″皬绋嬪簭鍦板浘
- this.initWechatMap()
- // #endif
+ // 妫�鏌PI Key鏄惁宸查厤缃�
+ if (!this.isTencentMapKeyConfigured()) {
+ console.error('[system] Map key not configured.')
+ this.$modal.showToast('鍦板浘API Key鏈厤缃紝璇疯仈绯荤鐞嗗憳')
+ return
+ }
+ // 鍒濆鍖栧湴鍥�
+ this.initMap()
+
+ // 寤惰繜澶勭悊鍒濆鍦板潃锛岄伩鍏嶈法鍩熼棶棰�
if (this.initialAddress) {
this.searchKeyword = this.initialAddress
- // 寤惰繜璁剧疆鐒︾偣锛岄伩鍏嶈法鍩熼棶棰�
- setTimeout(() => {
- // 涓嶈嚜鍔ㄨ仛鐒︼紝璁╃敤鎴锋墜鍔ㄧ偣鍑�
- }, 500)
+ // 涓嶅啀灏濊瘯鑷姩鑱氱劍锛岄伩鍏嶈法鍩熼棶棰�
+ // 鐢ㄦ埛闇�瑕佹墜鍔ㄧ偣鍑昏緭鍏ユ鎵嶈兘鑱氱劍
}
+
+ // 寤惰繜涓�娈垫椂闂村悗鍏佽鑷姩鎿嶄綔锛堝鏋滈渶瑕佺殑璇濓級
+ setTimeout(() => {
+ this.shouldPreventAutoFocus = false
+ }, 1000)
},
methods: {
+ // 妫�鏌ヨ吘璁湴鍥続PI Key鏄惁宸查厤缃�
+ isTencentMapKeyConfigured() {
+ // 瀵逛簬鍚庣浠ｇ悊鏂瑰紡锛屽墠绔笉鍐嶉渶瑕佹鏌ey閰嶇疆
+ return true
+ },
+
// 鎼滅储妗嗚幏寰楃劍鐐逛簨浠�
onSearchFocus() {
// 鐢ㄦ埛涓诲姩鑱氱劍锛屼笉浼氳Е鍙戣法鍩熼棶棰�
console.log('鎼滅储妗嗚幏寰楃劍鐐�')
+ // 閲嶇疆闃茶仛鐒︽爣蹇�
+ this.shouldPreventAutoFocus = false
},
- // #ifdef H5
- // 澶勭悊web-view娑堟伅
- onWebviewMessage(e) {
- // 澶勭悊鏉ヨ嚜web-view鐨勬秷鎭�
- console.log('鏀跺埌鏉ヨ嚜web-view鐨勬秷鎭�:', e)
- },
-
- // 鍒濆鍖栫櫨搴﹀湴鍥撅紙H5骞冲彴锛�
- initBaiduMap() {
- // 鏋勯�犵櫨搴﹀湴鍥綰RL
- this.baiduMapUrl = `https://api.map.baidu.com/mapjs?v=3.0&ak=${this.ak}&callback=initMap`
- this.isMapLoaded = true
+ // 鑾峰彇褰撳墠浣嶇疆
+ getCurrentLocation() {
+ if (this.isGettingLocation) {
+ return
+ }
- // 寤惰繜鍔犺浇鍦板浘锛岄伩鍏嶉樆濉�
- setTimeout(() => {
- this.isMapLoaded = true
- }, 1000)
+ this.isGettingLocation = true
+ this.$modal.showToast('姝ｅ湪鑾峰彇褰撳墠浣嶇疆...')
+
+ uni.getLocation({
+ type: 'gcj02',
+ success: (res) => {
+ console.log('鑾峰彇浣嶇疆鎴愬姛:', res)
+ this.handleLocationSuccess(res.longitude, res.latitude)
+ this.isGettingLocation = false
+ },
+ fail: (error) => {
+ console.error('鑾峰彇浣嶇疆澶辫触:', error)
+ this.$modal.showToast('鑾峰彇浣嶇疆澶辫触锛岃妫�鏌ュ畾浣嶆潈闄�')
+ this.isGettingLocation = false
+ }
+ })
},
- // #endif
- // #ifdef MP-WEIXIN
- // 鍒濆鍖栧井淇″皬绋嬪簭鍦板浘
- initWechatMap() {
+ // 澶勭悊浣嶇疆鑾峰彇鎴愬姛
+ handleLocationSuccess(longitude, latitude) {
+ // 鍙傛暟楠岃瘉
+ if (longitude === undefined || longitude === null || latitude === undefined || latitude === null) {
+ console.error('浣嶇疆鑾峰彇澶辫触锛屽弬鏁颁笉瀹屾暣', { longitude, latitude });
+ this.$modal.showToast('浣嶇疆鑾峰彇澶辫触');
+ return;
+ }
+
+ // 妫�鏌ュ弬鏁版湁鏁堟��
+ if (isNaN(longitude) || isNaN(latitude)) {
+ console.error('浣嶇疆鑾峰彇澶辫触锛屽潗鏍囧寘鍚潪娉曞��', { longitude, latitude });
+ this.$modal.showToast('浣嶇疆鑾峰彇澶辫触锛屽潗鏍囨棤鏁�');
+ return;
+ }
+
+ this.longitude = longitude
+ this.latitude = latitude
+
+ // 璁剧疆鏍囪
+ this.markers = [{
+ id: Date.now(),
+ longitude: longitude,
+ latitude: latitude,
+ title: '褰撳墠浣嶇疆',
+ iconPath: '/static/icons/location.png',
+ width: 30,
+ height: 30
+ }]
+
+ // 閫嗗湴鍧�瑙ｆ瀽
+ this.reverseGeocode(latitude, longitude, true)
+
+ this.$modal.showToast('宸插畾浣嶅埌褰撳墠浣嶇疆')
+ this.isMapLoaded = true
+ },
+
+ // 鍒濆鍖栧湴鍥�
+ initMap() {
// 鑾峰彇鐢ㄦ埛浣嶇疆
uni.getLocation({
type: 'gcj02',
success: (res) => {
+ // 鍙傛暟楠岃瘉
+ if (res.longitude === undefined || res.longitude === null ||
+ res.latitude === undefined || res.latitude === null) {
+ console.error('鍒濆鍖栧湴鍥炬椂浣嶇疆鑾峰彇澶辫触锛屽弬鏁颁笉瀹屾暣', res);
+ this.$modal.showToast('浣嶇疆鑾峰彇澶辫触');
+ this.isMapLoaded = true;
+ return;
+ }
+
+ // 妫�鏌ュ弬鏁版湁鏁堟��
+ if (isNaN(res.longitude) || isNaN(res.latitude)) {
+ console.error('鍒濆鍖栧湴鍥炬椂浣嶇疆鑾峰彇澶辫触锛屽潗鏍囧寘鍚潪娉曞��', res);
+ this.$modal.showToast('浣嶇疆鑾峰彇澶辫触锛屽潗鏍囨棤鏁�');
+ this.isMapLoaded = true;
+ return;
+ }
+
this.longitude = res.longitude
this.latitude = res.latitude
@@ -165,16 +260,12 @@
height: 30
}]
- // 寤惰繜璁剧疆鍔犺浇鐘舵�侊紝纭繚鍦板浘瀹屽叏鍒濆鍖�
- setTimeout(() => {
- this.isMapLoaded = true
- }, 500)
+ // 璁剧疆鍔犺浇鐘舵��
+ this.isMapLoaded = true
},
fail: () => {
- // 寤惰繜璁剧疆鍔犺浇鐘舵��
- setTimeout(() => {
- this.isMapLoaded = true
- }, 500)
+ // 璁剧疆鍔犺浇鐘舵��
+ this.isMapLoaded = true
this.$modal.showToast('鑾峰彇浣嶇疆澶辫触')
}
})
@@ -184,6 +275,14 @@
onMapTap(e) {
// 鍦ㄧ偣鍑讳綅缃坊鍔犳爣璁�
const { longitude, latitude } = e.detail
+
+ // 鍙傛暟楠岃瘉
+ if (longitude === undefined || longitude === null || latitude === undefined || latitude === null) {
+ console.error('鍦板浘鐐瑰嚮浜嬩欢鍙傛暟涓嶅畬鏁�', { longitude, latitude });
+ this.$modal.showToast('浣嶇疆淇℃伅鑾峰彇澶辫触');
+ return;
+ }
+
this.markers = [{
id: Date.now(),
longitude,
@@ -199,84 +298,148 @@
},
// 閫嗗湴鍧�瑙ｆ瀽
- reverseGeocode(lat, lng) {
- // 杩欓噷搴旇璋冪敤鍚庡彴API杩涜閫嗗湴鍧�瑙ｆ瀽
- // 妯℃嫙鏁版嵁
- this.selectedAddress = {
- title: '閫変腑浣嶇疆',
- address: `缁忕含搴�: ${lat.toFixed(6)}, ${lng.toFixed(6)}`,
- lat: lat,
- lng: lng
+ reverseGeocode(lat, lng, isCurrentLocation = false) {
+ // 鍙傛暟楠岃瘉
+ if (lat === undefined || lat === null || lng === undefined || lng === null) {
+ console.error('閫嗗湴鍧�瑙ｆ瀽鍙傛暟涓嶅畬鏁达紝缂哄皯缁忕含搴﹀潗鏍�', { lat, lng });
+ this.$modal.showToast('鍙傛暟閿欒锛氱己灏戠粡绾害鍧愭爣');
+ return;
}
+
+ // 妫�鏌ュ弬鏁版湁鏁堟��
+ if (isNaN(lat) || isNaN(lng)) {
+ console.error('閫嗗湴鍧�瑙ｆ瀽鍙傛暟鏃犳晥锛屽潗鏍囧寘鍚潪娉曞��', { lat, lng });
+ this.$modal.showToast('鍙傛暟閿欒锛氬潗鏍囨牸寮忔棤鏁�');
+ return;
+ }
+
+ // 浣跨敤鍚庣浠ｇ悊鎺ュ彛杩涜閫嗗湴鍧�瑙ｆ瀽
+ reverseGeocoder(lat, lng).then(res => {
+ if (res.code === 200) {
+ // 瑙ｆ瀽鍚庣杩斿洖鐨勮吘璁湴鍥続PI鍝嶅簲
+ const responseData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
+ if (responseData && responseData.status === 0 && responseData.result) {
+ const result = responseData.result
+ this.selectedAddress = {
+ title: isCurrentLocation ? '褰撳墠浣嶇疆' : (result.address || '閫変腑浣嶇疆'),
+ address: result.address || `缁忕含搴�: ${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+ lat: lat,
+ lng: lng
+ }
+ } else {
+ this.selectedAddress = {
+ title: isCurrentLocation ? '褰撳墠浣嶇疆' : '閫変腑浣嶇疆',
+ address: `缁忕含搴�: ${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+ lat: lat,
+ lng: lng
+ }
+ }
+ } else {
+ this.selectedAddress = {
+ title: isCurrentLocation ? '褰撳墠浣嶇疆' : '閫変腑浣嶇疆',
+ address: `缁忕含搴�: ${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+ lat: lat,
+ lng: lng
+ }
+ }
+ }).catch(error => {
+ console.error('閫嗗湴鍧�瑙ｆ瀽澶辫触:', error)
+ this.$modal.showToast('鍦板潃瑙ｆ瀽澶辫触锛�' + (error.message || '璇风◢鍚庨噸璇�'))
+ this.selectedAddress = {
+ title: isCurrentLocation ? '褰撳墠浣嶇疆' : '閫変腑浣嶇疆',
+ address: `缁忕含搴�: ${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+ lat: lat,
+ lng: lng
+ }
+ })
},
- // #endif
- // 鎼滅储鍦板潃
+ // 鎼滅储鍦板潃 - 鍙湪鐐瑰嚮鎼滅储鎸夐挳鏃惰皟鐢�
searchAddress() {
+ console.log('鎵ц鎼滅储锛屽叧閿瘝:', this.searchKeyword);
if (!this.searchKeyword) {
this.$modal.showToast('璇疯緭鍏ュ湴鍧�')
return
}
- // 鍦ㄥ疄闄呴」鐩腑锛岃繖閲屽簲璇ヨ皟鐢ㄥ搴斿钩鍙扮殑鍦板浘API
- // 渚嬪H5骞冲彴璋冪敤鐧惧害鍦板浘API锛屽井淇″皬绋嬪簭璋冪敤寰俊鍦板浘API
-
- // 妯℃嫙鎼滅储缁撴灉
- this.searchResults = [
- {
- title: this.searchKeyword + '闄勮繎鍦扮偣1',
- address: '骞夸笢鐪佸箍宸炲競澶╂渤鍖�' + this.searchKeyword + '123鍙�',
- lat: 23.123 + Math.random() * 0.1,
- lng: 113.321 + Math.random() * 0.1
- },
- {
- title: this.searchKeyword + '闄勮繎鍦扮偣2',
- address: '骞夸笢鐪佸箍宸炲競瓒婄鍖�' + this.searchKeyword + '456鍙�',
- lat: 23.145 + Math.random() * 0.1,
- lng: 113.289 + Math.random() * 0.1
- },
- {
- title: this.searchKeyword + '闄勮繎鍦扮偣3',
- address: '骞夸笢鐪佸箍宸炲競鐧戒簯鍖�' + this.searchKeyword + '789鍙�',
- lat: 23.167 + Math.random() * 0.1,
- lng: 113.345 + Math.random() * 0.1
- }
- ]
+ // 浣跨敤鍚庣浠ｇ悊鎺ュ彛杩涜鍦板潃鎼滅储
+ this.searchAddressViaBackend()
},
- // 杈撳叆妗嗚緭鍏ヤ簨浠�
- onSearchInput() {
- // 闃叉姈鎼滅储
+ // 閫氳繃鍚庣浠ｇ悊鎼滅储鍦板潃
+ searchAddressViaBackend() {
+ // 鏄剧ず鎼滅储缁撴灉鍖哄煙
+ this.showSearchResults = true;
+ this.searchCompleted = false;
+
+ console.log('寮�濮嬫悳绱㈠湴鍧�:', this.searchKeyword);
+
+ searchAddress(this.searchKeyword, '骞垮窞').then(res => {
+ console.log('鍦板潃鎼滅储杩斿洖缁撴灉:', res);
+ // 纭繚姝ｇ‘鏇存柊鎼滅储缁撴灉
+ this.searchResults = [];
+
+ if (res.code === 200) {
+ // 瑙ｆ瀽鍚庣杩斿洖鐨勮吘璁湴鍥続PI鍝嶅簲
+ const responseData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
+ console.log('瑙ｆ瀽鍚庣殑鍝嶅簲鏁版嵁:', responseData);
+
+ if (responseData && responseData.status === 0 && responseData.data && responseData.data.length > 0) {
+ // 鐩存帴璧嬪�兼暟缁勶紝纭繚鍝嶅簲寮忔洿鏂�
+ this.searchResults = responseData.data.map(item => ({
+ title: item.title,
+ address: item.address,
+ lat: item.location.lat,
+ lng: item.location.lng
+ }));
+ console.log('澶勭悊鍚庣殑鎼滅储缁撴灉:', this.searchResults);
+
+ // 娣诲姞璋冭瘯淇℃伅
+ console.log('鎼滅储缁撴灉鏁伴噺:', this.searchResults.length);
+ console.log('showSearchResults:', this.showSearchResults);
+ console.log('v-if鏉′欢缁撴灉:', this.showSearchResults && this.searchResults.length > 0);
+ } else {
+ console.log('鏈壘鍒扮浉鍏冲湴鍧�');
+ // 鍗充娇娌℃湁鏁版嵁涔熻鏄剧ず"鏈壘鍒扮浉鍏冲湴鍧�"
+ this.searchCompleted = true;
+ }
+ } else {
+ console.log('鎼滅储澶辫触锛岄敊璇唬鐮�:', res.code);
+ this.$modal.showToast('鎼滅储澶辫触锛岃閲嶈瘯')
+ }
+
+ // 鏍囪鎼滅储瀹屾垚
+ this.searchCompleted = true;
+ }).catch(error => {
+ console.error('鎼滅储澶辫触:', error)
+ this.$modal.showToast('鎼滅储澶辫触锛岃閲嶈瘯')
+ // 鏍囪鎼滅储瀹屾垚
+ this.searchCompleted = true;
+ })
},
// 閫夋嫨鍦板潃
selectAddress(item) {
this.selectedAddress = item
this.markLocation(item.lat, item.lng)
+
+ // 閫変腑鍦板潃鍚庯紝淇濇寔鎼滅储缁撴灉鍒楄〃鏄剧ず
+ console.log('鍦板潃宸查�変腑:', item);
},
// 鍦ㄥ湴鍥句笂鏍囪浣嶇疆
markLocation(lat, lng) {
- // #ifdef H5
- // H5骞冲彴鏍囪浣嶇疆閫昏緫
- console.log(`H5骞冲彴鏍囪浣嶇疆: ${lat}, ${lng}`)
- this.$modal.showToast(`宸叉爣璁颁綅缃甡)
- // #endif
-
- // #ifdef MP-WEIXIN
- // 寰俊灏忕▼搴忔爣璁颁綅缃�昏緫
this.longitude = lng
this.latitude = lat
this.markers = [{
id: Date.now(),
longitude: lng,
latitude: lat,
- title: item.title,
+ title: this.selectedAddress?.title || '閫変腑浣嶇疆',
iconPath: '/static/icons/location-selected.png',
width: 30,
height: 30
}]
- // #endif
},
// 纭閫夋嫨鍦板潃
@@ -286,6 +449,9 @@
return
}
+ // 鏄剧ず纭鎻愮ず
+ this.$modal.showToast('鍦板潃閫夋嫨鎴愬姛')
+
// 瑙﹀彂浜嬩欢锛屽皢閫変腑鐨勫湴鍧�浼犻�掔粰鐖剁粍浠�
this.$emit('addressSelected', {
title: this.selectedAddress.title,
@@ -293,6 +459,21 @@
lat: this.selectedAddress.lat,
lng: this.selectedAddress.lng
})
+
+ // 纭鍚庨殣钘忔悳绱㈢粨鏋滃拰閫変腑鍦板潃鐣岄潰
+ setTimeout(() => {
+ this.selectedAddress = null
+ this.showSearchResults = false
+ this.searchResults = []
+ }, 1000)
+ },
+
+ // 鍙栨秷閫夋嫨鍦板潃
+ cancelSelection() {
+ this.selectedAddress = null
+ // 鍙竻绌洪�変腑鍦板潃锛屼笉娓呯┖鎼滅储缁撴灉
+ // this.showSearchResults = false
+ // this.searchResults = []
}
}
}
@@ -301,14 +482,17 @@
<style lang="scss">
.map-selector-container {
width: 100%;
- height: 100%;
+ height: 100vh;
display: flex;
flex-direction: column;
.search-bar {
display: flex;
- padding: 20rpx;
+ padding: 15rpx 20rpx;
background-color: white;
+ flex-shrink: 0;
+ position: relative;
+ z-index: 100; /* 鎻愰珮灞傜骇 */
.search-input {
flex: 1;
@@ -328,18 +512,136 @@
border-radius: 10rpx;
font-size: 28rpx;
}
+
+ .location-btn {
+ width: 70rpx;
+ height: 70rpx;
+ margin-left: 10rpx;
+ background-color: #1AAD19;
+ color: white;
+ border-radius: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:active {
+ background-color: #179B16;
+ }
+
+ &[disabled] {
+ background-color: #ccc;
+ opacity: 0.6;
+ }
+ }
+ }
+
+ .debug-panel {
+ padding: 15rpx 20rpx;
+ background-color: #fff3cd;
+ border: 1rpx solid #ffeaa7;
+ z-index: 100; /* 鎻愰珮灞傜骇 */
+ position: relative;
+
+ .debug-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10rpx;
+
+ .debug-title {
+ font-weight: bold;
+ color: #856404;
+ }
+
+ .debug-toggle {
+ font-size: 24rpx;
+ padding: 5rpx 10rpx;
+ background-color: #ffc107;
+ border: none;
+ border-radius: 5rpx;
+ }
+ }
+
+ .debug-content {
+ font-size: 24rpx;
+ color: #856404;
+
+ text {
+ display: block;
+ margin-bottom: 5rpx;
+ word-break: break-all;
+ }
+ }
+ }
+
+ /* 鍦板潃鎼滅储缁撴灉鍒楄〃 - 璋冩暣浣嶇疆 */
+ .address-list {
+ max-height: 40vh;
+ min-height: 200rpx;
+ overflow-y: auto;
+ background-color: white;
+ position: absolute;
+ top: 300rpx; /* 鍦ㄩ�変腑鍦板潃鐣岄潰涓嬫柟鏄剧ず */
+ left: 0;
+ right: 0;
+ z-index: 90; /* 纭繚鍦ㄥ湴鍥句笂鏂� */
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+
+ .address-item {
+ padding: 25rpx 30rpx;
+ border-bottom: 1rpx solid #f0f0f0;
+ min-height: 100rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .address-title {
+ font-size: 32rpx;
+ font-weight: bold;
+ margin-bottom: 8rpx;
+ color: #333;
+ line-height: 1.3;
+ }
+
+ .address-detail {
+ font-size: 28rpx;
+ color: #666;
+ line-height: 1.4;
+ }
+ }
+ }
+
+ /* 鏃犵粨鏋滄彁绀� - 璋冩暣浣嶇疆 */
+ .no-results {
+ padding: 30rpx;
+ text-align: center;
+ background-color: white;
+ color: #999;
+ font-size: 28rpx;
+ position: absolute;
+ top: 150rpx; /* 璋冩暣浣嶇疆 */
+ left: 0;
+ right: 0;
+ z-index: 90; /* 纭繚鍦ㄥ湴鍥句笂鏂� */
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+ min-height: 200rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.map-container {
flex: 1;
- height: 400rpx;
+ min-height: 50vh;
+ max-height: 70vh;
+ position: relative;
.map-webview {
width: 100%;
height: 100%;
}
- // 寰俊灏忕▼搴忓湴鍥炬牱寮�
+ // 鍦板浘鏍峰紡
map {
width: 100%;
height: 100%;
@@ -356,43 +658,65 @@
}
}
- .address-list {
- max-height: 300rpx;
- overflow-y: auto;
- background-color: white;
-
- .address-item {
- padding: 20rpx 30rpx;
- border-bottom: 1rpx solid #f0f0f0;
-
- .address-title {
- font-size: 30rpx;
- font-weight: bold;
- margin-bottom: 10rpx;
- }
-
- .address-detail {
- font-size: 26rpx;
- color: #666;
- }
- }
- }
-
.selected-address {
padding: 20rpx 30rpx;
background-color: white;
border-top: 1rpx solid #f0f0f0;
+ flex-shrink: 0;
+ position: absolute;
+ top: 150rpx; /* 鍦ㄦ悳绱㈡爮涓嬫柟鏄剧ず */
+ left: 0;
+ right: 0;
+ z-index: 95; /* 纭繚鍦ㄥ湴鍥句笂鏂� */
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
- .address-title {
- font-size: 30rpx;
- font-weight: bold;
- margin-bottom: 10rpx;
+ .selected-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 15rpx;
+
+ .address-title {
+ font-size: 28rpx;
+ font-weight: bold;
+ color: #007AFF;
+ margin-left: 10rpx;
+ }
+
+ .cancel-btn {
+ width: 40rpx;
+ height: 40rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background-color: #f5f5f5;
+
+ &:active {
+ background-color: #e0e0e0;
+ }
+ }
}
- .address-detail {
- font-size: 26rpx;
- color: #666;
- margin-bottom: 10rpx;
+ .address-info {
+ background-color: #f8f9fa;
+ padding: 25rpx;
+ border-radius: 12rpx;
+ margin-bottom: 20rpx;
+
+ .address-name {
+ font-size: 32rpx;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 10rpx;
+ line-height: 1.3;
+ }
+
+ .address-detail {
+ font-size: 28rpx;
+ color: #666;
+ line-height: 1.5;
+ }
}
.confirm-btn {
@@ -402,7 +726,17 @@
color: white;
border-radius: 10rpx;
font-size: 32rpx;
- margin-top: 20rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ text {
+ margin-left: 10rpx;
+ }
+
+ &:active {
+ background-color: #0056CC;
+ }
}
}
}
--
Gitblit v1.9.1