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

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

@@ -0,0 +1,80 @@
+<template>
+  <view
+    class="footer bg-white border-box flex flex-items-center flex-justify-between p-12"
+  >
+    <button
+      v-if="shouldShowButton"
+      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"
+    >
+      取消订单
+    </button>
+    <button
+      :class="[
+        'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500',
+        {
+          'bg-FF3D60 color-white': statusCode === '0',
+          'bg-color-f5f7fa color-525866': statusCode === '2',
+        },
+      ]"
+    >
+      {{ buttonText }}
+    </button>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, computed, ref, defineEmits } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      orderId: "",
+      paySerialNumber: "",
+      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
+      payAmt: "",
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
+
+const statusCode = computed(() => props.orderData.orderStatus);
+
+// 按钮文案逻辑，订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+const buttonText = computed(() => {
+  switch (statusCode.value) {
+    case "0": // 待支付状态
+      return "立即支付";
+    case "2": // 待使用状态
+      return "申请退款";
+    case "3": // 已取消状态
+    case "5": // 已关闭状态
+    case "6": // 已完成状态
+      return "再次预定";
+  }
+});
+
+// 是否显示按钮（待支付、待使用、已取消、已关闭、已完成）
+const shouldShowButton = computed(() => {
+  return ["0", "2", "3", "5", "6"].includes(statusCode.value);
+});
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  border-radius: 12px 12px 0 0;
+  padding-bottom: 88rpx;
+}
+
+.left,
+.right {
+  height: 48px;
+}
+
+.left {
+  border: 1px solid #e5e8ee;
+  width: 104px;
+}
+</style>