|
|
@@ -0,0 +1,160 @@
|
|
|
+<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>
|
Sisyphus