bookKeepingWx/pages/statistics/statistics.wxml

  <!-- 时间维度切换 -->
  <view class="time-filter">
    <view class="time-btns">
      <button 
        class="time-btn {{currentTimeType === 'year' ? 'time-btn-active' : ''}}"
        bindtap="changeTimeType"
        data-type="year"
      >
        按年
      </button>
      <button 
        class="time-btn {{currentTimeType === 'month' ? 'time-btn-active' : ''}}"
        bindtap="changeTimeType"
        data-type="month"
      >
        按月
      </button>
    </view>
  </view>
     <!-- 月份选择器 -->
   <!-- <view class="month-picker"> 
    <picker mode="date" fields="month" value="{{selectedMonth}}" bindchange="onMonthChange"> 
      <view class="picker-view"> 
        <text class="iconfont icon-calendar"></text> 
        <text>{{selectedMonthText}}</text> 
        <text class="iconfont icon-arrow-down"></text> 
      </view> 
    </picker> 
    </view> -->
  <!-- 当前时间选择 -->
  <view class="current-period">
    <view class="period-container">
      <button class="period-btn" bindtap="prevPeriod">
        <image src="/images/left-arrow.png" class="arrow-icon"></image>
      </button>
      <view class="period-text">{{currentPeriodText}}</view>
      <button class="period-btn" bindtap="nextPeriod">
        <image src="/images/right-arrow.png" class="arrow-icon"></image>
      </button>
    </view>
  </view>
  
  <!-- 收支概览 -->
  <view class="summary-card">
    <view class="summary-item">
      <text class="summary-label">收入</text>
      <text class="summary-amount income">¥ {{summary.income}}</text>
    </view>
    <view class="summary-item">
      <text class="summary-label">支出</text>
      <text class="summary-amount expense">¥ {{summary.expense}}</text>
    </view>
  </view>
  
  <!-- 分类统计 -->
  <view class="category-stats">
    <view class="section-header">
      <text class="section-title">分类统计</text>
      <view class="type-tabs">
        <view class="tab {{activeType === 'expense' ? 'active' : ''}}" bindtap="setActiveType" data-type="expense">支出</view>
        <view class="tab {{activeType === 'income' ? 'active' : ''}}" bindtap="setActiveType" data-type="income">收入</view>
      </view>
    </view>
    
    <!-- 饼图容器 -->
    <view class="chart-container">
      <canvas canvas-id="pieChart" class="pie-chart"></canvas>
    </view>
    
    <!-- 分类详情 -->
    <view class="category-details">
      <view wx:for="{{categoryStats}}" wx:key="categoryId" class="category-detail-item">
        <view class="category-info">
          <view class="category-color" style="background-color: {{item.color}};"></view>
          <text class="category-name">{{item.categoryName}}</text>
        </view>
        <view class="category-amount">
          <text>¥ {{item.amount}}</text>
          <text class="category-percentage">{{item.percentage}}%</text>
        </view>
      </view>
      
      <view wx:if="{{categoryStats.length === 0}}" class="no-data">
        <text>本月暂无{{activeType === 'expense' ? '支出' : '收入'}}记录</text>
      </view>
    </view>
  </view>
  
  <!-- 记录列表 -->
  <view class="records-section">
    <view class="section-header">
      <text class="section-title">明细记录</text>
    </view>
    
    <view class="records-list">
      <view wx:for="{{monthRecords}}" wx:key="id" class="record-item">
        <view class="record-icon {{item.type === 'in' ? 'income-icon' : 'expense-icon'}}">
          <text class="iconfont icon-{{item.categoryIcon}}"></text>
        </view>
        <view class="record-details">
          <view class="record-title">{{item.classificationName}}</view>
          <view class="record-note">{{item.remark || '无备注'}}</view>
          <view class="record-date">{{item.useDate}}</view>
        </view>
        <view class="record-amount {{item.type === 'in' ? 'income' : 'expense'}}">
          {{item.type === 'in' ? '+' : '-'}}¥ {{item.money}}
        </view>
      </view>
      
      <view wx:if="{{monthRecords.length === 0}}" class="no-records">
        <text>本月暂无记录</text>
      </view>
    </view>
  </view>