143 lines
5.0 KiB
Plaintext
143 lines
5.0 KiB
Plaintext
<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>
|