🍰 蛋糕店拼字活动小程序 - 交互关系图

📱 客户端页面跳转流程

说明:展示小程序端主要页面之间的跳转关系和导航流程
graph TB Start([打开小程序]) --> Check{检查登录状态} Check -->|未登录| Login[登录授权页] Check -->|已登录| Privacy{同意隐私协议?} Privacy -->|未同意| PrivacyPage[隐私协议页] Privacy -->|已同意| StoreList[门店列表页] PrivacyPage -->|同意| StoreList Login --> StoreList StoreList -->|选择门店| StoreHome[门店首页] StoreHome -->|到店自取/外送| ProductList[商品菜单页] StoreHome -->|活动Banner| SpellingActivity[拼字活动主页] StoreHome -->|会员码| MemberCard[会员卡页] ProductList -->|选择商品| ProductDetail[商品详情页] ProductDetail -->|加入购物车| Cart[购物车页] ProductDetail -->|立即购买| OrderConfirm[订单确认页] Cart -->|去结算| OrderConfirm OrderConfirm -->|提交订单| Payment[支付] Payment --> PayResult[支付结果页] PayResult -->|查看订单| OrderDetail[订单详情页] SpellingActivity -->|抽字| DrawResult[抽卡结果页] SpellingActivity -->|我的字卡| MyCards[我的字卡页] SpellingActivity -->|兑换| ExchangeRecords[兑换记录页] TabBar[底部Tab栏] TabBar --> ProductList TabBar --> PointsMall[积分商城] TabBar --> Cart TabBar --> UserCenter[会员中心] PointsMall --> PointsDetail[积分商品详情] PointsDetail --> PointsConfirm[兑换确认页] UserCenter --> Recharge[余额充值页] UserCenter --> Coupons[我的优惠券] UserCenter --> AddressList[收货地址管理] UserCenter --> OrderList[订单列表页] style StoreList fill:#ff7e67,color:#fff style SpellingActivity fill:#ff7e67,color:#fff style PointsMall fill:#52c41a,color:#fff

🎲 拼字活动核心流程

说明:核心营销功能 - 拼字活动的完整参与流程
sequenceDiagram participant U as 用户 participant C as 小程序端 participant S as 后端服务 participant D as 数据库 U->>C: 进入拼字活动页面 C->>S: 获取活动信息 S->>D: 查询活动配置 D-->>S: 返回活动数据 S-->>C: 活动信息+我的字卡 C-->>U: 显示活动页面 U->>C: 点击抽字 C->>S: 请求抽字 S->>S: 检查抽字次数 alt 次数不足 S-->>C: 次数不足 C-->>U: 提示分享获得次数 else 次数充足 S->>S: 执行概率算法 S->>D: 扣除次数+增加字卡 D-->>S: 更新成功 S-->>C: 返回获得的字卡 C-->>U: 显示抽卡动画+结果 end U->>C: 查看集字进度 C->>S: 获取我的字卡 S->>D: 查询用户字卡 D-->>S: 返回字卡列表 S-->>C: 字卡数据 C-->>U: 显示集字进度 alt 已集齐 U->>C: 点击兑换 C->>S: 请求兑换奖励 S->>S: 检查库存 alt 库存充足 S->>D: 扣除字卡+发放奖励 D-->>S: 兑换成功 S-->>C: 兑换成功+奖励信息 C-->>U: 显示成功页面 else 库存不足 S-->>C: 库存不足 C-->>U: 提示手慢了 end end

🛒 购物下单流程

说明:从浏览商品到下单支付的完整流程
sequenceDiagram participant U as 用户 participant C as 小程序端 participant S as 后端服务 participant DB as 数据库 participant WX as 微信支付 U->>C: 选择门店 C->>S: 获取门店商品 S->>DB: 查询商品列表 DB-->>S: 商品数据 S-->>C: 返回商品列表 U->>C: 选择商品+规格 C->>S: 加入购物车 S->>DB: 更新购物车表 DB-->>S: 更新成功 S-->>C: 购物车同步成功 U->>C: 去结算 C->>S: 获取购物车数据 S->>DB: 查询购物车 S->>S: 校验商品状态 DB-->>S: 购物车数据 S-->>C: 返回结算数据 U->>C: 填写收货信息/选择自取 U->>C: 使用优惠券/积分 C->>S: 预计算订单金额 S->>S: 计算费用明细 S-->>C: 返回费用明细 U->>C: 提交订单 C->>S: 创建订单 S->>DB: 插入订单数据 S->>DB: 扣减库存 DB-->>S: 订单创建成功 S-->>C: 返回订单信息 U->>C: 发起支付 C->>S: 请求支付参数 S->>WX: 统一下单 WX-->>S: 返回支付参数 S-->>C: 支付参数 C->>WX: 调起微信支付 U->>WX: 完成支付 WX-->>S: 支付回调 S->>DB: 更新订单状态 WX-->>C: 支付结果 C-->>U: 显示支付结果

🎁 积分商城兑换流程

说明:积分兑换商品的完整流程,支持纯积分和积分+现金混合支付
graph TD Start([进入积分商城]) --> Browse[浏览积分商品] Browse --> SelectGoods[选择商品] SelectGoods --> CheckType{兑换类型} CheckType -->|纯积分| CheckPoints{积分是否足够?} CheckType -->|积分+现金| CheckMix{积分和余额是否足够?} CheckPoints -->|不足| EarnPoints[查看积分获取方式] CheckPoints -->|足够| ConfirmExchange[确认兑换] CheckMix -->|不足| Recharge[充值/赚积分] CheckMix -->|足够| ConfirmExchange ConfirmExchange --> GoodsType{商品类型} GoodsType -->|虚拟商品| DeductPoints[扣除积分] GoodsType -->|实物商品| FillAddress[填写收货地址] FillAddress --> DeductPoints DeductPoints --> AutoGrant{自动发放?} AutoGrant -->|是| GrantCoupon[发放优惠券] AutoGrant -->|否| CreateOrder[创建兑换订单] GrantCoupon --> Success([兑换成功]) CreateOrder --> WaitDeliver[等待发货] WaitDeliver --> Success style ConfirmExchange fill:#ff7e67,color:#fff style Success fill:#52c41a,color:#fff

🖥️ 管理端页面跳转流程

说明:管理后台主要功能模块的导航和跳转关系
graph LR Login[登录页] --> Dashboard[数据概览] Dashboard --> Store[门店管理] Dashboard --> Product[商品管理] Dashboard --> Activity[活动管理] Dashboard --> Points[积分商城] Dashboard --> Order[订单管理] Dashboard --> User[用户管理] Dashboard --> System[系统设置] Dashboard --> Stats[数据统计] Store --> StoreList[门店列表] StoreList --> StoreEdit[新增/编辑门店] Product --> Category[商品分类] Product --> ProductList[商品列表] Product --> Stock[库存管理] ProductList --> ProductEdit[新增/编辑商品] Activity --> Spelling[拼字活动] Activity --> Template[活动模板] Activity --> CustomEdit[可定制化页面编辑器] Spelling --> SpellingEdit[新建/编辑拼字活动] Spelling --> SpellingStats[活动统计] Points --> PointsGoods[积分商品管理] Points --> PointsOrders[兑换记录] PointsGoods --> PointsEdit[新增/编辑积分商品] Order --> OrderList[订单列表] Order --> Verification[核销管理] Order --> Refund[退款管理] OrderList --> OrderDetail[订单详情] User --> UserList[用户列表] User --> MemberLevel[会员等级] User --> Coupon[优惠券管理] UserList --> UserDetail[用户详情] style Activity fill:#ff7e67,color:#fff style CustomEdit fill:#ff7e67,color:#fff

⚙️ 拼字活动配置流程(管理端)

说明:管理员配置拼字活动的完整流程,包含概率控制核心功能
graph TD Start([创建活动]) --> BasicInfo[填写基本信息] BasicInfo --> CardConfig[配置字卡] CardConfig --> AddCard[添加字卡] AddCard --> CardName[设置字卡名称/图片] CardName --> CardRarity[设置稀有度] CardRarity --> ProbConfig[⭐概率配置] ProbConfig --> GlobalProb[设置全局概率] GlobalProb --> CardProb[设置单个字卡权重] CardProb --> TestProb[概率测试工具] TestProb --> ChanceConfig[抽卡机会配置] ChanceConfig --> InitChance[初始赠送次数] InitChance --> DailyChance[每日赠送次数] DailyChance --> ShareChance[分享获得次数] ShareChance --> RewardConfig[奖励配置] RewardConfig --> RewardType[选择奖励类型] RewardType --> RewardStock[设置库存] RewardStock --> RewardLimit[限领规则] RewardLimit --> AntiCheat[防刷设置] AntiCheat --> DeviceLimit[设备限制] DeviceLimit --> IPLimit[IP限制] IPLimit --> ShareVerify[分享验证] ShareVerify --> Preview[预览活动] Preview --> Publish{发布活动} Publish -->|发布| Monitor[监控活动数据] Publish -->|保存草稿| Draft[草稿箱] Monitor --> ViewStats[查看统计] ViewStats --> AdjustProb[调整概率] ViewStats --> AdjustStock[调整库存] style ProbConfig fill:#ff7e67,color:#fff style AntiCheat fill:#faad14,color:#fff style Monitor fill:#52c41a,color:#fff

所有流程图使用 Mermaid 图表渲染

文档生成时间: 2025-12-27 | 版本: v1.0