sundynix-pets/pets-fe/pages/home/home.wxml

<nav-bar title="肉垫计划"></nav-bar>

<view class="top-bar"><pet-switch bind:add="onAddPet"></pet-switch></view>

<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}"
             bindscrolltolower="loadMore">
<view class="page-body">
  <!-- 门面：宠物名片。点进去编辑档案 -->
  <view class="card hero-card" bindtap="onHeroTap">
    <view class="hero-row">
      <view class="hero-av">
        <image wx:if="{{pet.avatar_url}}" class="hero-av-img" src="{{pet.avatar_url}}" mode="aspectFill"></image>
        <block wx:else>{{pet.emoji || '🐾'}}</block>
        <view wx:if="{{sexIcon}}" class="hero-sex {{sexTone}}">{{sexIcon}}</view>
      </view>
      <view class="hero-main">
        <view class="hero-title">{{pet.name || '还没有毛孩子'}}</view>
        <view class="hero-meta">
          <text wx:if="{{pet.breed}}">{{pet.breed}}</text>
          <text wx:if="{{pet.age}}">{{pet.age}}</text>
          <text wx:if="{{zodiac}}">{{zodiac}}</text>
        </view>
      </view>
      <view class="hero-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view>
    </view>
    <view wx:if="{{daysTogether}}" class="hero-days">我们一起生活的第 <text class="hd-n">{{daysTogether}}</text> 天</view>
  </view>

  <!-- 阶段漂移。系统只负责发现，换不换由用户点 —— 偷偷换会让他莫名发现
       计划变了却找不到原因，而且已经排好的这个月不该被推翻 -->
  <view wx:if="{{drift.drifted}}" class="card drift-card" bindtap="goStageUpdate">
    <view class="drift-top">
      <pt-icon name="trend" size="{{32}}"></pt-icon>
      <view class="drift-b">{{pet.name}}已经 {{drift.age_label}}，从{{drift.stored}}进入{{drift.computed}}了</view>
    </view>
    <view class="drift-p">{{drift.basis}}</view>
    <view class="drift-focus">这个阶段的重点：{{drift.focus}}</view>
    <view wx:if="{{drift.size}}" class="drift-size">{{drift.size}}</view>
    <view class="btn btn-primary btn-block drift-cta">去更新阶段和方案</view>
  </view>

  <!-- 两个入口。竞品那一排是买商品/上豪车/领猫砂盆，是电商和广告位，去掉 -->
  <view class="card entry-card">
    <view class="entry" bindtap="goPlan">
      <view class="entry-ic tone-1">
        <pt-icon name="plan" size="{{48}}"></pt-icon>
        <!-- 月底还没排下月计划时提醒。角标做在图标上而不是弹 toast：
             每次进首页弹一下会很烦，而这件事不紧急、看见就行 -->
        <view wx:if="{{needNextPlan}}" class="entry-dot"></view>
      </view>
      <view class="entry-b">管理计划</view>
      <view class="entry-p {{needNextPlan ? 'warn' : ''}}">{{planHint}}</view>
    </view>
    <view class="entry" bindtap="goExpense">
      <view class="entry-ic tone-2"><pt-icon name="cost" size="{{48}}"></pt-icon></view>
      <view class="entry-b">记花销</view>
      <view class="entry-p">{{monthCost > 0 ? '本月 ¥' + monthCost : '还没记过'}}</view>
    </view>
  </view>

  <!-- 今日任务 -->
  <view wx:if="{{tasks.length}}" class="card">
    <view class="section-head">
      <view class="sh-title">今日任务</view>
      <!-- 任务的增删改都在计划页 —— 合并之后首页这个「管理」不该再开一个弹层 -->
      <view class="head-links">
        <view class="link" bindtap="goPlan">管理</view>
        <view class="link" bindtap="completeTasks">全部完成</view>
      </view>
    </view>
    <view class="task-list">
      <view wx:for="{{tasks}}" wx:key="id" class="task {{item.done ? 'done' : ''}}" data-index="{{index}}" bindtap="onTapTask">
        <view class="circle"><pt-icon wx:if="{{item.done}}" name="check" size="{{22}}"></pt-icon></view>
        <view class="task-text"><text class="tt-b">{{item.title}}</text><view wx:if="{{item.sub}}" class="tt-p">{{item.sub}}</view></view>
        <view wx:if="{{item.priority}}" class="priority">{{item.priority}}</view>
      </view>
    </view>
  </view>

  <!-- 记录时间轴。首页原来是任务/日历/接下来的堆叠，看不到「我记了什么」；
       日历挪回计划页了（它本来就属于那儿），这里换成时间轴 —— 首页应该是
       一条能往下翻的流水，而不是一屏聚合卡 -->
  <view class="tl-head">
    <view class="sh-title">最近记录</view>
    <view class="link" bindtap="goRecord">＋ 记一笔</view>
  </view>

  <view wx:for="{{timeline}}" wx:key="id" class="tl-item">
    <view class="tl-rail">
      <view class="tl-dot {{item.tone}}"><pt-icon name="{{item.type}}" size="{{28}}" fallback="note"></pt-icon></view>
      <view class="tl-line"></view>
    </view>
    <view class="tl-body">
      <view class="tl-when">{{item.timeText}}</view>
      <view class="tl-card" data-id="{{item.id}}" bindlongpress="onDeleteRecord">
        <view class="tl-title">{{item.title}}</view>
        <view wx:if="{{item.description}}" class="tl-desc">{{item.description}}</view>
        <image wx:if="{{item.image}}" class="tl-img" src="{{item.image}}" mode="aspectFill"
               data-url="{{item.image}}" catchtap="previewImage"></image>
      </view>
    </view>
  </view>

  <view wx:if="{{!timeline.length}}" class="card">
    <view class="empty lg">还没有记录。点上面的「记一笔」开始，
      体重趋势和健康洞察都会从这些记录里长出来。</view>
  </view>
  <view wx:if="{{hasMore}}" class="tl-more" bindtap="loadMore">加载更多</view>
</view>
</scroll-view>

<fab icon="plus" bind:tap="onQuickRecord"></fab>