feat: 订单详情交互对接

pages/order/components/OrderInfo/index.vue

@@ -23,8 +23,13 @@
       <text class="value">{{ formattedAmount }}</text>
     </view>
     <!-- 根据订单状态动态显示按钮 -->
-    <button v-if="shouldShowButton" :class="buttonClass">
-      {{ buttonText }}
+    <button
+      v-if="shouldShowButton"
+      :class="['reserve-button', { loading: isLoading }]"
+      :disabled="isLoading"
+      @click="handleButtonClick"
+    >
+      {{ isLoading ? "处理中..." : buttonText }}
     </button>
     <view class="feedback">
       <text @click="openFeedback">投诉反馈</text>
@@ -33,7 +38,13 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from "vue";
+import { defineProps, computed, ref } from "vue";
+import {
+  preOrder,
+  orderPayNow,
+  orderCancel,
+  orderRefund,
+} from "@/request/api/OrderApi";
 
 // 支付方式映射常量
 const PAY_WAY_MAP = {
@@ -42,6 +53,9 @@ const PAY_WAY_MAP = {
   2: "云闪付",
 };
 
+// 加载状态
+const isLoading = ref(false);
+
 const props = defineProps({
   orderData: {
     type: Object,
@@ -86,18 +100,60 @@ const shouldShowButton = computed(() => {
   return props.orderData.orderStatus !== "4"; // 4-退款中
 });
 
-// 按钮样式类逻辑
-const buttonClass = computed(() => {
-  const status = props.orderData.orderStatus;
-  const baseClass = "reserve-button";
+// 处理按钮点击事件
+const handleButtonClick = async () => {
+  if (isLoading.value) return; // 防止重复点击
 
-  // 申请退款状态（待使用状态）保持原样式，其他状态添加pre-btn类
-  if (status === "2") {
-    return baseClass; // 申请退款状态，背景色不变
-  } else {
-    return `${baseClass} pre-btn`; // 其他状态，添加pre-btn样式
+  const status = props.orderData.orderStatus;
+  const orderId = props.orderData.orderId;
+  // 支付方式
+  const payWay = props.orderData.payWay;
+  // 支付渠道
+  const paySource = "1";
+
+  try {
+    isLoading.value = true;
+
+    if (status === "2") {
+      // 情况2：待使用状态，直接申请退款
+      await orderRefund({ orderId });
+
+      uni.showToast({
+        title: "退款申请已提交",
+        icon: "success",
+      });
+    } else {
+      // 情况1：待支付状态或其他状态，先预下单再支付
+      // 第一步：预下单
+      const res = await orderPayNow({ orderId, payWay, paySource });
+      console.log(res);
+
+      // 仅作为示例，非真实参数信息。
+      uni.requestPayment({
+        provider: "wxpay",
+        timeStamp: String(Date.now()),
+        nonceStr: "A1B2C3D4E5",
+        package: "prepay_id=wx20180101abcdefg",
+        signType: "MD5",
+        paySign: "",
+        success: (res) => {
+          console.log("success:" + JSON.stringify(res));
+        },
+        fail: (err) => {
+          console.log("fail:" + JSON.stringify(err));
+        },
+      });
+    }
+  } catch (error) {
+    console.error("操作失败:", error);
+    uni.showToast({
+      title: error.message || "操作失败，请重试",
+      icon: "none",
+    });
+  } finally {
+    isLoading.value = false;
   }
-});
+};
 
 // 投诉电话
 const openFeedback = () => {

pages/order/components/OrderInfo/styles/index.scss

@@ -5,7 +5,7 @@ $order-bg-color: #fff;
 $text-color-primary: #333;
 $text-color-secondary: #666;
 $text-color-accent: #ff5722;
-$button-color: #ffa500;
+$button-color: #00a6ff;
 $button-hover-color: darken($button-color, 8%);
 $button-disabled-color: #ccc;
 $border-color: #ececec;
@@ -31,8 +31,15 @@ $font-weight-semibold: 600;
 $transition-fast: 0.2s ease;
 $transition-normal: 0.3s ease;
 
-// 响应式断点
-$breakpoint-mobile: 480px;
+// 动画关键帧
+@keyframes loading-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 .order-info {
   background-color: $order-bg-color;
@@ -54,13 +61,6 @@ $breakpoint-mobile: 480px;
     padding: 4px 0;
     transition: background-color $transition-fast;
 
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.02);
-      border-radius: 4px;
-      margin: 0 -4px 8px;
-      padding: 4px;
-    }
-
     .label {
       font-size: $font-size-small;
       color: $text-color-secondary;
@@ -102,18 +102,6 @@ $breakpoint-mobile: 480px;
         }
       }
     }
-
-    // 移动端适配
-    @media (max-width: $breakpoint-mobile) {
-      .value {
-        max-width: 50%;
-        font-size: $font-size-small - 1px;
-      }
-
-      &.amount .value {
-        font-size: $font-size-medium + 2px;
-      }
-    }
   }
 
   .line {
@@ -130,13 +118,10 @@ $breakpoint-mobile: 480px;
 
   .reserve-button {
     width: 100%;
-    background: linear-gradient(
-      135deg,
-      $button-color 0%,
-      darken($button-color, 5%) 100%
-    );
+    background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
     color: #fff;
     border: none;
+    padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -150,12 +135,6 @@ $breakpoint-mobile: 480px;
     transition: all $transition-normal;
     letter-spacing: 0.5px;
 
-    // 再次预定按钮背景样式
-    &.pre-btn {
-      background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
-      border: 2px solid #00a6ff;
-    }
-
     // 按钮波纹效果
     &::before {
       content: "";
@@ -206,13 +185,31 @@ $breakpoint-mobile: 480px;
       }
     }
 
-    // 移动端触摸优化
-    @media (max-width: $breakpoint-mobile) {
-      height: $button-height + 4px;
-      font-size: $font-size-medium + 1px;
+    // 加载状态样式
+    &.loading {
+      background: $button-disabled-color;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+      position: relative;
 
-      &:hover {
-        transform: none; // 移动端禁用悬浮效果
+      &::before {
+        display: none;
+      }
+
+      // 加载动画
+      &::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 16px;
+        height: 16px;
+        margin: -8px 0 0 -8px;
+        border: 2px solid transparent;
+        border-top: 2px solid #fff;
+        border-radius: 50%;
+        animation: loading-spin 1s linear infinite;
       }
     }
   }

pages/order/styles/detail.scss

@@ -3,5 +3,5 @@
   background-position: 0 0;
   background-size: 100% 242px;
   background-repeat: no-repeat;
-  padding: 60px 15px;
+  // padding: 60px 15px;
 }