Files
sundynix-pets/pets-fe/pages/plan/plan.js
T
Blizzard aefb1bc103 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>
2026-07-30 11:26:51 +08:00

240 lines
7.0 KiB
JavaScript

const store = require('../../utils/store.js');
const api = require('../../utils/api.js');
const { toastErr } = require('../../utils/ui.js');
function pad2(n) {
return n < 10 ? '0' + n : '' + n;
}
function ymd(d) {
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate());
}
// "2026-07-04" → "7月4日"
function fmtMD(date) {
const p = (date || '').split('-');
return p.length < 3 ? '' : +p[1] + '月' + +p[2] + '日';
}
function parseYMD(s) {
const p = (s || '').split('-');
return p.length < 3 ? null : new Date(+p[0], +p[1] - 1, +p[2]);
}
// 自然月网格。周一为一周起点,首尾补空格对齐星期。
// 按月切而不是「从计划开始日起 30 天」:那样窗口跨两个月,
// 用户看着一个 7月26日—8月25日 的日历,既不像本月也不像下月。
function buildCells(year, month, byDate, todayStr) {
const first = new Date(year, month - 1, 1);
const lead = (first.getDay() + 6) % 7;
const total = new Date(year, month, 0).getDate();
const cells = [];
for (let i = 0; i < lead; i++) cells.push({ blank: true });
for (let d = 1; d <= total; d++) {
const s = year + '-' + pad2(month) + '-' + pad2(d);
cells.push({ day: d, date: s, count: (byDate[s] || []).length, today: s === todayStr });
}
while (cells.length % 7) cells.push({ blank: true });
return cells;
}
// off=0 本月,off=1 下月
function monthOf(off) {
const n = new Date();
const d = new Date(n.getFullYear(), n.getMonth() + off, 1);
return { year: d.getFullYear(), month: d.getMonth() + 1 };
}
function monthEnd(off) {
const m = monthOf(off);
return m.year + '-' + pad2(m.month) + '-' + pad2(new Date(m.year, m.month, 0).getDate());
}
Page({
data: {
pet: {},
plan: null,
cells: [],
monthOff: 0,
monthLabel: '',
monthEndLabel: '',
nextCount: 0,
pickStart: '',
pickEnd: '',
selDate: '',
selLabel: '',
dayTasks: [],
editShow: false,
editId: '',
form: { title: '', date: '', description: '', daily: false },
saving: false,
sheetShow: false,
sheetType: '',
},
onLoad() {
this._unsub = store.subscribe((pet) => {
this.setData({ pet });
if (this._inited) this.load();
});
},
onUnload() {
if (this._unsub) this._unsub();
},
onShow() {
store
.ready()
.then(() => {
this._inited = true;
this.setData({ pet: store.getPet() });
this.load();
})
.catch((e) => toastErr(e));
},
load() {
const id = store.currentPetId();
if (!id) return;
api
.getPlan(id)
.then((plan) => this.apply(plan))
.catch(() => this.setData({ plan: null, cells: [], dayTasks: [] }));
},
apply(plan) {
const tasks = plan.tasks || [];
const byDate = {};
tasks.forEach((t) => {
if (!t.date) return;
(byDate[t.date] = byDate[t.date] || []).push(t);
});
this._byDate = byDate;
this.setData({
plan: { ...plan, tasks },
// 能排的区间:不早于计划开始日,不晚于下月月底。和后端 dayOffset 的校验一致
pickStart: (plan.start_date || '').slice(0, 10),
pickEnd: monthEnd(1),
});
this.renderMonth(this.data.monthOff);
if (this._pendingSel) {
// 刚加/改完,跳到那一天,不然用户看不到东西去哪了
this.selectDay(this._pendingSel);
this._pendingSel = '';
}
},
renderMonth(off) {
const m = monthOf(off);
const todayStr = ymd(new Date());
const byDate = this._byDate || {};
const prefix = m.year + '-' + pad2(m.month);
this.setData({
monthOff: off,
monthLabel: m.year + ' 年 ' + m.month + ' 月',
monthEndLabel: fmtMD(monthEnd(off)),
cells: buildCells(m.year, m.month, byDate, todayStr),
nextCount: Object.keys(byDate).filter((d) => d.indexOf(monthOf(1).year + '-' + pad2(monthOf(1).month)) === 0)
.reduce((n, d) => n + byDate[d].length, 0),
});
// 切到本月默认选今天;切到下月默认选 1 号(今天不在那个月里)
const inMonth = todayStr.indexOf(prefix) === 0;
this.selectDay(inMonth ? todayStr : prefix + '-01', todayStr);
},
switchMonth(e) {
this.renderMonth(Number(e.currentTarget.dataset.off));
},
selectDay(date, todayStr) {
const t = todayStr || ymd(new Date());
this.setData({
selDate: date,
selLabel: date === t ? '今天的安排' : fmtMD(date) + '的安排',
dayTasks: (this._byDate || {})[date] || [],
});
},
onTapDay(e) {
const d = e.currentTarget.dataset.date;
if (d) this.selectDay(d);
},
toggleTask(e) {
api
.togglePlanTask(e.currentTarget.dataset.id)
.then(() => this.load())
.catch((err) => toastErr(err, '操作失败'));
},
// ── 加 / 改 ──
openAdd() {
this.setData({
editShow: true, editId: '',
form: { title: '', date: this.data.selDate || ymd(new Date()), description: '', daily: false },
});
},
openEdit(e) {
const t = (this.data.dayTasks || []).find((x) => x.id === e.currentTarget.dataset.id);
if (!t) return;
this.setData({
editShow: true, editId: t.id,
form: { title: t.title, date: t.date || this.data.selDate, description: t.description || '', daily: false },
});
},
closeEdit() {
this.setData({ editShow: false });
},
noop() {},
onFormTitle(e) {
this.setData({ 'form.title': e.detail.value });
},
onFormDate(e) {
this.setData({ 'form.date': e.detail.value });
},
onFormDesc(e) {
this.setData({ 'form.description': e.detail.value });
},
onFormDaily(e) {
this.setData({ 'form.daily': e.detail.value });
},
onSubmit() {
if (this.data.saving) return;
const f = this.data.form;
if (!(f.title || '').trim()) return wx.showToast({ title: '写一下做什么', icon: 'none' });
const id = store.currentPetId();
if (!id) return;
this.setData({ saving: true });
const req = this.data.editId
? api.updatePlanTask(this.data.editId, f)
: api.addPlanTask(id, f);
req
.then(() => {
this.setData({ saving: false, editShow: false });
// 加完/改完要跳到那一天,不然用户改了日期却看不到东西去哪了
this._pendingSel = f.date;
this.load();
})
.catch((e) => {
this.setData({ saving: false });
toastErr(e, '保存失败');
});
},
onDelete(e) {
const { id, title } = e.currentTarget.dataset;
wx.showModal({
title: '删掉这件事?',
content: title || '',
confirmColor: '#EE7D73',
success: (r) => {
if (!r.confirm) return;
api
.deletePlanTask(id)
.then(() => this.load())
.catch((err) => toastErr(err, '删除失败'));
},
});
},
closeSheet() {
this.setData({ sheetShow: false });
},
onAddPet() {
wx.navigateTo({ url: '/pages/petform/petform' });
},
onShareAppMessage() {
return { title: '我给毛孩子做了份养护计划', path: '/pages/plan/plan' };
},
onShareTimeline() {
return { title: '我给毛孩子做了份养护计划' };
},
});