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

@@ -0,0 +1,123 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+  >
+    <div class="refund-popup bg-F5F7FA border-box">
+      <div
+        class="border-box flex flex-items-center justify-between pt-12 pb-12 relative"
+      >
+        <div
+          class="flex-full font-size-16 color-171717 line-height-24 text-center"
+        >
+          取消政策
+        </div>
+        <!-- 关闭按钮 -->
+        <uni-icons
+          class="close absolute"
+          type="close"
+          size="20"
+          color="#CACFD8"
+          @click="handleClose"
+        />
+      </div>
+      <!-- 内容区域 -->
+      <div class="border-box rounded-12 bg-white p-12 ml-12 mr-12 mb-40">
+        <div class="flex flex-items-center mb-8">
+          <uni-icons fontFamily="znicons" size="20" color="#333">
+            {{ zniconsMap["zn-refund"] }}
+          </uni-icons>
+          <spanclass="font-size-14 font-600 color-171717 ml-8">
+            {{ refundTitle }}
+          </text>
+        </div>
+        <div
+          class="font-size-14 color-525866 line-height-16 mb-4"
+          v-for="(item, index) in commodityPurchaseInstruction"
+          :key="index"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons";
+
+// Props定义
+const props = defineProps({
+  // 弹窗显示状态
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  // 订单数据
+  orderData: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+// Events定义
+const emit = defineEmits(["update:modelValue"]);
+
+// 弹窗引用
+const popupRef = ref(null);
+
+// 获取退款模板
+const refundTitle = computed(() => {
+  if (props.orderData.commodityPurchaseInstruction) {
+    return (
+      props.orderData.commodityPurchaseInstruction.refundTitle || "退订规则"
+    );
+  }
+
+  return "退订规则";
+});
+
+const commodityPurchaseInstruction = computed(() => {
+  if (
+    props.orderData.commodityPurchaseInstruction &&
+    props.orderData.commodityPurchaseInstruction.refundContent
+  ) {
+    // 以换行符为分隔符，将字符串转换为数组
+    return props.orderData.commodityPurchaseInstruction.refundContent.split(
+      "\n",
+    );
+  }
+
+  return {};
+});
+
+// 方法定义
+const show = () => popupRef.value && popupRef.value.open();
+
+const hide = () => popupRef.value && popupRef.value.close();
+
+// 监听modelValue变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      show();
+    } else {
+      hide();
+    }
+  },
+  { immediate: true },
+);
+
+const handleClose = () => {
+  emit("update:modelValue", false);
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>