cfc/cfc-frontend/pages/health/doa-index.vue

<template>
  <view class="page">
    <view v-if="loading" class="loading-box">加载中...</view>

    <view v-else class="content">
      <!-- 创建按钮 -->
      <view class="action-bar">
        <button class="btn-new" @click="goCreate">+ 创建阶段</button>
      </view>

      <!-- 家庭成员 DOA 卡片 -->
      <view v-for="m in members" :key="getMemberKey(m)" class="member-card">
        <view class="member-header">
          <text class="member-name">{{ m.nickname }}</text>
          <text v-if="m.memberType === 'local'" class="member-tag">未登录成员</text>
          <text class="member-status">{{ m.currentStage ? '进行中' : '未开始' }}</text>
        </view>

        <!-- 无阶段 -->
        <view v-if="!m.currentStage" class="member-empty">
          <text class="empty-hint">还没有阶段目标</text>
          <text v-if="canManage(m)" class="empty-link" @click="goCreateFor(m.memberId)">为他创建</text>
        </view>

        <!-- 有阶段 -->
        <view v-else class="stage-box" @click="goDetail(m.currentStage.id)">
          <text class="stage-title">{{ m.currentStage.title || '阶段目标' }}</text>
          <text class="stage-dates">{{ formatDate(m.currentStage.startDate) }} ~ {{ formatDate(m.currentStage.endDate) }}</text>

          <!-- 目标领域标签 -->
          <view class="goal-row">
            <text v-for="g in m.currentStage.goals" :key="g.id" class="goal-tag" :class="'domain-' + g.domain">
              {{ domainName(g.domain) }} · {{ g.content }}
            </text>
          </view>

          <!-- 周进度 -->
          <view class="week-progress">
            <text class="week-text">复盘 {{ m.currentStage.reviewedWeeks || 0 }}/{{ m.currentStage.totalWeeks || 0 }} 周</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="members.length === 0" class="empty">
        <text class="empty-icon">🎯</text>
        <text class="empty-desc">创建你的第一个阶段目标，开启 DOA 之旅！</text>
        <button class="btn-empty" @click="goCreate">立即创建</button>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: true,
      members: [],
      selfMemberId: 0
    }
  },
  onLoad() {
    this.selfMemberId = uni.getStorageSync('currentMemberId') || 0
    this.loadData()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      this.loadData()
    }
  },
  methods: {
    getMemberKey(m) {
      return m.memberId
    },
    async loadData() {
      this.loading = true
      try {
        var res = await getDoaOverview()
        this.members = res.data || []
      } catch (e) {
        this.members = []
      } finally {
        this.loading = false
      }
    },
    domainName(d) {
      var map = { health: '健康', wealth: '事业', family: '家庭关系', social: '社会关系', help: '帮助他人' }
      return map[d] || d
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      return String(dateStr).slice(0, 10)
    },
    canManage(m) {
      // 自己 或 未登录成员 → 可代管
      return m.memberId === this.selfMemberId || m.memberType === 'local'
    },
    goCreate() {
      uni.navigateTo({ url: '/pages/health/doa-stage-create' })
    },
    goCreateFor(memberId) {
      uni.navigateTo({ url: '/pages/health/doa-stage-create?memberId=' + memberId })
    },
    goDetail(stageId) {
      uni.navigateTo({ url: '/pages/health/doa-stage-detail?stageId=' + stageId })
    }
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background: #F5F7FA; padding: 24rpx; }
.loading-box { text-align: center; padding: 100rpx 0; color: #94A3B8; font-size: 28rpx; }
.action-bar { display: flex; justify-content: flex-end; margin-bottom: 20rpx; }
.btn-new {
  background: linear-gradient(135deg, #10B981, #34D399);
  color: #fff; font-size: 26rpx; font-weight: 600;
  padding: 14rpx 32rpx; border-radius: 40rpx; border: none;
}
.member-card {
  background: #fff; border-radius: 16rpx; padding: 24rpx;
  margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.member-header { display: flex; align-items: center; margin-bottom: 12rpx; }
.member-name { font-size: 30rpx; font-weight: 700; color: #1E293B; flex: 1; }
.member-tag { font-size: 20rpx; color: #B45309; background: #FEF3C7; padding: 4rpx 12rpx; border-radius: 20rpx; margin-right: 12rpx; }
.member-status { font-size: 22rpx; color: #16A34A; }
.member-empty { padding: 20rpx 0; text-align: center; }
.empty-hint { font-size: 24rpx; color: #94A3B8; display: block; }
.empty-link { font-size: 24rpx; color: #10B981; margin-top: 8rpx; display: inline-block; }
.stage-box { background: #F8FAFC; border-radius: 12rpx; padding: 20rpx; }
.stage-title { font-size: 28rpx; font-weight: 700; color: #1E293B; display: block; }
.stage-dates { font-size: 22rpx; color: #64748B; margin-top: 4rpx; display: block; }
.goal-row { margin-top: 12rpx; }
.goal-tag {
  font-size: 22rpx; color: #475569; background: #fff;
  padding: 8rpx 16rpx; border-radius: 10rpx; margin: 6rpx 8rpx 0 0;
  display: inline-block; border: 2rpx solid #E2E8F0;
}
.domain-health { border-color: #FF8C42 !important; color: #C2410C !important; }
.domain-wealth { border-color: #F59E0B !important; color: #B45309 !important; }
.domain-family { border-color: #10B981 !important; color: #047857 !important; }
.domain-social { border-color: #6366F1 !important; color: #4338CA !important; }
.domain-help { border-color: #FF6B9D !important; color: #BE185D !important; }
.week-progress { margin-top: 12rpx; }
.week-text { font-size: 22rpx; color: #10B981; font-weight: 600; }
.empty { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
.empty-icon { font-size: 80rpx; margin-bottom: 16rpx; }
.empty-desc { font-size: 26rpx; color: #94A3B8; margin-bottom: 32rpx; }
.btn-empty {
  background: #10B981; color: #fff; font-size: 28rpx;
  font-weight: 600; padding: 16rpx 48rpx; border-radius: 40rpx; border: none;
}
</style>