確認訂單

添加收貨地址

利用 vant提供的 button組件來實現

頁面布局

<view><view class="chooseAddressBox"><van-button type="primary" size="small">+ 選擇收貨地址</van-button></view><!-- 分割線 --><image src="/assets/order/cart_border@2x.png" class="split_line"/> </view>

樣式

.chooseAddressBox{text-align: center;padding: 60rpx 0; } .split_line{display: block;width: 100%;height: 7rpx; }

點擊收貨地址按鈕的時候應該跳轉到收獲地址接口

methods = {async chooseAddress() {// 調用apilet res = await wepy.chooseAddress().catch(err => err)console.log(res);// 判斷是否返回正確的地址if (res.errMsg != 'chooseAddress:ok') return;this.addressInfo = res;// 存儲在緩存中wepy.setStorageSync('address', res);this.$apply()} }

根據 data 里面的 addressInfo 數據來判斷顯示按鈕還是收貨人信息

<view><view class="chooseAddressBox" wx:if="{{addressInfo === null || addressInfo == ''}}"><van-button type="primary" size="small" @tap="chooseAddress">+ 選擇收貨地址</van-button></view><view class="addressInfo" wx:else>收貨人信息</view><!-- 分割線 --><image src="/assets/order/cart_border@2x.png" class="split_line"/> </view>

收貨人信息布局

<view class="addressInfo" wx:else><!-- 收貨人，聯系電話 --><view class="box1"><text>收貨人：{{addressInfo.userName}}</text><view @tap="chooseAddress"><text>聯系電話：{{addressInfo.telNumber}}</text><van-icon name="arrow" /></view></view><!-- 收貨地址 --><view class="box2">收貨地址：{{addressStr}}</view> </view>

樣式屬性

.addressInfo {font-size: 26rpx;padding: 0 10rpx;.box1 {display: flex;justify-content: space-between;padding: 30rpx 0;}.box2 {padding-bottom: 30rpx;} }

需要得到收貨地址的信息

methods = {async chooseAddress() {...this.addressStr = this.addressInfo.provinceName +this.addressInfo.cityName +this.addressInfo.countyName +this.addressInfo.detailInfowepy.setStorageSync('address', res);this.$apply()} }

點擊電話區域，重新選擇地址，只需要給這個標簽綁定 事件即可

<view @tap="chooseAddress">

訂單列表實現

獲取對應的訂單信息，我們可以通過購物車的的cart 這個屬性，遍歷判斷里面的 isCheck 是否為true，如果是true，存入到當前的數組，然后通過vant組件進行渲染

onLoad() {...// 從購物車的列表中，選擇出被選中的商品this.cart = this.$parent.globalData.cart.filter(x => x.isCheck) }

頁面結構實現

<view><block wx:for="{{cart}}" wx:key="id"><van-card num="{{item.count}}" price="{{item.price}}" title="{{item.name}}" thumb="{{ item.pic }}" /></block> </view>

登錄功能

根據文檔中，我們知道想要獲取用戶相關信息，我們可以通過open-type來進行獲取

我們參照文檔進行配置就能獲取相關信息

<!-- 登錄后下單 --> <view class="login"><van-button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">登陸后下單</van-button> </view>

綁定 getUserInfo的函數，在里面就能獲取到相關的信心

這樣后面四個參數我們就獲取到了，現在需要獲取到第一個code值，我們需要調用 wx.login()，來進行獲取，當參數獲取到了后，調用接口進行登陸，將返回的 token值保存到本地，刷新頁面，展示支付訂單的UI

// 獲取用戶信息async getUserInfo(userInfo) {// 判斷是否獲取用戶信息失敗if (userInfo.detail.errMsg !== 'getUserInfo:ok') {return wepy.baseToast('獲取用戶信息失敗！')console.log(userInf// 獲取用戶登錄的憑證 Codeconst loginRes = await wepy.login()console.log(loginRes)if (loginRes.errMsg !== 'login:ok') {return wepy.baseToast('微信登錄失敗！')// 登錄的參數const loginParams = {code: loginRes.code,encryptedData: userInfo.detail.encryptedData,iv: userInfo.detail.iv,rawData: userInfo.detail.rawData,signature: userInfo.detail.signature// 發起登錄的請求，換取登錄成功之后的 Token 值const { data: res } = await wepy.post('/users/wxlogin', loginParamconsole.log(res)if (res.meta.status !== 200) {return wepy.baseToast('微信登錄失敗！')// 把登錄成功之后的 Token 字符串，保存到 Storage 中wepy.setStorageSync('token', res.message.token)this.islogin = true // 用來判斷用戶是否登陸this.$apply()}

對應的頁面結構需要通過 wx:if 來進行判斷

<!-- 登錄后下單 --><van-button type="primary" size="large" class="btnLogin" open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:if="{{islogin === false}}">登錄后下單</van-butto><!-- 訂單支付區域 --><van-submit-bar price="{{amount}}" button-text="支付訂單" bind:submit="onSubmit" wx:else></van-submit-bar>

這里設計到總價的計算，我們可以定義計算屬性來計算總價格

// 當前訂單的總價格 amount() {let total = 0this.cart.forEach(x => {total += x.price * x.count})return total * 100 }

在請求頭中添加 token，我們可以通過攔截器來進行設置

在 app.wpy 的constructor 里面設置

constructor() {super()...// 攔截request請求this.intercept('request', {// 發出請求時的回調函數config(p) {...// 設置請求頭p.header = {Authorization: wepy.getStorageSync('token')}// 必須返回OBJECT參數對象，否則無法發送請求到服務端return p;},...}); }

創建訂單

判斷金額以及收貨地址是否合法，如果合法創建訂單

// 支付訂單async onSubmit() {if (this.amount <= 0) {return wepy.baseToast('訂單金額不能為0！')}if (this.addressStr.length <= 0) {return wepy.baseToast('請選擇收貨地址！')}// 創建訂單const { data: createResult } = await wepy.post('/my/orders/create', {// 訂單金額 單位 元order_price: '0.01',consignee_addr: this.addressStr,order_detail: JSON.stringify(this.cart),goods: this.cart.map(x => {return {goods_id: x.id,goods_number: x.count,goods_price: x.price}})})// 創建訂單失敗if (createResult.meta.status !== 200) {return wepy.baseToast('創建訂單失敗！')}// 創建訂單成功了const orderInfo = createResult.messageconsole.log(orderInfo)// 生成預支付訂單const { data: orderResult } = await wepy.post('/my/orders/req_unifiedorder',{order_number: orderInfo.order_number})// 生成預支付訂單失敗if (orderResult.meta.status !== 200) {return wepy.baseToast('生成預支付訂單失敗！')}// 走支付的流程// 調用微信支付的API// console.log(orderResult)const payResult = await wepy.requestPayment(orderResult.message.pay).catch(err => err)// 用戶取消了支付if (payResult.errMsg === 'requestPayment:fail cancel') {return wepy.baseToast('您已取消了支付！')}// 用戶完成了支付的過程// 檢查用戶支付的結果const { data: payCheckResult } = await wepy.post('/my/orders/chkOrder', {order_number: orderInfo.order_number})if (payCheckResult.meta.status !== 200) {return wepy.baseToast('訂單支付失敗！')}// 提示用戶支付成功wepy.showToast({title: '支付成功！'})// 跳轉到訂單列表頁面wepy.navigateTo({url: '/pages/orderlist'})}}

生成預支付訂單

...// 生成預支付訂單const { data: orderResult } = await wepy.post('/my/orders/req_unifiedorder',{order_number: orderInfo.order_number})// 生成預支付訂單失敗if (orderResult.meta.status !== 200) {return wepy.baseToast('生成預支付訂單失敗！')}...

微信支付

利用微信官方api來進行支付 wx.requestPayment()

...// 走支付的流程// 調用微信支付的API// console.log(orderResult)const payResult = await wepy.requestPayment(orderResult.message.pay).catch(err => e// 用戶取消了支付if (payResult.errMsg === 'requestPayment:fail cancel') {return wepy.baseToast('您已取消了支付！')// 用戶完成了支付的過程...

檢查用戶支付是否成功

// 檢查用戶支付的結果const { data: payCheckResult } = await wepy.post('/my/orders/chkOrder', {order_number: orderInfo.order_numberif (payCheckResult.meta.status !== 200) {return wepy.baseToast('訂單支付失敗！')// 提示用戶支付成功wepy.showToast({title: '支付成功！'// 跳轉到訂單列表頁面wepy.navigateTo({url: '/pages/orderlist'})

訂單列表

tab欄實現

利用vant Tab 標簽頁 的組件實現tab欄

<van-tabs active="{{ active }}" bind:change="tabChanged"></van-tabs>

只要tab進行切換，就會調用 tabChanged 函數

// 每當切換標簽頁的時候，都會觸發這個函數 tabChanged(e) {console.log(e)this.active = e.detail.indexthis.getOrderList(this.active) }

獲取對應的訂單列表

傳遞函數，根據不同的tab欄，請求不同的訂單列表

// 獲取訂單列表 async getOrderList(index) {console.log(index)const { data: res } = await wepy.get('/my/orders/all', { type: index + 1 })if (res.meta.status !== 200) {return wepy.baseToast('獲取訂單列表失敗！')}res.message.orders.forEach(x => (x.order_detail = JSON.parse(x.order_detail)))console.log(res)if (index === 0) {this.allOrderList = res.message.orders} else if (index === 1) {this.waitOrderList = res.message.orders} else if (index === 2) {this.finishOrderList = res.message.orders} else {wepy.baseToast('訂單類型錯誤！')}this.$apply() }

渲染到頁面

三個tab的內容布局都是相同的，只是內容不同，所以我們可以抽取自定義組件來實現

wepy抽取自定義組件

定義一個 components文件夾，里面專門用來放自定義組件，創建文件，后綴名是 wpy

在里面編寫三個部分內容 template script style ，這里需要注意，我們繼承的是 wepy.component

<template><view><view class="sep_line"></view><van-panel title="{{'訂單號：' + order.order_number}}"><block wx:for="{{order.order_detail}}" wx:key="index"><van-card num="{{item.count}}" price="{{item.price}}" title="{{item.name}}" thumb="{{item.pic}}" /></block><!-- 商品件數，以及金額 --><van-cell value="共{{order.total_count}}件商品，訂單金額￥{{order.order_price}}" /></van-panel></view> </template><script> import wepy from 'wepy' // 我們是自定義組件，需要繼承的是 component export default class extends wepy.component {data = {}// 外界傳遞過來的數據props = {// 外界把訂單數據傳遞過來order: Object}methods = {} } </script><style lang="less"> .sep_line {border-top: 15rpx solid #eee; } .van-card {border-bottom: 1rpx solid #eee; } </style>

在我們的主頁上進行組件的引入

export default class extends wepy.page {config = {navigationBarTitleText: '訂單列表'}// 注冊自定義組件components = {'order-item': orderItem}mixins = [mix] }

編寫主頁的結構代碼，我們利用wepy的自定義組件，在循環的時候需要用wepy提供的 repeat來進行

<view><van-tabs active="{{ active }}" bind:change="tabChanged"><van-tab title="全部"><!-- repeat 組件并不是微信官方提供的，而是 WePY 框架提供的 --><repeat for="{{allOrderList}}" key="index"><order-item :order="item"></order-item></repeat></van-tab><van-tab title="待付款"><repeat for="{{waitOrderList}}" key="index"><order-item :order="item"></order-item></repeat></van-tab><van-tab title="已付款"><repeat for="{{finishOrderList}}" key="index"><order-item :order="item"></order-item></repeat></van-tab></van-tabs></view>

發布小程序

先登錄到小程序后臺

先提交代碼

然后經過審核

發布

等到審核通過后，就會看到發布的版本了

總結

以上是生活随笔為你收集整理的day09-确认订单订单列表发布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。