連鎖美妝超市掃碼購系統案例-前端小程序端
前端掃碼購小程序
購物場景
顧客到店后掃描柜臺上公眾號二維碼,點擊掃碼購菜單進入掃碼購小程序,掃描想要購買商品上的條形碼加入購物車。客戶挑選完畢后點擊結算按鈕進行線上支付,支付后該門店前置倉庫打印小票進行挑貨、揀貨,顧客小程序中顯示取貨號及核銷碼。揀貨完畢后通過取貨號通知顧客取貨,顧客到達收銀臺后收銀員掃描顧客核銷碼進行核銷,同時將貨品遞交給顧客以結束購物流程。
用戶端頁面及功能
(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).權益卡信息
展示用戶擁有的權益卡明細,其中包含:權益卡列表、權益卡背景圖、權益卡二維碼(點擊展示權益卡 二維碼/條形碼)、擁有的權益、使用須知及使用時間
