coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

取消订单完成，小程序订单详情页完善

Browse Source
This commit is contained in:
小墨
2023-03-21 19:18:06 +08:00
parent b71d4381d7
commit 23dfc8288c
8 changed files with 208 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
weixin-miniprogram/pages/shop/myOrder.js
View File

@@ -56,7 +56,7 @@ Page({
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
this.updatePageData()
},
/**

3
weixin-miniprogram/pages/shop/myOrder.json
View File

@@ -1,4 +1,5 @@
{
"usingComponents": {},
"navigationBarTitleText": "我的订单"
"navigationBarTitleText": "我的订单",
"enablePullDownRefresh": true
}

66
weixin-miniprogram/pages/shop/orderDetail.js
View File

@@ -26,6 +26,16 @@ Page({
orderPrice: '',
},
clearPageData() {
this.setData({
order: {},
orderGoodList: [],
orderStatusCode: '',
orderTime: '',
orderPrice: '',
})
},
/**
* 生命周期函数--监听页面加载
*/
@@ -43,6 +53,7 @@ Page({
}
this.setData({
_options: options,
orderId: options.orderId,
})
this.loadPageData()
@@ -97,6 +108,13 @@ Page({
},
refreshMyOrderPage() {
// 刷新
console.log("刷新上级订单列表页")
let myOrderPage = getCurrentPages().find(p => p.route == "pages/shop/myOrder")
myOrderPage && myOrderPage.onPullDownRefresh()
},
// 订单状态：等待确认
confirmPayment() {
// 点击确认支付按钮
@@ -113,19 +131,55 @@ Page({
if (res.confirm) {
(async () => {
this.clearPageData()
let payResult = await orderService.payOrder(this.data.orderId)
console.log("payResult", payResult)
this.onLoad(this.data._options)
this.refreshMyOrderPage()
wx.showModal({
title: '支付结果',
content: payResult,
showCancel: false,
complete: (res) => {
wx.navigateBack({
delta: getCurrentPages().length - 1
})
wx.navigateTo({
url: "/pages/shop/orderDetail?orderId=" + this.data.orderId,
})
// wx.navigateBack({
// delta: getCurrentPages().length - 1
// })
// wx.navigateTo({
// url: "/pages/shop/orderDetail?orderId=" + this.data.orderId,
// })
}
})
})();
}
}
})
},
// 订单状态：等待确认
cancelPayment() {
// 点击取消订单按钮
wx.showModal({
title: '是否取消订单？',
content: '点击确认取消订单，点击取消关闭弹窗（未发货前可取消订单）',
complete: (res) => {
if (res.confirm) {
(async () => {
this.clearPageData()
let cancelResult = await orderService.cancelOrder(this.data.orderId)
console.log("cancelResult", cancelResult)
this.onLoad(this.data._options)
this.refreshMyOrderPage()
wx.showModal({
title: '操作结果',
content: cancelResult || "操作失败，请重试",
showCancel: false,
complete: (res) => {
// wx.navigateBack({
// delta: getCurrentPages().length - 1
// })
// wx.navigateTo({
// url: "/pages/shop/orderDetail?orderId=" + this.data.orderId,
// })
}
})
})();

45
weixin-miniprogram/pages/shop/orderDetail.wxml
View File

@@ -1,9 +1,31 @@
<!--pages/shop/orderDetail.wxml-->
<view class="page-title-container">
<view class="page-title-container" wx:if="{{ orderStatusCode == 'Pending' }}">
<view class="page-title-emoji">🎉</view>
<view class="page-title">
订单已创建，快去支付吧
</view>
<view class="page-title">订单已创建，快去支付吧</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Processing' }}">
<view class="page-title-emoji">🍻</view>
<view class="page-title">订单已支付，正在等待发货</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Cancelled' }}">
<view class="page-title-emoji">❌</view>
<view class="page-title">订单已取消</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Shipped' }}">
<view class="page-title-emoji">😎</view>
<view class="page-title">订单已发货，请耐心等待</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Delivered' }}">
<view class="page-title-emoji">🥳</view>
<view class="page-title">订单已送达</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == '' }}">
<view class="page-title-emoji">⏳</view>
<view class="page-title">请稍候</view>
</view>
<view class="page-title-container" wx:else>
<view class="page-title-emoji">❓</view>
<view class="page-title">未知状态</view>
</view>
<!-- 订单总金额 -->
@@ -17,6 +39,7 @@
<view class="order-info">
<view>订单号：{{order.id}}</view>
<view>订单创建时间：{{orderTime}}</view>
<view wx:if="{{payDate}}">订单支付时间：{{order.payDate}}</view>
<view>订单总金额：{{order.orderPrice}} 元</view>
<view>订单状态：{{order.orderStatus}}</view>
</view>
@@ -54,6 +77,16 @@
<view class="bottom-controlbox">
<!-- 屏幕底部 -->
<view class="bottom-buttons">
<view wx:if="{{ orderStatusCode == 'Pending' }}" class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
<!-- Pending -->
<view wx:if="{{ orderStatusCode == 'Pending' }}" class="btn btn-hollow" bindtap="cancelPayment">取消订单</view>
<view wx:if="{{ orderStatusCode == 'Pending' }}" class="btn btn-solid" bindtap="confirmPayment">确认支付</view>
<!-- Cancelled -->
<view wx:if="{{ orderStatusCode == 'Cancelled' }}" class="txt txt-disabled">❕无法操作已取消订单</view>
<!-- Processing -->
<view wx:if="{{ orderStatusCode == 'Processing' }}" class="btn btn-hollow" bindtap="cancelPayment">取消订单</view>
<!-- Shipped -->
<view wx:if="{{ orderStatusCode == 'Shipped' }}" class="txt txt-disabled">当前订单不可取消，请耐心等待</view>
<!-- Delivered -->
<view wx:if="{{ orderStatusCode == 'Delivered' }}" class="txt txt-done">✅订单已送达</view>
</view>
</view>
</view>

26
weixin-miniprogram/pages/shop/orderDetail.wxss
View File

@@ -134,11 +134,29 @@
display: inline-grid;
align-items: center;
justify-content: center;
border-radius: 40rpx;
box-sizing: border-box;
margin: 0 10px;
}
.btn-solid {
background-color: #fa4126;
border: 1rpx solid #fa4126;
color: white;
}
#btn-confirm-payment {
background-color: #fa4126;
color: #fff;
border-radius: 40rpx;
.btn-hollow {
border: 1rpx solid black;
}
.txt {
margin: 10px 0;
}
.txt-disabled {
color: #bbbbbb;
}
.txt-done {
color: #099921;
}