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

<nav-bar title="{{editing ? '编辑档案' : '建一份档案'}}" show-back="{{true}}"></nav-bar>

<!-- 三步进度。编辑时不分步（用户是来改某一项的，不该被按顺序走一遍） -->
<view wx:if="{{!editing}}" class="pf-steps">
  <view wx:for="{{steps}}" wx:key="*this" class="pf-step {{index <= step ? 'on' : ''}}">
    <view class="pf-dot">{{index < step ? '✓' : index + 1}}</view>
    <text class="pf-slabel">{{item}}</text>
  </view>
</view>

<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view class="page-body pf-body">

  <!-- ① 名字 + 头像 -->
  <block wx:if="{{editing || step === 0}}">
    <view class="card">
      <view class="pf-h">先给它起个名字</view>
      <view class="pf-av-wrap" bindtap="pickAvatar">
        <view class="pf-av">
          <image wx:if="{{form.avatar_url}}" class="pf-av-img" src="{{form.avatar_url}}" mode="aspectFill"></image>
          <block wx:else><pt-icon name="photo" size="{{56}}"></pt-icon></block>
        </view>
        <view class="pf-av-tip">{{form.avatar_url ? '换一张' : '传张照片'}}</view>
      </view>
      <view class="field"><label>名字</label>
        <input class="input" placeholder="例如：布丁" placeholder-class="placeholder"
               value="{{form.name}}" maxlength="16" bindinput="onName"/></view>
    </view>
  </block>

  <!-- ② 猫还是狗 + 品种 -->
  <block wx:if="{{editing || step === 1}}">
    <view class="card">
      <view class="pf-h">它是猫还是狗？</view>
      <view class="pf-species">
        <view class="pf-sp {{form.species === 'cat' ? 'on' : ''}}" data-sp="cat" bindtap="pickSpecies">
          <pt-icon name="cat" size="{{64}}"></pt-icon><text>猫猫</text>
        </view>
        <view class="pf-sp {{form.species === 'dog' ? 'on' : ''}}" data-sp="dog" bindtap="pickSpecies">
          <pt-icon name="dog" size="{{64}}"></pt-icon><text>狗狗</text>
        </view>
      </view>
      <view class="field"><label>品种</label>
        <view class="picker-box {{form.breed ? '' : 'pf-empty'}}" bindtap="openBreed">
          {{form.breed || '选一个品种'}}
        </view>
      </view>
    </view>
  </block>

  <!-- ③ 其他基本信息 -->
  <block wx:if="{{editing || step === 2}}">
    <view class="card">
      <view class="pf-h">再补几项，之后都能改</view>
      <view class="field"><label>性别</label><view class="seg">
        <view wx:for="{{genders}}" wx:key="*this" class="seg-btn {{form.gender === item ? 'selected' : ''}}"
              data-v="{{item}}" bindtap="pickGender">{{item}}</view>
      </view></view>

      <!-- 生日和到家日分开：领养的成年猫狗生日常常是不知道的，
           而「一起生活了多少天」要按到家日算。合成一个字段两件事都说不准 -->
      <view class="field"><label>生日</label>
        <picker mode="date" value="{{form.birthday}}" end="{{today}}" bindchange="onBirthday">
          <view class="picker-box {{form.birthday ? '' : 'pf-empty'}}">{{form.birthday || '不知道可以先跳过'}}</view>
        </picker></view>
      <view class="field"><label>到家日期</label>
        <picker mode="date" value="{{form.arrived_at}}" end="{{today}}" bindchange="onArrived">
          <view class="picker-box {{form.arrived_at ? '' : 'pf-empty'}}">{{form.arrived_at || '哪天接回家的'}}</view>
        </picker></view>

      <view class="field"><label>当前体重（kg）</label>
        <input class="input" type="digit" placeholder="例如：2.8" placeholder-class="placeholder"
               value="{{form.weight}}" bindinput="onWeight"/></view>
      <view class="field"><label>毛色</label>
        <input class="input" placeholder="例如：橘白 / 奶牛 / 黑" placeholder-class="placeholder"
               value="{{form.color}}" maxlength="16" bindinput="onColor"/></view>
      <view class="field"><label>当前阶段</label><view class="mini-options">
        <view wx:for="{{stages}}" wx:key="*this" class="option {{form.stage === item ? 'selected' : ''}}"
              data-v="{{item}}" bindtap="pickStage">{{item}}</view>
      </view>
      <!-- 把划分标准摆出来。用户不该猜「幼年期」是几个月到几个月，
           狗还得知道自己这个体型的阈值和别的体型不一样 -->
      <view wx:if="{{stageBasis}}" class="pf-basis">{{stageBasis}}</view>
      <view wx:if="{{sizeLabel}}" class="tiny">{{sizeLabel}}——阶段阈值按体型算</view>
      <view wx:if="{{stageAuto && stageAuto !== form.stage}}" class="tiny">按生日推算是「{{stageAuto}}」，可以手改</view>
      </view>
    </view>
  </block>
</view>
</scroll-view>

<!-- 底部按钮固定 -->
<view class="pf-foot">
  <view wx:if="{{!editing && step > 0}}" class="btn btn-ghost pf-back" bindtap="prev">上一步</view>
  <view class="btn btn-primary pf-next {{saving ? 'pf-busy' : ''}}" bindtap="next">
    {{saving ? '保存中…' : (editing ? '保存' : (step < 2 ? '下一步' : '完成建档'))}}
  </view>
</view>

<!-- 品种选择器：左侧列表 + 右侧 A-Z 索引 -->
<view wx:if="{{breedShow}}" class="pf-mask" bindtap="closeBreed">
  <view class="pf-sheet" catchtap="noop">
    <view class="pf-sheet-h">
      <text>选择品种</text>
      <view class="link" catchtap="clearBreed">不确定</view>
    </view>
    <view class="pf-breed-wrap">
      <scroll-view class="pf-breed-list" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}"
                   scroll-into-view="{{breedAnchor}}" scroll-with-animation="{{true}}">
        <block wx:for="{{breedGroups}}" wx:key="initial">
          <view class="pf-bi" id="bi-{{item.initial}}">{{item.initial}}</view>
          <view wx:for="{{item.items}}" wx:for-item="b" wx:key="id"
                class="pf-brow {{form.breed === b.name ? 'on' : ''}}"
                data-name="{{b.name}}" bindtap="pickBreed">{{b.name}}</view>
        </block>
        <view wx:if="{{!breedGroups.length}}" class="empty">还没有配置品种</view>
      </scroll-view>
      <view class="pf-index">
        <view wx:for="{{breedGroups}}" wx:key="initial" class="pf-ichar"
              data-i="{{item.initial}}" bindtap="jumpInitial">{{item.initial}}</view>
      </view>
    </view>
  </view>
</view>