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