111 lines
3.7 KiB
Plaintext
111 lines
3.7 KiB
Plaintext
<!--天梯排名页面 - 浅色高级感设计-->
|
||
<view class="page-container">
|
||
<!-- 顶部装饰背景 -->
|
||
<view class="hero-section">
|
||
<view class="hero-pattern"></view>
|
||
<view class="hero-pattern-2"></view>
|
||
|
||
<!-- 门店信息 -->
|
||
<view class="store-header">
|
||
<view class="store-info">
|
||
<view class="store-dot"></view>
|
||
<text class="store-name">{{currentStore.storeName || '请选择门店'}}</text>
|
||
</view>
|
||
<view class="change-store-btn" bindtap="selectStore">
|
||
<text class="change-store-text">切换门店</text>
|
||
<text class="change-store-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 页面标题 -->
|
||
<view class="page-header animate-fadeInUp" style="animation-delay: 0.05s">
|
||
<text class="page-title">天梯排名</text>
|
||
<text class="page-subtitle">挑战自我，超越巅峰</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<view class="main-content">
|
||
<!-- 性别筛选标签 - 吸附在顶部 -->
|
||
<view class="filter-bar-wrapper">
|
||
<view class="filter-bar animate-fadeInUp" style="animation-delay: 0.1s">
|
||
<view
|
||
class="filter-item {{gender === '' ? 'active' : ''}}"
|
||
bindtap="setGender"
|
||
data-gender=""
|
||
>
|
||
全部
|
||
</view>
|
||
<view
|
||
class="filter-item {{gender === '1' ? 'active' : ''}}"
|
||
bindtap="setGender"
|
||
data-gender="1"
|
||
>
|
||
♂ 男子
|
||
</view>
|
||
<view
|
||
class="filter-item {{gender === '2' ? 'active' : ''}}"
|
||
bindtap="setGender"
|
||
data-gender="2"
|
||
>
|
||
♀ 女子
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 排名列表 -->
|
||
<view class="ranking-list">
|
||
<block wx:if="{{list.length > 0}}">
|
||
<view
|
||
class="ranking-item stagger-item {{index < 3 ? 'top-rank' : ''}} animate-fadeInUp"
|
||
wx:for="{{list}}"
|
||
wx:key="id"
|
||
bindtap="viewPlayer"
|
||
data-id="{{item.id}}"
|
||
>
|
||
<!-- 排名徽章 -->
|
||
<view class="rank-badge {{item.rank === 1 ? 'top1' : item.rank === 2 ? 'top2' : item.rank === 3 ? 'top3' : 'normal'}}">
|
||
<text wx:if="{{item.rank <= 3}}">{{item.rank === 1 ? '👑' : item.rank === 2 ? '🥈' : '🥉'}}</text>
|
||
<text wx:else>{{item.rank}}</text>
|
||
</view>
|
||
|
||
<!-- 选手头像 -->
|
||
<image class="player-avatar" src="{{item.avatar || '/images/avatar-default.svg'}}" mode="aspectFill"></image>
|
||
|
||
<!-- 选手信息 -->
|
||
<view class="player-info">
|
||
<text class="player-name">{{item.realName}}</text>
|
||
<view class="player-meta">
|
||
<text class="player-level lv{{item.level}}">Lv{{item.level}}</text>
|
||
<text class="player-stats">胜率 {{item.winRate}}%</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 战力值 -->
|
||
<view class="player-power">
|
||
<text class="power-value">{{item.powerScore}}</text>
|
||
<text class="power-label">战力</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 空状态 -->
|
||
<view wx:elif="{{!loading}}" class="empty-state">
|
||
<image class="empty-icon" src="/images/empty-ranking.svg" mode="aspectFit"></image>
|
||
<text class="empty-title">暂无排名数据</text>
|
||
<text class="empty-desc">每月完成3场比赛即可上榜</text>
|
||
</view>
|
||
|
||
<!-- 加载更多 -->
|
||
<view wx:if="{{loading}}" class="loading-state">
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<!-- 到底提示 -->
|
||
<view wx:if="{{list.length > 0 && !hasMore && !loading}}" class="load-more">
|
||
<text>— 已显示全部选手 —</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|