Initial commit

miniprogram/pages/nearby/nearby.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

miniprogram/pages/nearby/nearby.ts

@@ -0,0 +1,227 @@
+import { NearbyUser } from '../../types/index'
+import { api } from '../../utils/api'
+import { formatDistance, formatLastSeen, getAvatarGradient, getPetEmoji } from '../../utils/format'
+import { requireLocation } from '../../utils/auth'
+import { NEARBY_RADIUS_KM } from '../../utils/constants'
+
+const DEFAULT_LAT = 31.2304
+const DEFAULT_LNG = 121.4737
+
+const app = getApp<{ userInfo: any; currentLocation: any }>()
+
+Page({
+  data: {
+    statusBarHeight: 0,
+    tabBarHeight: 56,
+    viewMode: 'map' as 'map' | 'list',
+    mapCenter: { latitude: DEFAULT_LAT, longitude: DEFAULT_LNG },
+    mapScale: 15,
+    markers: [] as any[],
+    circles: [] as any[],
+    nearbyList: [] as any[],
+    onlineCount: 0,
+    activePet: null as any,
+    loading: false,
+    refreshing: false,
+    hasMore: true,
+    myLocation: null as any,
+  },
+
+  onLoad() {
+    const info = wx.getSystemInfoSync()
+    this.setData({ statusBarHeight: info.statusBarHeight })
+    this.initLocation()
+  },
+
+  onShow() {
+    const tabBar = this.getTabBar() as any
+    tabBar?.setSelected?.(1)
+  },
+
+  async initLocation() {
+    try {
+      const loc = await requireLocation()
+      this.setData({
+        mapCenter: loc,
+        myLocation: loc,
+        circles: [{
+          latitude: loc.latitude,
+          longitude: loc.longitude,
+          radius: NEARBY_RADIUS_KM * 1000,
+          strokeWidth: 2,
+          strokeColor: 'rgba(255, 79, 145, 0.3)',
+          fillColor: 'rgba(255, 79, 145, 0.05)',
+        }],
+      })
+      app.globalData.currentLocation = loc
+      this.loadNearby(loc.latitude, loc.longitude)
+    } catch {
+      this.loadNearby(DEFAULT_LAT, DEFAULT_LNG)
+    }
+  },
+
+  async loadNearby(lat: number, lng: number) {
+    this.setData({ loading: true })
+    try {
+      const list = await api.getNearbyPets(lat, lng, NEARBY_RADIUS_KM)
+      const nearbyList = list.map(item => this.enrichItem(item, lat, lng))
+      const onlineCount = nearbyList.filter(i => i.isOnline).length
+      this.setData({
+        nearbyList,
+        onlineCount,
+        markers: this.buildMarkers(nearbyList, lat, lng),
+      })
+    } catch {
+      wx.showToast({ title: '加载附近失败', icon: 'none' })
+    } finally {
+      this.setData({ loading: false, refreshing: false })
+    }
+  },
+
+  enrichItem(item: NearbyUser, myLat: number, myLng: number): any {
+    const pet = item.pet || item.user?.pets?.[0]
+    return {
+      userId: item.userId,
+      petId: pet?._id,
+      petName: pet?.name || '未知',
+      breed: pet?.breed || '宠物',
+      emoji: pet ? getPetEmoji(pet.species, pet.breed) : '🐾',
+      gradient: getAvatarGradient(item.userId),
+      distanceText: formatDistance(item.distance),
+      isOnline: item.isOnline,
+      lastSeenText: formatLastSeen(item.user?.lastSeen || ''),
+      locationName: item.user?.location || '',
+      latitude: item.location?.latitude || myLat,
+      longitude: item.location?.longitude || myLng,
+    }
+  },
+
+  buildMarkers(list: any[], myLat: number, myLng: number): any[] {
+    const markers: any[] = [
+      {
+        id: 0,
+        latitude: myLat,
+        longitude: myLng,
+        width: 40,
+        height: 40,
+        callout: {
+          content: '我在这',
+          color: '#ffffff',
+          fontSize: 11,
+          borderRadius: 12,
+          bgColor: '#ff4f91',
+          padding: 6,
+          display: 'ALWAYS',
+        },
+      },
+    ]
+
+    list.forEach((item, idx) => {
+      markers.push({
+        id: idx + 1,
+        latitude: item.latitude,
+        longitude: item.longitude,
+        width: 36,
+        height: 36,
+        callout: {
+          content: item.petName,
+          color: '#272235',
+          fontSize: 11,
+          borderRadius: 12,
+          bgColor: 'rgba(255,255,255,0.92)',
+          padding: 6,
+          display: 'BYCLICK',
+        },
+      })
+    })
+    return markers
+  },
+
+  onMarkerTap(e: WechatMiniprogram.CustomEvent) {
+    const id = e.markerId
+    if (id === 0) return
+    const item = this.data.nearbyList[id - 1]
+    if (!item) return
+    this.setData({ activePet: item })
+  },
+
+  onPopupTap() {
+    const pet = this.data.activePet
+    if (!pet) return
+    wx.navigateTo({ url: `/pages/pet-detail/pet-detail?userId=${pet.userId}` })
+  },
+
+  async onGreeting(e: WechatMiniprogram.CustomEvent) {
+    const { uid, pid } = e.currentTarget.dataset
+    if (!uid) return
+    try {
+      await api.sendGreeting(uid, pid)
+      wx.showToast({ title: '打招呼成功！', icon: 'success' })
+      this.setData({ activePet: null })
+    } catch {
+      wx.showToast({ title: '发送失败', icon: 'none' })
+    }
+  },
+
+  onPreviewTap(e: WechatMiniprogram.CustomEvent) {
+    const { uid, lat, lng } = e.currentTarget.dataset
+    const item = this.data.nearbyList.find((i: any) => i.userId === uid)
+    if (!item) return
+    this.setData({
+      mapCenter: { latitude: Number(lat), longitude: Number(lng) },
+      activePet: item,
+    })
+  },
+
+  onItemTap(e: WechatMiniprogram.CustomEvent) {
+    const uid = e.currentTarget.dataset.uid
+    wx.navigateTo({ url: `/pages/pet-detail/pet-detail?userId=${uid}` })
+  },
+
+  setViewMode(e: WechatMiniprogram.CustomEvent) {
+    const mode = e.currentTarget.dataset.mode as 'map' | 'list'
+    this.setData({ viewMode: mode, activePet: null })
+  },
+
+  onLocateMe() {
+    const loc = this.data.myLocation
+    if (loc) {
+      this.setData({ mapCenter: { ...loc } })
+    } else {
+      this.initLocation()
+    }
+  },
+
+  onZoomIn() {
+    const scale = Math.min(20, this.data.mapScale + 1)
+    this.setData({ mapScale: scale })
+  },
+
+  onZoomOut() {
+    const scale = Math.max(10, this.data.mapScale - 1)
+    this.setData({ mapScale: scale })
+  },
+
+  onRegionChange() {},
+
+  onFilter() {
+    wx.showActionSheet({
+      itemList: ['500m 内', '1km 内', '3km 内', '5km 内'],
+      success: res => {
+        const radii = [0.5, 1, 3, 5]
+        const r = radii[res.tapIndex]
+        const loc = this.data.myLocation
+        if (loc) this.loadNearby(loc.latitude, loc.longitude)
+      },
+    })
+  },
+
+  async onRefresh() {
+    this.setData({ refreshing: true })
+    const loc = this.data.myLocation
+    if (loc) await this.loadNearby(loc.latitude, loc.longitude)
+    else this.setData({ refreshing: false })
+  },
+
+  onLoadMore() {},
+})

miniprogram/pages/nearby/nearby.wxml

@@ -0,0 +1,142 @@
+<view class="nearby-page">
+  <view class="safe-top" style="height: {{statusBarHeight}}px"></view>
+
+  <!-- 顶栏 -->
+  <view class="topbar">
+    <view class="topbar-logo">附<text class="logo-accent">近</text></view>
+    <view class="view-toggle">
+      <view class="toggle-btn {{viewMode === 'map' ? 'toggle-active' : ''}}" bindtap="setViewMode" data-mode="map">🗺 地图</view>
+      <view class="toggle-btn {{viewMode === 'list' ? 'toggle-active' : ''}}" bindtap="setViewMode" data-mode="list">📋 列表</view>
+    </view>
+    <view class="topbar-btn" bindtap="onFilter">⚙️</view>
+  </view>
+
+  <!-- 地图视图 -->
+  <view wx:if="{{viewMode === 'map'}}" class="map-wrap">
+    <map
+      class="map"
+      id="petMap"
+      latitude="{{mapCenter.latitude}}"
+      longitude="{{mapCenter.longitude}}"
+      scale="{{mapScale}}"
+      markers="{{markers}}"
+      circles="{{circles}}"
+      show-location="true"
+      enable-zoom="true"
+      enable-scroll="true"
+      enable-rotate="false"
+      show-compass="false"
+      bindmarkertap="onMarkerTap"
+      bindregionchange="onRegionChange"
+    ></map>
+
+    <!-- 地图控件 -->
+    <view class="map-controls">
+      <view class="map-ctrl-btn" bindtap="onLocateMe">📍</view>
+      <view class="map-ctrl-btn" bindtap="onZoomIn">+</view>
+      <view class="map-ctrl-btn" bindtap="onZoomOut">−</view>
+    </view>
+
+    <!-- 宠物弹窗 -->
+    <view wx:if="{{activePet}}" class="pet-popup" bindtap="onPopupTap">
+      <view class="popup-avatar" style="background: {{activePet.gradient}}">
+        <text>{{activePet.emoji}}</text>
+      </view>
+      <view class="popup-info">
+        <text class="popup-name">{{activePet.petName}}</text>
+        <text class="popup-sub">{{activePet.breed}} · {{activePet.distanceText}}</text>
+      </view>
+      <view class="popup-hi btn-primary" catchtap="onGreeting" data-uid="{{activePet.userId}}" data-pid="{{activePet.petId}}">
+        打招呼 👋
+      </view>
+    </view>
+
+    <!-- 在线数 -->
+    <view class="online-badge">{{onlineCount}}只在线</view>
+  </view>
+
+  <!-- 列表视图 -->
+  <scroll-view
+    wx:if="{{viewMode === 'list'}}"
+    class="list-scroll"
+    scroll-y="true"
+    enhanced="true"
+    show-scrollbar="false"
+    bindscrolltolower="onLoadMore"
+    refresher-enabled="true"
+    bindrefresherrefresh="onRefresh"
+    refresher-triggered="{{refreshing}}"
+  >
+    <view class="list-header">
+      <text class="list-title">附近的汪</text>
+      <view class="online-chip">{{onlineCount}}只在线</view>
+    </view>
+
+    <!-- 骨架 -->
+    <view wx:if="{{loading && nearbyList.length === 0}}">
+      <view wx:for="{{[1,2,3,4]}}" wx:key="index" class="nearby-skeleton"></view>
+    </view>
+
+    <!-- 列表项 -->
+    <view
+      wx:for="{{nearbyList}}"
+      wx:key="userId"
+      class="nearby-item"
+      bindtap="onItemTap"
+      data-uid="{{item.userId}}"
+    >
+      <view class="nearby-avatar" style="background: {{item.gradient}}">
+        <text class="avatar-emoji">{{item.emoji}}</text>
+      </view>
+      <view class="nearby-info">
+        <view class="nearby-name-row">
+          <text class="nearby-pet-name">{{item.petName}}</text>
+          <view class="breed-chip">{{item.breed}}</view>
+        </view>
+        <view class="nearby-sub">
+          <view wx:if="{{item.isOnline}}" class="online-dot"></view>
+          <text>{{item.lastSeenText}} · {{item.locationName}}</text>
+        </view>
+      </view>
+      <view class="nearby-right">
+        <text class="dist-text">{{item.distanceText}}</text>
+        <view class="say-hi" catchtap="onGreeting" data-uid="{{item.userId}}" data-pid="{{item.petId}}">打招呼</view>
+      </view>
+    </view>
+
+    <!-- 空态 -->
+    <view wx:if="{{!loading && nearbyList.length === 0}}" class="empty-nearby">
+      <text class="empty-emoji">🐾</text>
+      <text class="empty-title">附近暂时没有汪</text>
+      <text class="empty-desc">去广场发帖，等小伙伴们上线吧~</text>
+    </view>
+
+    <view style="height: {{tabBarHeight}}px"></view>
+  </scroll-view>
+
+  <!-- 地图模式下的底部列表预览 -->
+  <view wx:if="{{viewMode === 'map'}}" class="map-preview-list">
+    <scroll-view scroll-x="true" enhanced="true" show-scrollbar="false" class="preview-scroll">
+      <view
+        wx:for="{{nearbyList}}"
+        wx:key="userId"
+        class="preview-card"
+        bindtap="onPreviewTap"
+        data-uid="{{item.userId}}"
+        data-lat="{{item.latitude}}"
+        data-lng="{{item.longitude}}"
+      >
+        <view class="preview-avatar" style="background: {{item.gradient}}">
+          <text>{{item.emoji}}</text>
+        </view>
+        <view class="preview-info">
+          <text class="preview-name">{{item.petName}}</text>
+          <text class="preview-dist">{{item.distanceText}}</text>
+        </view>
+        <view wx:if="{{item.isOnline}}" class="online-dot" style="width:12rpx;height:12rpx;"></view>
+      </view>
+    </scroll-view>
+  </view>
+
+  <view style="height: {{tabBarHeight}}px" wx:if="{{viewMode === 'list'}}"></view>
+</view>

miniprogram/pages/nearby/nearby.wxss

@@ -0,0 +1,388 @@
+.nearby-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: linear-gradient(180deg, #c9f7df 0%, #d8efff 40%, #fff1a6 100%);
+  overflow: hidden;
+}
+
+/* 顶栏 */
+.topbar {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 28rpx 12rpx;
+  gap: 16rpx;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.topbar-logo {
+  font-size: 44rpx;
+  font-weight: 900;
+  color: #272235;
+  flex-shrink: 0;
+}
+
+.logo-accent { color: #ff4f91; }
+
+.view-toggle {
+  flex: 1;
+  display: flex;
+  background: rgba(255, 255, 255, 0.60);
+  border-radius: 999rpx;
+  padding: 4rpx;
+  gap: 4rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.80);
+}
+
+.toggle-btn {
+  flex: 1;
+  text-align: center;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #9b8fa8;
+  padding: 12rpx 0;
+  border-radius: 999rpx;
+}
+
+.toggle-active {
+  background: rgba(255, 255, 255, 0.90);
+  color: #272235;
+  font-weight: 900;
+  box-shadow: 0 4rpx 10rpx rgba(78, 56, 96, 0.10);
+}
+
+.topbar-btn {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: 0 8rpx 18rpx rgba(78, 56, 96, 0.10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+}
+
+/* 地图 */
+.map-wrap {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+/* 地图控件 */
+.map-controls {
+  position: absolute;
+  right: 24rpx;
+  bottom: 300rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 14rpx;
+  z-index: 10;
+}
+
+.map-ctrl-btn {
+  width: 72rpx;
+  height: 72rpx;
+  background: rgba(255, 255, 255, 0.90);
+  border: 1rpx solid rgba(255, 255, 255, 0.80);
+  border-radius: 22rpx;
+  box-shadow: 0 10rpx 20rpx rgba(82, 66, 105, 0.16);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+  font-weight: 800;
+  color: #4d8dff;
+}
+
+/* 宠物弹窗 */
+.pet-popup {
+  position: absolute;
+  bottom: 300rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.92);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 30rpx;
+  padding: 20rpx 24rpx;
+  display: flex;
+  align-items: center;
+  gap: 18rpx;
+  box-shadow: 0 18rpx 40rpx rgba(95, 49, 104, 0.18);
+  min-width: 520rpx;
+  z-index: 20;
+}
+
+.popup-avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 22rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36rpx;
+  flex-shrink: 0;
+}
+
+.popup-info { flex: 1; }
+
+.popup-name {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 800;
+  color: #272235;
+}
+
+.popup-sub {
+  display: block;
+  font-size: 22rpx;
+  color: #9b8fa8;
+  margin-top: 4rpx;
+}
+
+.popup-hi {
+  padding: 16rpx 24rpx;
+  font-size: 24rpx;
+  font-weight: 800;
+  border-radius: 999rpx;
+  flex-shrink: 0;
+}
+
+/* 在线数角标 */
+.online-badge {
+  position: absolute;
+  top: 20rpx;
+  left: 20rpx;
+  background: rgba(255, 255, 255, 0.90);
+  border-radius: 999rpx;
+  padding: 10rpx 20rpx;
+  font-size: 22rpx;
+  font-weight: 800;
+  color: #ff4f91;
+  box-shadow: 0 8rpx 16rpx rgba(78, 56, 96, 0.12);
+  z-index: 10;
+}
+
+/* 底部预览条 */
+.map-preview-list {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 15;
+  background: rgba(255, 255, 255, 0.85);
+  border-top: 1rpx solid rgba(255, 255, 255, 0.72);
+  padding: 20rpx 0;
+}
+
+.preview-scroll {
+  white-space: nowrap;
+  padding: 0 24rpx;
+}
+
+.preview-card {
+  display: inline-flex;
+  align-items: center;
+  gap: 12rpx;
+  background: rgba(255, 255, 255, 0.80);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 24rpx;
+  padding: 14rpx 18rpx;
+  margin-right: 16rpx;
+  box-shadow: 0 8rpx 16rpx rgba(78, 56, 96, 0.08);
+}
+
+.preview-avatar {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+  flex-shrink: 0;
+}
+
+.preview-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.preview-name {
+  font-size: 26rpx;
+  font-weight: 800;
+  color: #272235;
+}
+
+.preview-dist {
+  font-size: 20rpx;
+  color: #4d8dff;
+  font-weight: 700;
+}
+
+/* 列表视图 */
+.list-scroll {
+  flex: 1;
+  background: linear-gradient(180deg, #fff9fb 0%, #f5f0ff 100%);
+}
+
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx 28rpx 18rpx;
+}
+
+.list-title {
+  font-size: 30rpx;
+  font-weight: 900;
+  color: #272235;
+}
+
+.online-chip {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #ff4f91;
+  background: #ffe5f0;
+  border-radius: 999rpx;
+  padding: 8rpx 16rpx;
+}
+
+/* 列表项 */
+.nearby-item {
+  display: flex;
+  align-items: center;
+  gap: 18rpx;
+  background: rgba(255, 255, 255, 0.80);
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
+  border-radius: 40rpx;
+  margin: 0 28rpx 20rpx;
+  padding: 20rpx;
+  box-shadow: 0 12rpx 26rpx rgba(80, 58, 108, 0.09);
+}
+
+.nearby-avatar {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  flex-shrink: 0;
+}
+
+.avatar-emoji { font-size: 40rpx; line-height: 1; }
+
+.nearby-info { flex: 1; min-width: 0; }
+
+.nearby-name-row {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  margin-bottom: 6rpx;
+}
+
+.nearby-pet-name {
+  font-size: 28rpx;
+  font-weight: 900;
+  color: #272235;
+}
+
+.breed-chip {
+  font-size: 20rpx;
+  font-weight: 800;
+  background: #ffe5f0;
+  color: #a91d5b;
+  border-radius: 999rpx;
+  padding: 4rpx 12rpx;
+}
+
+.nearby-sub {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 22rpx;
+  color: #9b8fa8;
+}
+
+.online-dot {
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background: #2fd37a;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 4rpx rgba(47, 211, 122, 0.18);
+}
+
+.nearby-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10rpx;
+  flex-shrink: 0;
+}
+
+.dist-text {
+  font-size: 22rpx;
+  font-weight: 800;
+  color: #4d8dff;
+}
+
+.say-hi {
+  background: linear-gradient(135deg, #fff, #fff4b7);
+  border: 1rpx solid rgba(255, 255, 255, 0.8);
+  border-radius: 999rpx;
+  padding: 12rpx 22rpx;
+  font-size: 22rpx;
+  font-weight: 800;
+  color: #272235;
+  box-shadow: 0 8rpx 16rpx rgba(255, 159, 28, 0.14);
+}
+
+/* 骨架 */
+.nearby-skeleton {
+  height: 128rpx;
+  background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%);
+  background-size: 200% 100%;
+  animation: shine 1.4s infinite;
+  border-radius: 40rpx;
+  margin: 0 28rpx 20rpx;
+}
+
+@keyframes shine {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* 空态 */
+.empty-nearby {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120rpx 60rpx;
+  gap: 16rpx;
+}
+
+.empty-emoji { font-size: 80rpx; }
+
+.empty-title {
+  font-size: 34rpx;
+  font-weight: 900;
+  color: #272235;
+}
+
+.empty-desc {
+  font-size: 26rpx;
+  color: #9b8fa8;
+  text-align: center;
+  line-height: 1.6;
+}