feat: 建档改成三步向导页,品种改成后台可配的选择器

## pages/petform 三步向导
  ① 名字 + 传头像
  ② 猫还是狗 → 选品种
  ③ 性别 / 生日 / 到家日期 / 体重 / 毛色 / 阶段

**编辑时不分步**,一屏全放开:用户是来改某一项的,不该被按顺序走一遍。
同一个页面两种形态,靠 ?id= 区分。

每一步只校验这一步的东西。三步全填完才校验的话,用户在第三步才被告知
第一步没填名字,还得翻回去。

进度条没用 seg-tabs:那是「可以随意切」的语义,这里有顺序,
点第三步跳过前两步会拿到一份没名字的档案。

## 生日和到家日期分开
原来是一个「生日 / 到家时间」字段。领养的成年猫狗生日常常是不知道的,
而「一起生活了多少天」要按到家日算——合成一个字段两件事都说不准。
验过:到家 4 个月前 → 第 121 天;按生日算会是 801 天。

模型里 Birthday 和 ArrivedAt 本来就是两个字段,只是表单没露出来。

## 品种:自由文本 → 后台可配的选择器
原来品种是个输入框,用户手打「柯基」「柯基犬」「威尔士柯基」算三个品种,
以后想按品种做体重基准、常见病提示这类事就没法做。

新增 breeds 表,预置 34 种猫 + 45 种狗,按首字母分组、右侧 A-Z 索引跳转、
首字母吸顶。留了「不确定」——领养的串串确实说不出品种,逼着选一个只会
得到假数据。换物种会清掉已选品种(原来那个一定不对了)。

**首字母存字段不运行时算**:Go 没有标准拼音库,而多音字自动转常出错——
「藏獒」按 cang 还是 zang 分组、「柴犬」的柴,人来定比库来猜靠谱。
后台新增品种时手填这一位,服务端校验必须是单个 A-Z。

已有档案在用的品种不许删(删了那些档案的品种就变成查不到的字符串),
想隐藏用 enabled=false。同物种下不许重名——品种是统计口径,重名会把
同一种猫劈成两半。

预置数据自己填错了两条,实跑时看出来的:「苏格兰柯利犬」我按「柯利」
填了 K,应该按「苏格兰」算 S;「双血统边牧」根本不是品种,是血统描述。
seed 源和库里都改了。

## 弹层继续瘦
addPet/editPet 两支删掉,连带 10 个方法、ageFromBirthday/GENDERS/STAGES
和 5 个 add* 字段。累计(从记录表单搬走那次算起):
  js   1110 → 734 行
  wxml  485 → 307 行

多宠管理里「点某只去编辑」原来是 setType('editPet'),那支没了会开一个
空白弹层——改成关弹层再跳页。8 个页面的入口全换完,grep 无残留。

## 验证(预生产库实跑)
  品种接口   猫 34 种 16 个首字母、狗 45 种 17 个首字母;非法 species 返回 []
  建档      生日 / 到家日期 分别落库,品种毛色阶段都对
  编辑      只改名字,到家日期没被冲掉
  修正      柯利犬 K→S、双血统边牧已删

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-30 11:26:51 +08:00
parent 2aaae2b917
commit aefb1bc103
23 changed files with 748 additions and 166 deletions
+214
View File
@@ -0,0 +1,214 @@
const store = require('../../utils/store.js');
const api = require('../../utils/api.js');
const upload = require('../../utils/upload.js');
const { toastErr } = require('../../utils/ui.js');
const GENDERS = ['男孩', '女孩', '不确定'];
const STAGES = ['刚到家 0-30 天', '幼年期', '成年期', '老年期'];
function pad2(n) {
return n < 10 ? '0' + n : '' + n;
}
function ymd(d) {
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate());
}
function monthsSince(bday) {
const b = new Date(String(bday).slice(0, 10) + 'T00:00:00');
if (isNaN(b.getTime())) return -1;
const n = new Date();
const m = (n.getFullYear() - b.getFullYear()) * 12 + (n.getMonth() - b.getMonth());
return m < 0 ? 0 : m;
}
function ageLabel(bday) {
const m = monthsSince(bday);
if (m < 0) return '';
return m < 24 ? m + '个月' : Math.floor(m / 12) + '岁';
}
// 和后端 service.StageFromBirthday 一套口径:<12 月幼年,>=7 年老年,其余成年。
// 前端算是为了在用户填完生日时就给出建议值,最终仍以用户选的为准
function stageFromBirthday(bday) {
const m = monthsSince(bday);
if (m < 0) return '';
if (m < 12) return '幼年期';
if (m >= 84) return '老年期';
return '成年期';
}
Page({
data: {
editing: false,
petId: '',
step: 0,
steps: ['名字', '品种', '资料'],
genders: GENDERS,
stages: STAGES,
today: '',
stageAuto: '',
form: {
name: '', avatar_file_id: '', avatar_url: '',
species: 'cat', breed: '',
gender: '不确定', birthday: '', arrived_at: '',
weight: '', color: '', stage: '',
},
breedShow: false,
breedGroups: [],
breedAnchor: '',
saving: false,
},
onLoad(q) {
this.setData({ today: ymd(new Date()) });
const id = (q && q.id) || '';
if (!id) return;
// 编辑:不分步,一屏全放开——用户是来改某一项的,不该被按顺序走一遍
store
.ready()
.then(() => {
const p = (store.getPets() || []).find((x) => x.id === id) || store.getPet() || {};
this.setData({
editing: true,
petId: id,
form: {
name: p.name || '',
avatar_file_id: '',
avatar_url: p.avatar_url || '',
species: p.type === '狗狗' ? 'dog' : 'cat',
breed: p.breed || '',
gender: GENDERS.indexOf(p.gender) >= 0 ? p.gender : '不确定',
birthday: p.birthday ? String(p.birthday).slice(0, 10) : '',
arrived_at: p.arrived_at ? String(p.arrived_at).slice(0, 10) : '',
weight: (p.weight || '').replace('kg', ''),
color: p.color || '',
stage: STAGES.indexOf(p.stage) >= 0 ? p.stage : '',
},
});
})
.catch((e) => toastErr(e));
},
onName(e) {
this.setData({ 'form.name': e.detail.value });
},
pickAvatar() {
upload
.chooseAndUploadImage()
.then((f) => this.setData({ 'form.avatar_file_id': f.id, 'form.avatar_url': f.url }))
.catch((e) => {
if (e && e.canceled) return;
toastErr(e, '上传失败');
});
},
pickSpecies(e) {
const sp = e.currentTarget.dataset.sp;
if (sp === this.data.form.species) return;
// 换了物种,原来选的品种一定不对了
this.setData({ 'form.species': sp, 'form.breed': '', breedGroups: [] });
},
pickGender(e) {
this.setData({ 'form.gender': e.currentTarget.dataset.v });
},
pickStage(e) {
this.setData({ 'form.stage': e.currentTarget.dataset.v });
},
onBirthday(e) {
const v = e.detail.value;
const auto = stageFromBirthday(v);
const patch = { 'form.birthday': v, stageAuto: auto };
// 用户还没手选过阶段就跟着生日走;选过就不动他的选择
if (auto && !this.data.form.stage) patch['form.stage'] = auto;
this.setData(patch);
},
onArrived(e) {
this.setData({ 'form.arrived_at': e.detail.value });
},
onWeight(e) {
this.setData({ 'form.weight': e.detail.value });
},
onColor(e) {
this.setData({ 'form.color': e.detail.value });
},
// ── 品种选择器 ──
openBreed() {
this.setData({ breedShow: true });
if (this.data.breedGroups.length) return;
api
.breeds(this.data.form.species)
.then((groups) => this.setData({ breedGroups: groups || [] }))
.catch((e) => toastErr(e));
},
closeBreed() {
this.setData({ breedShow: false });
},
noop() {},
pickBreed(e) {
this.setData({ 'form.breed': e.currentTarget.dataset.name, breedShow: false });
},
clearBreed() {
// 「不确定」要留:领养的串串确实说不出品种,逼着选一个只会得到假数据
this.setData({ 'form.breed': '', breedShow: false });
},
jumpInitial(e) {
this.setData({ breedAnchor: 'bi-' + e.currentTarget.dataset.i });
},
// ── 分步 ──
prev() {
if (this.data.step > 0) this.setData({ step: this.data.step - 1 });
},
// 每一步只校验这一步的东西。三步全填完才校验的话,用户在第三步才被告知
// 第一步没填名字,还得翻回去
stepError() {
const f = this.data.form;
if (this.data.step === 0 && !f.name.trim()) return '先给它起个名字';
if (this.data.step === 1 && !f.species) return '选一下是猫还是狗';
return '';
},
next() {
if (this.data.saving) return;
if (!this.data.editing) {
const err = this.stepError();
if (err) return wx.showToast({ title: err, icon: 'none' });
if (this.data.step < 2) return this.setData({ step: this.data.step + 1 });
} else if (!this.data.form.name.trim()) {
return wx.showToast({ title: '名字不能空', icon: 'none' });
}
this.submit();
},
body() {
const f = this.data.form;
const isDog = f.species === 'dog';
const body = {
name: f.name.trim(),
type: isDog ? '狗狗' : '猫猫',
// emoji 是老字段,列表和海报还在用它兜底;有头像时它不显示
emoji: isDog ? '🐶' : '🐱',
gender: f.gender,
birthday: f.birthday,
arrived_at: f.arrived_at,
weight: f.weight,
color: f.color.trim(),
breed: f.breed,
stage: f.stage || stageFromBirthday(f.birthday) || '成年期',
age: ageLabel(f.birthday),
};
// 没重新传头像就不带这个字段,别把已有头像覆盖成空
if (f.avatar_file_id) body.avatar_file_id = f.avatar_file_id;
return body;
},
submit() {
this.setData({ saving: true });
const b = this.body();
const req = this.data.editing ? api.updatePet(this.data.petId, b) : api.createPet(b);
req
.then(() => store.loadPets())
.then(() => {
this.setData({ saving: false });
wx.showToast({ title: this.data.editing ? '已保存' : '建好啦', icon: 'success' });
setTimeout(() => wx.navigateBack(), 700);
})
.catch((e) => {
this.setData({ saving: false });
toastErr(e, '保存失败');
});
},
});
+6
View File
@@ -0,0 +1,6 @@
{
"usingComponents": {
"nav-bar": "/components/nav-bar/nav-bar",
"pt-icon": "/components/pt-icon/index"
}
}
+120
View File
@@ -0,0 +1,120 @@
<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="{{stageAuto}}" 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>
+86
View File
@@ -0,0 +1,86 @@
.pf-body{padding-bottom:calc(200rpx + env(safe-area-inset-bottom))}
/* 三步进度条。不用 seg-tabs:那是「可以随意切」的语义,
这里是有顺序的,点第三步跳过前两步会拿到一份没名字的档案 */
.pf-steps{
flex:none;display:flex;align-items:flex-start;justify-content:center;
gap:var(--sp-6);padding:var(--sp-3) var(--pad-x) var(--sp-4);
}
.pf-step{display:flex;flex-direction:column;align-items:center;gap:6rpx}
.pf-dot{
width:48rpx;height:48rpx;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:#fff;border:1rpx solid var(--line);
color:var(--muted2);font-size:var(--fs-sm);font-weight:var(--fw-b);
}
.pf-slabel{font-size:var(--fs-cap);color:var(--muted2)}
.pf-step.on .pf-dot{background:var(--primary);border-color:var(--primary);color:#fff}
.pf-step.on .pf-slabel{color:var(--primary-dark);font-weight:var(--fw-b)}
.pf-h{font-size:var(--fs-lg);font-weight:var(--fw-b);margin-bottom:var(--sp-4)}
/* 头像 */
.pf-av-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.pf-av{
width:176rpx;height:176rpx;border-radius:50%;overflow:hidden;
background:var(--primary-soft);color:var(--primary-dark);
display:flex;align-items:center;justify-content:center;
}
.pf-av-img{width:100%;height:100%}
.pf-av-tip{font-size:var(--fs-cap);color:var(--primary-dark)}
/* 猫 / 狗 */
.pf-species{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.pf-sp{
flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
padding:var(--sp-5) 0;border-radius:var(--r-md);
background:var(--surface-2);border:2rpx solid var(--line);
color:var(--muted);font-size:var(--fs-md);
}
.pf-sp.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink);font-weight:var(--fw-b)}
.pf-empty{color:var(--muted2)}
/* 底部按钮 */
.pf-foot{
position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:var(--sp-3);
padding:var(--sp-4) var(--pad-x) calc(var(--sp-4) + env(safe-area-inset-bottom));
background:#fff;box-shadow:0 -12rpx 32rpx rgba(70,48,25,.06);
}
.pf-back{flex:none;width:200rpx}
.pf-next{flex:1}
.pf-busy{opacity:.6}
/* 品种选择器 */
.pf-mask{position:fixed;inset:0;z-index:200;background:rgba(45,41,37,.45);display:flex;align-items:flex-end}
.pf-sheet{
width:100%;background:var(--bg2);border-radius:var(--r-lg) var(--r-lg) 0 0;
padding:var(--sp-5) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
box-shadow:var(--sd-3);
}
.pf-sheet-h{
display:flex;align-items:center;justify-content:space-between;
padding:0 var(--pad-x) var(--sp-4);
font-size:var(--fs-lg);font-weight:var(--fw-b);
}
.pf-breed-wrap{display:flex;height:60vh}
.pf-breed-list{flex:1;min-width:0;padding-left:var(--pad-x)}
/* 首字母吸顶:滚长列表时得知道现在在哪一段 */
.pf-bi{
position:sticky;top:0;z-index:1;
background:var(--bg2);color:var(--primary-dark);
font-size:var(--fs-sm);font-weight:var(--fw-b);padding:var(--sp-2) 0;
}
.pf-brow{
padding:var(--sp-3) 0;font-size:var(--fs-md);color:var(--text);
border-bottom:1rpx solid var(--line);
}
.pf-brow.on{color:var(--primary-dark);font-weight:var(--fw-b)}
/* 右侧 A-Z 索引 */
.pf-index{
flex:none;width:56rpx;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:2rpx;
}
.pf-ichar{
font-size:var(--fs-cap);color:var(--muted);
padding:2rpx 8rpx;line-height:1.4;
}