叮咚企福 · 前端（C端小程序）
叮咚买菜企业福利商城 C 端微信小程序的产品设计与交互原型。
面向企业员工（25-45 岁白领）和 HR，提供福利商品浏览、积分兑换、快速配送的一站式体验。
项目信息
项目类型：微信小程序 / C 端产品设计
项目阶段：PRD v3.5 + 可交互原型
我的角色：需求梳理、功能设计、交互原型输出
核心能力：C 端产品设计、履约流程、支付设计、地理围栏匹配
技术栈：微信小程序 WXML/WXSS/JS
项目背景
叮咚买菜大客户销售部面临的核心痛点：人工效率低、跨系统割裂、无法规模化服务企业客户。C 端需要让企业员工能自助完成福利兑换，减少人工介入。
核心目标：丰富的商品选择 → 便捷的兑换体验 → 30 分钟达或物流配送 → 企业统一管理福利预算。
C 端功能架构
- •首页：Banner 轮播、推荐商品、分类入口、福利余额展示、消息中心
- •商品浏览：多级分类、关键词搜索+价格/销量筛选、商品详情（图片轮播、规格选择、库存状态）
- •购物车：加入/修改/删除、实时小计、全选/多选结算、失效商品置灰
- •下单：商品清单确认、地址选择、配送时间选择、发票信息、订单备注
- •支付：纯积分 / 微信支付 / 混合支付（积分不足自动补差）
- •订单：Tab 切换（全部/待付款/待发货/待收货/已完成）、取消/确认收货/再次购买
- •地址管理：多地址、标签（公司/家）、地图选点、默认地址、自动匹配前置仓
- •售后服务：仅退款/退货退款/换货、凭证上传、进度查询
- •帮助中心：FAQ 分类、关键词搜索、在线客服
- •个人中心：积分明细（余额/记录/有效期）、订单入口、消息设置
核心设计亮点
- •地理围栏履约匹配：用户新增/编辑地址时获取经纬度，系统自动匹配最近前置仓，判断围栏范围，决定履约方式（30 分钟达 vs 物流配送），前端实时展示配送时效
- •积分预扣机制：支付前锁定积分 → 支付成功确认扣减 → 失败自动释放，解决并发场景积分一致性问题
- •混合支付拆单：积分不足自动补差现金，退款按比例原路返回
- •微信订阅消息：订单支付、发货、签收、积分到账/到期等 6 类消息推送，失败自动重试 + 降级站内消息
- •智能履约路由：根据收货地址自动匹配前置仓或中心仓，前端实时展示配送方式与预计时效
原型覆盖
原型完整模拟了微信小程序的页面结构和交互流程，覆盖首页、分类浏览、商品详情弹窗、购物车、个人中心、账号关联等全部 C 端页面，可在手机框中直接操作体验。
项目价值
这个项目让我系统练习了 C 端电商产品的设计能力：从用户场景出发设计页面结构，处理复杂支付链路和履约匹配逻辑，再用可交互原型验证体验。
技术栈
微信小程序C端产品设计交互原型地理围栏履约积分支付地址匹配订阅消息
9:41
5G
📱 可在手机框中直接操作原型