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

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

@@ -1,26 +0,0 @@
-<template>
-  <view class="info-row flex items-center mt-8">
-    <text class="label font-size-12 color-99A0AE">{{ label }}：</text>
-    <text class="value flex-full font-size-12 color-99A0AE">{{ value }}</text>
-  </view>
-</template>
-
-<script setup>
-import { defineProps } from "vue";
-
-// Props
-const props = defineProps({
-  label: {
-    type: String,
-    required: true,
-    default: "",
-  },
-  value: {
-    type: [String, Number],
-    required: true,
-    default: "",
-  },
-});
-</script>
-
-<style scoped lang="scss"></style>

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

@@ -1,127 +0,0 @@
-<template>
-  <view class="card-content border-box pt-12">
-    <view class="flex items-center justify-between">
-      <view
-        class="left flex-full font-size-14 line-height-20 color-171717 mr-12"
-      >
-        {{ orderData.commodityName }}
-      </view>
-      <view class="right font-size-18 font-bold line-height-20 color-525866">
-        {{ orderData.orderAmt }}
-      </view>
-    </view>
-    <!-- 动态渲染信息行 -->
-    <InfoRow
-      v-for="item in displayItems"
-      :key="item.label"
-      :label="item.label"
-      :value="item.value"
-    />
-  </view>
-</template>
-
-<script setup>
-import { defineProps, computed } from "vue";
-import InfoRow from "./InfoRow.vue";
-
-// 订单类型常量
-const ORDER_TYPES = {
-  HOTEL: "0", // 酒店订单
-  TICKET: "1", // 门票订单
-  OTHER: "2", // 其他订单
-};
-
-// 标签常量
-const LABELS = {
-  CHECK_IN_TIME: "入住时间",
-  VISITOR_NAME: "游客姓名",
-  CONTACT_PHONE: "联系电话",
-  QUANTITY: "份数",
-  CREATE_TIME: "创建时间",
-  CONTACT_GUEST: "联系房客",
-};
-
-// Props
-const props = defineProps({
-  orderData: {
-    type: Object,
-    required: true,
-    default: () => ({
-      orderType: undefined,
-      orderId: "",
-      checkInTime: "",
-      visitorName: "",
-      contactPhone: "",
-      userName: "",
-      userPhone: "",
-      commodityAmount: 0,
-      createTime: "",
-    }),
-  },
-});
-
-// 格式化份数
-const formatQuantity = (amount) => {
-  return `${Math.floor(amount || 0)}份`;
-};
-
-// 计算显示项目
-const displayItems = computed(() => {
-  const { orderData } = props;
-  const { orderType } = orderData;
-
-  // 工单情况：orderType 为 undefined
-  if (orderType === undefined) {
-    return [
-      { label: LABELS.CREATE_TIME, value: orderData.createTime },
-      { label: LABELS.CONTACT_GUEST, value: orderData.userName },
-      { label: LABELS.CONTACT_PHONE, value: orderData.userPhone },
-    ];
-  }
-
-  // 订单情况：根据 orderType 返回不同的显示项
-  switch (orderType) {
-    case ORDER_TYPES.HOTEL:
-      return [
-        {
-          label: LABELS.CHECK_IN_TIME,
-          value:
-            orderData.checkInData?.replace(
-              /(\d{4})-(\d{1,2})-(\d{1,2})/,
-              "$2月$3日"
-            ) +
-            "-" +
-            orderData.checkOutData?.replace(
-              /(\d{4})-(\d{1,2})-(\d{1,2})/,
-              "$2月$3日"
-            ),
-        },
-        { label: LABELS.VISITOR_NAME, value: orderData.visitorName },
-        { label: LABELS.CONTACT_PHONE, value: orderData.contactPhone },
-      ];
-
-    case ORDER_TYPES.TICKET:
-    case ORDER_TYPES.OTHER:
-      return [
-        {
-          label: LABELS.QUANTITY,
-          value: formatQuantity(orderData.commodityAmount),
-        },
-      ];
-
-    default:
-      // 兜底情况，返回空数组
-      return [];
-  }
-});
-</script>
-
-<style scoped lang="scss">
-.right {
-  &::before {
-    content: "￥";
-    font-weight: 500;
-    font-size: 16px;
-  }
-}
-</style>

src/pages-service/order/components/OrderCard/constants/order.js

@@ -1,59 +0,0 @@
-// 订单类型
-export const ORDER_TYPE_MAP = {
-  0: [
-    {
-      label: '订单编号',
-      key: 'orderId'
-    },
-    {
-      label: '入住时间',
-      key: 'checkInData'
-    },
-    {
-      label: '游客姓名',
-      key: 'visitorName'
-    },
-    {
-      label: '联系电话',
-      key: 'contactPhone'
-    }
-  ],
-  1: [
-    {
-      label: '订单编号',
-      key: 'orderId'
-    },
-    {
-      label: '份数',
-      key: 'commodityAmount'
-    }
-  ],
-  2: [
-    {
-      label: '订单编号',
-      key: 'orderId'
-    },
-    {
-      label: '份数',
-      key: 'commodityAmount'
-    }
-  ],
-}
-
-// 工单类型
-export const SERVICE_TYPE_MAP = {
-  0: [
-    {
-      label: '创建时间',
-      key: 'createTime'
-    },
-    {
-      label: '联系房客',
-      key: 'userName'
-    },
-    {
-      label: '联系电话',
-      key: 'userPhone'
-    }
-  ],
-}

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">

src/pages-service/order/components/OrderCard/styles/index.scss

@@ -7,37 +7,22 @@
   }
 }
 
-.status-icon {
-  width: 20px;
+.icon {
   height: 20px;
+  width: 20px;
 }
 
-.status-tag {
-  &.tag-0 {
-    color: #ff3d60;
-  }
-
-  &.tag-1 {
-    color: #f00044;
-  }
-
-  &.tag-2 {
-    color: #40ae36;
-  }
-
-  &.tag-3 {
-    color: #808389;
-  }
-
-  &.tag-4 {
-    color: #2d91ff;
-  }
-
-  &.tag-5 {
-    color: #808389;
-  }
-
-  &.tag-6 {
-    color: #fd8702;
-  }
+.right {
+  height: 88px;
+  width: 88px;
+}
+
+.service-user {
+  background-color: rgba(67, 103, 153, 0.1);
+  border-radius: 5px;
+  color: #436799;
+}
+
+.cancel {
+  padding: 4px 10px;
 }