PetCommunity/miniprogram/pages/nearby/nearby.wxml

<view class="nearby-page">
  <!-- 状态栏占位 -->
  <view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>

  <!-- 主导航栏：与胶囊等高，右侧避让胶囊 -->
  <view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
    <view class="topbar-logo">附<text class="logo-accent">近</text></view>
  </view>

  <!-- 次级菜单栏：位于胶囊下方，全宽可用 -->
  <view class="subbar">
    <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>