Files
Blizzard 7abcc0dd2d refactor(fe): 报告页重构成数据看板,历史页降级成「全部记录」
## 之前报告页的问题
它是个顶级 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>
2026-07-30 15:03:47 +08:00

150 lines
4.8 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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: '用肉垫计划记录毛孩子的成长' };
},
});