feat: 调整项目结构

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

@@ -0,0 +1,89 @@
+<template>
+  <view class="order-status">
+    <view class="status-header">
+      <uni-icons
+        class="status-icon"
+        fontFamily="ZhiNian"
+        size="20"
+        color="#fff"
+      >
+        {{ "&#xe600;" }}
+      </uni-icons>
+      <!-- 订单状态 -->
+      <text class="status-text">{{ statusText }}</text>
+    </view>
+    <view class="status-description">{{ statusDescription }}</view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+
+// 订单状态配置映射
+const ORDER_STATUS_CONFIG = {
+  0: {
+    text: "待支付",
+    description: "请尽快完成支付",
+  },
+  1: {
+    text: "待确认",
+    description: "商家正在确认您的订单",
+  },
+  2: {
+    text: "待使用",
+    description: "预订成功，订单待使用",
+  },
+  3: {
+    text: "已取消",
+    description: "订单已取消",
+  },
+  4: {
+    text: "退款中",
+    description: "商家退款正在处理中，请耐心等待",
+  },
+  5: {
+    text: "已退款",
+    description: "款项预计1-7个工作日退回至原支付账户",
+  },
+  6: {
+    text: "已完成",
+    description: "订单已完成，感谢您的使用",
+  },
+};
+
+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 currentStatusConfig = computed(() => {
+  return (
+    ORDER_STATUS_CONFIG[props.orderData.orderStatus] || ORDER_STATUS_CONFIG["0"]
+  );
+});
+
+// 状态文本
+const statusText = computed(() => {
+  return currentStatusConfig.value.text;
+});
+
+// 状态描述
+const statusDescription = computed(() => {
+  return currentStatusConfig.value.description;
+});
+</script>
+
+<style scoped lang="scss">
+@use "./styles/index.scss";
+</style>

src/pages-order/order/components/OrderStatusInfo/prompt.md

@@ -0,0 +1,14 @@
+## 订单状态组件
+
+组件名称：订单状态组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.order-status
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

src/pages-order/order/components/OrderStatusInfo/styles/index.scss

@@ -0,0 +1,28 @@
+.order-status {
+  color: #fff;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.status-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.status-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+.status-text {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.status-description {
+  font-size: 12px;
+}