cfc/cfc-frontend/pages/parent/plans/index.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">我的计划</text>
      <text class="subtitle">查看和管理家庭成长计划</text>
    </view>

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

    <!-- 空状态 -->
    <view class="empty" v-else-if="plans.length === 0">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无计划</text>
      <text class="empty-hint">规划师可为您创建专属成长计划</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.childName || '--' }}</text>
          <text class="meta-item">创建时间：{{ plan.createTime || '--' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: false,
      plans: []
    }
  },
  computed: {},
  onShow() {
    this.loadPlans()
  },
  methods: {
    loadPlans: function() {
      this.loading = true
      var self = this
      listFamilyPlans({}).then(function(res) {
        self.loading = false
        if (res.code === 200 && Array.isArray(res.data)) {
          self.plans = res.data
        } else if (res.code === 200 && res.data && res.data.records) {
          self.plans = res.data.records
        }
      }).catch(function() {
        self.loading = false
        self.plans = []
      })
    },
    goDetail: function(id) {
      uni.navigateTo({ url: './detail?planId=' + id })
    },
    statusText: function(status) {
      var map = { 0: '待审核', 1: '进行中', 2: '已完成', 3: '已取消' }
      return map[status] || '未知'
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #f8f8f8; padding-bottom: 30rpx; }
.header { padding: 40rpx 30rpx 20rpx; }
.title { font-size: 36rpx; font-weight: bold; color: #333; display: block; }
.subtitle { font-size: 26rpx; color: #999; margin-top: 8rpx; display: block; }
.loading, .empty { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
.empty-icon { font-size: 80rpx; }
.empty-text { font-size: 30rpx; color: #666; margin-top: 20rpx; }
.empty-hint { font-size: 26rpx; color: #bbb; margin-top: 10rpx; }
.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); }
.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>