feat: 新增订单列表交互

pages/order/components/OrderCard/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <view class="order-card" @click="handleCardClick">
+    <!-- 卡片头部 -->
+    <view class="card-header">
+      <view class="status-info">
+        <image class="status-icon" src="./images/service.png"></image>
+        <view class="order-title">{{ orderData.title }}</view>
+      </view>
+      <view
+        v-if="orderData.status !== 'pending'"
+        :class="['status-tag', `tag-${orderData.status}`]"
+      >
+        {{ getStatusText(orderData.status) }}
+      </view>
+    </view>
+
+    <!-- 分割线 -->
+    <Divider />
+
+    <!-- 卡片内容 -->
+    <view class="card-content">
+      <view class="info-row">
+        <text class="label">创建时间：</text>
+        <text class="value">{{ orderData.createTime }}</text>
+      </view>
+      <view class="info-row">
+        <text class="label">联系房客：</text>
+        <text class="value">{{ orderData.contactName }}</text>
+      </view>
+      <view class="info-row">
+        <text class="label">联系电话：</text>
+        <text class="value">{{ orderData.contactPhone }}</text>
+      </view>
+    </view>
+
+    <!-- 操作区域 -->
+    <view v-if="orderData.status === 'pending'" class="action-area">
+      <button class="action-btn" @click.stop="handleCall">立即呼叫</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import Divider from "@/components/Divider/index.vue";
+import { defineProps } from "vue";
+
+// Props
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: "",
+      title: "",
+      createTime: "",
+      contactName: "",
+      contactPhone: "",
+      status: "pending", // pending-待处理, completed-已完成, cancelled-已取消
+    }),
+  },
+});
+
+// Emits
+const emit = defineEmits(["click", "call", "complete"]);
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const statusMap = {
+    pending: "待处理",
+    completed: "已完成",
+    cancelled: "已取消",
+    processing: "处理中",
+  };
+  return statusMap[status] || "未知状态";
+};
+
+// 处理卡片点击
+const handleCardClick = () => {
+  emit("click", props.orderData);
+};
+
+// 处理呼叫
+const handleCall = () => {
+  emit("call", props.orderData);
+};
+
+// 处理完成
+const handleComplete = () => {
+  emit("complete", props.orderData);
+};
+
+// 暴露方法
+defineExpose({
+  getStatusText,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>