feat(order): add order detail and list pages with components for order management

- Implemented order detail page with components for displaying order status, user info, and refund options.
- Created order list page with pagination and order cards for displaying all orders.
- Added styles for order detail and list pages.
- Developed a prompt document outlining component requirements for the order management system.
- Introduced a new Card component for quick booking with a responsive design.
- Enhanced Tabs component for better navigation between different categories.
- Integrated z-paging for efficient data loading and management in order and quick booking lists.
- Added service order card component for displaying service requests with call functionality.
- Updated main CSS for improved viewport handling.

src/pages/booking/components/ConactSection/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <!-- 选择数量 -->
+  <div class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12">
+    <div class="flex-full">
+      <div class="font-size-16 font-500 color-000 line-height-24">选择数量</div>
+      <div class="font-size-12 color-A3A3A3 line-height-16">请选择套餐数量</div>
+    </div>
+    <div class="right">
+      <Stepper v-model="count" />
+    </div>
+  </div>
+
+  <!-- 使用日期 -->
+  <UseDateRange
+    v-if="orderData.reservationEnabled"
+    :openDateRangeList="orderData.openDateRangeList"
+    v-model:selectedDate="reservationDate"
+  />
+
+  <!-- 联系方式 -->
+  <div class="bg-white rounded-12 overflow-hidden">
+    <div
+      class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
+    >
+      联系方式
+    </div>
+    <div class="flex flex-items-center border-box p-12">
+      <div class="font-size-14 font-500 color-525866 mr-12">联系人姓名</div>
+      <div class="right">
+        <input
+          class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+          v-model.trim="userFormList[0].visitorName"
+          placeholder="请输入联系人"
+          maxlength="20"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-items-center border-box p-12">
+      <div class="font-size-14 font-500 color-525866 mr-12">手机号码</div>
+      <div class="right">
+        <input
+          class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+          v-model.trim="userFormList[0].contactPhone"
+          placeholder="请输入联系手机"
+          maxlength="11"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps } from "vue";
+import Stepper from "@/components/Stepper/index.vue";
+import UseDateRange from "@/components/UseDateRange/index.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  userFormList: {
+    type: Array,
+    default: () => [{ visitorName: "", contactPhone: "" }],
+  },
+  reservationDate: {
+    type: String,
+    default: null,
+  },
+  orderData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "update:reservationDate"]);
+const count = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
+const reservationDate = computed({
+  get: () => props.reservationDate,
+  set: (val) => {
+    emit("update:reservationDate", val);
+  },
+});
+</script>
+
+<style></style>