Files
sundynix-pets/pets-fe/pages/report/report.wxml
T
Blizzard b52729dec8 feat(fe): 整站改品牌暖橘竖向淡出渐变,取代独立色块
- page 背景换成顶部品牌橘 → 约半屏褪到米白的竖向淡出,铺全部页面,
  没有色块接缝问题,整屏更一体
- nav-bar 默认改透明 + 深棕字(顶部本身就暖,不再铺奶白毛玻璃);
  去掉 Step4 的 tone 属性和独立 .brand-band
- 带切换条的页面(首页/报告/历史/计划)统一 on-band:chip 半透明白、
  选中实白,在暖底上更清晰

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-31 13:59:05 +08:00

113 lines
6.6 KiB
Plaintext
Raw 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.
<nav-bar title="成长报告"></nav-bar>
<view class="top-bar on-band"><pet-switch show-add="{{false}}"></pet-switch></view>
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view class="page-body tab-nofab">
<view wx:if="{{!pet.id}}" class="no-pet">
<view class="no-pet-ic"><pt-icon name="community" size="{{52}}"></pt-icon></view>
<view class="no-pet-b">还没有毛孩子的档案</view>
<view class="no-pet-p">成长报告和账单都基于记录生成,先建个档开始记吧。</view>
<view class="btn btn-dark" bindtap="onAddPet"><pt-icon name="plus" size="{{30}}"></pt-icon>建一份档案</view>
</view>
<block wx:else>
<!-- 本周概览:一句话小结 + 三个数 + 分享卡片 -->
<view class="card report-card">
<view class="section-head"><view class="sh-title">本周概览</view><view class="tag">{{report.health_status || '稳定成长'}}</view></view>
<view class="rc-text">{{report.summary || '这周还没有足够的记录,多记几笔就有小结了'}}</view>
<view class="stats-grid">
<view class="stat"><text class="stat-b">{{report.tasks_completed || 0}}</text><text class="stat-s">完成任务</text></view>
<view class="stat"><text class="stat-b">{{gainText}}</text><text class="stat-s">kg 变化</text></view>
<view class="stat"><text class="stat-b">{{report.high_risk_count || 0}}</text><text class="stat-s">高风险异常</text></view>
</view>
<view class="btn btn-primary btn-block rc-share" data-type="poster" bindtap="openSheet">
<pt-icon name="share" size="{{30}}"></pt-icon>生成分享卡片
</view>
</view>
<!-- 健康洞察:把散落的记录变成结论。以前埋在历史页,现在是报告页的主角。
点一条跳去记那一类。有洞察才显示这张卡 -->
<view wx:if="{{insights.length}}" class="card">
<view class="section-head"><view class="sh-title">健康洞察</view><view class="tiny">来自你的记录</view></view>
<view wx:for="{{insights}}" wx:key="title" class="ins ins-{{item.level}}" data-index="{{index}}" bindtap="onTapInsight">
<view class="ins-head">
<view class="ins-ic"><pt-icon name="{{item.icon}}" size="{{30}}"></pt-icon></view>
<view class="ins-title">{{item.title}}</view>
<view wx:if="{{item.action}}" class="ins-go"><pt-icon name="next" size="{{26}}"></pt-icon></view>
</view>
<view wx:if="{{item.detail}}" class="ins-detail">{{item.detail}}</view>
<view wx:if="{{item.evidence}}" class="ins-ev">{{item.evidence}}</view>
</view>
</view>
<!-- 体重趋势 -->
<view class="card">
<view class="section-head"><view class="sh-title">体重趋势</view><view class="link" bindtap="goWeight">记一笔</view></view>
<view wx:if="{{trendStats}}" class="trend-stats">最新 {{trendStats.latest}}kg · 较首次 {{trendStats.delta >= 0 ? '+' : ''}}{{trendStats.delta}}kg · 共 {{trendStats.count}} 次</view>
<block wx:if="{{trendSvg}}">
<view class="mini-chart">
<image class="chart-line" mode="scaleToFill" src="{{trendSvg}}"></image>
<view class="dot-layer">
<view wx:for="{{trendDots}}" wx:key="index"
class="dot {{selIdx === index ? 'on' : ''}}"
style="left:{{item.xp}}%;top:{{item.yp}}%"
data-index="{{index}}" bindtap="onTapPoint"></view>
</view>
</view>
<view wx:if="{{selDot}}" class="point-detail">
<view class="pd-main">
<text class="pd-date">{{selDot.date}}</text>
<text class="pd-weight">{{selDot.value}}kg</text>
<text wx:if="{{selDot.delta !== null}}" class="pd-delta {{selDot.delta > 0 ? 'up' : (selDot.delta < 0 ? 'down' : '')}}">{{selDot.delta > 0 ? '+' : ''}}{{selDot.delta}}kg</text>
</view>
<view wx:if="{{selDot.note}}" class="pd-note"><pt-icon name="note" size="{{26}}"></pt-icon> {{selDot.note}}</view>
<view wx:else class="pd-note muted">这次没有填备注</view>
</view>
<view class="chart-hint">点击圆点查看每次记录</view>
</block>
<view wx:else class="empty">先记录几次体重,这里会自动画出趋势曲线</view>
</view>
<!-- 健康摘要:紧凑状态带 + 导出就医摘要 -->
<view class="card">
<view class="section-head"><view class="sh-title">健康摘要</view><view class="link" data-type="vetSummary" bindtap="openSheet">就医摘要</view></view>
<view class="record-row"><text class="bold">疫苗进度</text><text class="muted">{{summary.vaccine_progress || '—'}}</text></view>
<view class="record-row"><text class="bold">驱虫状态</text><text class="muted">{{summary.deworm_status || '—'}}</text></view>
<view class="record-row"><text class="bold">体重趋势</text><text class="muted">{{summary.weight_trend || '—'}}</text></view>
<view class="record-row"><text class="bold">异常记录</text><text class="muted">{{summary.anomaly_count || 0}} 次</text></view>
</view>
<!-- 养宠账单:只给概要,详细录入和流水在花销页(原来这里内嵌了半套花销 UI,
还带个已经断掉的「记一笔」按钮)-->
<view class="card bill-card" bindtap="goExpense">
<view class="section-head"><view class="sh-title">养宠花销</view><view class="link">去记账 </view></view>
<view class="bill-sum">
<view class="bill-total"><text class="bill-cur">¥</text>{{bill.total || 0}}</view>
<view class="bill-sub">本月{{billTop ? '' + billTop.category + '花得最多' : ''}}</view>
</view>
<view wx:if="{{bill.categories.length}}" class="bill-bars">
<view wx:for="{{bill.categories}}" wx:key="category" class="bill-row">
<text class="bill-cat">{{item.category}}</text>
<view class="mini-bar"><view class="mini-bar-fill" style="width:{{item.percent}}%"></view></view>
<text class="bill-amt">¥{{item.amount}}</text>
</view>
</view>
<view wx:else class="empty">这个月还没有记过花销</view>
</view>
<!-- 记录与趋势的完整流水在「全部记录」,报告页只放洞察和趋势 -->
<view class="profile-list">
<view class="profile-row" bindtap="goHistory">
<view class="pr-ic"><pt-icon name="note" size="{{34}}"></pt-icon></view>
<text class="pr-label">全部记录</text>
<text class="pr-val">按类型筛选、翻看历史</text>
<view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view>
</view>
</view>
</block>
</view>
</scroll-view>
<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet"></bottom-sheet>