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/quick/components/Card/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
+    @click.stop="handleClick(item)"
+  >
+    <img class="left rounded-10" :src="item.commodityPhoto" mode="aspectFill" />
+    <div class="right border-box flex-full pl-12">
+      <div class="font-size-16 line-height-24 color-171717 mb-4">
+        {{ item.commodityName }}
+      </div>
+      <div
+        v-if="item.commodityFacility"
+        class="font-size-12 line-height-16 color-99A0AE mb-4 ellipsis-1"
+      >
+        {{ item.commodityFacility.join(" ") }}
+      </div>
+      <div class="font-size-12 line-height-18 color-43669A">
+        {{ item.commodityTradeRuleList.join(" / ") }}
+      </div>
+
+      <div class="flex flex-items-center flex-justify-end">
+        <span
+          class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
+        >
+          {{ item.specificationPrice }}
+        </span>
+        <span
+          v-if="item.stockUnitLabel"
+          class="font-size-12 line-height-16 color-99A0AE"
+        >
+          /{{ item.stockUnitLabel }}
+        </span>
+        <span class="btn border-box rounded-10 color-white ml-16">订</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { useSelectedDateStore } from "@/store";
+
+// Props
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({
+      commodityPhoto: "",
+      commodityId: "",
+      commodityName: "",
+      specificationPrice: "",
+      commodityServices: [],
+      commodityTags: [], // 商品标签
+      commodityTradeRuleList: [], // 交易规则列表
+      specificationId: "", // 规格ID
+      stockUnitLabel: "", // 库存单位
+    }),
+  },
+  selectedDate: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const selectedDateStore = useSelectedDateStore();
+
+const navigateToPage = (commodityId, path) => {
+  const { startDate, endDate, totalDays } = props.selectedDate;
+  selectedDateStore.setData({ startDate, endDate, totalDays });
+
+  uni.navigateTo({ url: `${path}?commodityId=${commodityId}` });
+};
+
+const handleClick = ({ commodityId }) =>
+  navigateToPage(commodityId, "/pages/goods/index");
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>