連鎖美妝超市掃碼購系統(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)益、使用須知及使用時間
(7).賬號設(shè)置
設(shè)置顧客綁定手機(jī)號、關(guān)聯(lián)賬號、登錄密碼等安全設(shè)置
