256 lines
11 KiB
Plaintext
256 lines
11 KiB
Plaintext
<!-- pages/manager-rank/manager-rank.wxml -->
|
|
<view class="rank-page">
|
|
|
|
<!-- 赛博朋克背景元素 -->
|
|
<view class="rank-cyber-bg">
|
|
<!-- 网格线 -->
|
|
<view class="rank-cyber-grid"></view>
|
|
<!-- 扫描线 -->
|
|
<view class="rank-cyber-scanline"></view>
|
|
<!-- 流动数据流 -->
|
|
<view class="rank-data-streams">
|
|
<view class="rank-stream rank-stream--1"></view>
|
|
<view class="rank-stream rank-stream--2"></view>
|
|
<view class="rank-stream rank-stream--3"></view>
|
|
</view>
|
|
<!-- 浮动粒子 -->
|
|
<view class="rank-particle" wx:for="{{12}}" wx:key="index"></view>
|
|
</view>
|
|
|
|
<!-- 页面头部 -->
|
|
<view class="rank-page-header">
|
|
<!-- 标题 -->
|
|
<view class="rank-title-container">
|
|
<text class="rank-main-title">管事排行榜</text>
|
|
<view class="rank-title-line"></view>
|
|
<text class="rank-sub-title">GUANSHI RANKING</text>
|
|
</view>
|
|
|
|
<!-- 切换按钮 -->
|
|
<view class="rank-toggle-container">
|
|
<view class="rank-toggle-bg" style="transform: translateX({{paihangLeixing == 1 ? '0' : '100%'}});"></view>
|
|
<view
|
|
class="rank-toggle-btn {{paihangLeixing == 1 ? 'active' : ''}} {{btnFangdou ? 'disabled' : ''}}"
|
|
data-leixing="1"
|
|
bindtap="qiehuangPaihangLeixing"
|
|
>
|
|
<text class="rank-toggle-text">今日充值人数</text>
|
|
<view class="rank-toggle-line {{paihangLeixing == 1 ? 'active' : ''}}"></view>
|
|
</view>
|
|
<view
|
|
class="rank-toggle-btn {{paihangLeixing == 2 ? 'active' : ''}} {{btnFangdou ? 'disabled' : ''}}"
|
|
data-leixing="2"
|
|
bindtap="qiehuangPaihangLeixing"
|
|
>
|
|
<text class="rank-toggle-text">今月充值人数</text>
|
|
<view class="rank-toggle-line {{paihangLeixing == 2 ? 'active' : ''}}"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view wx:if="{{jiazaiZhuangtai}}" class="rank-loading-state">
|
|
<view class="rank-loading-spinner">
|
|
<view class="rank-spinner-outer"></view>
|
|
<view class="rank-spinner-inner"></view>
|
|
<view class="rank-spinner-core"></view>
|
|
</view>
|
|
<text class="rank-loading-text">数据加载中</text>
|
|
<text class="rank-loading-sub">Connecting to server...</text>
|
|
</view>
|
|
|
|
<!-- 排行榜内容 -->
|
|
<view wx:else class="rank-content">
|
|
|
|
<!-- 虚拟数据提示 -->
|
|
<view wx:if="{{!xianshiZhenshiShuju}}" class="rank-demo-notice">
|
|
<view class="rank-notice-icon">📡</view>
|
|
<view class="rank-notice-content">
|
|
<text class="rank-notice-title">排行榜数据准备中</text>
|
|
<text class="rank-notice-desc">当前显示为模拟数据，实时排名即将开放</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- ========== 前三名区域 ========== -->
|
|
<view class="rank-top-three" wx:if="{{qiansanMing.length > 0}}">
|
|
|
|
<!-- 第二名 -->
|
|
<view class="rank-card rank-card--2 {{flashCardIndex == 1 && flashCardType == 'top3' ? 'flash' : ''}}"
|
|
animation="{{flashCardIndex == 1 && flashCardType == 'top3' ? flashAnimation : ''}}"
|
|
data-index="1" data-type="top3" bindtap="handleCardTap">
|
|
|
|
<view class="rank-podium-base rank-podium-silver">
|
|
<text class="rank-podium-number">2</text>
|
|
</view>
|
|
|
|
<view class="rank-content">
|
|
<!-- 头像容器 -->
|
|
<view class="rank-avatar-frame rank-frame-silver">
|
|
<view class="rank-avatar-container">
|
|
<image class="rank-avatar-image" src="{{qiansanMing[1] ? qiansanMing[1].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
|
|
<view class="rank-avatar-halo rank-halo-silver"></view>
|
|
<view class="rank-sparkle" style="top:15%;left:15%;animation-delay:0s"></view>
|
|
<view class="rank-sparkle" style="top:25%;right:25%;animation-delay:0.5s"></view>
|
|
<view class="rank-sparkle" style="bottom:35%;left:35%;animation-delay:1s"></view>
|
|
</view>
|
|
<view class="rank-badge rank-badge-silver">2</view>
|
|
</view>
|
|
|
|
<!-- 用户信息 -->
|
|
<view class="rank-user-info-card">
|
|
<text class="rank-user-name">{{qiansanMing[1] ? qiansanMing[1].nicheng : '等待上榜'}}</text>
|
|
<view class="rank-info-body">
|
|
<view class="rank-uid-row">
|
|
<text class="rank-uid-label">ID:</text>
|
|
<text class="rank-uid-value">{{qiansanMing[1] ? qiansanMing[1].uid : '----'}}</text>
|
|
</view>
|
|
<view class="rank-income-row">
|
|
<text class="rank-income-label">充值大手:</text>
|
|
<view class="rank-income-value">
|
|
<text class="rank-amount {{qiansanMing[1] ? qiansanMing[1].jineClass : ''}}">{{qiansanMing[1] ? qiansanMing[1].jine : '0'}}</text>
|
|
<text class="rank-unit">人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 第一名 -->
|
|
<view class="rank-card rank-card--1 {{flashCardIndex == 0 && flashCardType == 'top3' ? 'flash' : ''}}"
|
|
animation="{{flashCardIndex == 0 && flashCardType == 'top3' ? flashAnimation : ''}}"
|
|
data-index="0" data-type="top3" bindtap="handleCardTap">
|
|
|
|
<!-- 皇冠 -->
|
|
<view class="rank-crown-container" animation="{{crownAnimation}}">
|
|
<text class="rank-crown-icon">👑</text>
|
|
<view class="rank-crown-glow"></view>
|
|
</view>
|
|
|
|
<view class="rank-podium-base rank-podium-gold">
|
|
<text class="rank-podium-number">1</text>
|
|
</view>
|
|
|
|
<view class="rank-content">
|
|
<!-- 头像容器 -->
|
|
<view class="rank-avatar-frame rank-frame-gold">
|
|
<view class="rank-avatar-container">
|
|
<image class="rank-avatar-image" src="{{qiansanMing[0] ? qiansanMing[0].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
|
|
<view class="rank-avatar-halo rank-halo-gold"></view>
|
|
<view class="rank-sparkle" style="top:15%;left:15%;animation-delay:0s"></view>
|
|
<view class="rank-sparkle" style="top:25%;right:25%;animation-delay:0.5s"></view>
|
|
<view class="rank-sparkle" style="bottom:35%;left:35%;animation-delay:1s"></view>
|
|
<view class="rank-sparkle" style="bottom:15%;right:15%;animation-delay:1.5s"></view>
|
|
</view>
|
|
<view class="rank-badge rank-badge-gold">1</view>
|
|
</view>
|
|
|
|
<!-- 用户信息 -->
|
|
<view class="rank-user-info-card">
|
|
<text class="rank-user-name">{{qiansanMing[0] ? qiansanMing[0].nicheng : '等待上榜'}}</text>
|
|
<view class="rank-info-body">
|
|
<view class="rank-uid-row">
|
|
<text class="rank-uid-label">ID:</text>
|
|
<text class="rank-uid-value">{{qiansanMing[0] ? qiansanMing[0].uid : '----'}}</text>
|
|
</view>
|
|
<view class="rank-income-row">
|
|
<text class="rank-income-label">充值大手:</text>
|
|
<view class="rank-income-value">
|
|
<text class="rank-amount {{qiansanMing[0] ? qiansanMing[0].jineClass : ''}}">{{qiansanMing[0] ? qiansanMing[0].jine : '0'}}</text>
|
|
<text class="rank-unit">人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 第三名 -->
|
|
<view class="rank-card rank-card--3 {{flashCardIndex == 2 && flashCardType == 'top3' ? 'flash' : ''}}"
|
|
animation="{{flashCardIndex == 2 && flashCardType == 'top3' ? flashAnimation : ''}}"
|
|
data-index="2" data-type="top3" bindtap="handleCardTap">
|
|
|
|
<view class="rank-podium-base rank-podium-bronze">
|
|
<text class="rank-podium-number">3</text>
|
|
</view>
|
|
|
|
<view class="rank-content">
|
|
<!-- 头像容器 -->
|
|
<view class="rank-avatar-frame rank-frame-bronze">
|
|
<view class="rank-avatar-container">
|
|
<image class="rank-avatar-image" src="{{qiansanMing[2] ? qiansanMing[2].full_touxiang : ''}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
|
|
<view class="rank-avatar-halo rank-halo-bronze"></view>
|
|
<view class="rank-sparkle" style="top:15%;left:15%;animation-delay:0s"></view>
|
|
<view class="rank-sparkle" style="top:25%;right:25%;animation-delay:0.5s"></view>
|
|
<view class="rank-sparkle" style="bottom:35%;left:35%;animation-delay:1s"></view>
|
|
</view>
|
|
<view class="rank-badge rank-badge-bronze">3</view>
|
|
</view>
|
|
|
|
<!-- 用户信息 -->
|
|
<view class="rank-user-info-card">
|
|
<text class="rank-user-name">{{qiansanMing[2] ? qiansanMing[2].nicheng : '等待上榜'}}</text>
|
|
<view class="rank-info-body">
|
|
<view class="rank-uid-row">
|
|
<text class="rank-uid-label">ID:</text>
|
|
<text class="rank-uid-value">{{qiansanMing[2] ? qiansanMing[2].uid : '----'}}</text>
|
|
</view>
|
|
<view class="rank-income-row">
|
|
<text class="rank-income-label">充值大手:</text>
|
|
<view class="rank-income-value">
|
|
<text class="rank-amount {{qiansanMing[2] ? qiansanMing[2].jineClass : ''}}">{{qiansanMing[2] ? qiansanMing[2].jine : '0'}}</text>
|
|
<text class="rank-unit">人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- ========== 其他排名列表 ========== -->
|
|
<view wx:if="{{paihangShuju.length > 0}}">
|
|
<view class="rank-section-title">
|
|
<view class="rank-section-line"></view>
|
|
<text class="rank-section-text">其他排名</text>
|
|
<view class="rank-section-line"></view>
|
|
</view>
|
|
|
|
<view class="rank-list-item {{flashCardIndex == index && flashCardType == 'normal' ? 'flash' : ''}}"
|
|
wx:for="{{paihangShuju}}" wx:key="index"
|
|
animation="{{flashCardIndex == index && flashCardType == 'normal' ? flashAnimation : ''}}"
|
|
data-index="{{index}}" data-type="normal" bindtap="handleCardTap">
|
|
|
|
<view class="rank-number">
|
|
<text class="rank-number-text">{{xianshiZhenshiShuju ? index + 4 : index + 1}}</text>
|
|
<view class="rank-number-glow"></view>
|
|
</view>
|
|
|
|
<view class="rank-list-avatar">
|
|
<image class="rank-list-avatar-img" src="{{item.full_touxiang}}" mode="aspectFill" binderror="tupianJiazaiShibai"></image>
|
|
<view class="rank-list-avatar-halo"></view>
|
|
</view>
|
|
|
|
<view class="rank-list-info">
|
|
<text class="rank-list-name">{{item.nicheng}}</text>
|
|
<text class="rank-list-uid">UID: {{item.uid}}</text>
|
|
</view>
|
|
|
|
<view class="rank-list-income">
|
|
<text class="rank-income-amount {{item.jineClass}}">{{item.jine}}</text>
|
|
<text class="rank-income-unit">人</text>
|
|
<view class="rank-income-glow"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view wx:if="{{xianshiZhenshiShuju && paihangShuju.length === 0 && qiansanMing.length === 0}}" class="rank-empty-state">
|
|
<view class="rank-empty-icon">🏆</view>
|
|
<text class="rank-empty-title">暂无排名数据</text>
|
|
<text class="rank-empty-desc">成为第一个登榜的管事吧</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<global-notification id="global-notification" />
|