feat: 我的订单样式调整

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

@@ -1,25 +1,20 @@
 <template>
-  <view class="order-card" @click="handleCardClick">
+  <view
+    class="order-card bg-white border-box p-12 rounded-12 m-12"
+    @click="handleCardClick"
+  >
     <!-- 卡片头部 -->
-    <view class="card-header">
-      <view class="status-info">
-        <image class="status-icon" :src="getStatusIcon()"></image>
-        <view class="order-title">
-          {{ orderData.workOrderTypeName || orderData.commodityName }}
+    <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>
-
-        <uni-icons
-          class="arrow-icon"
-          v-if="props.orderData.orderType !== undefined"
-          type="right"
-          color="#999"
-          size="16"
-        />
       </view>
       <view
         v-if="orderData.status !== 'pending'"
         :class="[
-          'status-tag',
+          'status-tag font-size-12',
           `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
         ]"
       >
@@ -27,9 +22,6 @@
       </view>
     </view>
 
-    <!-- 分割线 -->
-    <Divider />
-
     <!-- 卡片内容 -->
     <OrderCardContent :order-data="orderData" />
   </view>
@@ -37,12 +29,8 @@
 
 <script setup>
 import { defineProps } from "vue";
-import Divider from "@/components/Divider/index.vue";
 import OrderCardContent from "./OrderCardContent.vue";
 import serviceIcon from "./images/service.png";
-import ticketIcon from "./images/ticket.png";
-import hotelIcon from "./images/hotel.png";
-import foodIcon from "./images/food.png";
 
 // Props
 const props = defineProps({
@@ -71,9 +59,16 @@ const emit = defineEmits(["click", "call"]);
 
 // 图标映射
 const ICON_MAP = {
-  0: hotelIcon, // 酒店订单
-  1: ticketIcon, // 门票订单
-  2: foodIcon, // 其他订单
+  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: "餐饮",
 };
 
 // 获取状态图标
@@ -86,6 +81,11 @@ const getStatusIcon = () => {
   return ICON_MAP[props.orderData.orderType] || serviceIcon;
 };
 
+// 获取订单类型名称
+const getOrderTypeName = () => {
+  return ORDER_NAME_MAP[props.orderData.orderType] || "其他订单";
+};
+
 // 获取状态文本
 const getStatusText = (status) => {
   // 工单情况：orderType 为 undefined