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>

components/OrderCardItem/prompt.md

@@ -0,0 +1,16 @@
+## 订单 Item 组件
+
+组件名称：订单卡片组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.service-order-item
+3、可以使用 uniapp 内置的组件
+4、订单状态有已取消、待确认、退款中、已退款、已完成状态，用颜色区分
+5、订单卡片有点击跳转订单详情交互
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

components/OrderCardItem/styles/index.scss

@@ -0,0 +1,81 @@
+.service-order-item {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.order-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.order-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #ffa500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.order-title {
+  font-size: 16px;
+  color: #333;
+}
+
+.order-status {
+  font-size: 14px;
+  padding: 5px 10px;
+  border-radius: 15px;
+}
+
+.status-canceled {
+  color: #999;
+  border: 1px solid #999;
+}
+
+.status-pending {
+  color: #ff4d94;
+  border: 1px solid #ff4d94;
+}
+
+.status-refundProcessing {
+  color: #ff9900;
+  border: 1px solid #ff9900;
+}
+
+.status-refunded {
+  color: #ff4d4f;
+  border: 1px solid #ff4d4f;
+}
+
+.status-completed {
+  color: #28a745;
+  border: 1px solid #28a745;
+}
+
+.order-details {
+  margin-top: 10px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.detail-label {
+  font-size: 14px;
+  color: #666;
+  margin-right: 10px;
+}
+
+.detail-value {
+  font-size: 14px;
+  color: #333;
+}