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

<template>
  <view class="container" v-if="plan">
    <view class="card">
      <view class="card-header">
        <text class="card-title">{{ plan.name || '测评方案' }}</text>
        <text class="status-tag" :class="'status-' + plan.status">{{ statusLabel(plan.status) }}</text>
      </view>
      <view class="card-body">
        <view class="info-row"><text class="label">家庭ID</text><text>{{ plan.familyId }}</text></view>
        <view class="info-row"><text class="label">孩子ID</text><text>{{ plan.childId }}</text></view>
        <view class="info-row"><text class="label">周期</text><text>{{ plan.totalDays || '-' }} 天</text></view>
        <view class="info-row"><text class="label">来源</text><text>{{ plan.source || '-' }}</text></view>
        <view class="info-row" v-if="plan.sourceResultId"><text class="label">来源测评</text><text>{{ plan.sourceResultId }}</text></view>
        <view class="info-row"><text class="label">创建时间</text><text>{{ formatDate(plan.createdAt) }}</text></view>
        <view class="info-row" v-if="plan.reviewedAt"><text class="label">审核时间</text><text>{{ formatDate(plan.reviewedAt) }}</text></view>
        <view class="info-row" v-if="plan.activatedAt"><text class="label">激活时间</text><text>{{ formatDate(plan.activatedAt) }}</text></view>
      </view>
      <view class="card-remark" v-if="plan.remark">
        <text class="remark-title">方案说明</text>
        <text class="remark-text">{{ plan.remark }}</text>
      </view>
    </view>

    <view class="action-bar" v-if="plan.status === 'generated'">
      <button class="btn-approve" @click="handleApprove">批准方案</button>
      <button class="btn-reject" @click="handleReject">驳回方案</button>
    </view>
    <view class="action-bar" v-if="plan.status === 'reviewed'">
      <button class="btn-activate" @click="handleActivate">激活方案</button>
    </view>
  </view>
</template>

<script>
import { getGuidePlanDetail, reviewPlan, activatePlan } from '@/utils/api'

export default {
  data() {
    return {
      plan: null
    }
  },
  onLoad(options) {
    if (options.planId) this.loadPlan(options.planId)
  },
  methods: {
    async loadPlan(planId) {
      try {
        const res = await getGuidePlanDetail({ planId })
        if (res.code === 200) this.plan = res.data
      } catch (e) { /* ignore */ }
    },
    statusLabel(s) {
      const map = { generated: '待审核', reviewed: '已审核', active: '已激活', completed: '已完成', rejected: '已驳回' }
      return map[s] || s
    },
    formatDate(d) {
      if (!d) return '-'
      const date = new Date(d)
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    },
    async handleApprove() {
      const res = await reviewPlan({ planId: this.plan.id, approved: true })
      if (res.code === 200) { uni.showToast({ title: '已批准' }); this.loadPlan(this.plan.id) }
    },
    async handleReject() {
      uni.showModal({
        title: '驳回方案',
        content: '确定驳回该方案吗？',
        success: async (r) => {
          if (!r.confirm) return
          const res = await reviewPlan({ planId: this.plan.id, approved: false })
          if (res.code === 200) { uni.showToast({ title: '已驳回' }); this.loadPlan(this.plan.id) }
        }
      })
    },
    async handleActivate() {
      uni.showModal({
        title: '激活方案',
        content: '激活后将生成任务，确定激活？',
        success: async (r) => {
          if (!r.confirm) return
          const res = await activatePlan({ planId: this.plan.id })
          if (res.code === 200) { uni.showToast({ title: '已激活' }); this.loadPlan(this.plan.id) }
        }
      })
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #f5f5f5; padding: 30rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 30rpx; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; }
.card-title { font-size: 34rpx; font-weight: bold; }
.status-tag { font-size: 24rpx; padding: 6rpx 16rpx; border-radius: 6rpx; }
.status-generated { background: #fff3cd; color: #856404; }
.status-reviewed { background: #d1ecf1; color: #0c5460; }
.status-active { background: #d4edda; color: #155724; }
.status-completed { background: #e2e3e5; color: #383d41; }
.status-rejected { background: #f8d7da; color: #721c24; }
.card-body { margin-bottom: 20rpx; }
.info-row { display: flex; justify-content: space-between; padding: 16rpx 0; border-bottom: 2rpx solid #f5f5f5; font-size: 28rpx; }
.label { color: #999; }
.card-remark { background: #f8f9fa; border-radius: 12rpx; padding: 20rpx; }
.remark-title { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
.remark-text { font-size: 26rpx; color: #666; white-space: pre-wrap; }
.action-bar { display: flex; gap: 20rpx; padding: 0 30rpx; }
.btn-approve { flex: 1; background: #27ae60; color: #fff; border-radius: 40rpx; }
.btn-reject { flex: 1; background: #e74c3c; color: #fff; border-radius: 40rpx; }
.btn-activate { flex: 1; background: #4A9BD7; color: #fff; border-radius: 40rpx; }
</style>