feat: 订单详情布局功能调整

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

@@ -1,38 +1,25 @@
 <template>
-  <view class="order-info">
-    <view class="order-item">
-      <text class="label">订单号</text>
-      <text class="value">{{ orderData.orderId }}</text>
+  <view class="bg-white border-box rounded-10 p-12">
+    <view class="flex mb-8 font-size-12">
+      <text class="w-60 color-99A0AE">订单编号</text>
+      <text class="color-525866">{{ orderData.orderId }}</text>
     </view>
-    <view class="order-item">
-      <text class="label">流水号</text>
-      <text class="value">{{ orderData.paySerialNumber }}</text>
+    <view class="flex mb-8 font-size-12">
+      <text class="w-60 color-99A0AE">下单时间</text>
+      <text class="color-525866">{{ orderData.createTime }}</text>
     </view>
-    <view class="order-item">
-      <text class="label">支付方式</text>
-      <text class="value">{{ payWayText }}</text>
-    </view>
-    <!-- 在已退款状态显示 -->
-    <view v-if="orderData.orderStatus === '4'" class="order-item">
-      <text class="label">退款单号</text>
-      <text class="value">{{ orderData.refundOrderNo }}</text>
-    </view>
-    <view class="line"></view>
-    <view class="order-item amount">
-      <text class="label">实际支付金额</text>
-      <text class="value">{{ formattedAmount }}</text>
-    </view>
-    <!-- 根据订单状态动态显示按钮 -->
-    <button
-      v-if="shouldShowButton"
-      :class="['reserve-button', { loading: isLoading }]"
-      :disabled="isLoading"
-      @click="handleButtonClick(orderData)"
-    >
-      {{ isLoading ? "处理中..." : buttonText }}
-    </button>
-    <view class="feedback">
-      <text @click="openFeedback">投诉反馈</text>
+    <view class="flex font-size-12">
+      <text class="w-60 color-99A0AE">支付状态</text>
+      <text
+        :class="[
+          {
+            'color-FF3D60': statusCode === '0',
+            'color-21B466': statusCode === '1',
+          },
+        ]"
+      >
+        {{ payStatusText }}
+      </text>
     </view>
   </view>
 </template>
@@ -42,10 +29,9 @@ import { defineProps, computed, ref, defineEmits } from "vue";
 import { orderPayNow } from "@/request/api/OrderApi";
 
 // 支付方式映射常量
-const PAY_WAY_MAP = {
-  0: "微信",
-  1: "支付宝",
-  2: "云闪付",
+const PAY_STATUS_MAP = {
+  0: "未支付",
+  1: "已支付",
 };
 
 // 加载状态
@@ -68,11 +54,10 @@ const props = defineProps({
     }),
   },
 });
+const statusCode = computed(() => props.orderData.orderStatus);
 
 // 使用计算属性缓存支付方式文本
-const payWayText = computed(() => {
-  return PAY_WAY_MAP[props.orderData.payWay] || "未知支付方式";
-});
+const payStatusText = computed(() => PAY_STATUS_MAP[statusCode.value]);
 
 // 格式化金额显示
 const formattedAmount = computed(() => {
@@ -80,27 +65,6 @@ 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) {
-    case "0": // 待支付状态
-      return "立即支付";
-    case "2": // 待使用状态
-      return "申请退款";
-    case "3": // 已取消状态
-    case "5": // 已关闭状态
-    case "6": // 已完成状态
-      return "再次预定";
-  }
-});
-
-// 是否显示按钮（待支付、待使用、已取消、已关闭、已完成）
-const shouldShowButton = computed(() => {
-  const status = props.orderData.orderStatus;
-  return ["0", "2", "3", "5", "6"].includes(status);
-});
-
 // 处理按钮点击事件
 const handleButtonClick = async (orderData) => {
   if (isLoading.value) return; // 防止重复点击
@@ -195,14 +159,6 @@ const handleButtonClick = async (orderData) => {
     isLoading.value = false;
   }
 };
-
-// 投诉电话
-const openFeedback = () => {
-  const phoneNumber = props.orderData.complaintHotline;
-  uni.makePhoneCall({ phoneNumber });
-};
 </script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
+<style scoped lang="scss"></style>