381 lines
16 KiB
Plaintext
381 lines
16 KiB
Plaintext
<!-- 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}}">
|
||
<!-- 子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="{{hasMore}}">加载中...</view>
|
||
<view class="more-tip" wx:else>没有更多了哦~</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 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: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>
|
||
<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> |