feat: 添加记录独立成页，表单字段由后端配置驱动
## 弹层里塞 24 个表单是走不通的 弹层高度受 .sheet-scroll 的 78vh 限制，字段一多就变成内滚；24 项的选择器 挤在弹层里更难看（用户原话「很丑」）。整体搬成页面。 ## pages/addrecord —— 一个页面吃掉全部 24 种 形态：记录宠物 / 记录时间 / 类型专属字段 / 描述 + 照片 / 底部固定保存键。 关键在「类型专属字段」整段是后端驱动的：前端不认识「体重」「金额」这些业务词， 只认识 number / options / text 三种渲染方式，以及每个字段的值该落到哪儿。 record_types 加了 fields 列，后台用紧凑写法配（一行一个）： number:体重:kg 数值 → num_value options:状态:正常|软便|拉稀 单选 → category options:症状:呕吐|拉稀|精神差:- 末尾 - 表示不落 category，只进标题 text:吃了什么 文本 → 只进标题 （空） 只要 时间+描述+照片 解析放服务端不放前端：配错了要在后台保存时就报出来（第几行、错在哪）， 不能等用户点开表单才发现渲染不出东西。读取时解析失败只让这一种事项没有额外 字段并打 warn，不让一条烂配置把整个记录页打空。 ## 那个 - 开关不是过度设计 异常观察有两个单选（症状 + 严重程度），而 category 只有一个坑， 周报的高风险数按 category='高' 统计（report.go:46）——必须能指定谁占这个坑。 同理账单按 cost 的 category 分组聚合（report.go:134）， 食便相关性排除 poop 的 category='正常'。这三处口径都得严丝合缝对上。 ## 记录页瘦成纯列表 只留分组宫格。健康洞察 / 体重趋势 / 健康时间轴整页搬到 pages/history， 从报告页「记录与趋势」进——报告页才是看数据的地方，而一个「我要记一笔」的 页面上摆三块只读图表，用户每次都得先滚过去才能找到要点的东西。 **没有直接删掉那三块**：时间轴是唯一能看和删历史记录的地方，报告页只有 周报/账单这些聚合。删了用户就再也看不到自己记过什么。搬页面用的是 git 里 改动前的完整版复制，比往 report.js 里合并代码安全。 ## 弹层瘦了一圈 9 个记录分支删掉，连带 17 个方法、SIMPLE_HINT、buildRecord 的 7 个 case 和一批只有它们在用的 data 字段。 js 1089 → 857 行 wxml 480 → 335 行 弹层现在只管「不是记一笔」的事：提醒、海报、档案、发帖、评论、导出、反馈。 buildRecord 只剩 vetSummary 一个分支（它写一条 note 留痕，不是用户填的表单）。 ## 验证（预生产库实跑） 24 种的字段配置逐个核对解析结果，然后照 addrecord 的 buildBody 组装落库： 体重 title='体重：4.6kg' num=4.6 → 宠物档案回写成 4.6kg ✓ 记账 title='记账：128元 医疗' num=128 cat=医疗 → 账单 total=128 分类[(医疗,128)] ✓ 异常 title='异常：呕吐 高' cat=高 → 周报 high_risk_count=1 ✓ 排便 cat=软便 食便相关性口径保住 饮食 title='饮食：幼猫粮 45g 偏少' cat=偏少 喝水 num=180（新类型带数值，老代码没有它的分支也不影响） 洗澡 title='洗澡'（无额外字段） 看病 num=320（两个字段：文本+数值） 体重趋势 1 个点、值 4.6，没被其他 7 条污染。 回填踩过一次坑：fields 列是服务启动时 AutoMigrate 才建的，我在启动前就跑了 回填，Update 报错被忽略、13 行静默没写进去。第二版加了 HasColumn 前置检查 和逐行错误统计才发现。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
@@ -0,0 +1,264 @@
|
||||
const store = require('../../utils/store.js');
|
||||
const api = require('../../utils/api.js');
|
||||
const { toastErr } = require('../../utils/ui.js');
|
||||
|
||||
function pad(n) {
|
||||
return n < 10 ? '0' + n : '' + n;
|
||||
}
|
||||
function fmtTime(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
const now = new Date();
|
||||
const hm = pad(d.getHours()) + ':' + pad(d.getMinutes());
|
||||
if (d.toDateString() === now.toDateString()) return '今天 ' + hm;
|
||||
const y = new Date(now.getTime() - 86400000);
|
||||
if (d.toDateString() === y.toDateString()) return '昨天 ' + hm;
|
||||
return d.getMonth() + 1 + '月' + d.getDate() + '日';
|
||||
}
|
||||
// 记录类型 → 配色。和首页快速记录入口用同一套分组：
|
||||
// 体重/疫苗=橙、便便/饮食=绿、异常/用药=蓝、消费/照片=紫
|
||||
// 时间轴每条记录的色调。这页只读历史，不需要整份类型表，
|
||||
// 但仍要按分组着色——所以引一份轻量的 code→组 映射
|
||||
const recordTypes = require('../../utils/recordTypes.js');
|
||||
function toneOf(type) {
|
||||
const t = recordTypes.get(type);
|
||||
return (t && t.tone) || 'tone-1';
|
||||
}
|
||||
|
||||
// 「记一笔」的入口不再写死在这里：类型和分组由后端 record_types 表提供
|
||||
// （后台可配），前端只负责渲染。utils/recordTypes.js 是两处共用的缓存。
|
||||
|
||||
function mapRecord(r) {
|
||||
return {
|
||||
id: r.id,
|
||||
// 图标按 type 取（9 值枚举，可靠）；老数据 icon 字段里的 emoji 只作兜底
|
||||
type: r.type || r.icon || '',
|
||||
tone: toneOf(r.type),
|
||||
title: r.title,
|
||||
desc: fmtTime(r.occurred_at) + (r.description ? '｜' + r.description : ''),
|
||||
image: r.image_url || '',
|
||||
};
|
||||
}
|
||||
|
||||
// 时间轴类型筛选
|
||||
const REC_FILTERS = [
|
||||
{ key: '', label: '全部' },
|
||||
{ key: 'weight', label: '体重' },
|
||||
{ key: 'poop', label: '便便' },
|
||||
{ key: 'food', label: '饮食' },
|
||||
{ key: 'symptom', label: '异常' },
|
||||
{ key: 'medicine', label: '用药' },
|
||||
{ key: 'vaccine', label: '疫苗' },
|
||||
{ key: 'cost', label: '消费' },
|
||||
{ key: 'photo', label: '照片' },
|
||||
];
|
||||
|
||||
function fmtDay(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
return d.getMonth() + 1 + '月' + d.getDate() + '日';
|
||||
}
|
||||
|
||||
// 用真实体重点生成趋势图：返回 { svg(折线), dots(可点圆点，坐标为百分比) }
|
||||
function buildChart(points) {
|
||||
const vals = points.map((p) => Number(p.value) || 0);
|
||||
const W = 300, H = 100, pad = 12, n = vals.length;
|
||||
let min = Math.min.apply(null, vals);
|
||||
let max = Math.max.apply(null, vals);
|
||||
if (max === min) max = min + 1;
|
||||
const xs = (i) => (n === 1 ? W / 2 : pad + ((W - 2 * pad) * i) / (n - 1));
|
||||
const ys = (v) => H - pad - ((H - 2 * pad) * (v - min)) / (max - min);
|
||||
const pts = vals.map((v, i) => xs(i).toFixed(1) + ',' + ys(v).toFixed(1)).join(' ');
|
||||
const svg =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none">' +
|
||||
'<polyline points="' + pts + '" fill="none" stroke="#73BE9D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>' +
|
||||
'</svg>';
|
||||
const dots = points.map((p, i) => ({
|
||||
xp: Number(((xs(i) / W) * 100).toFixed(2)),
|
||||
yp: Number(((ys(vals[i]) / H) * 100).toFixed(2)),
|
||||
value: vals[i],
|
||||
date: fmtDay(p.occurred_at),
|
||||
note: p.note || '',
|
||||
delta: i > 0 ? Number((vals[i] - vals[i - 1]).toFixed(2)) : null,
|
||||
}));
|
||||
return { svg: 'data:image/svg+xml,' + encodeURIComponent(svg), dots };
|
||||
}
|
||||
|
||||
// 洞察等级 → 图标。alert 用警告号，其余按类别给
|
||||
const INS_ICON = { alert: 'warn', warn: 'warn', info: 'trend' };
|
||||
function mapInsight(i) {
|
||||
return { ...i, icon: i.level === 'info' ? (INS_ICON.info) : INS_ICON.alert };
|
||||
}
|
||||
|
||||
const REC_PAGE = 6;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
pet: {},
|
||||
timeline: [],
|
||||
recPage: 1,
|
||||
recTotal: 0,
|
||||
recHasMore: false,
|
||||
recFilters: REC_FILTERS,
|
||||
recFilterIdx: 0,
|
||||
insights: [],
|
||||
trendSvg: '',
|
||||
trendStats: null,
|
||||
trendDots: [],
|
||||
selDot: null,
|
||||
selIdx: -1,
|
||||
sheetShow: false,
|
||||
sheetType: '',
|
||||
},
|
||||
onLoad() {
|
||||
this._unsub = store.subscribe((pet) => {
|
||||
this.setData({ pet });
|
||||
if (!this._inited) return; // 首次由 onShow 加载
|
||||
this.loadRecords();
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
if (this._unsub) this._unsub();
|
||||
},
|
||||
onShow() {
|
||||
// 时间轴的分组配色要读类型缓存。这页可能是从报告页直接进来的，
|
||||
// 缓存没经过首页/记录页热过，所以自己拉一次（load 内部只会真请求一次）
|
||||
recordTypes.load().then(() => this.setData({ timeline: this.data.timeline })).catch(() => {});
|
||||
store
|
||||
.ready()
|
||||
.then(() => {
|
||||
this._inited = true;
|
||||
this.setData({ pet: store.getPet() });
|
||||
this.loadRecords();
|
||||
})
|
||||
.catch((e) => wx.showToast({ title: e.message || '加载失败', icon: 'none' }));
|
||||
},
|
||||
curFilter() {
|
||||
return this.data.recFilters[this.data.recFilterIdx].key;
|
||||
},
|
||||
// 来自 seg-tabs 的 change 事件
|
||||
onFilterTap(e) {
|
||||
const i = Number(e.detail.index);
|
||||
if (i === this.data.recFilterIdx) return;
|
||||
this.setData({ recFilterIdx: i }, () => this.loadRecords());
|
||||
},
|
||||
// 长按删除一条记录
|
||||
onDeleteRecord(e) {
|
||||
const r = this.data.timeline[e.currentTarget.dataset.index];
|
||||
if (!r || !r.id) return;
|
||||
wx.showModal({
|
||||
title: '删除记录',
|
||||
content: '确定删除「' + r.title + '」？删除后不可恢复。',
|
||||
confirmColor: '#D9534F',
|
||||
success: (res) => {
|
||||
if (!res.confirm) return;
|
||||
api
|
||||
.deleteRecord(r.id)
|
||||
.then(() => {
|
||||
wx.showToast({ title: '已删除', icon: 'success' });
|
||||
this.loadRecords();
|
||||
})
|
||||
.catch((err) => wx.showToast({ title: err.message || '删除失败', icon: 'none' }));
|
||||
},
|
||||
});
|
||||
},
|
||||
// 健康洞察：把散落的记录变成结论。点一条直接跳到对应的记录入口
|
||||
loadInsights() {
|
||||
const id = store.currentPetId();
|
||||
if (!id) return this.setData({ insights: [] });
|
||||
api
|
||||
.petInsights(id)
|
||||
.then((list) => this.setData({ insights: (list || []).map(mapInsight) }))
|
||||
.catch(() => this.setData({ insights: [] }));
|
||||
},
|
||||
onTapInsight(e) {
|
||||
const it = this.data.insights[e.currentTarget.dataset.index];
|
||||
if (it && it.action) this.openSheetType(it.action);
|
||||
},
|
||||
loadRecords() {
|
||||
const id = store.currentPetId();
|
||||
if (!id) return;
|
||||
api
|
||||
.getRecords(id, { page: 1, pageSize: REC_PAGE, type: this.curFilter() })
|
||||
.then((res) => {
|
||||
const list = (res.list || []).map(mapRecord);
|
||||
this.setData({ timeline: list, recPage: 1, recTotal: res.total || 0, recHasMore: list.length < (res.total || 0) });
|
||||
})
|
||||
.catch((e) => toastErr(e));
|
||||
this.loadTrend();
|
||||
this.loadInsights();
|
||||
},
|
||||
loadMoreRecords() {
|
||||
const id = store.currentPetId();
|
||||
if (!id) return;
|
||||
const next = this.data.recPage + 1;
|
||||
api
|
||||
.getRecords(id, { page: next, pageSize: REC_PAGE, type: this.curFilter() })
|
||||
.then((res) => {
|
||||
const merged = this.data.timeline.concat((res.list || []).map(mapRecord));
|
||||
this.setData({ timeline: merged, recPage: next, recTotal: res.total || 0, recHasMore: merged.length < (res.total || 0) });
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
collapseRecords() {
|
||||
this.loadRecords();
|
||||
},
|
||||
loadTrend() {
|
||||
const id = store.currentPetId();
|
||||
if (!id) {
|
||||
this.setData({ trendSvg: '', trendStats: null, trendDots: [], selDot: null, selIdx: -1 });
|
||||
return;
|
||||
}
|
||||
api
|
||||
.weightTrend(id)
|
||||
.then((points) => {
|
||||
points = points || [];
|
||||
if (points.length < 2) {
|
||||
this.setData({ trendSvg: '', trendStats: null, trendDots: [], selDot: null, selIdx: -1 });
|
||||
return;
|
||||
}
|
||||
const vals = points.map((p) => Number(p.value) || 0);
|
||||
const latest = vals[vals.length - 1];
|
||||
const delta = Number((latest - vals[0]).toFixed(2));
|
||||
const chart = buildChart(points);
|
||||
const lastIdx = chart.dots.length - 1;
|
||||
this.setData({
|
||||
trendSvg: chart.svg,
|
||||
trendDots: chart.dots,
|
||||
selDot: chart.dots[lastIdx], // 默认选中最新一次
|
||||
selIdx: lastIdx,
|
||||
trendStats: { latest, delta, count: points.length },
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
onTapPoint(e) {
|
||||
const i = e.currentTarget.dataset.index;
|
||||
this.setData({ selDot: this.data.trendDots[i], selIdx: i });
|
||||
},
|
||||
previewImage(e) {
|
||||
const src = e.currentTarget.dataset.src;
|
||||
if (src) wx.previewImage({ urls: [src], current: src });
|
||||
},
|
||||
openSheet(e) {
|
||||
this.openSheetType(e.currentTarget.dataset.type);
|
||||
},
|
||||
openSheetType(type) {
|
||||
this.setData({ sheetType: type, sheetShow: true });
|
||||
},
|
||||
closeSheet() {
|
||||
this.setData({ sheetShow: false });
|
||||
},
|
||||
onSheetSaved() {
|
||||
this.loadRecords();
|
||||
},
|
||||
onAddPet() {
|
||||
this.openSheetType('addPet');
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return { title: '用肉垫计划记录毛孩子的成长', path: '/pages/record/record' };
|
||||
},
|
||||
onShareTimeline() {
|
||||
return { title: '用肉垫计划记录毛孩子的成长' };
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user