add banbanmini

2026-03-24 13:15:03 +08:00
parent 42567b7605
commit 0d0f995dc2
59 changed files with 26319 additions and 0 deletions
--- a/banban-mini/src/pages/location/index.tsx
+++ b/banban-mini/src/pages/location/index.tsx
@@ -0,0 +1,128 @@
+import { View, Text, Map } from '@tarojs/components'
+import { useState } from 'react'
+import Taro, { useDidShow } from '@tarojs/taro'
+import './index.scss'
+
+interface LocationInfo {
+  address: string
+  updateTime: string
+  locationType: string
+}
+
+interface Coordinates {
+  latitude: number
+  longitude: number
+}
+
+// 模拟接口：获取设备位置（返回随机经纬度）
+const fetchDeviceLocation = async (): Promise<Coordinates> => {
+  // 模拟网络延迟
+  await new Promise(resolve => setTimeout(resolve, 800))
+
+  // 在北京范围内生成随机坐标（大致范围）
+  const baseLat = 39.9042
+  const baseLng = 116.4074
+  const randomOffset = () => (Math.random() - 0.5) * 0.1 // 约 ±5km 的偏移
+
+  return {
+    latitude: baseLat + randomOffset(),
+    longitude: baseLng + randomOffset()
+  }
+}
+
+export default function Location() {
+  const [location, setLocation] = useState<LocationInfo>({
+    address: '阳光社区 3期 附近',
+    updateTime: '刚刚',
+    locationType: '网络定位'
+  })
+
+  const [coordinates, setCoordinates] = useState<Coordinates>({
+    latitude: 39.9042,
+    longitude: 116.4074
+  })
+
+  // 每次页面显示时获取最新位置
+  useDidShow(() => {
+    loadLocation()
+  })
+
+  const loadLocation = async () => {
+    try {
+      const coords = await fetchDeviceLocation()
+      setCoordinates(coords)
+    } catch (error) {
+      console.error('获取位置失败:', error)
+    }
+  }
+
+  const refreshLocation = async () => {
+    Taro.showToast({ title: '正在刷新位置...', icon: 'loading' })
+
+    try {
+      const coords = await fetchDeviceLocation()
+      setCoordinates(coords)
+      setLocation({
+        ...location,
+        updateTime: '刚刚'
+      })
+      Taro.showToast({ title: '位置已更新', icon: 'success' })
+    } catch (error) {
+      Taro.showToast({ title: '位置更新失败', icon: 'none' })
+    }
+  }
+
+  return (
+    <View className='location-page'>
+      <View className='page-header'>
+        <Text className='page-title'>设备定位</Text>
+        <Text className='page-subtitle'>基于运营商网络基站定位</Text>
+      </View>
+
+      <View className='map-section'>
+        <Map
+          className='map'
+          latitude={coordinates.latitude}
+          longitude={coordinates.longitude}
+          scale={15}
+          markers={[{
+            id: 1,
+            latitude: coordinates.latitude,
+            longitude: coordinates.longitude,
+            title: '设备位置',
+            width: 40,
+            height: 40
+          }]}
+          showLocation
+        />
+        <View className='location-marker'>
+          <View className='marker-pin'>
+            <Text className='marker-emoji'>🤖</Text>
+          </View>
+        </View>
+      </View>
+
+      <View className='location-card'>
+        <View className='card-header'>
+          <View className='header-left'>
+            <Text className='location-title'>当前大致位置</Text>
+            <Text className='location-update'>更新于 {location.updateTime} ({location.locationType})</Text>
+          </View>
+          <View className='refresh-btn' onClick={refreshLocation}>
+            <Text className='refresh-icon'>↻</Text>
+          </View>
+        </View>
+
+        <View className='location-detail'>
+          <View className='location-icon'>
+            <Text>📍</Text>
+          </View>
+          <View className='location-info'>
+            <Text className='location-address'>{location.address}</Text>
+            <Text className='location-desc'>通过设备 4G 信号基站解析获得，误差范围约 50-200 米。</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}