前台页面 × 后台配置联动说明

基于昨晚版本原型,把 App 端每个页面、按钮、展示字段与后台配置页面关联在同一个 HTML 里。左侧看用户看到什么,右侧看运营怎么配置、研发从哪里取值、触发逻辑是什么。

查看前台精修版 查看昨晚原版

01 勋章墙页面

用户查看五维勋章收集进度、分类 Tab、已解锁/未解锁/即将达成状态。

前台真实页面

这里直接嵌入前台原型文件,和单独打开的页面保持一致。

后台配置与说明

“规则”按钮后台:勋章配置

点击后展示当前 Tab 下所有等级门槛、勋章名称、设计元素、达成条件。内容来自后台勋章列表,不在 App 写死。

配置字段说明
badge_dimension里程/时长/天数/会员/低碳
threshold_value门槛值,如 500
threshold_unitkm/min/day/week/order/kg
badge_name如“破风骑士”
已获得勋章“分享”按钮后台:弹窗与海报

仅已获得勋章展示分享入口。点击后生成该勋章的分享海报,海报字段包含用户头像、勋章名称、获得日期、核心数据、趣味类比和邀请二维码。

展示条件:badge_status = earned
点击动作:进入分享海报模板,传入 badge_id、earned_at、user_id
“去骑行”按钮跳转:首页扫码

只在进度达到后台配置的“即将达成比例”时出现,建议默认 80%。点击后跳转扫码骑车或首页。

即将达成 = current_value / target_value ≥ near_complete_ratio
示例:472 / 500 = 94.4%,显示“去骑行”
收集度与会员徽章后台:会员/勋章配置

收集度由已获得勋章数除以启用勋章总数;会员徽章读取用户当前会员等级,等级来自累计订单。

02 低碳账户页面

展示累计减碳、碳等级、可用碳积分、低碳成就和兑换入口。

前台真实页面

这里直接嵌入前台原型文件,和单独打开的页面保持一致。

后台配置与说明

“明细”按钮后台:埋点监控

展示用户碳积分流水,包括骑行订单、减碳克数、会员系数、最终积分、兑换扣减和规则版本。

“兑换”按钮后台:兑换商城

按钮是否可点由奖品库存、每日限兑次数、用户可用积分、会员可见范围共同决定。

配置字段说明
reward_cost_points兑换所需积分,如 200
daily_exchange_limit每日限兑次数,默认 1
member_visibility全部/黄金/黑钻可见
stock库存为 0 时置灰
“相当于种植 X 棵大树”后台:碳规则配置

树木换算必须由后台配置,默认口径为 1 棵树 = 0.5kg CO₂ / 天。

树木等效数量 = 累计减碳量 kg ÷ 单棵树固碳量 kg
示例:12.8kg ÷ 0.5kg/棵/天 = 25.6 棵

04 社交分享海报

用户点击“炫耀一下”后生成可保存/分享的邀请海报。

前台真实页面

这里直接嵌入前台原型文件,和单独打开的页面保持一致。

后台配置与说明

“保存”按钮前端生成图片

将当前海报 DOM/Canvas 生成图片。后台配置海报模板、背景、字段,不参与保存动作本身。

邀请二维码后台:海报配置

二维码来源可配置为邀请注册链接、App 下载链接、活动落地页。需携带 invite_user_id 方便裂变归因。

核心数据与趣味类比后台:碳规则配置
字段配置来源
累计公里用户骑行聚合数据
减碳kgcarbon_total_kg
操场圈数distance_km ÷ 0.4km
鸡腿数量calorie_total ÷ 300kcal

05 骑行结束联动页

用户还车完成后展示行程、碳积分、新勋章、会员升级进度。

前台真实页面

这里直接嵌入前台原型文件,和单独打开的页面保持一致。

后台配置与说明

“去兑换”按钮后台:兑换商城

跳转低碳账户兑换区。按钮展示条件:本次获得碳积分 > 0 且至少有一个可兑换奖品上架。

“客服”按钮订单客服

关联当前 ride_order_id,进入费用申诉/行程问题流程。后台埋点记录入口来源为 ride_complete。

本次减碳与积分后台:碳规则配置
本次减碳 kg = 本次公里 × 每公里减碳系数
本次碳积分 = 本次减碳克数 × 会员系数
会员进度后台:勋章配置/会员规则

读取累计订单数,展示当前等级和下一等级所需订单。跨过 10/20/30 单时同步触发会员勋章弹窗。

06 会员打通页面

展示白银/黄金/黑钻升级路径、订单进度、权益联动和碳积分加成。

前台真实页面

这里直接嵌入前台原型文件,和单独打开的页面保持一致。

后台配置与说明

“规则”按钮后台:勋章配置

展示会员等级门槛、对应会员勋章、是否附加权益。当前规则:满 10 单白银,20 单黄金,30 单黑钻。

“去骑行”按钮跳转:首页扫码

当距离下一等级小于后台配置阈值时强化展示,例如还差 5 单以内显示冲刺文案。

黑钻 1.2 倍碳积分后台:碳规则配置
普通/白银/黄金系数 = 1.0
黑钻会员系数 = 1.2
本次积分 = 减碳克数 × member_multiplier