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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
backend/microservice-provider-shop-8003/src/main/java/com/cxyxiaomo/epp/shop/controller/OrderController.java
View File

@ -166,8 +166,6 @@ public class OrderController {
//判断是否可以支付
OrderStatus orderStatus = OrderStatus.get(order.getOrderStatus());
if (orderStatus != OrderStatus.PENDING) {
}
switch (orderStatus) {
case PENDING:
// 可以支付
@ -175,7 +173,7 @@ public class OrderController {
case PROCESSING:
return Res.error("订单已支付，无需重复支付");
case CANCELLED:
return Res.error("订单已取消，无需重复支付");
return Res.error("订单已取消，无法支付");
default:
return Res.error("当前订单状态无法支付");
}
@ -185,4 +183,44 @@ public class OrderController {
return Res.success(success ? "支付成功" : "支付失败");
}
@PostMapping("/miniprogram/cancelOrder")
@ResponseBody
public Res cancelOrder(@RequestBody JSONObject params) {
Long orderId = params.getLong("orderId");
if (orderId == null) {
return Res.error("参数错误");
}
// 查询订单详情
Order order = orderService.getOrderById(orderId);
if (order == null) {
return Res.error("订单不存在");
}
//判断是否可以取消
OrderStatus orderStatus = OrderStatus.get(order.getOrderStatus());
switch (orderStatus) {
case PENDING:
// 可以取消
break;
case PROCESSING:
// 可以取消
// return Res.error("订单已支付，不可取消");
break;
case SHIPPED:
return Res.error("订单已发货，不可取消");
case DELIVERED:
return Res.error("订单已送达，不可取消");
case CANCELLED:
return Res.error("订单已取消");
default:
return Res.error("当前订单状态无法取消");
}
// 更新支付信息
Boolean success = orderService.updateOrderStatus(orderId, OrderStatus.CANCELLED);
return Res.success(success ? "取消成功" : "取消失败");
}
}

39
postman-collection/epp.postman_collection.json
View File

@ -478,7 +478,7 @@
"header": [],
"body": {
"mode": "raw",
"raw": "{\r\n \"userId\": 1,\r\n \"orderList\": [\r\n {\r\n \"goodId\": 2,\r\n \"count\": 3\r\n },\r\n {\r\n \"goodId\": 3,\r\n \"count\": 1\r\n }\r\n ]\r\n}",
"raw": "{\r\n \"orderId\": \"1749496012575215624\"\r\n}",
"options": {
"raw": {
"language": "json"
@ -486,7 +486,7 @@
}
},
"url": {
"raw": "http://localhost:8003/shop/order/miniprogram/payOrder?orderId=1749496012575215624",
"raw": "http://localhost:8003/shop/order/miniprogram/payOrder",
"protocol": "http",
"host": [
"localhost"
@ -497,12 +497,37 @@
"order",
"miniprogram",
"payOrder"
],
"query": [
{
"key": "orderId",
"value": "1749496012575215624"
]
}
},
"response": []
},
{
"name": "[微服务] 小程序端取消订单",
"request": {
"method": "POST",
"header": [],
"body": {
"mode": "raw",
"raw": "{\r\n \"orderId\": \"1749496012575215624\"\r\n}",
"options": {
"raw": {
"language": "json"
}
}
},
"url": {
"raw": "http://localhost:8003/shop/order/miniprogram/cancelOrder",
"protocol": "http",
"host": [
"localhost"
],
"port": "8003",
"path": [
"shop",
"order",
"miniprogram",
"cancelOrder"
]
}
},

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
}

62
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.navigateBack({
// delta: getCurrentPages().length - 1
// })
// wx.navigateTo({
// url: "/pages/shop/orderDetail?orderId=" + this.data.orderId,
// })
}
})
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,
// })
}
})
})();

43
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>

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;
}

11
weixin-miniprogram/services/order.js
View File

@ -50,3 +50,14 @@ export function payOrder(orderId) {
}
})
}
/** 取消订单 */
export function cancelOrder(orderId) {
return send_request({
url: '/shop/order/miniprogram/cancelOrder',
method: "POST",
data: {
"orderId": orderId,
}
})
}