cfc/cfc-frontend/pages/assessment-plan/list.vue

<template>
  <view class="list-container">
    <!-- 加载状态 -->
    <view class="loading-wrap" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 方案列表 -->
    <view class="plan-list" v-else-if="plans.length > 0">
      <view
        class="plan-card"
        v-for="item in plans"
        :key="item.id"
        @click="goToDetail(item.id)"
      >
        <view class="plan-card-top">
          <text class="plan-name">{{ item.name || '测评方案' }}</text>
          <text class="plan-status" :class="'status-' + (item.status || 'unknown')">{{ statusLabel(item.status) }}</text>
        </view>
        <view class="plan-meta" v-if="item.startDate || item.endDate">
          <text class="plan-meta-item">周期：{{ formatDate(item.startDate) }} ~ {{ formatDate(item.endDate) }}</text>
        </view>
        <view class="plan-progress" v-if="item.totalDays">
          <view class="progress-track">
            <view class="progress-fill" :style="'width:' + progressPercent(item) + '%'"></view>
          </view>
          <text class="progress-text">{{ item.completedDays || 0 }} / {{ item.totalDays }} 天</text>
        </view>
        <view class="plan-arrow">›</view>
      </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 {
      plans: [],
      loading: false,
      familyId: null,
      childId: null
    }
  },
  onLoad(options) {
    this.familyId = options.familyId ? parseInt(options.familyId) : null
    this.childId = options.childId ? parseInt(options.childId) : null
    this.loadData()
  },
  methods: {
    loadData() {
      var self = this
      var familyId = this.familyId || uni.getStorageSync('familyId')
      if (!familyId) {
        uni.showToast({ title: '请先选择家庭', icon: 'none' })
        return
      }
      self.loading = true
      getMyAssessmentPlans(familyId, this.childId).then(function(res) {
        if (res.code === 200) {
          self.plans = res.data || []
        } else {
          uni.showToast({ title: res.message || '加载失败', icon: 'none' })
        }
      }).catch(function(e) {
        console.log('获取测评方案失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    goToDetail(planId) {
      uni.navigateTo({ url: '/pages/assessment-plan/detail?planId=' + planId })
    },
    statusLabel(status) {
      var map = { active: '进行中', completed: '已完成', cancelled: '已取消', generated: '待审核', reviewed: '已通过', rejected: '已驳回' }
      return map[status] || (status || '未知')
    },
    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
    }
  }
}
</script>

<style scoped>
.list-container {
  min-height: 100vh;
  background: #F5F7FA;
}

/* ===== 加载状态 ===== */
.loading-wrap {
  display: flex;
  justify-content: center;
  padding: 80rpx 0;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* ===== 方案列表 ===== */
.plan-list {
  margin: 20rpx 30rpx;
}
.plan-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 16rpx;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.plan-card:active {
  opacity: 0.8;
}
.plan-card-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.plan-name {
  font-size: 30rpx;
  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; }

/* ===== 维度 ===== */
.plan-meta {
  margin-top: 12rpx;
}
.plan-meta-item {
  font-size: 24rpx;
  color: #888;
}

/* ===== 进度 ===== */
.plan-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16rpx;
}
.progress-track {
  flex: 1;
  height: 12rpx;
  background: #EEF2F7;
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 16rpx;
}
.progress-fill {
  height: 100%;
  background: #5B9BD5;
  border-radius: 6rpx;
}
.progress-text {
  font-size: 22rpx;
  color: #999;
}

/* ===== 箭头 ===== */
.plan-arrow {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36rpx;
  color: #CCC;
}

/* ===== 空状态 ===== */
.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;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 60rpx;
}
</style>