create-koa-boot 1.0.0

package/templates/example/uniapp/components/MapPicker.vue

@@ -0,0 +1,793 @@
+<template>
+	<view v-if="visible" class="mp-overlay" @touchmove.stop.prevent>
+		<!-- 搜索栏 -->
+		<view class="mp-header" :style="{ paddingTop: statusBarHeight + 12 + 'px' }">
+			<view class="mp-search-box">
+				<text class="mp-search-icon">🔍</text>
+				<input
+					class="mp-search-input"
+					v-model="searchKeyword"
+					placeholder="搜索地点"
+					confirm-type="search"
+					@input="onSearchInput"
+					@focus="onSearchFocus"
+					@confirm="onSearchConfirm" />
+				<text v-if="searchKeyword" class="mp-search-clear" @click.stop="clearSearch">✕</text>
+			</view>
+			<text class="mp-cancel-btn" @click="onCancel">取消</text>
+		</view>
+
+		<!-- 搜索候选列表 -->
+		<scroll-view
+			v-if="showDropdown && searchResults.length > 0"
+			class="mp-dropdown"
+			scroll-y>
+			<view v-for="(item, idx) in searchResults" :key="idx" class="mp-dropdown-item" @click="selectResult(item)">
+				<view class="mp-dropdown-left">
+					<text class="mp-dropdown-name">{{ item.name }}</text>
+					<text class="mp-dropdown-addr">{{ item.district || '' }}{{ item.address ? ' · ' + item.address : '' }}</text>
+				</view>
+				<text class="mp-dropdown-arrow">→</text>
+			</view>
+		</scroll-view>
+		<view v-else-if="showDropdown && searchKeyword && !searchLoading" class="mp-dropdown mp-dropdown--empty">
+			<text class="mp-no-result">{{ _sdkReady ? '未找到相关地点' : '搜索能力初始化中...' }}</text>
+		</view>
+
+		<!-- 地图区域 -->
+		<view class="mp-map-wrap">
+			<map
+				id="mp-map"
+				class="mp-map"
+				:latitude="center.lat"
+				:longitude="center.lng"
+				:scale="scale"
+				show-location
+				@tap="onMapTap"
+				@regionchange="onRegionChange"
+				@updated="onMapUpdated">
+			</map>
+			<!-- 中心图钉（CSS 叠加层，始终在地图正中心）-->
+			<view class="mp-pin">
+				<text class="mp-pin-icon">📌</text>
+				<view class="mp-pin-shadow"></view>
+			</view>
+		</view>
+
+		<!-- 底部确认栏 -->
+		<view class="mp-bottom">
+			<view class="mp-bottom-info" @click="showDropdown = false">
+				<text v-if="reverseLoading" class="mp-loading-text">正在获取地址...</text>
+				<template v-else>
+					<view class="mp-addr-row">
+						<text class="mp-addr-icon">📍</text>
+						<text class="mp-addr-text">{{ selectedAddress || '请在地图上选择位置' }}</text>
+					</view>
+					<text class="mp-coord-text">{{ center.lng.toFixed(6) }}, {{ center.lat.toFixed(6) }}</text>
+				</template>
+			</view>
+			<view class="mp-bottom-btns">
+				<view class="mp-btn mp-btn-cancel" hover-class="mp-btn-hover" @click="onCancel">取消</view>
+				<view class="mp-btn mp-btn-confirm" :class="{ 'mp-btn--disabled': !selectedAddress }" hover-class="mp-btn-hover" @click="onConfirm">
+					确认选择
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * MapPicker — 高德地图位置选择器（纯 uni-app <map> + AMap JS-SDK 插件）
+ *
+ * 地图渲染使用 uni-app 内置 <map> 组件，自动读取 manifest.json 中配置的 AMap Key。
+ * 搜索与逆地理编码使用 AMap JS-SDK 插件（Geocoder + PlaceSearch），与地图共用同一 Key。
+ *
+ * @props {Boolean}  visible       - 是否显示弹窗
+ * @props {Number}   initLatitude  - 初始纬度（未传/为默认值时，打开自动定位到当前位置）
+ * @props {Number}   initLongitude - 初始经度（未传/为默认值时，打开自动定位到当前位置）
+ *
+ * @emits close                    - 关闭弹窗
+ * @emits confirm                  - 确认选择，payload: { longitude, latitude, address, province, city }
+ */
+export default {
+	name: 'MapPicker',
+	props: {
+		visible: { type: Boolean, default: false },
+		initLatitude: { type: Number, default: 30.5723 },
+		initLongitude: { type: Number, default: 104.0665 }
+	},
+	emits: ['close', 'confirm'],
+	data() {
+		return {
+			statusBarHeight: 0,
+			center: { lat: 30.5723, lng: 104.0665 },
+			scale: 15,
+			markers: [],
+			selectedAddress: '',
+			selectedProvince: '',
+			selectedCity: '',
+			// 搜索
+			searchKeyword: '',
+			searchResults: [],
+			showDropdown: false,
+			searchTimer: null,
+			searchLoading: false,
+			reverseLoading: false,
+			// JS-SDK 插件就绪标记
+			_sdkReady: false,
+			_geocoder: null,
+			_placeSearch: null,
+			_geolocation: null,
+			_retryCount: 0,
+			// 防抖
+			_programmaticMove: false,
+			_mapReady: false,
+			// 打开自动定位
+			_locating: false,
+			_located: false,
+			_userInteracted: false
+		}
+	},
+	watch: {
+		visible(val) {
+			if (val) {
+				this.$nextTick(() => this.initPicker())
+			} else {
+				this.resetState()
+			}
+		},
+		initLatitude(val) {
+			if (!this.visible && val) this.center.lat = val
+		},
+		initLongitude(val) {
+			if (!this.visible && val) this.center.lng = val
+		}
+	},
+	methods: {
+		/* ==============================
+		 * 初始化 / 重置
+		 * ============================== */
+		initPicker() {
+			const sys = uni.getSystemInfoSync()
+			this.statusBarHeight = sys.statusBarHeight || 20
+			this.center.lat = this.initLatitude
+			this.center.lng = this.initLongitude
+			this.scale = 15
+			this.searchKeyword = ''
+			this.searchResults = []
+			this.showDropdown = false
+			this._programmaticMove = true
+			this._mapReady = false
+			this.selectedAddress = ''
+
+			// 尝试加载 AMap JS-SDK 插件（Geocoder / PlaceSearch / Geolocation）
+			this._retryCount = 0
+			this.tryLoadAMapPlugins()
+
+			// 未传入有效初始坐标时，尝试将地图中心定位到当前位置
+			if (!this._hasValidInit()) {
+				this.locateCurrent()
+			}
+		},
+
+		resetState() {
+			this.searchKeyword = ''
+			this.searchResults = []
+			this.showDropdown = false
+			this.selectedAddress = ''
+			this.selectedProvince = ''
+			this.selectedCity = ''
+			this.reverseLoading = false
+			this._programmaticMove = false
+			this._mapReady = false
+			this._retryCount = 0
+			this._locating = false
+			this._located = false
+			this._userInteracted = false
+		},
+
+		/* ==============================
+		 * AMap JS-SDK 插件加载
+		 * 地图组件渲染时 uni-app 自动注入 AMap JS-SDK，
+		 * 此处 load Geocoder / PlaceSearch 插件（与地图共用 Key）
+		 * ============================== */
+		tryLoadAMapPlugins() {
+			const win = (typeof window !== 'undefined' ? window : null)
+			const AMap = win && win['AMap']
+			if (AMap && AMap.plugin) {
+				AMap.plugin(['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Geolocation'], () => {
+					this._geocoder = new AMap.Geocoder()
+					this._placeSearch = new AMap.PlaceSearch({
+						pageSize: 10,
+						citylimit: false,
+						autoFitView: false
+					})
+					// H5 定位：AMap.Geolocation 返回 gcj02 坐标，与地图坐标系一致（无偏移）
+					try {
+						this._geolocation = new AMap.Geolocation({
+							enableHighAccuracy: true,
+							timeout: 10000,
+							zoomToAccuracy: false,
+							cityLimit: false
+						})
+					} catch (e) {
+						this._geolocation = null
+					}
+					this._sdkReady = true
+					// 初始位置逆地理编码
+					this.reverseGeocode(this.center.lat, this.center.lng)
+				})
+				return
+			}
+			// AMap SDK 尚未就绪，延迟重试
+			if (this._retryCount < 20) {
+				this._retryCount++
+				setTimeout(() => {
+					if (this.visible) this.tryLoadAMapPlugins()
+				}, 300)
+			} else {
+				// 超时，直接显示坐标
+				this.selectedAddress = `${this.center.lat.toFixed(6)}, ${this.center.lng.toFixed(6)}`
+			}
+		},
+
+		/* ==============================
+		 * 逆地理编码（坐标 → 地址）
+		 * H5 使用 AMap.Geocoder；其他平台使用 uni-app mapContext 定位（仅坐标）
+		 * ============================== */
+		reverseGeocode(lat, lng) {
+			// #ifdef H5
+			if (this._geocoder) {
+				this.reverseLoading = true
+				this._geocoder.getAddress([lng, lat], (status, result) => {
+					this.reverseLoading = false
+					if (status === 'complete' && result.regeocode) {
+						this.selectedAddress = result.regeocode.formattedAddress || ''
+						// 提取省/市（addressComponent），直辖市 city 为空时回退省名
+						const ac = result.regeocode.addressComponent || {}
+						this.selectedProvince = ac.province || ''
+						this.selectedCity = ac.city || ac.province || ''
+					} else {
+						this.selectedAddress = `${lat.toFixed(6)}, ${lng.toFixed(6)}`
+						this.selectedProvince = ''
+						this.selectedCity = ''
+					}
+				})
+				return
+			}
+			// #endif
+			// 非 H5 / 插件未就绪：仅有坐标，无法获取省/市
+			this.selectedAddress = `${lat.toFixed(6)}, ${lng.toFixed(6)}`
+			this.selectedProvince = ''
+			this.selectedCity = ''
+			this.reverseLoading = false
+		},
+
+		/* ==============================
+		 * 地图交互
+		 * ============================== */
+		onMapTap(e) {
+			const lat = e.detail ? e.detail.latitude : e.latitude
+			const lng = e.detail ? e.detail.longitude : e.longitude
+			if (lat === undefined || lng === undefined) return
+
+			this._userInteracted = true
+			this.center.lat = lat
+			this.center.lng = lng
+			this.showDropdown = false
+			this.reverseGeocode(lat, lng)
+			this.updateMarker(lat, lng)
+		},
+
+		onRegionChange(e) {
+			if (e.type !== 'end') return
+			if (this._programmaticMove) {
+				this._programmaticMove = false
+				return
+			}
+			this._userInteracted = true
+			this.getMapCenter()
+		},
+
+		onMapUpdated() {
+			if (this._mapReady) return
+			this._mapReady = true
+			this.updateMarker(this.center.lat, this.center.lng)
+		},
+
+		getMapCenter() {
+			const mapCtx = uni.createMapContext('mp-map', this)
+			mapCtx.getCenterLocation({
+				success: (res) => {
+					// console.log('getCenterLocation', res)
+					if (res.latitude !== undefined && res.longitude !== undefined) {
+						this.center.lat = res.latitude
+						this.center.lng = res.longitude
+						this.reverseGeocode(res.latitude, res.longitude)
+						this.updateMarker(res.latitude, res.longitude)
+					}
+				},
+				fail: () => {
+					/* 部分环境不支持 getCenterLocation，依靠 @tap 交互 */
+				}
+			})
+		},
+
+		updateMarker(lat, lng) {
+			this.markers = [{
+				id: 1,
+				latitude: lat,
+				longitude: lng,
+				width: 1,
+				height: 1,
+				iconPath: '',
+				alpha: 0
+			}]
+		},
+
+		/** 程序化移动地图中心 */
+		moveTo(lat, lng) {
+			this._programmaticMove = true
+			this.center.lat = lat
+			this.center.lng = lng
+			this.$nextTick(() => this.updateMarker(lat, lng))
+		},
+
+		/* ==============================
+		 * 打开自动定位（多端兼容）
+		 * H5：优先 AMap.Geolocation（gcj02，无偏移），失败回退 uni.getLocation
+		 * 微信小程序 / App：uni.getLocation（gcj02）
+		 * ============================== */
+		_hasValidInit() {
+			// initLatitude/initLongitude 等于 props 默认值（成都）时视为未传入
+			return Math.abs(this.initLatitude - 30.5723) > 1e-4
+				|| Math.abs(this.initLongitude - 104.0665) > 1e-4
+		},
+
+		locateCurrent() {
+			if (this._locating) return
+			this._locating = true
+			// #ifdef H5
+			if (this._geolocation) {
+				this._geolocation.getCurrentPosition((status, result) => {
+					this._locating = false
+					if (status === 'complete' && result && result.position) {
+						this.applyLocated(result.position.lng, result.position.lat)
+						return
+					}
+					this.locateFallback()
+				})
+				return
+			}
+			// #endif
+			this.locateFallback()
+		},
+
+		locateFallback() {
+			uni.getLocation({
+				type: 'gcj02',
+				success: (res) => {
+					this._locating = false
+					this.applyLocated(res.longitude, res.latitude)
+				},
+				fail: () => {
+					this._locating = false
+					// 定位失败（用户拒绝授权等）：保持默认/初始坐标，仅显示坐标文本
+					this.selectedAddress = `${this.center.lat.toFixed(6)}, ${this.center.lng.toFixed(6)}`
+				}
+			})
+		},
+
+		applyLocated(lng, lat) {
+			// 已定位过或用户已手动操作时不再打断
+			if (this._located || this._userInteracted) return
+			this._located = true
+			this.moveTo(lat, lng)
+			this.reverseGeocode(lat, lng)
+		},
+
+		/* ==============================
+		 * 关键词搜索（AMap.PlaceSearch）
+		 * ============================== */
+		onSearchInput() {
+			if (this.searchTimer) clearTimeout(this.searchTimer)
+			const kw = (this.searchKeyword || '').trim()
+			if (!kw) {
+				this.searchResults = []
+				this.showDropdown = false
+				return
+			}
+			this.searchTimer = setTimeout(() => this.fetchSuggestions(kw), 300)
+		},
+
+		onSearchFocus() {
+			if (this.searchResults.length > 0) this.showDropdown = true
+		},
+
+		onSearchConfirm() {
+			const kw = (this.searchKeyword || '').trim()
+			if (!kw) return
+			this.showDropdown = true
+			this.fetchSuggestions(kw)
+		},
+
+		fetchSuggestions(keywords) {
+			// #ifdef H5
+			if (this._placeSearch) {
+				this.searchLoading = true
+				this.showDropdown = true
+				this._placeSearch.search(keywords, (status, result) => {
+					this.searchLoading = false
+					if (status === 'complete' && result.poiList) {
+						this.searchResults = (result.poiList.pois || []).map(p => ({
+							name: p.name,
+							address: p.address || '',
+							district: p.district || p.adname || '',
+							province: p.pname || '',
+							city: p.cityname || '',
+							location: p.location.lng + ',' + p.location.lat
+						}))
+					} else {
+						this.searchResults = []
+					}
+				})
+				return
+			}
+			// #endif
+			this.searchResults = []
+			this.searchLoading = false
+		},
+
+		selectResult(item) {
+			const parts = String(item.location || '').split(',')
+			const lng = parseFloat(parts[0])
+			const lat = parseFloat(parts[1])
+			if (isNaN(lat) || isNaN(lng)) return
+
+			this.center.lat = lat
+			this.center.lng = lng
+			this.selectedAddress = item.district
+				? (item.district + (item.name ? ' · ' + item.name : ''))
+				: (item.name || item.address || '')
+			// 搜索结果的省/市（POI pname / cityname），随后再以逆地理编码精确定位
+			if (item.province) this.selectedProvince = item.province
+			if (item.city) this.selectedCity = item.city
+			this.searchKeyword = item.name || ''
+			this.searchResults = []
+			this.showDropdown = false
+			this._userInteracted = true
+			this._programmaticMove = true
+			this.updateMarker(lat, lng)
+			// 再次精确反地理编码
+			this.reverseGeocode(lat, lng)
+		},
+
+		clearSearch() {
+			this.searchKeyword = ''
+			this.searchResults = []
+			this.showDropdown = false
+		},
+
+		/* ==============================
+		 * 确认 / 取消
+		 * ============================== */
+		onConfirm() {
+			if (!this.selectedAddress) return
+			this.$emit('confirm', {
+				longitude: this.center.lng,
+				latitude: this.center.lat,
+				address: this.selectedAddress,
+				province: this.selectedProvince,
+				city: this.selectedCity
+			})
+			this.$emit('close')
+		},
+
+		onCancel() {
+			this.$emit('close')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+/* ============================================
+ * MapPicker — 全屏地图选择器
+ * 移动端 / 桌面端自适应
+ * ============================================ */
+
+$primary: #2979ff;
+$radius-lg: 24rpx;
+
+.mp-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+	background: #ffffff;
+}
+
+/* ---------- 搜索栏 ---------- */
+.mp-header {
+	display: flex;
+	align-items: center;
+	padding: 12px 24rpx;
+	padding-bottom: 12px;
+	background: #ffffff;
+	flex-shrink: 0;
+	z-index: 10;
+	box-shadow: 0 2rpx 16rpx rgba(0,0,0,0.06);
+}
+
+.mp-search-box {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	height: 72rpx;
+	background: #f5f6fa;
+	border-radius: 36rpx;
+	padding: 0 24rpx;
+}
+
+.mp-search-icon {
+	font-size: 28rpx;
+	margin-right: 12rpx;
+	flex-shrink: 0;
+}
+
+.mp-search-input {
+	flex: 1;
+	height: 72rpx;
+	font-size: 28rpx;
+	color: #333333;
+	background: transparent;
+}
+
+.mp-search-clear {
+	width: 36rpx;
+	height: 36rpx;
+	border-radius: 50%;
+	background: #c0c4cc;
+	color: #ffffff;
+	font-size: 22rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.mp-cancel-btn {
+	flex-shrink: 0;
+	margin-left: 20rpx;
+	font-size: 28rpx;
+	color: $primary;
+	padding: 8rpx 0;
+}
+
+/* ---------- 搜索下拉 ---------- */
+.mp-dropdown {
+	max-height: 360rpx;
+	background: #ffffff;
+	border-bottom: 1rpx solid #f0f0f0;
+	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
+	z-index: 9;
+	flex-shrink: 0;
+
+	&--empty {
+		padding: 40rpx;
+		text-align: center;
+	}
+}
+
+.mp-no-result {
+	font-size: 26rpx;
+	color: #999999;
+}
+
+.mp-dropdown-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24rpx 32rpx;
+	border-bottom: 1rpx solid #f8f8f8;
+
+	&:active {
+		background: #f0f4ff;
+	}
+}
+
+.mp-dropdown-left {
+	flex: 1;
+	min-width: 0;
+}
+
+.mp-dropdown-name {
+	font-size: 28rpx;
+	color: #333333;
+	font-weight: 500;
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.mp-dropdown-addr {
+	font-size: 22rpx;
+	color: #999999;
+	margin-top: 6rpx;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: block;
+}
+
+.mp-dropdown-arrow {
+	font-size: 24rpx;
+	color: #cccccc;
+	margin-left: 16rpx;
+	flex-shrink: 0;
+}
+
+/* ---------- 地图 ---------- */
+.mp-map-wrap {
+	flex: 1;
+	position: relative;
+	overflow: hidden;
+	min-height: 0;
+}
+
+.mp-map {
+	width: 100%;
+	height: 100%;
+}
+
+/* 中心图钉（CSS 叠加层，始终在地图可视区正中心）*/
+.mp-pin {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -100%);
+	z-index: 5;
+	pointer-events: none;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.mp-pin-icon {
+	font-size: 48rpx;
+	line-height: 1;
+	filter: drop-shadow(0 2rpx 4rpx rgba(0,0,0,0.3));
+}
+
+.mp-pin-shadow {
+	width: 12rpx;
+	height: 12rpx;
+	background: rgba(0,0,0,0.15);
+	border-radius: 50%;
+	margin-top: -8rpx;
+}
+
+/* ---------- 底部确认栏 ---------- */
+.mp-bottom {
+	flex-shrink: 0;
+	background: #ffffff;
+	padding: 20rpx 32rpx;
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	box-shadow: 0 -2rpx 16rpx rgba(0,0,0,0.06);
+	z-index: 10;
+}
+
+.mp-bottom-info {
+	margin-bottom: 20rpx;
+	padding: 0 4rpx;
+}
+
+.mp-loading-text {
+	font-size: 26rpx;
+	color: #999999;
+}
+
+.mp-addr-row {
+	display: flex;
+	align-items: flex-start;
+	margin-bottom: 8rpx;
+}
+
+.mp-addr-icon {
+	font-size: 26rpx;
+	margin-right: 10rpx;
+	margin-top: 2rpx;
+	flex-shrink: 0;
+}
+
+.mp-addr-text {
+	font-size: 28rpx;
+	color: #333333;
+	font-weight: 500;
+	line-height: 1.5;
+	word-break: break-all;
+}
+
+.mp-coord-text {
+	font-size: 22rpx;
+	color: #aaaaaa;
+	margin-left: 36rpx;
+}
+
+.mp-bottom-btns {
+	display: flex;
+	gap: 24rpx;
+}
+
+.mp-btn {
+	flex: 1;
+	height: 88rpx;
+	border-radius: 44rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 30rpx;
+	font-weight: 500;
+	transition: opacity 0.2s;
+}
+
+.mp-btn-cancel {
+	background: #f5f6fa;
+	color: #666666;
+}
+
+.mp-btn-confirm {
+	background: linear-gradient(135deg, #2979ff, #4a90ff);
+	color: #ffffff;
+
+	&.mp-btn--disabled {
+		opacity: 0.45;
+	}
+}
+
+.mp-btn-hover {
+	opacity: 0.75;
+}
+
+/* ============================================
+ * 桌面端适配
+ * ============================================ */
+@media (min-width: 769px) {
+	.mp-overlay {
+		background: rgba(0,0,0,0.5);
+		justify-content: center;
+		align-items: center;
+	}
+
+	.mp-header {
+		max-width: 700px;
+		width: 90vw;
+		border-radius: $radius-lg $radius-lg 0 0;
+		padding-top: 20px;
+	}
+
+	.mp-dropdown {
+		max-width: 700px;
+		width: 90vw;
+	}
+
+	.mp-map-wrap {
+		max-width: 700px;
+		width: 90vw;
+		height: 55vh;
+		flex: none;
+	}
+
+	.mp-bottom {
+		max-width: 700px;
+		width: 90vw;
+		border-radius: 0 0 $radius-lg $radius-lg;
+	}
+}
+</style>