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

<template>
  <view class="page">
    <view class="header">
      <text class="title">我的方案</text>
      <text class="subtitle">查看和管理已制定的训练方案</text>
    </view>

    <view class="action-bar">
      <button class="btn-primary" @click="goCreatePlan">+ 新建方案</button>
    </view>

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

    <!-- 空状态 -->
    <view class="empty" v-else-if="plans.length === 0">
      <text class="empty-icon">📋</text>
      <text class="empty-title">暂无方案</text>
      <text class="empty-desc">点击上方按钮创建第一个训练方案</text>
    </view>

    <!-- 方案列表 -->
    <view class="plan-list" v-else>
      <view
        class="plan-card"
        v-for="plan in plans"
        :key="plan.id"
        @click="goDetail(plan.id)"
      >
        <view class="card-top">
          <text class="plan-title">{{ plan.title || '未命名方案' }}</text>
          <view class="plan-status" :class="'status-' + (plan.status || 0)">
            <text>{{ statusText(plan.status) }}</text>
          </view>
        </view>
        <text class="plan-desc" v-if="plan.description">{{ plan.description }}</text>
        <view class="card-meta">
          <text class="meta-item">成员：{{ plan.memberName || '--' }}</text>
          <text class="meta-item">创建时间：{{ formatTime(plan.createdAt) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTrainingPlanList } from '@/utils/api.js'

export default {
  data() {
    return {
      loading: false,
      plans: []
    }
  },
  onLoad() {
    this.loadPlans()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      this.loadPlans()
    }
  },
  methods: {
    loadPlans() {
      this.loading = true
      var self = this
      getTrainingPlanList().then(function(res) {
        self.loading = false
        if (res && res.code === 200) {
          self.plans = res.data || []
        } else {
          uni.showToast({ title: (res && res.message) || '加载失败', icon: 'none' })
          self.plans = []
        }
      }).catch(function(err) {
        self.loading = false
        console.error('加载方案列表失败', err)
        uni.showToast({ title: '加载失败', icon: 'none' })
        self.plans = []
      })
    },
    goDetail(planId) {
      uni.navigateTo({ url: '/pages/teacher/plan-detail?planId=' + planId })
    },
    goCreatePlan() {
      uni.navigateTo({ url: '/pages/teacher/plan-create' })
    },
    statusText(status) {
      var map = { 0: '草稿', 1: '进行中', 2: '已完成', 3: '已取消' }
      return map[status] || '未知'
    },
    formatTime(t) {
      if (!t) return '-'
      // 项目统一时间格式：取前19位并把 ISO 的 T 换成空格，避免 toLocaleString 的浏览器差异
      return String(t).substring(0, 19).replace('T', ' ')
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: #F5FAFE;
  padding-bottom: 30rpx;
}

.header {
  padding: 40rpx 30rpx 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1F2D3D;
  display: block;
}

.subtitle {
  font-size: 26rpx;
  color: #8A94A6;
  margin-top: 8rpx;
  display: block;
}

.action-bar {
  padding: 0 30rpx 20rpx;
}

.btn-primary {
  width: 100%;
  background: $brand-primary;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  padding: 24rpx 0;
  border-radius: 12rpx;
  border: none;
}

.loading, .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #8A94A6;
}

.empty-icon {
  font-size: 80rpx;
}

.empty-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-top: 20rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
  text-align: center;
}

.plan-list {
  padding: 0 30rpx;
}

.plan-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.plan-card:active {
  opacity: 0.8;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.plan-status {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.status-0 { background: #FFF3E0; color: #F97316; }
.status-1 { background: #E8F5E9; color: #4CAF50; }
.status-2 { background: #E3F2FD; color: #2196F3; }
.status-3 { background: #F5F5F5; color: #999; }

.plan-desc {
  font-size: 26rpx;
  color: #666;
  margin-top: 12rpx;
  display: block;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  flex-direction: column;
  margin-top: 16rpx;
  gap: 6rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #bbb;
}
</style>