feat: 呼叫服务页面布局调整

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

@@ -4,114 +4,76 @@
     @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}`,
-        ]"
+    <view class="border-box flex flex-items-center pb-12">
+      <image
+        class="icon mr-4"
+        src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png"
+      />
+      <text class="font-size-14 color-525866 line-height-20">工单</text>
+      <text class="font-size-12 color-525866 line-height-20 ml-auto"
+        >已完成</text
       >
-        {{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
+    </view>
+    <!-- 卡片内容 -->
+    <view class="border-box card-content flex flex-items-center pb-12">
+      <view class="border-box left flex-full pr-20">
+        <view class="font-size-12 color-525866 line-height-20 mb-4"
+          >房间号：A01</view
+        >
+        <view class="font-size-12 color-525866 line-height-20 mb-4"
+          >联系方式:173822042402</view
+        >
+        <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
+          >需求描述:我太渴了，立即立刻马上现在给我送两瓶水过来！我太渴了，立即立刻马上现在给我送两瓶水过来！我太渴了，立即立刻马上现在给我送两瓶水过来！我太渴了，立即立刻马上现在给我送两瓶水过来！</view
+        >
       </view>
+
+      <image
+        class="right rounded-6"
+        src="https://picsum.photos/300/300"
+        mode="aspectFill"
+      />
     </view>
 
-    <!-- 卡片内容 -->
-    <OrderCardContent :order-data="orderData" />
+    <!-- 服务人员 -->
+    <view
+      class="service-user border-box p-8 flex flex-items-center flex-justify-between mb-12"
+    >
+      <view class="font-size-12 line-height-16">服务人员：张三</view>
+
+      <uni-icons
+        class="ml-auto mr-4"
+        type="phone-filled"
+        size="14"
+        color="#436799"
+      />
+      <text class="font-size-12 line-height-16">拨打电话</text>
+    </view>
+
+    <!-- 取消操作 -->
+    <view class="flex flex-items-center flex-justify-between">
+      <text
+        class="cancel border-box border rounded-6 font-size-12 line-height-16 color-525866 ml-auto"
+        >取消呼叫</text
+      >
+    </view>
   </view>
 </template>
 
 <script setup>
 import { defineProps } from "vue";
-import OrderCardContent from "./OrderCardContent.vue";
 
 // Props
 const props = defineProps({
-  orderData: {
+  item: {
     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-已完成
-    }),
+    default: () => ({}),
   },
 });
 
-// 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);
-};
+const handleCardClick = () => {};
 </script>
 
 <style scoped lang="scss">