暖心食享餐饮专题页面操作说明

页面信息

  • 页面名称:吃——暖心食享
  • 路由:/pages/food-benefits/food-benefits
  • 源码:pages/food-benefits/food-benefits.uvue
  • 入口:人才权益页“暖心食享”分类。
  • 当前状态:视觉与本地交互首版已完成,后台专题配置和商户接口待接入。

功能点

功能 当前实现 后续接口目标
顶部主图 展示当前选中图册项的大图,**主图自身支持左右滑动**切换图册项,与下方缩略图双向联动(点缩略图主图滑过去、滑主图缩略图跟着走)。 使用后台返回的 HTTPS 图片 URL,并提供加载失败占位图。
横向图册 体验版使用 6 项重复演示数据验证横向滑动,仅由 2 张图片交替复用;点击或滑动结束后,中心项自动选中、放大并带动画吸附到容器中央。 后台返回图片、名称、排序和启用状态,正式版图片走后台/CDN。
动态菜名 主图上显示当前菜品名称,使用古典艺术行楷字体子集。 正式环境通过完整字体包或 CDN 字体覆盖后台任意名称字符。
专题描述 橙色渐变卡片显示后台返回的专题固定描述,不随图册选择变化。 后台返回专题级纯文本描述,并限制长度及换行数量。
餐饮服务列表 使用 12 条演示商户数据,首批展示 4 条,滚动到底部分批追加;包含首屏/下一页失败重试、加载动画、到底和空列表状态。 接入分类关联商户分页列表及可用状态。
商户详情 点击商户进入 /pages/merchant/merchant,当前同步传递餐饮类型、商户名称、图片、地址和优惠快照。 使用商户或权益 ID 请求真实详情,接口返回后覆盖路由快照。
返回 点击左上角返回按钮回到人才权益页。 无。

操作说明

  1. 在人才权益页点击“暖心食享”进入本页。
  2. 左右滑动顶部主图(或滑动下方缩略图带)浏览菜品图片。
  3. 点击缩略图后,顶部主图、菜名和橙色描述卡同步切换。
  4. 点击下方餐饮商户进入对应权益详情。
  5. 点击左上角返回图标回到人才权益页。

异常处理

场景 页面处理要求
图册为空 展示专题默认图和“暂无图册内容”,隐藏缩略图区域。
图片加载失败 使用统一餐饮占位图,不能出现高度塌陷或黑块。
名称字符不在字体子集 回退系统中文字体;正式发布前接入完整字体。
描述为空 隐藏描述卡或展示后台确认的默认文案。
商户列表为空 展示“暂无相关餐饮服务”的空状态。
首屏加载失败 展示“餐饮服务加载失败”和重新加载,不误显示空状态。
下一页加载失败 保留已加载商户,底部显示“加载失败,点击重试”,重试前不推进页码。
商户已下架 列表显示不可用状态,不允许继续领取或核销。

资源与包体说明

  • 餐饮图不再单独打一份兜底图:接口没配图、图片加载失败、以及本地演示数据统一用 static/common/image-placeholder.png(全站唯一兜底图,24KB),图册/商户/商品/支付/订单相关展示都用它。
  • 完整餐饮素材继续保留在项目外 icon/吃 素材库,正式版由后台/CDN配置,不直接打入小程序代码包。
  • 完整“古典艺术行楷简”字体约 5.35MB,**不放包内**(主包上限 2MB),已放服务器 /data/talent-card/uploads/fonts/gudian-xingkai.ttf(/uploads/fonts/gudian-xingkai.ttf),由 App.uvue 启动时用 uni.loadFontFace({ family:'FoodCalligraphyFull', global:true }) 动态加载;专题页的 .scene-name/.dish-name 全局优先用它,加载失败或缺字回退到包内子集与系统字体。
  • 当前菜名使用约 12KB 的 food-calligraphy-subset.ttf 子集,只用于设计稿演示字符。
  • 后台动态名称的完整字体已走"服务器 + 动态加载"方案;上线前仍需验证字体授权、首次加载耗时(5.35MB)与失败回退,必要时换 WOFF/子集。