feat: 订单卡片组件封装

components/OrderCardItem/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="service-order-item">
+    <view class="order-header">
+      <image class="order-icon" src="./images/icon_order.png"></image>
+      <text class="order-title">温泉早鸟票</text>
+      <text :class="['order-status', `status-${orderStatus}`]">{{
+        orderStatusText
+      }}</text>
+    </view>
+    <view class="order-details">
+      <view class="detail-item">
+        <text class="detail-label">订单编号：</text>
+        <text class="detail-value">{{ orderId }}</text>
+      </view>
+      <view class="detail-item">
+        <text class="detail-label">游客人数：</text>
+        <text class="detail-value">{{ touristCount }}人</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+// Sample data
+const orderId = ref("7378400483776544");
+const touristCount = ref(7);
+const orderStatus = ref("pending"); // Options: 'canceled', 'pending', 'refundProcessing', 'refunded', 'completed'
+
+// Computed property for order status text
+const orderStatusText = computed(() => {
+  switch (orderStatus.value) {
+    case "canceled":
+      return "已取消";
+    case "pending":
+      return "待确认";
+    case "refundProcessing":
+      return "退款中";
+    case "refunded":
+      return "已退款";
+    case "completed":
+      return "已完成";
+    default:
+      return "";
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>