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

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

    <!-- 计划详情 -->
    <template v-else-if="plan">
      <view class="header">
        <text class="title">{{ plan.title }}</text>
        <view class="status-badge" :class="'status-' + (plan.status || 0)">
          <text>{{ statusText(plan.status) }}</text>
        </view>
      </view>

      <view class="info-card" v-if="plan.description">
        <text class="info-label">计划说明</text>
        <text class="info-value">{{ plan.description }}</text>
      </view>

      <view class="info-card">
        <text class="info-label">孩子</text>
        <text class="info-value">{{ plan.childName || '--' }}</text>
      </view>

      <view class="info-card" v-if="plan.guideName">
        <text class="info-label">规划师</text>
        <text class="info-value">{{ plan.guideName }}</text>
      </view>

      <view class="info-card">
        <text class="info-label">创建时间</text>
        <text class="info-value">{{ plan.createTime || '--' }}</text>
      </view>

      <!-- 计划条目 -->
      <view class="items-section" v-if="plan.items && plan.items.length > 0">
        <text class="section-title">计划内容</text>
        <view class="item-card" v-for="item in plan.items" :key="item.id">
          <view class="item-top">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-status" v-if="item.completed">✅ 已完成</text>
          </view>
          <text class="item-desc" v-if="item.description">{{ item.description }}</text>
        </view>
      </view>
    </template>

    <!-- 空状态 -->
    <view class="empty" v-else>
      <text class="empty-icon">📋</text>
      <text class="empty-text">计划不存在</text>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: false,
      plan: null
    }
  },
  onLoad: function(options) {
    if (options.planId) {
      this.planId = options.planId
      this.loadDetail()
    }
  },
  methods: {
    loadDetail: function() {
      if (!this.planId) return
      this.loading = true
      var self = this
      getGuidePlanDetail({ planId: this.planId }).then(function(res) {
        self.loading = false
        if (res.code === 200 && res.data) {
          self.plan = res.data
        }
      }).catch(function() {
        self.loading = false
      })
    },
    statusText: function(status) {
      var map = { 0: '待审核', 1: '进行中', 2: '已完成', 3: '已取消' }
      return map[status] || '未知'
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #f8f8f8; padding-bottom: 30rpx; }
.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; }
.header { background: #fff; padding: 40rpx 30rpx; display: flex; justify-content: space-between; align-items: center; }
.title { font-size: 36rpx; font-weight: bold; color: #333; flex: 1; }
.status-badge { font-size: 24rpx; padding: 6rpx 20rpx; 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; }
.info-card { background: #fff; margin: 20rpx 30rpx; padding: 24rpx 30rpx; border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.info-label { font-size: 26rpx; color: #999; display: block; margin-bottom: 8rpx; }
.info-value { font-size: 28rpx; color: #333; display: block; }
.items-section { margin: 20rpx 30rpx; }
.section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; margin-bottom: 16rpx; }
.item-card { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); }
.item-top { display: flex; justify-content: space-between; align-items: center; }
.item-title { font-size: 28rpx; font-weight: bold; color: #333; }
.item-status { font-size: 24rpx; color: #4CAF50; }
.item-desc { font-size: 26rpx; color: #666; margin-top: 10rpx; display: block; line-height: 1.5; }
</style>