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

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

<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view class="onboard-page">
  <!-- step 0 欢迎 -->
  <view wx:if="{{step === 0}}" class="step">
    <view class="hero">
      <view class="pet-logo"><pt-icon name="community" size="{{88}}" color="#fff"></pt-icon></view>
      <view class="hero-h1">肉垫计划</view>
      <view class="hero-sub">新手养宠的养护日历、健康记录和成长报告。先生成计划，再每天照着做。</view>
    </view>
    <view class="proof-row">
      <view class="proof"><text class="proof-b">30天</text><text class="proof-s">新手计划</text></view>
      <view class="proof"><text class="proof-b">8类</text><text class="proof-s">快速记录</text></view>
      <view class="proof"><text class="proof-b">AI</text><text class="proof-s">观察建议</text></view>
    </view>
    <button class="btn btn-primary btn-block" bindtap="nextStep">开始建档，生成计划</button>
    <view class="skip-link" bindtap="skipBrowse">先随便看看</view>
  </view>

  <!-- step 1 选类型 -->
  <view wx:elif="{{step === 1}}" class="step">
    <view class="step-title">你的毛孩子是？</view>
    <view class="step-sub">目前支持猫和狗，选一个开始。</view>
    <view class="choice-grid">
      <view class="choice-card {{petType === '猫猫' ? 'selected' : ''}}" data-type="猫猫" data-emoji="🐱" bindtap="choosePet">
        <view class="animal"><pt-icon name="cat" size="{{52}}"></pt-icon></view><view class="choice-b">猫猫</view><view class="choice-s">幼猫、成年猫、老年猫</view>
      </view>
      <view class="choice-card {{petType === '狗狗' ? 'selected' : ''}}" data-type="狗狗" data-emoji="🐶" bindtap="choosePet">
        <view class="animal"><pt-icon name="dog" size="{{52}}"></pt-icon></view><view class="choice-b">狗狗</view><view class="choice-s">幼犬、成年犬、老年犬</view>
      </view>
    </view>
    <button class="btn btn-primary btn-block" bindtap="nextStep">下一步</button>
  </view>

  <!-- step 2 信息 -->
  <view wx:elif="{{step === 2}}" class="step">
    <view class="step-title">告诉我一点它的信息</view>
    <view class="step-sub">先填基础信息，之后可随时补充。</view>
    <view class="form-card">
      <view class="field"><label>宠物名字</label>
        <input class="input" value="{{petName}}" placeholder="例如：奶球" placeholder-class="placeholder" bindinput="onName"/></view>
      <view class="field"><label>生日</label>
        <picker mode="date" value="{{birthday}}" end="{{today}}" bindchange="onBirthday">
          <view class="picker-box">{{birthday || '选择日期（不确定可以估个大概）'}}</view>
        </picker></view>
      <view class="field"><label>到家日期</label>
        <picker mode="date" value="{{arrivedAt}}" end="{{today}}" bindchange="onArrived">
          <view class="picker-box">{{arrivedAt || '选择日期'}}</view>
        </picker>
        <view class="field-tip">刚到家不满 30 天的话，会额外安排一组安置期任务</view></view>
      <view class="field"><label>性别</label><view class="seg">
        <view class="seg-btn {{genderIdx === 0 ? 'selected' : ''}}" data-index="0" bindtap="selectGender">男孩</view>
        <view class="seg-btn {{genderIdx === 1 ? 'selected' : ''}}" data-index="1" bindtap="selectGender">女孩</view>
        <view class="seg-btn {{genderIdx === 2 ? 'selected' : ''}}" data-index="2" bindtap="selectGender">不确定</view>
      </view></view>
      <view class="field"><label>当前体重(kg)</label>
        <input class="input" value="{{weight}}" placeholder="例如：2.8" placeholder-class="placeholder" bindinput="onWeight" type="digit"/></view>
    </view>
    <button class="btn btn-primary btn-block" bindtap="savePetNext">下一步</button>
  </view>

  <!-- step 3 阶段 -->
  <view wx:elif="{{step === 3}}" class="step">
    <view class="step-title">它现在处于哪个阶段？</view>
    <view class="step-sub">阶段决定疫苗节奏、驱虫周期和每天要做的事，选错整套计划都会偏。</view>
    <view wx:if="{{stageAuto}}" class="stage-auto">
      <pt-icon name="check" size="{{28}}"></pt-icon>已按生日自动判断为「{{stageAuto}}」，不对可以改
    </view>
    <view class="stage-list">
      <view wx:for="{{stageOptions}}" wx:key="key"
            class="stage-card {{stage === item.key ? 'selected' : ''}}" data-stage="{{item.key}}" bindtap="chooseStage">
        <view class="stage-b">{{item.key}}<text wx:if="{{item.key === stageAuto}}" class="stage-hint">按生日推荐</text></view>
        <view class="stage-p">{{item.desc}}</view>
      </view>
    </view>
    <button class="btn btn-primary btn-block" bindtap="nextStep">下一步</button>
  </view>

  <!-- step 4 目标 -->
  <view wx:elif="{{step === 4}}" class="step">
    <view class="step-title">你最想解决什么？</view>
    <view class="step-sub">勾上的会变成真的提醒和任务，没勾的不会打扰你。</view>
    <view class="check-list">
      <view wx:for="{{goals}}" wx:key="label" class="check {{item.on ? 'selected' : ''}}" data-index="{{index}}" bindtap="toggleGoal">
        <view class="box"><pt-icon wx:if="{{item.on}}" name="check" size="{{26}}"></pt-icon></view>{{item.label}}
      </view>
    </view>
    <button class="btn btn-primary btn-block" bindtap="nextStep">生成专属计划</button>
  </view>

  <!-- step 5 生成 -->
  <view wx:elif="{{step === 5}}" class="step">
    <view class="step-title">正在生成专属养宠计划</view>
    <view class="step-sub">正在根据它的信息生成专属计划…</view>
    <view class="gen-card">
      <view class="gen-line"><view class="tick"><pt-icon name="check" size="{{26}}"></pt-icon></view> 已识别：{{stage}}</view>
      <view class="gen-line"><view class="tick"><pt-icon name="check" size="{{26}}"></pt-icon></view> 已生成：30 天新手计划</view>
      <view class="gen-line"><view class="tick"><pt-icon name="check" size="{{26}}"></pt-icon></view> 已安排：疫苗 / 驱虫提醒</view>
      <view class="gen-line"><view class="tick"><pt-icon name="check" size="{{26}}"></pt-icon></view> 已开启：体重、便便、饮食记录</view>
      <view class="gen-line"><view class="tick"><pt-icon name="check" size="{{26}}"></pt-icon></view> 已准备：首张成长报告卡片</view>
    </view>
    <button class="btn btn-primary btn-block" style="margin-top:36rpx" bindtap="finishOnboard">查看今日任务</button>
  </view>
</view>
</scroll-view>