sundynix-pets/pets-fe/pages/report/report.js

const store = require('../../utils/store.js');
const api = require('../../utils/api.js');
const { syncTabBar } = require('../../utils/tabbar.js');

function fmtDay(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.getMonth() + 1 + '月' + d.getDate() + '日';
}

// 体重点 → 趋势图。返回 { svg(折线 data-uri), 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/warn 用警告号，info 用趋势
function mapInsight(i) {
  return { ...i, icon: i.level === 'info' ? 'trend' : 'warn' };
}

Page({
  data: {
    pet: {},
    report: null,
    gainText: '+0.0',
    insights: [],
    trendSvg: '',
    trendStats: null,
    trendDots: [],
    selDot: null,
    selIdx: -1,
    summary: null,
    bill: null,
    billTop: null,
    sheetShow: false,
    sheetType: '',
  },
  onLoad() {
    this._unsub = store.subscribe((pet) => {
      this.setData({ pet });
      if (!this._inited) return;
      this.loadData();
    });
  },
  onUnload() {
    if (this._unsub) this._unsub();
  },
  onShow() {
    syncTabBar(this);
    store
      .ready()
      .then(() => {
        this._inited = true;
        this.setData({ pet: store.getPet() });
        this.loadData();
      })
      .catch((e) => wx.showToast({ title: e.message || '加载失败', icon: 'none' }));
  },
  loadData() {
    const id = store.currentPetId();
    if (!id) return;
    api
      .weeklyReport(id)
      .then((report) => {
        const g = (report && report.weight_gain) || 0;
        this.setData({ report, gainText: (g >= 0 ? '+' : '') + g.toFixed(1) });
      })
      .catch(() => {});
    api
      .petInsights(id)
      .then((list) => this.setData({ insights: (list || []).map(mapInsight) }))
      .catch(() => this.setData({ insights: [] }));
    api
      .healthSummary(id)
      .then((summary) => this.setData({ summary }))
      .catch(() => {});
    // 账单只在报告页取一个概要，详细录入和流水在花销页
    api
      .getBill(id, 'month')
      .then((bill) => {
        const cats = (bill && bill.categories) || [];
        this.setData({ bill, billTop: cats.length ? cats[0] : null });
      })
      .catch(() => {});
    this.loadTrend(id);
  },
  loadTrend(id) {
    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 last = chart.dots.length - 1;
        this.setData({
          trendSvg: chart.svg,
          trendDots: chart.dots,
          selDot: chart.dots[last], // 默认选中最新一次
          selIdx: last,
          trendStats: { latest, delta, count: points.length },
        });
      })
      .catch(() => {});
  },
  onTapPoint(e) {
    const i = e.currentTarget.dataset.index;
    this.setData({ selDot: this.data.trendDots[i], selIdx: i });
  },
  // 点一条洞察，跳到对应类型的记录入口（洞察带 action = 记录类型 code）
  onTapInsight(e) {
    const it = this.data.insights[e.currentTarget.dataset.index];
    if (it && it.action) wx.navigateTo({ url: '/pages/addrecord/addrecord?type=' + it.action });
  },
  // 体重趋势的「记一笔」直接去体重记录页（原来开的 weight 弹层已经搬成独立页）
  goWeight() {
    wx.navigateTo({ url: '/pages/addrecord/addrecord?type=weight' });
  },
  goExpense() {
    wx.navigateTo({ url: '/pages/expense/expense' });
  },
  goHistory() {
    wx.navigateTo({ url: '/pages/history/history' });
  },
  openSheet(e) {
    this.setData({ sheetType: e.currentTarget.dataset.type, sheetShow: true });
  },
  closeSheet() {
    this.setData({ sheetShow: false });
  },
  onAddPet() {
    wx.navigateTo({ url: '/pages/petform/petform' });
  },
  onShareAppMessage() {
    const n = (this.data.pet && this.data.pet.name) || '我家毛孩子';
    return { title: `${n} 的成长报告`, path: '/pages/report/report' };
  },
  onShareTimeline() {
    const n = (this.data.pet && this.data.pet.name) || '我家毛孩子';
    return { title: `${n} 的成长报告` };
  },
});