连锁美妆超市扫码购系统案例-前端小程序端
前端扫码购小程序
购物场景
顾客到店后扫描柜台上公众号二维码,点击扫码购菜单进入扫码购小程序,扫描想要购买商品上的条形码加入购物车。客户挑选完毕后点击结算按钮进行线上支付,支付后该门店前置仓库打印小票进行挑货、拣货,顾客小程序中显示取货号及核销码。拣货完毕后通过取货号通知顾客取货,顾客到达收银台后收银员扫描顾客核销码进行核销,同时将货品递交给顾客以结束购物流程。
用户端页面及功能
(1).扫码购首页
用户端进入小程序后第一屏展示的内容,自定义及灵活度程序需求高
A. 当前定位门店
LBS 物理定位,若没打开定位则进行提示:系统检测未开启定位,无法读取门店列表
B. 门店列表页
展示所有门店信息,排序根据 LBS 定位由近到远展示,超过固定公里歪的门店显示灰色即不可用状态,且点击后进行提示:该门店当前位置不可用
C. 活动轮播
展示门店当前可参与的活动海报,点击可查看详情
需要自定义展示大小和跳转链接
D. 活动弹窗
重点节日活动可在顾客进入小程序时弹出窗口进行展示,页面大小、跳转链接及页面内容需要自定义
(2).购物车页面
A.扫码窗口
摄像头可以打开,检测到条码后识别商品加入到购物车;系统根据SKU查询库存可用情况
B. 购物车商品列表
商品主图、商品名称、商品原价、商品促销价、商品数量、商品加减按钮、左滑一次性删除商品、清空 购物车等
C.活动提示
满减、满折、满赠等活动提示,例:购物车内商品金额已满 150 元,还需加购 49 元商品即可立减 10 元 /立打 9 折/赠送面膜 1 盒。
第二件半价提示,例:购物车中的 XXX 商品正在参与第二件半价活动。 组合价活动提示,例:XXX 商品正在参与 XXX 活动。 加价购活动提示,例:再满 XX 元即可参与优惠换购活动。
D.合计及结算
展示当前购物车中商品数量、原价、促销价的合计结果以及结算按钮。
(3).结算页
A.订单内商品明细
展示订单中每个商品的明细,其中包含:商品主图、商品名称、商品原价、商品活动价、商品数量等
B.活动优惠信息
展示订单中参与的活动优惠,其中包含:满减、满折、满赠,优惠券详情,赠品等优惠活动。
C.加价购
当满足活动门槛后在支付页面增加换购模块,可多花指定金额购买指定产品(参考美团、饿了么等)
D.获赠信息
展示此单可获得的成长值、积分、优惠券、赠品等信息
E.支付方式
包含微信、支付宝及储值余额,其中需要思考的解决方案的有:商场抵用券,商场储值卡,商场积分。 以上所有支付方式都需要支持组合支付。
(4).支付成功页
A.支付金额
B.查看核销码
跳转至核销码展示页面
C.查看订单
跳转至订单页
(5).核销码展示
A.核销二维码
用于用户至收银台核销订单
B.核销码
当出现订单无法使用扫码枪扫码核销时由收银员手工输入核销码进行核销
C.取货码
用于通过叫号系统通知顾客取货的数字。方便用户识别自己订单进行的状态
2.订单页
展示顾客的订单列表,其中包含:购物渠道、交易时间、交易状态、商品缩略、合计金额。
点开明细则展示订单内商品明细、活动优惠信息、加价购、获赠信息、支付方式、订单编号、创建时间、 付款时间等。
(1).代付款订单
若订单信息中无代付款订单则代付款订单在全部订单后
(2).全部订单
A.扫码购订单
已付款未取货订单需要提供【查看核销码】按钮
B.微商城订单
3.个人中心页
(1).用户信息
展示用户基本信息,其中包含:用户微信头像、用户微信昵称、用户手机号码。点开后可设置基础资料: 头像,昵称,性别,生日,手机,地区等。
(2).会员信息
展示用户会员卡信息,其中包含:会员卡背景、会员等级、积分、成长值、会员二维码按钮、条形码(可选)
(3).订单列表
连接订单的详情页
(4).优惠券信息
展示用户拥有的优惠券明细,其中包含优惠券金额、优惠券使用门槛、优惠券名称、优惠券使用日期,
点击打开核销码进行核销
(5).积分信息
展示积分商城页面,其中包含:积分、积分明细、积分规则、积分兑换(优惠券、商品、店铺权益等)
(6).权益卡信息
展示用户拥有的权益卡明细,其中包含:权益卡列表、权益卡背景图、权益卡二维码(点击展示权益卡 二维码/条形码)、拥有的权益、使用须知及使用时间