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
@@ -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, '保存失败');
|
||||
});
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user