feat: 新增工单列表

src/pages-service/order/components/OrderCard/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <view
+    class="order-card bg-white border-box p-12 rounded-12 m-12"
+    @click="handleCardClick"
+  >
+    <!-- 卡片头部 -->
+    <view class="card-header flex items-center">
+      <view class="status-info flex items-center flex-full">
+        <image class="status-icon mr-4" :src="getStatusIcon()" />
+        <view class="order-title font-size-14 line-height-20 color-525866">
+          {{ getOrderTypeName() }}
+        </view>
+      </view>
+      <view
+        v-if="orderData.status !== 'pending'"
+        :class="[
+          'status-tag font-size-12',
+          `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
+        ]"
+      >
+        {{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
+      </view>
+    </view>
+
+    <!-- 卡片内容 -->
+    <OrderCardContent :order-data="orderData" />
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import OrderCardContent from "./OrderCardContent.vue";
+
+// Props
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: "",
+      workOrderTypeName: "",
+      createTime: "",
+      contactName: "",
+      contactPhone: "",
+      orderStatus: "0", // pending-待处理, completed-已完成, cancelled-已取消
+      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
+      orderNumber: "", // 订单编号
+      checkInTime: "", // 入住时间
+      visitorName: "", // 游客姓名
+      commodityAmount: 0, // 份数
+      workOrderStatus: 0, // 工单状态：0-待处理, 1-已完成
+    }),
+  },
+});
+
+// Emits
+const emit = defineEmits(["click", "call"]);
+
+// 图标映射
+const ICON_MAP = {
+  0: "https://oss.nianxx.cn/mp/static/version_101/order/room.png", // 酒店订单
+  1: "https://oss.nianxx.cn/mp/static/version_101/order/ticket.png", // 门票订单
+  2: "https://oss.nianxx.cn/mp/static/version_101/order/food.png", // 餐饮
+};
+
+// 订单类型映射
+const ORDER_NAME_MAP = {
+  0: "房间",
+  1: "门票",
+  2: "餐饮",
+};
+
+// 获取状态图标
+const getStatusIcon = () => {
+  // 订单情况：根据 orderType 返回对应图标
+  return ICON_MAP[props.orderData.orderType];
+};
+
+// 获取订单类型名称
+const getOrderTypeName = () => {
+  return ORDER_NAME_MAP[props.orderData.orderType] || "其他订单";
+};
+
+// 获取状态文本
+const getStatusText = (status) => {
+  // 工单情况：orderType 为 undefined
+  if (props.orderData.orderType === undefined) {
+    const workOrderStatusMap = {
+      0: "待接单",
+      1: "处理中",
+      2: "已完成",
+      3: "已关闭",
+    };
+    return workOrderStatusMap[status] || "未知状态";
+  }
+
+  // 订单情况：orderType 有值
+  const orderStatusMap = {
+    0: "待支付",
+    1: "待确认",
+    2: "待使用",
+    3: "已取消",
+    4: "退款中",
+    5: "已退款",
+    6: "已完成",
+  };
+  return orderStatusMap[status] || "未知状态";
+};
+
+// 处理卡片点击
+const handleCardClick = () => {
+  if (props.orderData.orderType === undefined) return;
+  emit("click", props.orderData);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>