feat: 订单样式优化

src/components/Divider/styles/index.scss

@@ -1,30 +1,36 @@
 .divider {
   height: 1px;
   margin: 0 10px;
-  background: linear-gradient(to right, #eee, #eee 5px, transparent 5px, transparent);
+  background: linear-gradient(
+    to right,
+    #eee,
+    #eee 5px,
+    transparent 5px,
+    transparent
+  );
   background-size: 10px 100%;
   position: relative;
 
-  &::before, &::after { 
-    position: absolute;
-    content: '';
-    height: 12px;
-    width: 6px;
+  // &::before, &::after {
+  //   position: absolute;
+  //   content: '';
+  //   height: 12px;
+  //   width: 6px;
 
-    background-color: #E2EDF2;
-    top: 50%;
-    transform: translateY(-50%);
-  }
+  //   background-color: #E2EDF2;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  // }
 
-  &::before {
-    border-radius: 0 20px 20px 0;
-    top: 0;
-    left: -10px;
-  }
+  // &::before {
+  //   border-radius: 0 20px 20px 0;
+  //   top: 0;
+  //   left: -10px;
+  // }
 
-  &::after {
-    border-radius: 20px 0 0 20px;
-    top: 0;
-    right: -10px;
-  }
+  // &::after {
+  //   border-radius: 20px 0 0 20px;
+  //   top: 0;
+  //   right: -10px;
+  // }
 }

src/pages-order/order/components/OrderCard/styles/index.scss

@@ -4,6 +4,11 @@
   box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
   margin: 12px;
   transition: all 0.3s ease;
+  mask: radial-gradient(circle at 0 57px, #0000 6px, red 0),
+    radial-gradient(circle at right 57px, #0000 6px, red 0);
+  mask-size: 50%;
+  mask-position: 0, 100%;
+  mask-repeat: no-repeat;
 
   &:active {
     transform: scale(0.98);

src/pages-order/order/components/OrderInfo/index.vue

@@ -80,7 +80,7 @@ const formattedAmount = computed(() => {
   return amount ? `${parseFloat(amount).toFixed(2)}` : "0.00";
 });
 
-// 按钮文案逻辑
+// 按钮文案逻辑，订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
 const buttonText = computed(() => {
   const status = props.orderData.orderStatus;
   switch (status) {
@@ -88,14 +88,17 @@ const buttonText = computed(() => {
       return "立即支付";
     case "2": // 待使用状态
       return "申请退款";
-    default: // 其他状态
+    case "3": // 已取消状态
+    case "5": // 已关闭状态
+    case "6": // 已完成状态
       return "再次预定";
   }
 });
 
-// 是否显示按钮（退款中状态不显示）
+// 是否显示按钮（待支付、待使用、已取消、已关闭、已完成）
 const shouldShowButton = computed(() => {
-  return props.orderData.orderStatus !== "4"; // 4-退款中
+  const status = props.orderData.orderStatus;
+  return ["0", "2", "3", "5", "6"].includes(status);
 });
 
 // 处理按钮点击事件