feat: 订单样式优化

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);
 });
 
 // 处理按钮点击事件