dapaijizhang3/pages/stats/personal/personal.wxml

<!--个人统计页面-->
<custom-navbar title="统计分析" show-back="{{false}}" />
<view class="container" style="margin-top: {{navbarHeight}}px;">
<!-- 未登录状态 -->
  <view wx:if="{{!userInfo}}" class="empty-state">
    <view class="empty-icon">📊</view>
    <text class="empty-text">登录后查看统计数据</text>
    <button class="btn-primary" bindtap="goToLogin">立即登录</button>
  </view>

  <!-- 已登录状态 -->
  <view wx:if="{{userInfo}}">
  <!-- 时间范围选择 -->
  <view class="time-range-bar card">
    <view class="range-btn {{timeRange === 'all' ? 'active' : ''}}"
          bindtap="onTimeRangeChange" data-range="all">
      全部
    </view>
    <view class="range-btn {{timeRange === 'month' ? 'active' : ''}}"
          bindtap="onTimeRangeChange" data-range="month">
      近30天
    </view>
    <view class="range-btn {{timeRange === 'week' ? 'active' : ''}}"
          bindtap="onTimeRangeChange" data-range="week">
      近7天
    </view>
  </view>

  <!-- 核心数据卡片 -->
  <view class="core-stats card">
    <view class="stats-row">
      <view class="stat-item large">
        <view class="stat-number {{stats.net_profit > 0 ? 'win' : stats.net_profit < 0 ? 'lose' : ''}}">
          {{stats.net_profit > 0 ? '+' : ''}}{{stats.net_profit}}
        </view>
        <text class="stat-label">净盈亏</text>
      </view>
      <view class="stat-item large">
        <view class="stat-number">{{stats.win_rate}}%</view>
        <text class="stat-label">胜率</text>
      </view>
    </view>

    <view class="divider"></view>

    <view class="stats-grid">
      <view class="stat-item">
        <text class="stat-number">{{stats.total_games}}</text>
        <text class="stat-label">总场次</text>
      </view>
      <view class="stat-item">
        <text class="stat-number win">{{stats.total_win}}</text>
        <text class="stat-label">累计赢</text>
      </view>
      <view class="stat-item">
        <text class="stat-number lose">{{stats.total_loss}}</text>
        <text class="stat-label">累计输</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{stats.avg_profit}}</text>
        <text class="stat-label">场均</text>
      </view>
    </view>
  </view>

  <!-- 最佳记录卡片 -->
  <view class="best-records card">
    <view class="card-title">最佳记录</view>
    <view class="records-grid">
      <view class="record-item">
        <text class="record-icon">🏆</text>
        <view class="record-info">
          <text class="record-label">单场最大赢</text>
          <text class="record-value win">+{{stats.max_win || 0}}</text>
        </view>
      </view>
      <view class="record-item">
        <text class="record-icon">💔</text>
        <view class="record-info">
          <text class="record-label">单场最大输</text>
          <text class="record-value lose">{{stats.max_loss || 0}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 游戏类型统计 -->
  <view class="game-type-stats card" wx:if="{{gameTypeStats.length > 0}}">
    <view class="card-title">游戏类型统计</view>
    <view class="game-types-list">
      <view class="game-type-item" wx:for="{{gameTypeStats}}" wx:key="type">
        <view class="type-header">
          <text class="type-name">{{item.name}}</text>
          <text class="type-games">{{item.games}}场</text>
        </view>
        <view class="type-stats">
          <view class="type-stat">
            <text class="stat-label">胜率</text>
            <text class="stat-value">{{item.win_rate}}%</text>
          </view>
          <view class="type-stat">
            <text class="stat-label">盈亏</text>
            <view class="stat-value {{item.profit > 0 ? 'win' : item.profit < 0 ? 'lose' : ''}}">
              {{item.profit > 0 ? '+' : ''}}{{item.profit}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 趋势图卡片 -->
  <view class="trend-chart card" wx:if="{{trendData.length > 0}}">
    <view class="card-title">盈亏趋势</view>
    <view class="chart-summary">
      <view class="summary-item">
        <text class="summary-label">累计盈亏</text>
        <view class="summary-value {{trendData[trendData.length - 1].cumulative > 0 ? 'win' : trendData[trendData.length - 1].cumulative < 0 ? 'lose' : ''}}">
          {{trendData[trendData.length - 1].cumulative > 0 ? '+' : ''}}{{trendData[trendData.length - 1].cumulative}}
        </view>
      </view>
      <view class="summary-item">
        <text class="summary-label">统计天数</text>
        <text class="summary-value">{{trendData.length}}天</text>
      </view>
    </view>
    <view class="chart-container">
      <view class="chart-wrapper">
        <!-- 左侧刻度 -->
        <view class="chart-y-axis">
          <text class="y-axis-label" wx:for="{{yAxisLabels}}" wx:key="*this">{{item}}</text>
        </view>
        <!-- 柱状图区域 -->
        <view class="chart-bars">
          <view class="bar-item" wx:for="{{trendData}}" wx:key="date">
            <view class="bar-column">
              <!-- 上半部分(赢钱向上) -->
              <view class="bar-upper">
                <view wx:if="{{item.profit > 0}}" class="bar bar-win"
                      style="height: {{item.heightPercent}}%">
                </view>
              </view>
              <!-- 中线 -->
              <view class="bar-baseline"></view>
              <!-- 下半部分(输钱向下) -->
              <view class="bar-lower">
                <view wx:if="{{item.profit < 0}}" class="bar bar-lose"
                      style="height: {{item.heightPercent}}%">
                </view>
              </view>
            </view>
            <text class="bar-label">{{item.date}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 操作按钮 -->
  <view class="action-buttons" >
    <view class="action-btn primary" bindtap="viewRecords">
      查看全部战绩
    </view>
  </view>
</view>
<!-- 自定义TabBar -->
</view>
<custom-tabbar selected="{{1}}" />