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