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="top" wx:if="{{!isTrainee}}">
    <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>

  <!-- 学员：双Tab报告 -->
  <view wx:else class="trainee-wrap">

    <!-- Tab 切换按钮 -->
    <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">体测报告</view>
    </view>

    <!-- 课堂报告 -->
    <block wx:if="{{activeTab === 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="{{hasMore}}">加载中...</view>
      <view class="more-tip" wx:else>没有更多了哦~</view>
    </block>

    <!-- 体测报告 -->
    <block wx:elif="{{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 class="score-divider"></view>
    </view>

    <view class="popup-btn" bind:tap="goFitnessDetail">查看详细趋势</view>
  </view>
</view>