135 lines
5.7 KiB
Plaintext
135 lines
5.7 KiB
Plaintext
<view class="rank-page">
|
|
<image class="page-bg" src="{{imgUrls.pageBg}}" mode="aspectFill" />
|
|
|
|
<view class="top-bar">
|
|
<view class="top-row">
|
|
<text class="page-title">{{roleMeta.title}}</text>
|
|
<view class="refresh-wrap" bindtap="onRefreshTap">
|
|
<image class="refresh-ico" src="{{imgUrls.refreshIcon}}" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x class="role-scroll" enhanced show-scrollbar="{{false}}">
|
|
<view class="role-line">
|
|
<view
|
|
wx:for="{{roleList}}" wx:key="key"
|
|
class="role-chip {{currentRole === item.key ? 'on' : ''}}"
|
|
data-role="{{item.key}}" bindtap="onRoleTap"
|
|
>{{item.label}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="date-grid">
|
|
<view
|
|
wx:for="{{dateList}}" wx:key="key"
|
|
class="date-chip {{currentDate === item.key ? 'on' : ''}}"
|
|
data-date="{{item.key}}" bindtap="onDateTap"
|
|
>{{item.label}}</view>
|
|
</view>
|
|
<text class="sort-tip">{{currentDate}} · 按{{sortLabel}} · TOP50</text>
|
|
</view>
|
|
|
|
<view class="state-wrap" wx:if="{{isLoading}}">
|
|
<view class="loader"></view>
|
|
<text>加载中</text>
|
|
</view>
|
|
|
|
<view class="state-wrap" wx:elif="{{isEmpty}}">
|
|
<image class="state-img" src="{{imgUrls.emptyIcon}}" mode="aspectFit" />
|
|
<text>暂无排行数据</text>
|
|
</view>
|
|
|
|
<scroll-view wx:else scroll-y class="body-scroll" enhanced show-scrollbar="{{false}}">
|
|
|
|
<!-- 前三名 · 纯 CSS 领奖台 -->
|
|
<view class="podium-panel" wx:if="{{topThree.length > 0}}">
|
|
<view class="podium-cols">
|
|
|
|
<!-- 榜二 -->
|
|
<view class="p-col p-second" wx:if="{{topThree[1]}}">
|
|
<view class="p-badge badge-silver"><text>2</text></view>
|
|
<view class="p-avatar-wrap wrap-silver">
|
|
<image class="p-avatar" src="{{topThree[1].avatar || defaultAvatar}}" mode="aspectFill" data-zone="top" data-index="1" binderror="onAvatarError" />
|
|
</view>
|
|
<text class="p-name">{{topThree[1].nicheng}}</text>
|
|
<text class="p-uid">ID {{topThree[1].uid}}</text>
|
|
<view class="p-amount">
|
|
<text class="p-money">¥{{topThree[1].mainValue}}</text>
|
|
<text class="p-label">{{topThree[1].mainLabel}}</text>
|
|
</view>
|
|
<view class="p-metrics">
|
|
<text class="p-metric" wx:for="{{topThree[1].metrics}}" wx:key="label" wx:for-item="m">{{m.label}} {{m.value}}</text>
|
|
</view>
|
|
<view class="p-pedestal pedestal-silver"></view>
|
|
</view>
|
|
|
|
<!-- 榜一 -->
|
|
<view class="p-col p-first" wx:if="{{topThree[0]}}">
|
|
<view class="p-badge badge-first"><text>1</text></view>
|
|
<view class="p-avatar-wrap wrap-first">
|
|
<image class="p-avatar p-avatar-lg" src="{{topThree[0].avatar || defaultAvatar}}" mode="aspectFill" data-zone="top" data-index="0" binderror="onAvatarError" />
|
|
</view>
|
|
<text class="p-name p-name-first">{{topThree[0].nicheng}}</text>
|
|
<text class="p-uid">ID {{topThree[0].uid}}</text>
|
|
<view class="p-amount">
|
|
<text class="p-money p-money-first">¥{{topThree[0].mainValue}}</text>
|
|
<text class="p-label">{{topThree[0].mainLabel}}</text>
|
|
</view>
|
|
<view class="p-metrics">
|
|
<text class="p-metric" wx:for="{{topThree[0].metrics}}" wx:key="label" wx:for-item="m">{{m.label}} {{m.value}}</text>
|
|
</view>
|
|
<view class="p-pedestal pedestal-first"></view>
|
|
</view>
|
|
|
|
<!-- 榜三 -->
|
|
<view class="p-col p-third" wx:if="{{topThree[2]}}">
|
|
<view class="p-badge badge-bronze"><text>3</text></view>
|
|
<view class="p-avatar-wrap wrap-bronze">
|
|
<image class="p-avatar" src="{{topThree[2].avatar || defaultAvatar}}" mode="aspectFill" data-zone="top" data-index="2" binderror="onAvatarError" />
|
|
</view>
|
|
<text class="p-name">{{topThree[2].nicheng}}</text>
|
|
<text class="p-uid">ID {{topThree[2].uid}}</text>
|
|
<view class="p-amount">
|
|
<text class="p-money">¥{{topThree[2].mainValue}}</text>
|
|
<text class="p-label">{{topThree[2].mainLabel}}</text>
|
|
</view>
|
|
<view class="p-metrics">
|
|
<text class="p-metric" wx:for="{{topThree[2].metrics}}" wx:key="label" wx:for-item="m">{{m.label}} {{m.value}}</text>
|
|
</view>
|
|
<view class="p-pedestal pedestal-bronze"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 4-50 名 -->
|
|
<view class="list-wrap" wx:if="{{restList.length > 0}}">
|
|
<view class="list-title-row">
|
|
<text class="list-title">完整榜单</text>
|
|
<text class="list-range">第 4 - {{rankList.length}} 名</text>
|
|
</view>
|
|
|
|
<view class="list-card" wx:for="{{restList}}" wx:key="mingci">
|
|
<image class="list-card-bg" src="{{imgUrls.cardBg}}" mode="aspectFill" />
|
|
<view class="list-card-body">
|
|
<view class="lc-rank"><text>{{item.mingci}}</text></view>
|
|
<image class="lc-avatar" src="{{item.avatar || defaultAvatar}}" mode="aspectFill" data-zone="rest" data-index="{{index}}" binderror="onAvatarError" />
|
|
<view class="lc-info">
|
|
<text class="lc-name">{{item.nicheng}}</text>
|
|
<text class="lc-uid">ID {{item.uid}}</text>
|
|
<view class="lc-tags">
|
|
<text class="lc-tag" wx:for="{{item.metrics}}" wx:key="label" wx:for-item="m">{{m.label}} {{m.value}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="lc-score">
|
|
<text class="lc-money">¥{{item.mainValue}}</text>
|
|
<text class="lc-label">{{item.mainLabel}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-gap"></view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<global-notification id="global-notification" />
|