102 lines
3.4 KiB
Plaintext
102 lines
3.4 KiB
Plaintext
<!--门店选择页面 - 浅色高级感设计-->
|
|
<wxs module="util">
|
|
function formatDistance(meters) {
|
|
if (!meters) return '';
|
|
if (meters < 1000) {
|
|
return Math.round(meters) + 'm';
|
|
}
|
|
return (meters / 1000).toFixed(1) + 'km';
|
|
}
|
|
module.exports = { formatDistance: formatDistance };
|
|
</wxs>
|
|
|
|
<view class="page-container">
|
|
<!-- 顶部装饰背景 -->
|
|
<view class="hero-bg">
|
|
<view class="hero-pattern"></view>
|
|
</view>
|
|
|
|
<!-- 页面标题 -->
|
|
<view class="page-header">
|
|
<text class="page-title">选择门店</text>
|
|
<text class="page-subtitle">加入您附近的门店，开始运动</text>
|
|
</view>
|
|
|
|
<!-- 当前门店卡片 -->
|
|
<view class="current-store-card" wx:if="{{currentStoreId}}">
|
|
<view class="current-store-accent"></view>
|
|
<view class="current-store-header">
|
|
<view class="current-store-badge">
|
|
<view class="badge-dot"></view>
|
|
<text class="badge-text">当前门店</text>
|
|
</view>
|
|
<text class="current-store-change">可切换其他门店</text>
|
|
</view>
|
|
<view class="current-store-info">
|
|
<view class="store-icon-wrapper">
|
|
<image src="/images/icon-store.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="store-details">
|
|
<text class="store-name">{{currentStoreName || '暂无门店'}}</text>
|
|
<text class="store-address">{{currentStoreAddress || '请选择门店'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门店列表区域 -->
|
|
<view class="store-section">
|
|
<view class="section-header">
|
|
<view class="section-title">
|
|
<text class="section-icon">📍</text>
|
|
<text class="section-text">附近门店</text>
|
|
</view>
|
|
<text class="section-count">共 {{stores.length}} 家</text>
|
|
</view>
|
|
|
|
<view class="store-list">
|
|
<view
|
|
class="store-item stagger-item {{currentStoreId === item.id ? 'selected' : ''}}"
|
|
wx:for="{{stores}}"
|
|
wx:key="id"
|
|
bindtap="selectStore"
|
|
data-store="{{item}}"
|
|
>
|
|
<view class="store-item-icon {{currentStoreId === item.id ? 'selected' : ''}}">
|
|
<image src="/images/icon-store.svg" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="store-item-info">
|
|
<text class="store-item-name">{{item.name}}</text>
|
|
<text class="store-item-address">{{item.address}}</text>
|
|
<view class="store-item-meta">
|
|
<text class="store-distance" wx:if="{{item.distance}}">{{util.formatDistance(item.distance)}}</text>
|
|
<text class="store-users">{{item.sportType === 1 ? '🏸 羽毛球' : '🎾 网球'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="store-item-action">
|
|
<view class="select-btn {{currentStoreId === item.id ? 'selected' : ''}}">
|
|
<text class="select-icon">✓</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:if="{{stores.length === 0 && !loading}}">
|
|
<image class="empty-icon" src="/images/empty-store.svg" mode="aspectFit"></image>
|
|
<text class="empty-title">暂无门店</text>
|
|
<text class="empty-desc">附近暂无可用门店</text>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading-state" wx:if="{{loading}}">
|
|
<view class="loading-spinner"></view>
|
|
<text>加载中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部安全区域 -->
|
|
<view class="safe-bottom"></view>
|
|
</view>
|