小程序门店页与到店券
门店页是顾客到店前后最常看的页面:门店信息、节气推荐、招牌锅底、到店券、导航与电话。本页给出 Vue 版样板,小程序端按同一结构用小程序样式包实现。
依赖主系统
门店信息、菜品、到店券的数据与核销能力由主系统提供,样板中标「依赖主系统开发」的部分在接口就绪前使用演示数据。点餐收银不自建,接第三方餐饮收银;价格以门店公示为准,页面不展示编造价格。
预览
手机预览 · 宽 390
页面结构
| 区块 | 组件 | 规则 |
|---|---|---|
| 头图 | 门店实景或 AI 效果图 | 下方 1/4 留暗区放卡片 |
| 门店卡 | 店名、标签、地址、时间、JssEndorseBar 紧凑版 | 背书紧挨门店信息 |
| 节气推荐 | JssSolarCard | 话术只写食养与节令 |
| 招牌锅底 | JssDishCard | 价格不传时显示「门店定价」 |
| 到店券 | JssCoupon / JssEmpty | 券额由活动配置返回 |
| 底栏 | 导航、电话、领券 | 按钮高度 52px |
事件
| 事件 | 说明 |
|---|---|
navigate | 点导航,小程序端调用 wx.openLocation |
call | 点电话,小程序端调用 wx.makePhoneCall |
use-coupon | 点「去使用」,进入核销码页 |
add-dish | 点菜品「+」,跳转扫码点餐(第三方收银) |
源码
StorePage.vue
