支付寶小程序 行業(yè)·掃碼購模板

• 掃碼購小程序模板用來演示掃碼購物流程在支付寶小程序的實現(xiàn)案例，方便開發(fā)者瀏覽和學習小程序的研發(fā)流程，提供面向線下購物設備進行用戶選擇購物的相關組件、業(yè)務流程和服務能力。

使用說明

• 本示例為可以配合服務端使用，也可以本地直接模擬預覽。 配合服務端的時候請把 services/home.services.js 里面的 { on: false, data: loginMockData }，on 的 false 改為 true；本地模擬預覽數(shù)據(jù)在 services/mocks/home.mocks.js 里面。
• 部分頁面暫不支持調試，如遇此類不支持頁面，請在 web IDE > 模擬器 > 頁面路徑，切換頁面使用。
• 更多使用詳情請參見 代碼市場。

前提條件

• 完成 開發(fā)者入駐 與 小程序創(chuàng)建。
• 安裝最新版 IDE，點擊下載。

使用步驟

1. 下載 文件包
2. 打開 IDE 相關的內容目錄，關聯(lián)已有APPID。
3. 通過 IDE 真機預覽

頁面內容

本項目包括的頁面數(shù)量為 10 個，分別是：首頁、出場碼、個人頁面、門店選擇頁面、城市選擇頁面、購物車頁面、填寫商品碼頁面、訂單頁面、支付失敗頁面、支付成功頁面。

1. 首頁

頁面路徑：pages/home/index

• 門店選擇入口
• 掃碼模塊
• 購物車入口

2. 出場碼

頁面路徑：pages/barcode/index

展示出場碼

3. 個人頁面

頁面路徑：pages/personal/index

• 個人信息展示
• 訂單查看入口

4. 門店選擇頁面

頁面路徑：pages/getLocation/index

門店搜索選擇頁。

5. 城市選擇頁面

頁面路徑：pages/chooseCity/index

城市搜索選擇頁。

6. 購物車頁面

頁面路徑：pages/shopCar/index

• 購物袋模塊
• 商品模塊
• 總價展示
• 掃碼入口
• 填寫商品碼入口
• 下單入口

7. 填寫商品碼頁面

頁面路徑：pages/inputBarcode/index

填寫商品碼。

8. 訂單頁面

頁面路徑：pages/order/index

訂單列表頁。

9.支付失敗頁面

頁面路徑：pages/payFail/index

支付失敗頁。

10. 支付成功頁面

頁面路徑：pages/payOk/index

• 支付成功頁
• 購物列表
• 出場碼

自定義 UI 組件

1. 商品列表 goods-item。商品列表展示。
2. 商品列表 location-item。門店列表展示。
3. 商品信息 money-show。商品數(shù)量，金額等展示。
4. 訂單頭部 order-header。訂單頭部信息展示。
5. 訂單列表 order-list。訂單列表展示。
6. 頂部搜索欄 search-bar。頂部搜索欄。
7. 購物袋模塊 shop-bag。購物袋模塊。
8. 購物車商品模塊 shop-list。購物車商品模塊。
9. 商品加減模塊 stepper。商品加減模塊。