feat: 订单详情交互调整

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

@@ -3,19 +3,21 @@
     class="footer bg-white border-box flex flex-items-center flex-justify-between p-12"
   >
     <button
-      v-if="shouldShowButton"
+      v-if="['1', '2'].includes(statusCode)"
       class="left border-none border-box bg-white rounded-10 flex flex-items-center flex-justify-center font-size-14 font-500 color-525866 mr-12"
+      @click="emit('refund')"
     >
-      取消订单
+      申请退款
     </button>
     <button
       :class="[
-        'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500',
+        'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 color-white',
         {
-          'bg-FF3D60 color-white': statusCode === '0',
-          'bg-color-f5f7fa color-525866': statusCode === '2',
+          'bg-FF3D60': statusCode === '0',
+          'bg-2D91FF': ['1', '2', '3', '5', '6'].includes(statusCode),
         },
       ]"
+      @click="handleButtonClick"
     >
       {{ buttonText }}
     </button>
@@ -23,7 +25,8 @@
 </template>
 
 <script setup>
-import { defineProps, computed, ref, defineEmits } from "vue";
+import { defineProps, defineEmits, computed } from "vue";
+import { orderPayNow } from "@/request/api/OrderApi";
 
 const props = defineProps({
   orderData: {
@@ -47,8 +50,8 @@ const buttonText = computed(() => {
   switch (statusCode.value) {
     case "0": // 待支付状态
       return "立即支付";
-    case "2": // 待使用状态
-      return "申请退款";
+    case "1": // 已取消状态
+    case "2": // 已取消状态
     case "3": // 已取消状态
     case "5": // 已关闭状态
     case "6": // 已完成状态
@@ -56,10 +59,74 @@ const buttonText = computed(() => {
   }
 });
 
-// 是否显示按钮（待支付、待使用、已取消、已关闭、已完成）
-const shouldShowButton = computed(() => {
-  return ["0", "2", "3", "5", "6"].includes(statusCode.value);
-});
+// 定义事件发射器
+const emit = defineEmits(["refund", "refresh"]);
+
+// 处理按钮点击事件
+const handleButtonClick = async (orderData) => {
+  try {
+    // 再次预定跳转商品详情
+    if (["3", "5", "6"].includes(statusCode.value)) {
+      uni.navigateTo({
+        url: `/pages/goods/index?commodityId=${orderData.commodityId}`,
+      });
+    }
+
+    // 待支付状态，调用支付接口
+    if (statusCode.value === "0") {
+      const orderId = orderData.orderId;
+      const payWay = orderData.payWay;
+      const paySource = orderData.paySource;
+
+      const res = await orderPayNow({ orderId, payWay, paySource });
+      console.log("确认订单---2:", res);
+
+      // 检查接口返回数据
+      if (!res || !res.data) {
+        uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
+        return;
+      }
+
+      const { data } = res;
+      const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
+
+      // 验证支付参数是否完整
+      if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
+        // console.error("支付参数不完整:", {
+        //   nonceStr: !!nonceStr,
+        //   packageVal: !!packageVal,
+        //   paySign: !!paySign,
+        //   signType: !!signType,
+        //   timeStamp: !!timeStamp,
+        // });
+        uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
+        return;
+      }
+
+      // 调用微信支付
+      uni.requestPayment({
+        provider: "wxpay",
+        timeStamp: String(timeStamp), // 确保为字符串类型
+        nonceStr: String(nonceStr),
+        package: String(packageVal), // 确保为字符串类型
+        signType: String(signType),
+        paySign: String(paySign),
+        success: () => {
+          uni.showToast({
+            title: "支付成功",
+            icon: "success",
+            success: () => emit("refresh"),
+          });
+        },
+        fail: () => {
+          uni.showToast({ title: "支付失败，请重试", icon: "none" });
+        },
+      });
+    }
+  } catch (error) {
+    console.error("操作失败:", error);
+  }
+};
 </script>
 
 <style lang="scss" scoped>