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

<nav-bar title="养宠计划" show-back="{{true}}"></nav-bar>

<view class="top-bar"><pet-switch show-add="{{false}}"></pet-switch></view>

<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view class="page-body">
  <view wx:if="{{!pet.id}}" class="no-pet">
    <view class="no-pet-ic"><pt-icon name="community" size="{{52}}"></pt-icon></view>
    <view class="no-pet-b">还没有毛孩子的档案</view>
    <view class="no-pet-p">建好档会按它的年龄阶段自动排好 30 天计划和疫苗驱虫提醒。</view>
    <view class="btn btn-dark" bindtap="onAddPet"><pt-icon name="plus" size="{{30}}"></pt-icon>建一份档案</view>
  </view>

  <block wx:else>
    <view class="card">
      <view class="section-head">
        <view class="sh-title">{{pet.name}}的 30 天计划</view>
        <view class="tag warn">{{plan.completion_pct || 0}}%</view>
      </view>
      <view class="progress-row"><text>完成度</text><text>{{plan.completion_pct || 0}}%</text></view>
      <view class="bar"><view class="bar-fill" style="width:{{plan.completion_pct || 0}}%"></view></view>
    </view>

    <!-- 月历。按自然月切而不是「从计划开始日起 30 天」：那样窗口会跨两个月，
         用户看着 7月26日—8月25日 既不像本月也不像下月，「这个月还剩什么」对不上。
         能翻到下月，否则「做下月计划」这件事本身做不了 -->
    <view class="card">
      <view class="section-head">
        <view class="sh-title">{{monthLabel}}</view>
        <view class="link-tabs">
          <view class="link {{monthOff === 0 ? 'on' : ''}}" data-off="0" bindtap="switchMonth">本月</view>
          <view class="link {{monthOff === 1 ? 'on' : ''}}" data-off="1" bindtap="switchMonth">下月</view>
        </view>
      </view>
      <view wx:if="{{monthOff === 1 && !nextCount}}" class="plan-tip">
        <pt-icon name="warn" size="{{28}}"></pt-icon>{{monthLabel}}还没有安排，点某天加几件
      </view>
      <view class="cal-grid">
        <text class="cal-w">一</text><text class="cal-w">二</text><text class="cal-w">三</text><text class="cal-w">四</text><text class="cal-w">五</text><text class="cal-w">六</text><text class="cal-w">日</text>
        <view wx:for="{{cells}}" wx:key="index"
              class="cal-cell {{item.blank ? 'blank' : ''}} {{item.today ? 'today' : ''}} {{item.count ? 'tasked' : ''}} {{item.date === selDate ? 'sel' : ''}}"
              data-date="{{item.date}}" bindtap="onTapDay">{{item.day || ''}}</view>
      </view>
    </view>

    <!-- 选中那天的安排 -->
    <view class="card">
      <view class="section-head">
        <view class="sh-title">{{selLabel}}</view>
        <view class="link" bindtap="openAdd">＋ 加一件</view>
      </view>
      <view wx:for="{{dayTasks}}" wx:key="id" class="plan-task {{item.done ? 'done' : ''}}">
        <view class="pk-check" catchtap="toggleTask" data-id="{{item.id}}">
          <pt-icon wx:if="{{item.done}}" name="check" size="{{22}}"></pt-icon>
        </view>
        <view class="pk-body" data-id="{{item.id}}" bindtap="openEdit">
          <text class="pk-b">{{item.title}}</text>
          <view wx:if="{{item.description}}" class="pk-p">{{item.description}}</view>
        </view>
        <view class="pk-del" catchtap="onDelete" data-id="{{item.id}}" data-title="{{item.title}}">
          <pt-icon name="trash" size="{{28}}"></pt-icon>
        </view>
      </view>
      <view wx:if="{{!dayTasks.length}}" class="empty">这天还没有安排，点右上角加一件</view>
    </view>

    <!-- 全部 30 天的路线图，折叠着 -->
    <view class="card">
      <view class="section-head">
        <view class="sh-title">完整路线图</view>
        <view class="link" bindtap="toggleAll">{{allOpen ? '收起' : '展开全部'}}</view>
      </view>
      <block wx:if="{{allOpen}}">
        <view wx:for="{{plan.tasks}}" wx:key="id" class="time-block">
          <view class="time-label">{{item.day_label}}<text wx:if="{{item.dateLabel}}" class="time-date">{{item.dateLabel}}</text></view>
          <view class="plan-task {{item.done ? 'done' : ''}}">
            <view class="pk-check" catchtap="toggleTask" data-id="{{item.id}}">
              <pt-icon wx:if="{{item.done}}" name="check" size="{{22}}"></pt-icon>
            </view>
            <view class="pk-body"><text class="pk-b">{{item.title}}</text><view class="pk-p">{{item.description}}</view></view>
          </view>
        </view>
        <view wx:if="{{!plan.tasks.length}}" class="empty">暂无计划</view>
      </block>
      <view wx:else class="tiny">共 {{plan.tasks.length || 0}} 件事，已完成 {{doneCount}} 件</view>
    </view>
  </block>
</view>
</scroll-view>

<!-- 加/改一条计划。字段少，用弹层比再开一页合适 -->
<view wx:if="{{editShow}}" class="pe-mask" bindtap="closeEdit">
  <view class="pe-sheet" catchtap="noop">
    <view class="pe-h">{{editId ? '改这件事' : '加一件事'}}</view>
    <view class="field"><label>做什么</label>
      <input class="input" placeholder="比如 带去打第二针" placeholder-class="placeholder"
             value="{{form.title}}" bindinput="onFormTitle"/></view>
    <view class="field"><label>哪天</label>
      <picker mode="date" value="{{form.date}}" start="{{pickStart}}" end="{{pickEnd}}" bindchange="onFormDate">
        <view class="picker-box">{{form.date}}</view>
      </picker>
      <view class="tiny">只能安排 {{pickStart}} 到 {{pickEnd}} 之间</view>
    </view>
    <view class="field"><label>备注</label>
      <textarea class="textarea" placeholder="可不填" placeholder-class="placeholder"
                value="{{form.description}}" bindinput="onFormDesc"></textarea></view>
    <!-- 只有新增能选「每天」：已有的那条改成每天等于凭空复制 29 份，
         用户想要的是「以后每天」，不是「把这条撒开」 -->
    <view wx:if="{{!editId}}" class="field pe-daily">
      <view class="pe-daily-main">
        <view class="tt-b">应用到每天</view>
        <view class="tt-p">从这天排到 {{monthEndLabel}}，每天一条，可以分别打勾</view>
      </view>
      <switch checked="{{form.daily}}" color="#F5A947" bindchange="onFormDaily"></switch>
    </view>
    <view class="btn btn-primary btn-block" bindtap="onSubmit">{{saving ? '保存中…' : '保存'}}</view>
  </view>
</view>

<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet"></bottom-sheet>