参考 FastAdmin「youyimember 多门店会员管理系统」,面向单门店场景重新设计:裁剪多门店/钱包提现/预约等能力, 聚焦储值卡 · 计次卡 · 期限卡 + 积分 + 优惠券 + 收银核销六大主线。含商家管理后台(桌面 1440)与会员 H5(390×844)两端,共 16 屏。
核销码/扫码枪识别 → 点项目 → 抵扣 → 结账,四步完成;高频动作都有一键入口。
充值、消费、划次、积分全部进统一台账,余额可追溯到每一笔流水。
卡种、充值套餐(充X送Y)、优惠券全部后台配置,无需改代码。
会员 H5 按小程序习惯设计,后续平移 uniapp/微信小程序零改稿。
品牌展示 + 账号登录,双演示账号。
打开设计稿 →经营统计、趋势图、卡构成、最新流水。
打开设计稿 →识别会员、项目点选、券/积分/卡抵扣、回单弹窗。
打开设计稿 →搜索筛选、等级标签、新增会员弹窗。
打开设计稿 →档案、卡包(开卡/充值/调整)、券、流水、三个弹窗。
打开设计稿 →三类卡种卡片、编辑抽屉、充值套餐、消费项目。
打开设计稿 →券类型、发放弹窗、发放与核销记录。
打开设计稿 →四类台账、筛选、合计、导出 CSV。
打开设计稿 →店铺信息、积分规则、店员与角色权限。
打开设计稿 →手机号 + 密码,初始密码引导。
打开设计稿 →汇总悬浮卡、卡横滑、快捷宫格。
打开设计稿 →大卡面、充值套餐、本卡流水。
打开设计稿 →套餐选择、模拟支付、到账浮层。
打开设计稿 →票券样式,可用/已用/过期三态。
打开设计稿 →二维码+数字码,供商家双通道识别。
打开设计稿 →消费/充值/积分,按日分组对账。
打开设计稿 →纯静态 HTML/CSS/JS 交互设计稿,无后端与数据库;所有数据为演示示意。交互演示包括:弹窗(开卡/充值/发券/结账回单)、抽屉(编辑卡种)、标签页切换、收银项目点选。
按《设计方案.md》实施:Node.js + SQLite 单机版起步(零依赖、双击即跑),接口按 RESTful 设计,前端可平移 uniapp 打包微信小程序;微信支付在「在线充值」标注位接入。
H5 页右侧为该屏交互要点;后台页脚浮标可返回本总览;所有「演示原型」徽标处为可点击的示意交互。
① 积分比例默认 1元=1分、100分抵1元;② 券与积分可叠加,先券后分后卡;③ 会员初始密码策略;④ 是否需要预约模块(本期不做)。