承接开篇导语

上一篇完整拆解商超小程序 B 端商家后台全套产品设计，围绕门店运营侧权限管控、商品库存、订单履约、营销配置、数据表与接口架构做了完整落地复盘。本篇切换至 C 端消费者视角，完整梳理普通用户从进入小程序、浏览商品、选择规格、加入购物车、提交订单、微信支付、门店自提 / 同城配送到售后退款、商品评价、票据申请的完整消费闭环，同时逐条拆解 C 端页面操作与 B 端后台数据双向实时联动的完整规则、交互约束、异常兜底方案。

完整展示一套商用小程序从商家管理端到消费者端全链路产品设计、落地思考，不管是自学接单的独立开发者，还是面试需要完整电商项目案例的求职者，都可以直接参考复用整套设计思路与业务约束方案。

一、C 端整体产品定位、目标用户与全局通用约束

【本段核心痛点】

市面绝大多数本地零售小程序流程繁琐、中老年用户操作门槛高，配送自提规则混杂无清晰区分、库存校验滞后容易超卖、后台修改数据前端缓存不刷新、订单状态更新存在延迟、售后退款逻辑混乱。本次 C 端针对线下社区商超定制轻量化设计，拆分配送、自提两套独立履约链路，简化下单步骤，搭建多层数据校验、实时同步机制，规避各类线上体验问题。

1.1 C 端产品核心定位与目标用户

本小程序面向社区线下商超周边常住居民，分为两类核心使用人群：

1. 年轻上班族：日常无暇到店，线上下单配送到家，追求快速结算；
2. 中老年居民：习惯到店自提，页面操作逻辑尽量简单，减少复杂跳转。

三大核心设计目标：

1. 操作短平快：首页至支付最多四层页面跳转，删减多余弹窗与表单；
2. 双履约清晰隔离：配送、自提地址、费用、核销规则完全区分，不混淆；
3. 全数据实时同步：后台修改商品、活动、配送规则，用户端无需手动刷新页面。

产品属性为本地即时零售小程序，不支持全国快递，所有商品仅限门店配送、线下自提，全部交互逻辑围绕本地短时效购物场景搭建。

1.2 全局统一产品规则（前后端对齐标准）

1. 登录与数据隔离机制 用户打开小程序自动触发微信授权登录，调用 user_login 接口，以 openid 作为用户唯一标识；未登录仅可浏览商品，无法加购、下单、领取优惠券。未登录时购物车存储本地缓存，登录后自动同步云端 cart 集合。地址、订单、优惠券等私有数据全部绑定 openid，用户仅可查看自身信息，实现数据隔离。

2. 页面实时同步机制 所有一级页面、弹窗触发 onShow 生命周期时，自动重新请求接口拉取商品、订单、优惠券最新数据，后台修改价格、库存、活动配置后前端即时更新，无长期静态缓存。

3. 三层库存拦截校验 商品详情、购物车、订单结算三重库存校验，任意 SKU 缺货直接阻断下单操作，从源头避免超卖问题。

4. 定时任务同步规则 系统云定时任务自动执行超时取消订单、优惠券过期、自动确认收货逻辑，任务执行后用户端列表同步刷新状态，无需人工操作。

5. 金额与图片统一规范 价格、配送费统一保留两位小数；商品、评价、轮播图片全部存储微信云存储 fileID，不引用外部网络图片。

6. 分页与交互规范 商品、订单、评价列表默认每页 20 条，上拉加载更多；删除、取消等高危操作弹出二次确认弹窗；所有接口请求展示 Loading，网络异常给出标准化文字提示。

二、C 端五大核心页面完整产品设计

小程序底部固定导航：首页 → 商品分类 → 购物车 → 我的订单 → 个人中心，完整覆盖用户全消费流程。

2.1 一级页面：首页（流量曝光入口）

页面自上而下分层排布，全部数据实时读取 store_config、banners、seckill、notices 数据表：

1. 顶部轮 Banner：读取后台配置轮播图，支持左右滑动，点击跳转商品或公告页面；后台更新图片前端实时同步。
2. 门店公告：自动筛选启用、未过期通知，横向滚动展示标题，点击查看完整图文。
3. 快捷入口：优惠券领取、秒杀专区两大功能快捷按钮。
4. 秒杀专区：展示当前活动商品，标注秒杀价、原价、单人限购、剩余库存；未开始 / 已结束活动自动隐藏。
5. 热门商品推荐：标记 isHot 商品卡片，卡片附带快速加购按钮。
6. 门店信息栏：展示门店名称、电话、营业时间，支持一键导航到店。

联动逻辑：页面 onShow 批量请求接口合并数据，减少加载耗时；断网保留历史缓存图文，给出轻量异常提示。

2.2 一级页面：商品分类

采用左右分栏商超标准布局： 左侧分类导航：读取 categories 表启用数据，按 sortOrder 升序展示，停用分类自动隐藏，点击切换右侧商品列表。 右侧商品列表：顶部支持商品名称模糊搜索；商品卡片展示图片、名称、售价、库存，缺货 SKU 整体置灰；卡片自带快捷加购按钮。

兜底规则：分类无在售商品时展示空白提示；分类条目过多支持独立滚动，不挤压商品区域。

2.3 一级页面：商品详情（下单决策核心页）

页面分层结构：顶部多图轮播 → 价格区域 → SKU 选择弹窗 → 商品富文本介绍 → 评价预览 → 底部操作栏 【踩坑前置：初期仅固定单规格展示，无法切换尺寸品类，重构底部弹窗选择器，切换规格实时更新价格与库存】

1. 多图轮播：支持图片点击放大预览，无素材展示默认占位图。
2. 价格区：存在秒杀展示划线原价 + 活动低价，标注单人限购数量。
3. SKU 弹窗：展示所有规格名称、单价、实时库存；库存为 0 规格置灰不可选，未选中规格时加购 / 下单按钮禁用。
4. 商品详情：图文混排展示储存、规格说明，长文本独立滚动。
5. 评价板块：展示 3 条最新评价，提供全部 / 好评 / 中评 / 差评 / 有图筛选入口。
6. 底部操作：收藏、加入购物车、立即购买。

联动逻辑：收藏操作同步写入 favorites 表；立即购买跳过购物车，直达订单确认页，简化下单链路。

2.4 一级页面：购物车

统一存放用户选购商品，支持单选、全选、修改数量、删除单品：

1. 购物条目：商品图、SKU 规格、单价、购买数量、单选框、删除按钮；数量最低 1，上限受单人限购、实时库存双重限制。
2. 失效商品：下架、SKU 售罄条目自动置灰，无法勾选结算。
3. 底部汇总栏：展示选中商品总价、优惠券入口、去结算按钮。

数据规则：登录后以云端 cart 集合为唯一数据源，更换设备登录购物数据互通。

2.5 一级页面：订单确认页（双履约核心差异点）

【本段核心设计亮点：单页面 Tab 切换，区分配送、自提两套下单逻辑】

1. 地址模块 同城配送：读取用户默认收货地址，无地址弹窗引导新增； 门店自提：固定展示门店地址，无需填写收货信息。
2. 配送方式 Tab 切换，切换后实时重算实付金额、配送费用。
3. 费用板块：商品总价、配送费、优惠券抵扣实时联动计算。
4. 订单备注：可选填写配送需求，字符长度限制。
5. 提交订单前置校验：批量核验所有 SKU 实时库存；配送模式不满足起送门槛时按钮禁用。

下单联动：校验通过生成 pending 待支付订单，自提单分配 6 位唯一核销码；调用 pay_order 唤起微信支付；支付成功后 pay_callback 异步回调更新订单、库存、优惠券状态。

2.6 一级页面：我的订单

顶部 Tab 标签：全部 / 待支付 / 待备货 / 配送中 / 待自提 / 已完成 / 已取消 / 退款中 / 已退款，状态枚举与后台完全统一。 单订单卡片展示订单号、下单时间、履约方式、实付金额、当前状态；不同状态匹配专属操作按钮： 待支付：去支付、取消订单（取消释放库存，退回优惠券）； 配送中 / 待自提：申请退款； 已完成：提交评价、申请发票； 退款中：可撤销未审核退款。

订单详情展示完整商品清单、支付时间、自提码、全状态变更日志，售后可完整溯源。

2.7 一级页面：个人中心

顶部展示微信头像昵称，下方功能入口：地址管理、我的优惠券、商品收藏、我的评价、发票申请。

1. 地址管理：新增、编辑、删除地址，仅允许一条默认地址。
2. 优惠券：Tab 区分未使用 / 已使用 / 已过期，未使用券结算页可抵扣。
3. 收藏、评价、发票：仅展示当前登录用户私有数据，隔离其他用户信息。

三、C 端与 B 端全链路双向联动逻辑

1. 商品联动 后台新增、编辑、下架商品 → products、skus 数据同步更新；首页、分类、详情、购物车页面 onShow 自动刷新，下架商品禁止结算。
2. 订单履约联动 用户支付成功，订单改为 paid 状态，扣减 SKU 库存，优惠券标记已使用，后台新增待备货单据； 后台标记备货、配送、核销完成，用户端订单同步更新状态。
3. 退款联动 未履约订单申请退款，系统自动处理；配送 / 已完成订单流入后台人工审核；后台同意、拒绝退款，用户端同步更新退款单据状态。
4. 营销联动 后台新增、停用优惠券、秒杀活动，用户端首页、结算页实时更新；定时任务自动标记过期优惠券。
5. 门店配置联动 后台修改配送费、起送价、自提 / 配送开关，订单确认页金额、履约模式实时切换。

四、C 端配套数据表与接口分层

4.1 用户侧核心数据表

users 用户基础信息、addresses 地址、cart 购物车、favorites 收藏、user_coupons 用户领券记录、orders 订单主表、order_logs 订单日志、refunds 退款、reviews 评价、invoices 发票申请。 所有数据通过 openid 绑定用户，实现数据隔离。

4.2 C 端云函数分层

1. 用户登录：user_login、get_user_info、get_phone_number
2. 地址管理：add_address、update_address、delete_address、get_address
3. 商品浏览：get_categories、get_product_detail、get_product_reviews
4. 购物收藏：add_favorites、delete_favorites、get_cart、add_cart、update_cart、delete_cart
5. 订单支付核心：create_order、pay_order、pay_callback、cancel_order
6. 售后评价：apply_refund、cancel_refund、add_review、get_reviewed_orders
7. 优惠券 & 发票：receive_coupon、get_user_coupons、apply_invoice、cancel_invoice
8. 公共配置：get_notices、get_store_config、get_product_seckill

统一返回状态码：200 成功 / 400 参数错误 / 401 未登录无权限 / 500 服务异常

五、C 端产品设计难点复盘

对比前期自研个人管理工具，这套商用小程序 C 端所有设计方案均经过线下门店真实场景反复测试迭代，沉淀出适配实体门店运营的标准化设计思路。

1. 双履约模式兼容：同一页面承载配送、自提两套地址、费用、核销逻辑，区分本地零售小程序核心差异化功能。
2. SKU 多层库存校验：三级拦截机制，从根源解决生鲜多规格超卖问题。
3. 微信支付异步回调：不依赖前端轮询，依靠服务端回调同步订单状态，用户关闭小程序数据也不会错乱。
4. 自提核销闭环：全局 6 位唯一核销码，线上订单线下门店扫码核验，打通线上线下履约流程。
5. 定时任务自动化：超时取消、优惠券过期、自动确认收货全部系统自动执行，降低门店人工运营成本。

六、本篇小结

本文完整拆解本地商超小程序 C 端消费者侧全套产品设计，覆盖浏览、选购、下单、支付、履约、售后完整消费链路，详细梳理 C 端与商家后台双向数据同步机制。对比 B 端后台侧重权限、库存、营收管控，C 端设计核心围绕用户极简操作体验，前后端共用一套数据库与云函数，形成完整本地零售商用闭环。 全文基于真实商单落地复盘，无网络通用模板，可直接作为面试完整项目案例。

整套系列完整六篇连载目录：

1. 第一篇：B 端商家后台完整产品设计思路（权限体系、全模块需求、数据表、接口规划）
2. 本篇：C 端用户端完整产品设计思路（购物全链路、双端联动规则）
3. 第三篇：小程序后台实拍图 & 业务流程逻辑图汇总
4. 第四篇：后台开发踩坑复盘（商品、营销、权限配置类 Bug）
5. 第五篇：用户端 & 后台联动踩坑上篇（库存、支付、订单同步问题）
6. 第六篇：用户端 & 后台联动踩坑下篇（自提核销、退款、定时任务异常）
7. 第七篇：小程序 PC 管理端 Demo 完整开发成果展示
8. 第八篇：本地商超小程序全项目开发历程完整复盘总结

下一篇汇总整套小程序后台页面实拍、全业务流程逻辑图，图文直观展示系统架构与数据流转，方便同类门店小程序开发参考复用，欢迎持续关注连载。