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

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

@@ -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 ? "取消成功" : "取消失败");
+    }
 }

postman-collection/epp.postman_collection.json

@@ -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",
+					"response": []
-									"value": "1749496012575215624"
+				},
+				{
+					"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"
 							]
 						}
 					},

weixin-miniprogram/pages/shop/myOrder.js

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

weixin-miniprogram/pages/shop/myOrder.json

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

weixin-miniprogram/pages/shop/orderDetail.js

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

weixin-miniprogram/pages/shop/orderDetail.wxml

@@ -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 class="page-title">订单已创建，快去支付吧</view>
-    订单已创建，快去支付吧
+</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>

weixin-miniprogram/pages/shop/orderDetail.wxss

@@ -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 {
+.btn-hollow {
-  background-color: #fa4126;
+  border: 1rpx solid black;
-  color: #fff;
+}
-  border-radius: 40rpx;
+
+.txt {
+  margin: 10px 0;
+}
+
+.txt-disabled {
+  color: #bbbbbb;
+}
+
+.txt-done {
+  color: #099921;
 }

weixin-miniprogram/services/order.js

@@ -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,
+    }
+  })
+}