🍰 蛋糕店拼字活动小程序 - 交互关系图
📱 客户端页面跳转流程
说明:展示小程序端主要页面之间的跳转关系和导航流程
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