Initial commit

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>