|
@@ -0,0 +1,276 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="detail-container">
|
|
|
|
|
+ <!-- 加载状态 -->
|
|
|
|
|
+ <view class="loading-wrap" v-if="loading">
|
|
|
|
|
+ <text class="loading-text">加载中...</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 方案详情 -->
|
|
|
|
|
+ <view class="detail-card" v-else-if="plan">
|
|
|
|
|
+ <view class="detail-header">
|
|
|
|
|
+ <text class="detail-title">{{ plan.name || '测评方案' }}</text>
|
|
|
|
|
+ <text class="plan-status" :class="'status-' + (plan.status || 'unknown')">{{ statusLabel(plan.status) }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="detail-meta">
|
|
|
|
|
+ <view class="meta-row">
|
|
|
|
|
+ <text class="meta-label">方案周期</text>
|
|
|
|
|
+ <text class="meta-value">{{ formatDate(plan.startDate) }} ~ {{ formatDate(plan.endDate) }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="meta-row" v-if="plan.totalDays">
|
|
|
|
|
+ <text class="meta-label">完成进度</text>
|
|
|
|
|
+ <text class="meta-value">{{ plan.completedDays || 0 }} / {{ plan.totalDays }} 天</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="meta-row" v-if="plan.remark">
|
|
|
|
|
+ <text class="meta-label">方案说明</text>
|
|
|
|
|
+ <text class="meta-value">{{ plan.remark }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="meta-row" v-if="plan.reviewComment">
|
|
|
|
|
+ <text class="meta-label">审核备注</text>
|
|
|
|
|
+ <text class="meta-value">{{ plan.reviewComment }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="meta-row" v-if="plan.source">
|
|
|
|
|
+ <text class="meta-label">方案来源</text>
|
|
|
|
|
+ <text class="meta-value">{{ sourceLabel(plan.source) }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="meta-row" v-if="plan.createdAt">
|
|
|
|
|
+ <text class="meta-label">创建时间</text>
|
|
|
|
|
+ <text class="meta-value">{{ formatDateTime(plan.createdAt) }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="progress-block" v-if="plan.totalDays">
|
|
|
|
|
+ <view class="progress-track">
|
|
|
|
|
+ <view class="progress-fill" :style="'width:' + progressPercent(plan) + '%'"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="progress-text">{{ progressPercent(plan) }}%</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 空状态 -->
|
|
|
|
|
+ <view class="empty-wrap" v-else>
|
|
|
|
|
+ <text class="empty-icon">📋</text>
|
|
|
|
|
+ <text class="empty-title">方案不存在</text>
|
|
|
|
|
+ <text class="empty-desc">该测评方案可能已被删除,请返回列表刷新</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 底部占位 -->
|
|
|
|
|
+ <view class="bottom-spacer"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import { getMyAssessmentPlans } from '../../utils/api.js'
|
|
|
|
|
+import { parseDate } from '../../utils/format.js'
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ plan: null,
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ planId: null,
|
|
|
|
|
+ familyId: null,
|
|
|
|
|
+ childId: null
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(options) {
|
|
|
|
|
+ this.planId = options.planId ? parseInt(options.planId) : null
|
|
|
|
|
+ this.familyId = options.familyId ? parseInt(options.familyId) : null
|
|
|
|
|
+ this.childId = options.childId ? parseInt(options.childId) : null
|
|
|
|
|
+ this.loadDetail()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ loadDetail() {
|
|
|
|
|
+ var self = this
|
|
|
|
|
+ var familyId = this.familyId || uni.getStorageSync('familyId')
|
|
|
|
|
+ if (!familyId || !this.planId) {
|
|
|
|
|
+ this.loading = false
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ self.loading = true
|
|
|
|
|
+ getMyAssessmentPlans(familyId, this.childId).then(function(res) {
|
|
|
|
|
+ var list = (res && res.code === 200 && res.data) ? res.data : []
|
|
|
|
|
+ var found = null
|
|
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
|
|
+ if (list[i] && list[i].id === self.planId) {
|
|
|
|
|
+ found = list[i]
|
|
|
|
|
+ break
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ self.plan = found
|
|
|
|
|
+ }).catch(function(e) {
|
|
|
|
|
+ console.log('获取方案详情失败', e)
|
|
|
|
|
+ uni.showToast({ title: '加载失败', icon: 'none' })
|
|
|
|
|
+ }).finally(function() {
|
|
|
|
|
+ self.loading = false
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ statusLabel(status) {
|
|
|
|
|
+ var map = { active: '进行中', completed: '已完成', cancelled: '已取消', generated: '待审核', reviewed: '已通过', rejected: '已驳回' }
|
|
|
|
|
+ return map[status] || (status || '未知')
|
|
|
|
|
+ },
|
|
|
|
|
+ sourceLabel(source) {
|
|
|
|
|
+ var map = { manual: '手动创建', assessment: '测评生成', template: '模板创建' }
|
|
|
|
|
+ return map[source] || (source || '--')
|
|
|
|
|
+ },
|
|
|
|
|
+ progressPercent(item) {
|
|
|
|
|
+ if (!item.totalDays) return 0
|
|
|
|
|
+ var completed = item.completedDays || 0
|
|
|
|
|
+ var p = Math.round(completed / item.totalDays * 100)
|
|
|
|
|
+ return p > 100 ? 100 : p
|
|
|
|
|
+ },
|
|
|
|
|
+ formatDate(dateStr) {
|
|
|
|
|
+ if (!dateStr) return '--'
|
|
|
|
|
+ var d = parseDate(dateStr)
|
|
|
|
|
+ if (!d) return dateStr
|
|
|
|
|
+ var y = d.getFullYear()
|
|
|
|
|
+ var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
|
|
|
|
|
+ var day = ('' + d.getDate()).padStart(2, '0')
|
|
|
|
|
+ return y + '-' + m + '-' + day
|
|
|
|
|
+ },
|
|
|
|
|
+ formatDateTime(dateStr) {
|
|
|
|
|
+ if (!dateStr) return '--'
|
|
|
|
|
+ var d = parseDate(dateStr)
|
|
|
|
|
+ if (!d) return dateStr
|
|
|
|
|
+ var hh = ('' + d.getHours()).padStart(2, '0')
|
|
|
|
|
+ var mm = ('' + d.getMinutes()).padStart(2, '0')
|
|
|
|
|
+ var ss = ('' + d.getSeconds()).padStart(2, '0')
|
|
|
|
|
+ return this.formatDate(dateStr) + ' ' + hh + ':' + mm + ':' + ss
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.detail-container {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: #F5F7FA;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 加载状态 ===== */
|
|
|
|
|
+.loading-wrap {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 80rpx 0;
|
|
|
|
|
+}
|
|
|
|
|
+.loading-text {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 详情卡片 ===== */
|
|
|
|
|
+.detail-card {
|
|
|
|
|
+ margin: 30rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ padding: 32rpx 28rpx;
|
|
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
|
|
|
|
|
+}
|
|
|
|
|
+.detail-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.detail-title {
|
|
|
|
|
+ font-size: 34rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.plan-status {
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ margin-left: 12rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.status-active { background: #E3F2FD; color: #1565C0; }
|
|
|
|
|
+.status-completed { background: #E8F5E9; color: #2E7D32; }
|
|
|
|
|
+.status-cancelled { background: #ECEFF1; color: #78909C; }
|
|
|
|
|
+.status-generated { background: #FFF3E0; color: #E65100; }
|
|
|
|
|
+.status-reviewed { background: #E8F5E9; color: #2E7D32; }
|
|
|
|
|
+.status-rejected { background: #FDE8E8; color: #C62828; }
|
|
|
|
|
+.status-unknown { background: #ECEFF1; color: #78909C; }
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 元信息 ===== */
|
|
|
|
|
+.detail-meta {
|
|
|
|
|
+ border-top: 1rpx solid #F1F5F9;
|
|
|
|
|
+ padding-top: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.meta-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ padding: 14rpx 0;
|
|
|
|
|
+}
|
|
|
|
|
+.meta-label {
|
|
|
|
|
+ width: 160rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+}
|
|
|
|
|
+.meta-value {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 进度 ===== */
|
|
|
|
|
+.progress-block {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.progress-track {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 16rpx;
|
|
|
|
|
+ background: #EEF2F7;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.progress-fill {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: #5B9BD5;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.progress-text {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 空状态 ===== */
|
|
|
|
|
+.empty-wrap {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 120rpx 60rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.empty-icon {
|
|
|
|
|
+ font-size: 80rpx;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.empty-title {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-bottom: 12rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.empty-desc {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 底部 ===== */
|
|
|
|
|
+.bottom-spacer {
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|