連鎖美妝超市掃碼購系統(tǒng)案例-前端小程序端
前端掃碼購小程序
購物場景
顧客到店后掃描柜臺上公眾號二維碼,點(diǎn)擊掃碼購菜單進(jìn)入掃碼購小程序,掃描想要購買商品上的條形碼加入購物車??蛻籼暨x完畢后點(diǎn)擊結(jié)算按鈕進(jìn)行線上支付,支付后該門店前置倉庫打印小票進(jìn)行挑貨、揀貨,顧客小程序中顯示取貨號及核銷碼。揀貨完畢后通過取貨號通知顧客取貨,顧客到達(dá)收銀臺后收銀員掃描顧客核銷碼進(jìn)行核銷,同時將貨品遞交給顧客以結(jié)束購物流程。
用戶端頁面及功能
(1).掃碼購首頁
用戶端進(jìn)入小程序后第一屏展示的內(nèi)容,自定義及靈活度程序需求高
A. 當(dāng)前定位門店
LBS 物理定位,若沒打開定位則進(jìn)行提示:系統(tǒng)檢測未開啟定位,無法讀取門店列表
B. 門店列表頁
展示所有門店信息,排序根據(jù) LBS 定位由近到遠(yuǎn)展示,超過固定公里歪的門店顯示灰色即不可用狀態(tài),且點(diǎn)擊后進(jìn)行提示:該門店當(dāng)前位置不可用
C. 活動輪播
展示門店當(dāng)前可參與的活動海報(bào),點(diǎn)擊可查看詳情
需要自定義展示大小和跳轉(zhuǎn)鏈接
D. 活動彈窗
重點(diǎn)節(jié)日活動可在顧客進(jìn)入小程序時彈出窗口進(jìn)行展示,頁面大小、跳轉(zhuǎn)鏈接及頁面內(nèi)容需要自定義
(2).購物車頁面
A.掃碼窗口
攝像頭可以打開,檢測到條碼后識別商品加入到購物車;系統(tǒng)根據(jù)SKU查詢庫存可用情況
B. 購物車商品列表
商品主圖、商品名稱、商品原價、商品促銷價、商品數(shù)量、商品加減按鈕、左滑一次性刪除商品、清空 購物車等
C.活動提示
滿減、滿折、滿贈等活動提示,例:購物車內(nèi)商品金額已滿 150 元,還需加購 49 元商品即可立減 10 元 /立打 9 折/贈送面膜 1 盒。
第二件半價提示,例:購物車中的 XXX 商品正在參與第二件半價活動。 組合價活動提示,例:XXX 商品正在參與 XXX 活動。 加價購活動提示,例:再滿 XX 元即可參與優(yōu)惠換購活動。
D.合計(jì)及結(jié)算
展示當(dāng)前購物車中商品數(shù)量、原價、促銷價的合計(jì)結(jié)果以及結(jié)算按鈕。
(3).結(jié)算頁
A.訂單內(nèi)商品明細(xì)
展示訂單中每個商品的明細(xì),其中包含:商品主圖、商品名稱、商品原價、商品活動價、商品數(shù)量等
B.活動優(yōu)惠信息
展示訂單中參與的活動優(yōu)惠,其中包含:滿減、滿折、滿贈,優(yōu)惠券詳情,贈品等優(yōu)惠活動。
C.加價購
當(dāng)滿足活動門檻后在支付頁面增加換購模塊,可多花指定金額購買指定產(chǎn)品(參考美團(tuán)、餓了么等)
D.獲贈信息
展示此單可獲得的成長值、積分、優(yōu)惠券、贈品等信息
E.支付方式
包含微信、支付寶及儲值余額,其中需要思考的解決方案的有:商場抵用券,商場儲值卡,商場積分。 以上所有支付方式都需要支持組合支付。
(4).支付成功頁
A.支付金額
B.查看核銷碼
跳轉(zhuǎn)至核銷碼展示頁面
C.查看訂單
跳轉(zhuǎn)至訂單頁
(5).核銷碼展示
A.核銷二維碼
用于用戶至收銀臺核銷訂單
B.核銷碼
當(dāng)出現(xiàn)訂單無法使用掃碼槍掃碼核銷時由收銀員手工輸入核銷碼進(jìn)行核銷
C.取貨碼
用于通過叫號系統(tǒng)通知顧客取貨的數(shù)字。方便用戶識別自己訂單進(jìn)行的狀態(tài)
2.訂單頁
展示顧客的訂單列表,其中包含:購物渠道、交易時間、交易狀態(tài)、商品縮略、合計(jì)金額。
點(diǎn)開明細(xì)則展示訂單內(nèi)商品明細(xì)、活動優(yōu)惠信息、加價購、獲贈信息、支付方式、訂單編號、創(chuàng)建時間、 付款時間等。
(1).代付款訂單
若訂單信息中無代付款訂單則代付款訂單在全部訂單后
(2).全部訂單
A.掃碼購訂單
已付款未取貨訂單需要提供【查看核銷碼】按鈕
B.微商城訂單
3.個人中心頁
(1).用戶信息
展示用戶基本信息,其中包含:用戶微信頭像、用戶微信昵稱、用戶手機(jī)號碼。點(diǎn)開后可設(shè)置基礎(chǔ)資料: 頭像,昵稱,性別,生日,手機(jī),地區(qū)等。
(2).會員信息
展示用戶會員卡信息,其中包含:會員卡背景、會員等級、積分、成長值、會員二維碼按鈕、條形碼(可選)
(3).訂單列表
連接訂單的詳情頁
(4).優(yōu)惠券信息
展示用戶擁有的優(yōu)惠券明細(xì),其中包含優(yōu)惠券金額、優(yōu)惠券使用門檻、優(yōu)惠券名稱、優(yōu)惠券使用日期,
點(diǎn)擊打開核銷碼進(jìn)行核銷
(5).積分信息
展示積分商城頁面,其中包含:積分、積分明細(xì)、積分規(guī)則、積分兌換(優(yōu)惠券、商品、店鋪權(quán)益等)
(6).權(quán)益卡信息
展示用戶擁有的權(quán)益卡明細(xì),其中包含:權(quán)益卡列表、權(quán)益卡背景圖、權(quán)益卡二維碼(點(diǎn)擊展示權(quán)益卡 二維碼/條形碼)、擁有的權(quán)益、使用須知及使用時間
