7abcc0dd2d
## 之前报告页的问题
它是个顶级 tab,却只有四张薄卡,而真正的分析全被埋起来:
- 养宠账单里「记一笔」开 cost 弹层 —— 那分支上一轮随记录表单搬走了,
点了开空弹层,是个断按钮
- 养宠账单是我新建花销页的一个残缺子集,重复
- 后端有 6 条洞察 + 体重曲线,全在「历史页」,报告页只用一行链过去
- 健康摘要四行手拼字符串,很薄
## 报告 = 数据看板
把埋在历史页的分析提上来,报告页成为真正「看数据」的地方:
本周概览 周报小结 + 完成/体重变化/高风险三个数 + 生成分享卡片
健康洞察 6 条洞察直接铺在报告页(按 alert>warn>info 上色),
点一条跳去记那一类。这是看板的主角
体重趋势 把那张 SVG 曲线图提上来(点圆点看每次记录)
健康摘要 疫苗/驱虫/体重/异常四行 + 导出就医摘要
养宠花销 只给「本月 ¥X + top 类别 + 分类条」概要,点整卡进花销页,
不再内嵌半套花销 UI,断掉的「记一笔」删了
全部记录 一行入口进历史页
## 历史页降级成「全部记录」
洞察和体重曲线搬走了,历史页只留「时间轴流水 + 类型筛选」——
分工清晰:报告=看分析,全部记录=翻流水。nav 标题改成「全部记录」,
去掉不再用的 bottom-sheet / fab / seg-tabs 之外的东西。
体重曲线的「记一笔」原来开 weight 弹层(已删),改成跳
addrecord?type=weight;洞察点击也从开弹层改成跳 addrecord。
## 顺手
报告页去掉了 Pro 会员占位卡(支付未接入,就是个营销占位),
接入支付时再加回来。
## 验证(预生产库实跑)
周报 需要关注 / 完成0 / 高风险1,小结文案对
洞察 1 条(食便相关),带 level=warn + action=food + 依据
体重趋势 字段验证只有 1 个点 → 曲线走空态「先记录几次」
健康摘要 疫苗 0/3 即将到期、驱虫下次日期、体重稳定增长、异常 1 次
账单 本月 ¥188、top 医疗、2 个类别
5 个接口全部返回真数据
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
150 lines
4.8 KiB
JavaScript
150 lines
4.8 KiB
JavaScript
const store = require('../../utils/store.js');
|
||
const api = require('../../utils/api.js');
|
||
const { toastErr } = require('../../utils/ui.js');
|
||
const recordTypes = require('../../utils/recordTypes.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→组 映射就够
|
||
function toneOf(type) {
|
||
const t = recordTypes.get(type);
|
||
return (t && t.tone) || 'tone-1';
|
||
}
|
||
function mapRecord(r) {
|
||
return {
|
||
id: r.id,
|
||
// 图标按 type 取(可靠);老数据 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 || '',
|
||
};
|
||
}
|
||
|
||
// 时间轴类型筛选。常用的一组,不是全部 24 种——seg-tabs 放满会挤成一条难点的横条
|
||
const REC_FILTERS = [
|
||
{ key: '', label: '全部' },
|
||
{ key: 'weight', label: '体重' },
|
||
{ key: 'poop', label: '排便' },
|
||
{ key: 'food', label: '饮食' },
|
||
{ key: 'symptom', label: '异常' },
|
||
{ key: 'vaccine', label: '疫苗' },
|
||
{ key: 'cost', label: '记账' },
|
||
{ key: 'photo', label: '照片' },
|
||
];
|
||
|
||
const REC_PAGE = 8;
|
||
|
||
Page({
|
||
data: {
|
||
pet: {},
|
||
timeline: [],
|
||
recPage: 1,
|
||
recTotal: 0,
|
||
recHasMore: false,
|
||
recFilters: REC_FILTERS,
|
||
recFilterIdx: 0,
|
||
},
|
||
onLoad() {
|
||
this._unsub = store.subscribe((pet) => {
|
||
this.setData({ pet });
|
||
if (!this._inited) return;
|
||
this.loadRecords();
|
||
});
|
||
},
|
||
onUnload() {
|
||
if (this._unsub) this._unsub();
|
||
},
|
||
onShow() {
|
||
// 分组配色要读类型缓存。这页可能直接从报告页进来,缓存没经过首页热过,
|
||
// 自己拉一次(load 内部只真请求一次),拉完刷新已有列表的配色
|
||
recordTypes.load().then(() => this.setData({ timeline: this.data.timeline.map((t) => ({ ...t, tone: toneOf(t.type) })) })).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;
|
||
},
|
||
onFilterTap(e) {
|
||
const i = Number(e.detail.index);
|
||
if (i === this.data.recFilterIdx) return;
|
||
this.setData({ recFilterIdx: i }, () => this.loadRecords());
|
||
},
|
||
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));
|
||
},
|
||
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();
|
||
},
|
||
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' }));
|
||
},
|
||
});
|
||
},
|
||
previewImage(e) {
|
||
const src = e.currentTarget.dataset.src;
|
||
if (src) wx.previewImage({ urls: [src], current: src });
|
||
},
|
||
onAddPet() {
|
||
wx.navigateTo({ url: '/pages/petform/petform' });
|
||
},
|
||
onShareAppMessage() {
|
||
return { title: '用肉垫计划记录毛孩子的成长', path: '/pages/record/record' };
|
||
},
|
||
onShareTimeline() {
|
||
return { title: '用肉垫计划记录毛孩子的成长' };
|
||
},
|
||
});
|