YD_WeChatApplet/pages/parent/report/report.wxml

<!-- pages/parent/report/report.wxml -->
<view class="page-content" style="padding: 0 30rpx; padding-bottom: 300rpx;box-sizing: border-box;">
  <mp-bar background="linear-gradient(190deg, #49a5fc 0%, #f7f7f7 800rpx, #f7f7f7 100%)" title="报告" color="#fff" back="{{false}}"></mp-bar>
  <view class="tab-switcher">
    <view class="tab-btn {{activeTab === 0 ? 'tab-btn-active' : ''}}" data-tab="0" bind:tap="switchTab">
      课堂报告
    </view>
    <view class="tab-btn {{activeTab === 1 ? 'tab-btn-active' : ''}}" data-tab="1" bind:tap="switchTab">
      {{isTrainee ? '体测报告' : '学生报告'}}
    </view>
  </view>

  <view wx:if="{{activeTab === 1}}" class="posture-report-link" bindtap="goPostureReport">
    <view>
      <view class="posture-report-title">体质评估报告</view>
      <view class="posture-report-desc">查看教练录入的健康评估结果</view>
    </view>
    <text class="posture-report-arrow">›</text>
  </view>

  <!-- 非学员：原有学生报告 -->
  <view class="top" wx:if="{{!isTrainee && activeTab === 1 && list && list.length > 0}}">
    <view class="tit">
      <image src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/heart.png" class="heart" />
      健康身体 坚持运动
    </view>
    <view class="score">
      <image src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/report-bg.png" class="score-img" />
      <view class="type">
        身体形态
        <view>
          <text class="score-detail">{{report.bodyShape}}</text>
          (分)
        </view>
        <view class="btto"></view>
      </view>
      <view class="jineng">
        身体机能
        <view>
          <text class="score-detail">{{report.bodyFunction}}</text>
          (分)
        </view>
        <view class="btto"></view>
      </view>
      <view class="suzhi">
        身体素质
        <view>
          <text class="score-detail">{{report.bodyQuality}}</text>
          (分)
        </view>
        <view class="btto"></view>
      </view>
    </view>
    <view class="card">
      <view class="title">
        我的总分
        <text>
          {{report.totalScore}}
          <text class="unit">分</text>
        </text>
      </view>
      <view class="score-box">
        <text>60</text>
        <text>80</text>
        <text>90</text>
      </view>
      <view class="progress-box">
        <view class="progress {{report.grade}}" style="width: {{report.width}};">
          <text></text>
          <text>{{report.totalScore}}</text>
        </view>
      </view>
      <view class="score-box">
        <view class="cut-box"></view>
        <view class="cut-box"></view>
        <view class="cut-box"></view>
      </view>
      <view class="grade-box">
        <view>不及格</view>
        <view>及格</view>
        <view>良好</view>
        <view>优秀</view>
      </view>
    </view>
    <view class="card" wx:for="{{list}}" wx:key="index">
      <view class="title">
        {{item.name}}
        <text>
          {{item.score}}
          <text class="unit">分</text>
        </text>
      </view>
      <view class="with">
        <image src="{{item.imgUrl}}" class="image-icon" />
        <view class="right">
          <view class="score-box">
            <text>60</text>
            <text>80</text>
            <text>90</text>
          </view>
          <view class="progress-box">
            <view class="progress {{item.grade}}" style="width: {{item.width}};">
              <text></text>
              <text>{{item.score}}</text>
            </view>
          </view>
          <view class="score-box">
            <view class="cut-box"></view>
            <view class="cut-box"></view>
            <view class="cut-box"></view>
          </view>
          <view class="grade-box">
            <view>不及格</view>
            <view>及格</view>
            <view>良好</view>
            <view>优秀</view>
          </view>
        </view>
      </view>
    </view>
  </view>
    <view class="report-empty" wx:if="{{!isTrainee && activeTab === 1 && !studentReportLoading && (!list || list.length === 0)}}">
      <view class="report-empty-icon">暂无</view>
      <text>暂无学生报告数据</text>
    </view>
  <!-- 课堂/体测报告 -->
  <view wx:if="{{isTrainee || activeTab === 0}}" class="trainee-wrap">
    <!-- 课堂报告 -->
    <block wx:if="{{activeTab === 0}}">
      <!-- 子Tab: 课堂 / 月 / 季度 -->
      <view class="sub-tab-switcher">
        <view class="sub-tab-btn {{classroomSubTab === 0 ? 'sub-tab-active' : ''}}" data-tab="0" bind:tap="switchClassroomSubTab">
          课堂
        </view>
        <view class="sub-tab-btn {{classroomSubTab === 1 ? 'sub-tab-active' : ''}}" data-tab="1" bind:tap="switchClassroomSubTab">
          月
        </view>
        <view class="sub-tab-btn {{classroomSubTab === 2 ? 'sub-tab-active' : ''}}" data-tab="2" bind:tap="switchClassroomSubTab">
          季度
        </view>
      </view>
      <!-- 课堂：原有列表 -->
      <block wx:if="{{classroomSubTab === 0}}">
        <view class="card card1" wx:for="{{roomList}}" wx:key="id" bind:tap="goReportDetail" id="{{item.id}}">
          <view class="room-info">
            <view class="room-date">{{item.startingEndingTime}}</view>
            <view class="room-week">{{item.time}}</view>
          </view>
          <mp-icon icon="arrow" size="{{13}}" color="#ccc"></mp-icon>
        </view>
        <view class="more-tip" wx:if="{{roomList.length > 0 && hasMore}}">加载中...</view>
        <view class="more-tip" wx:elif="{{roomList.length > 0 && !hasMore}}">没有更多了哦~</view>
        <view class="report-empty" wx:if="{{!roomList || roomList.length === 0}}">
          <view class="report-empty-icon">暂无</view>
          <text>暂无课堂报告数据</text>
        </view>
      </block>
      <!-- 月报告 -->
      <block wx:elif="{{classroomSubTab === 1}}">
        <!-- 月份选择器入口 -->
        <view class="period-selector" bind:tap="openMonthPicker">
          <text class="period-text">{{selectedYear}}年{{selectedMonth}}月</text>
          <text class="period-caret">▾</text>
        </view>
        <!-- 心率统计 -->
        <view class="stat-section-header-wrap">
          <view class="stat-section-header">心率统计</view>
        </view>
        <view class="stat-grid">
          <view class="stat-card stat-card-1">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">心率范围</text>
            <text class="stat-card-value">{{mockMonthData.heartRange}}</text>
          </view>
          <view class="stat-card stat-card-2">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">平均心率</text>
            <text class="stat-card-value">{{mockMonthData.avgHeart}}</text>
          </view>
          <view class="stat-card stat-card-3">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">中高强度时长</text>
            <text class="stat-card-value">{{mockMonthData.highDuration}}</text>
          </view>
          <view class="stat-card stat-card-4">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">中高时间占比</text>
            <text class="stat-card-value">{{mockMonthData.highRatio}}</text>
          </view>
        </view>
        <!-- 跳绳统计 -->
        <view class="stat-section-header-wrap">
          <view class="stat-section-header">跳绳统计</view>
        </view>
        <view class="jump-tip">训练记录统计：仅智能跳绳，不含普通跳绳</view>
        <view class="jump-summary-wrap">
          <view class="jump-summary-header">
            <view class="jump-col">个数</view>
            <view class="jump-col">
              时长
              <text class="jump-unit">（分钟）</text>
            </view>
            <view class="jump-col">
              平均速度
              <text class="jump-unit">（个/分钟）</text>
            </view>
          </view>
          <view class="jump-summary-data">
            <view class="jump-col">{{mockMonthData.jumpTotal}}</view>
            <view class="jump-col">{{mockMonthData.jumpDuration}}</view>
            <view class="jump-col">{{mockMonthData.jumpAvgSpeed}}</view>
          </view>
          
        </view>
        <view class="jump-summary-wrap" style="margin-top:30rpx">
          <view class="jump-record-item" wx:for="{{mockMonthData.jumpRecords}}" wx:key="index">
            <view class="jump-record-icon-wrap">
              <image src="/static/student/train.png" class="jump-record-icon" mode="aspectFit" />
            </view>
            <view class="jump-record-main">
              <view class="jump-record-tag">{{item.type}}</view>
              <view class="jump-record-detail">{{item.duration}}  {{item.count}}个</view>
            </view>
          </view>
          </view>
      </block>
      <!-- 季度报告 -->
      <block wx:elif="{{classroomSubTab === 2}}">
        <!-- 季度选择器入口 -->
        <view class="period-selector" bind:tap="openQuarterPicker">
          <text class="period-text">{{selectedYear}}年 第{{selectedQuarter}}季度</text>
          <text class="period-caret">▾</text>
        </view>
        <!-- 心率统计 -->
        <view class="stat-section-header-wrap">
          <view class="stat-section-header">心率统计</view>
        </view>
        <view class="stat-grid">
          <view class="stat-card stat-card-1">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">心率范围</text>
            <text class="stat-card-value">{{mockQuarterData.heartRange}}</text>
          </view>
          <view class="stat-card stat-card-2">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">平均心率</text>
            <text class="stat-card-value">{{mockQuarterData.avgHeart}}</text>
          </view>
          <view class="stat-card stat-card-3">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">中高强度时长</text>
            <text class="stat-card-value">{{mockQuarterData.highDuration}}</text>
          </view>
          <view class="stat-card stat-card-4">
            <view class="stat-card-bar"></view>
            <text class="stat-card-label">中高时间占比</text>
            <text class="stat-card-value">{{mockQuarterData.highRatio}}</text>
          </view>
        </view>
        <!-- 跳绳统计 -->
        <view class="stat-section-header-wrap">
          <view class="stat-section-header">跳绳统计</view>
        </view>
        <view class="jump-tip">训练记录统计：仅智能跳绳，不会普通跳绳</view>
        <view class="jump-summary-wrap">
          <view class="jump-summary-header">
            <view class="jump-col">个数</view>
            <view class="jump-col">
              时长
              <text class="jump-unit">（分钟）</text>
            </view>
            <view class="jump-col">
              平均速度
              <text class="jump-unit">（个/分钟）</text>
            </view>
          </view>
          <view class="jump-summary-data">
            <view class="jump-col">{{mockQuarterData.jumpTotal}}</view>
            <view class="jump-col">{{mockQuarterData.jumpDuration}}</view>
            <view class="jump-col">{{mockQuarterData.jumpAvgSpeed}}</view>
          </view>
        </view>
        <view class="jump-summary-wrap" style="margin-top:30rpx">
          <view class="jump-record-item" wx:for="{{mockQuarterData.jumpRecords}}" wx:key="index">
            <view class="jump-record-icon-wrap">
              <image src="/static/student/train.png" class="jump-record-icon" mode="aspectFit" />
            </view>
            <view class="jump-record-main">
              <view class="jump-record-tag">{{item.type}}</view>
              <view class="jump-record-detail">{{item.duration}}  {{item.count}}个</view>
            </view>
          </view>
        </view>
      </block>
    </block>
    <!-- 体测报告 -->
    <block wx:if="{{isTrainee && activeTab === 1}}">
      <view class="fitness-card">
        <view class="fitness-chart-title">体测成绩对比</view>
        <!-- 雷达图 Canvas -->
        <view class="radar-wrap" style="width:{{radarCWidth}}px;height:{{radarCHeight}}px;">
          <canvas type="2d" id="radarCanvas" canvas-id="radarCanvas" style="width:{{radarCWidth}}px;height:{{radarCHeight}}px;" />
        </view>
        <!-- 图例 -->
        <!-- <view class="radar-legend">
          <view class="legend-item">
            <view class="legend-dot legend-blue"></view>
            <text>上次成绩</text>
          </view>
          <view class="legend-item">
            <view class="legend-dot legend-red"></view>
            <text>本次成绩</text>
          </view>
        </view> -->
      </view>
      <!-- 六项指标卡片 -->
      <view class="fitness-grid">
        <view class="fitness-item" wx:for="{{fitnessItems}}" wx:key="categoryValue" data-item="{{item}}" bind:tap="showFitnessScore">
          <!-- <view class="fitness-icon-wrap"> -->
          <image src="{{item.imgUrl}}" class="fitness-icon" mode="aspectFit" />
          <!-- </view> -->
          <view class="fitness-name">{{item.name}}</view>
          <view class="fitness-score">
            {{item.scoreTrendChart.axisY[item.scoreTrendChart.axisY.length - 1] || '- -'}}
            <text class="fitness-unit">{{item.unit}}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
  <!-- 成绩弹窗 -->
  <view class="popup-mask" wx:if="{{showFitnessPopup}}" bind:tap="closeFitnessPopup"></view>
  <view class="score-popup {{showFitnessPopup ? 'popup-show' : ''}}">
    <view class="popup-header">
      <image src="{{selectedFitnessItem.imgUrl}}" class="popup-icon" mode="aspectFit" />
      <text class="popup-title">{{selectedFitnessItem.name}}</text>
      <view class="popup-close" bind:tap="closeFitnessPopup">✕</view>
    </view>
    <view class="score-rows">
      <view class="score-row">
        <view class="score-label">本次成绩</view>
        <view class="score-value score-highlight">
          {{selectedFitnessItem.scoreTrendChart.axisY[selectedFitnessItem.scoreTrendChart.axisY.length - 1] || '- -'}}
          <text class="score-unit">{{selectedFitnessItem.unit}}</text>
        </view>
      </view>
      <view class="score-row">
        <view class="score-label">上次成绩</view>
        <view class="score-value">
          {{selectedFitnessItem.scoreTrendChart.axisY[selectedFitnessItem.scoreTrendChart.axisY.length - 2] || '- -'}}
          <text class="score-unit">{{selectedFitnessItem.unit}}</text>
        </view>
      </view>
    </view>
    <view class="popup-btn" bind:tap="goFitnessDetail">查看详细趋势</view>
  </view>
  <!-- 月份选择弹窗 -->
  <view class="picker-mask" wx:if="{{showMonthPicker}}" bind:tap="closeMonthPicker"></view>
  <view class="picker-sheet {{showMonthPicker ? 'picker-sheet-show' : ''}}">
    <view class="picker-header">
      <text class="picker-cancel" bind:tap="closeMonthPicker">取消</text>
      <text class="picker-title">选择月份</text>
      <text class="picker-confirm" style="visibility:hidden">确定</text>
    </view>
    <view class="picker-year-row">
      <view class="picker-year-arrow" bind:tap="prevPickerYear">‹</view>
      <text class="picker-year-text">{{pickerYear}}年</text>
      <view class="picker-year-arrow {{pickerYear >= nowYear ? 'picker-year-arrow-disabled' : ''}}" bind:tap="nextPickerYear">
        ›
      </view>
    </view>
    <view class="picker-month-grid">
      <view class="picker-month-item {{(item === selectedMonth && pickerYear === selectedYear) ? 'picker-item-active' : ''}} {{(pickerYear === nowYear && item > nowMonth) ? 'picker-item-disabled' : ''}}" wx:for="{{monthList}}" wx:key="*this" data-month="{{item}}" bind:tap="selectMonth">
        {{item}}月
      </view>
    </view>
  </view>
  <!-- 季度选择弹窗 -->
  <view class="picker-mask" wx:if="{{showQuarterPicker}}" bind:tap="closeQuarterPicker"></view>
  <view class="picker-sheet {{showQuarterPicker ? 'picker-sheet-show' : ''}}">
    <view class="picker-header">
      <text class="picker-cancel" bind:tap="closeQuarterPicker">取消</text>
      <text class="picker-title">选择季度</text>
      <text class="picker-confirm" style="visibility:hidden">确定</text>
    </view>
    <view class="picker-year-row">
      <view class="picker-year-arrow" bind:tap="prevPickerYear">‹</view>
      <text class="picker-year-text">{{pickerYear}}年</text>
      <view class="picker-year-arrow {{pickerYear >= nowYear ? 'picker-year-arrow-disabled' : ''}}" bind:tap="nextPickerYear">
        ›
      </view>
    </view>
    <view class="picker-quarter-list">
      <view class="picker-quarter-item {{(item.value === selectedQuarter && pickerYear === selectedYear) ? 'picker-item-active' : ''}} {{(pickerYear === nowYear && item.value > nowQuarter) ? 'picker-item-disabled' : ''}}" wx:for="{{quarterList}}" wx:key="value" data-quarter="{{item.value}}" bind:tap="selectQuarter">
        <text class="picker-quarter-label">{{item.label}}</text>
        <text class="picker-quarter-months">{{item.months}}</text>
      </view>
    </view>
  </view>
</view>