681 lines
16 KiB
Plaintext
681 lines
16 KiB
Plaintext
<template>
|
|
<scroll-view direction="vertical" class="assignment-detail">
|
|
<!-- Header Card -->
|
|
<view class="header-card"> <view class="assignment-header">
|
|
<text class="assignment-title">{{ assignment.getString("title") }}</text>
|
|
<view class="status-badge" :class="`status-${getAssignmentStatusWrapper(assignment)}`">
|
|
<text class="status-text">{{ formatAssignmentStatusWrapper(getAssignmentStatusWrapper(assignment)) }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="assignment-description">{{ getAssignmentDescriptionWrapper(assignment) }}</text>
|
|
<view class="meta-info">
|
|
<view class="meta-item">
|
|
<text class="meta-label">训练项目:</text>
|
|
<text class="meta-value">{{ getProjectNameWrapper(assignment) }}</text>
|
|
</view>
|
|
<view class="meta-item">
|
|
<text class="meta-label">截止时间:</text>
|
|
<text class="meta-value">{{ formatDateWrapper(getAssignmentDeadlineWrapper(assignment)) }}</text>
|
|
</view>
|
|
<view class="meta-item">
|
|
<text class="meta-label">目标分数:</text>
|
|
<text class="meta-value">{{ getAssignmentTargetScoreWrapper(assignment) }}分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Progress Card -->
|
|
<view class="progress-card">
|
|
<view class="card-header">
|
|
<text class="card-title">完成进度</text>
|
|
</view>
|
|
<view class="progress-content">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="`width: ${getProgressPercentage()}%`"></view>
|
|
</view>
|
|
<text class="progress-text">{{ getProgressPercentage() }}%</text>
|
|
</view>
|
|
<view class="progress-stats">
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ getCompletedCount() }}</text>
|
|
<text class="stat-label">已完成</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ getRemainingCount() }}</text>
|
|
<text class="stat-label">剩余</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ getTargetCount() }}</text>
|
|
<text class="stat-label">目标</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Requirements Card -->
|
|
<view class="requirements-card">
|
|
<view class="card-header">
|
|
<text class="card-title">训练要求</text>
|
|
</view> <view class="requirements-list">
|
|
<view class="requirement-item" v-for="(requirement, index) in getRequirements()" :key="index">
|
|
<view class="requirement-icon">
|
|
<text class="icon">{{ getRequirementIcon(requirement) }}</text>
|
|
</view>
|
|
<view class="requirement-content">
|
|
<text class="requirement-title">{{ getRequirementTitle(requirement) }}</text>
|
|
<text class="requirement-desc">{{ getRequirementDescription(requirement) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Scoring Criteria Card -->
|
|
<view class="scoring-card">
|
|
<view class="card-header">
|
|
<text class="card-title">评分标准</text>
|
|
</view> <view class="scoring-list">
|
|
<view class="scoring-item" v-for="(criteria, index) in getScoringCriteria()" :key="index">
|
|
<view class="score-range">
|
|
<text class="score-text">{{ getScoringRange(criteria) }}</text>
|
|
</view>
|
|
<view class="criteria-content">
|
|
<text class="criteria-title">{{ getScoringTitle(criteria) }}</text>
|
|
<text class="criteria-desc">{{ getScoringDescription(criteria) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Action Buttons -->
|
|
<view class="action-buttons">
|
|
<button
|
|
v-if="canStartTraining()"
|
|
class="action-btn primary-btn"
|
|
@click="startTraining"
|
|
>
|
|
开始训练
|
|
</button>
|
|
<button
|
|
v-if="canContinueTraining()"
|
|
class="action-btn primary-btn"
|
|
@click="continueTraining"
|
|
>
|
|
继续训练
|
|
</button>
|
|
<button
|
|
v-if="canViewRecords()"
|
|
class="action-btn secondary-btn"
|
|
@click="viewRecords"
|
|
>
|
|
查看记录
|
|
</button>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup lang="uts"> import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { onLoad, onResize } from '@dcloudio/uni-app'
|
|
import { state, getCurrentUserId } from '@/utils/store.uts'
|
|
import { getAssignmentId, getAssignmentDisplayName, getAssignmentDescription,
|
|
getAssignmentStatus, getAssignmentDeadline, getAssignmentTargetScore, getProjectName,
|
|
formatDate, formatAssignmentStatus } from '../types.uts' // Reactive data
|
|
const userId = ref('')
|
|
const assignment = ref<UTSJSONObject>({})
|
|
const assignmentId = ref('')
|
|
const loading = ref(true)
|
|
|
|
// Responsive state - using onResize for dynamic updates
|
|
const screenWidth = ref<number>(uni.getSystemInfoSync().windowWidth)
|
|
|
|
// Computed properties for responsive design
|
|
const isLargeScreen = computed(() : boolean => {
|
|
return screenWidth.value >= 768
|
|
})
|
|
|
|
// Template-accessible wrapper functions for imported functions
|
|
const getAssignmentDisplayNameWrapper = (assignmentData: UTSJSONObject): string => {
|
|
return getAssignmentDisplayName(assignmentData)
|
|
}
|
|
|
|
const getAssignmentStatusWrapper = (assignmentData: UTSJSONObject): string => {
|
|
return getAssignmentStatus(assignmentData)
|
|
}
|
|
|
|
const getAssignmentDescriptionWrapper = (assignmentData: UTSJSONObject): string => {
|
|
return getAssignmentDescription(assignmentData)
|
|
}
|
|
|
|
const getProjectNameWrapper = (assignmentData: UTSJSONObject): string => {
|
|
return getProjectName(assignmentData)
|
|
}
|
|
|
|
const getAssignmentDeadlineWrapper = (assignmentData: UTSJSONObject): string => {
|
|
return getAssignmentDeadline(assignmentData)
|
|
}
|
|
|
|
const getAssignmentTargetScoreWrapper = (assignmentData: UTSJSONObject): number => {
|
|
return getAssignmentTargetScore(assignmentData)
|
|
}
|
|
|
|
const formatDateWrapper = (date: string): string => {
|
|
return formatDate(date)
|
|
}
|
|
const formatAssignmentStatusWrapper = (status: string): string => {
|
|
return formatAssignmentStatus(status)
|
|
}
|
|
|
|
// Wrapper functions for requirement and scoring criteria property access
|
|
const getRequirementIcon = (requirement: any): string => {
|
|
const req = requirement as UTSJSONObject
|
|
return req.getString('icon') ?? ''
|
|
}
|
|
|
|
const getRequirementTitle = (requirement: any): string => {
|
|
const req = requirement as UTSJSONObject
|
|
return req.getString('title') ?? ''
|
|
}
|
|
|
|
const getRequirementDescription = (requirement: any): string => {
|
|
const req = requirement as UTSJSONObject
|
|
return req.getString('description') ?? ''
|
|
}
|
|
|
|
const getScoringRange = (criteria: any): string => {
|
|
const crit = criteria as UTSJSONObject
|
|
return crit.getString('range') ?? ''
|
|
}
|
|
|
|
const getScoringTitle = (criteria: any): string => {
|
|
const crit = criteria as UTSJSONObject
|
|
return crit.getString('title') ?? ''
|
|
}
|
|
|
|
const getScoringDescription = (criteria: any): string => {
|
|
const crit = criteria as UTSJSONObject
|
|
return crit.getString('description') ?? ''
|
|
}
|
|
|
|
// Helper functions - defined before they are used
|
|
function getCompletedCount(): number {
|
|
return assignment.value.getNumber('completed_count') ?? 0
|
|
}
|
|
|
|
function getTargetCount(): number {
|
|
return assignment.value.getNumber('target_count') ?? 0
|
|
}
|
|
|
|
function getProgressPercentage(): number {
|
|
const completed = getCompletedCount()
|
|
const target = getTargetCount()
|
|
if (target <= 0) return 0
|
|
return Math.min(Math.round((completed / target) * 100), 100)
|
|
}
|
|
|
|
function getRemainingCount(): number {
|
|
return Math.max(getTargetCount() - getCompletedCount(), 0)
|
|
}
|
|
|
|
function getRequirements(): Array<any> {
|
|
const requirements = assignment.value.getAny('requirements') ?? ([] as Array<any>)
|
|
if (requirements instanceof Array) {
|
|
return requirements
|
|
}
|
|
return []
|
|
}
|
|
|
|
function getScoringCriteria(): Array<any> {
|
|
const criteriaData = assignment.value.getAny('scoring_criteria') ?? ([] as Array<any>)
|
|
|
|
// Handle new JSON format: {criteria: [{min_score, max_score, description}], ...}
|
|
if (criteriaData != null && typeof criteriaData === 'object' && !(criteriaData instanceof Array)) {
|
|
const criteria = (criteriaData as UTSJSONObject).getAny('criteria') ?? ([] as Array<any>)
|
|
if (criteria instanceof Array) {
|
|
return criteria.map((item: any) => {
|
|
const itemObj = item as UTSJSONObject
|
|
const minScore = itemObj.getNumber('min_score') ?? 0
|
|
const maxScore = itemObj.getNumber('max_score') ?? 100
|
|
const description = itemObj.getString('description') ?? ''
|
|
return {
|
|
range: `${minScore}-${maxScore}分`,
|
|
title: minScore >= 90 ? '优秀' : minScore >= 80 ? '良好' : minScore >= 70 ? '及格' : '不及格',
|
|
description: description
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// Handle legacy array format
|
|
if (criteriaData instanceof Array) {
|
|
return criteriaData
|
|
}
|
|
|
|
return []
|
|
}
|
|
function canStartTraining(): boolean {
|
|
const status = getAssignmentStatusWrapper(assignment.value)
|
|
return status === 'pending' || status === 'not_started'
|
|
}
|
|
|
|
function canContinueTraining(): boolean {
|
|
const status = getAssignmentStatusWrapper(assignment.value)
|
|
return status === 'in_progress'
|
|
}
|
|
|
|
function canViewRecords(): boolean {
|
|
return getCompletedCount() > 0
|
|
}
|
|
|
|
function startTraining() {
|
|
uni.navigateTo({
|
|
url: `/pages/sport/student/training-record?assignmentId=${assignmentId.value}`
|
|
})
|
|
}
|
|
|
|
function continueTraining() {
|
|
uni.navigateTo({
|
|
url: `/pages/sport/student/training-record?assignmentId=${assignmentId.value}`
|
|
})
|
|
}
|
|
|
|
function viewRecords() {
|
|
uni.navigateTo({
|
|
url: `/pages/sport/student/records?assignmentId=${assignmentId.value}`
|
|
})
|
|
}
|
|
// Methods
|
|
function loadAssignmentDetail() {
|
|
loading.value = true
|
|
|
|
// Mock data - replace with actual API call
|
|
setTimeout(() => {
|
|
assignment.value = {
|
|
"id": assignmentId.value,
|
|
"title": "跳远技术训练",
|
|
"description": "完成跳远基础技术动作训练，重点练习助跑、起跳和落地技术",
|
|
"project_name": "跳远训练",
|
|
"status": "in_progress",
|
|
"deadline": "2024-01-20T23:59:59",
|
|
"target_score": 85,
|
|
"target_count": 10,
|
|
"completed_count": 6,
|
|
"requirements": [
|
|
{
|
|
"icon": "",
|
|
"title": "助跑距离",
|
|
"description": "助跑距离控制在12-16步"
|
|
},
|
|
{
|
|
"icon": "",
|
|
"title": "起跳技术",
|
|
"description": "单脚起跳，起跳点准确"
|
|
},
|
|
{
|
|
"icon": "",
|
|
"title": "落地姿势",
|
|
"description": "双脚并拢前伸落地"
|
|
}
|
|
],
|
|
"scoring_criteria": [
|
|
{
|
|
"range": "90-100分",
|
|
"title": "优秀",
|
|
"description": "动作标准，技术熟练，成绩优异"
|
|
},
|
|
{
|
|
"range": "80-89分",
|
|
"title": "良好",
|
|
"description": "动作较标准，技术较熟练"
|
|
},
|
|
{
|
|
"range": "70-79分",
|
|
"title": "及格",
|
|
"description": "动作基本标准，需要继续练习"
|
|
},
|
|
{
|
|
"range": "60-69分",
|
|
"title": "不及格",
|
|
"description": "动作不标准，需要重点改进"
|
|
}
|
|
]
|
|
} as UTSJSONObject
|
|
loading.value = false
|
|
}, 1000)
|
|
} // Lifecycle
|
|
onLoad((options: OnLoadOptions) => {
|
|
userId.value = options['userId'] ?? ''
|
|
if (userId.value.length === 0) {
|
|
userId.value = getCurrentUserId()
|
|
}
|
|
|
|
assignmentId.value = options['id'] ?? ''
|
|
loadAssignmentDetail()
|
|
})
|
|
|
|
onMounted(() => {
|
|
// Initialize screen width
|
|
screenWidth.value = uni.getSystemInfoSync().windowWidth
|
|
})
|
|
|
|
// Handle resize events for responsive design
|
|
onResize((size) => {
|
|
screenWidth.value = size.size.windowWidth
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.assignment-detail {
|
|
display: flex;
|
|
flex:1;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
/* Header Card */
|
|
.header-card {
|
|
background-image: linear-gradient(to bottom right, #667eea, #764ba2);
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
color: white;
|
|
}
|
|
|
|
.assignment-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.assignment-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
flex: 1;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.status-pending {
|
|
background-color: rgba(255, 193, 7, 0.2);
|
|
border: 1px solid rgba(255, 193, 7, 0.5);
|
|
}
|
|
|
|
.status-in_progress {
|
|
background-color: rgba(0, 123, 255, 0.2);
|
|
border: 1px solid rgba(0, 123, 255, 0.5);
|
|
}
|
|
|
|
.status-completed {
|
|
background-color: rgba(40, 167, 69, 0.2);
|
|
border: 1px solid rgba(40, 167, 69, 0.5);
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 24rpx;
|
|
color: white;
|
|
}
|
|
|
|
.assignment-description {
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
margin-bottom: 20rpx;
|
|
opacity: 0.9;
|
|
}
|
|
.meta-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.meta-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.meta-label {
|
|
font-size: 26rpx;
|
|
opacity: 0.8;
|
|
width: 140rpx;
|
|
}
|
|
|
|
.meta-value {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Progress Card */
|
|
.progress-card {
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.card-header {
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.progress-content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 12rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 6rpx;
|
|
overflow: hidden;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-image: linear-gradient(to bottom, #667eea, #764ba2);
|
|
border-radius: 6rpx;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
min-width: 80rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.progress-stats {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
.stat-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
/* Requirements Card */
|
|
.requirements-card {
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
.requirements-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.requirement-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 20rpx;
|
|
background-color: #f8f9ff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.requirement-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.requirement-icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #667eea;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.requirement-content {
|
|
flex: 1;
|
|
}
|
|
.requirement-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.requirement-desc {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Scoring Card */
|
|
.scoring-card {
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
.scoring-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.scoring-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background-color: #fafafa;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.scoring-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.score-range {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.score-text {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
padding: 8rpx 12rpx;
|
|
background-color: rgba(102, 126, 234, 0.1);
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.criteria-content {
|
|
flex: 1;
|
|
}
|
|
.criteria-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.criteria-desc {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
}
|
|
/* Action Buttons */
|
|
.action-buttons {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border: none;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.action-btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.primary-btn {
|
|
background-image: linear-gradient(to bottom right, #667eea, #764ba2);
|
|
color: white;
|
|
}
|
|
|
|
.secondary-btn {
|
|
background-color: white;
|
|
color: #667eea;
|
|
border: 2rpx solid #667eea;
|
|
}
|
|
|
|
.primary-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.secondary-btn:active {
|
|
transform: scale(0.98);
|
|
background-color: #f8f9ff;
|
|
}
|
|
</style>
|