task-5-brief.md 1.5 KB

任务 5:多接口并发页面(6 个重点)

通用改造模式(每个组件都适用):

// script 中加 computed
computed: {
  hasFamily: function() {
    return this.$store.getters.hasFamily
  }
}
<!-- 模板中包住家庭数据区 -->
<view class="some-family-card" v-if="hasFamily">
  <!-- 原有内容不动 -->
</view>
<view v-else>
  <FamilyEmptyState type="card" />
</view>

只包家庭数据区,保留页头/导航/其他无关 UI。若组件已有 computed,在现有对象中追加 hasFamily

文件 家庭数据区(定位锚点) type
pages/home-pages/parent-index.vue 5 个卡片:挑战(getChallengeList L969)、能量(getEnergyOverview L847)、家庭排行(getFamilyRanking L963)、圈子排行(getCircleRanking L980)、心愿(getPendingWishes L737) card
pages/index-home/index.vue 挑战 + 能量卡片 card
pages/health/challenge-manage.vue 创建区 + 历史列表 card
pages/mind/index.vue 能量/健康提醒/里程碑 3 卡片 card
components/member-detail-sections/mind-section.vue 整段 section block
pages/home-pages/child-index.vue 能量日志 + 能量总览 card
  • 步骤 1-6:逐一改造上述 6 个文件(每个文件:加 computed.hasFamily + 家庭数据区 v-if/v-else FamilyEmptyState)
  • 步骤 7:验证grep -c "FamilyEmptyState" <每个文件> ≥ 2(模板 1 处 + 可能 import 0 处,全局注册无需 import;模板至少 1 处)