feat: 订单详情布局功能调整

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

@@ -1,45 +1,24 @@
 <template>
-  <view class="user-info mb-12" v-if="hasConsumerData">
-    <view class="user-info-title">{{ infoTitle }}</view>
-    <view
-      v-for="(item, index) in consumerList"
-      :key="getConsumerKey(item, index)"
-      class="user-info-group"
-    >
-      <view class="user-info-item">
-        <text class="label">{{ contactLabel }}</text>
-        <text class="value">{{ item.visitorName || "未填写" }}</text>
-      </view>
-      <view class="user-info-item">
-        <text class="label">联系电话：</text>
-        <text class="value">{{ formatPhone(item.contactPhone) }}</text>
+  <view
+    class="bg-white border-box rounded-10 p-12 mb-12"
+    v-if="hasConsumerData"
+  >
+    <view v-for="(item, index) in consumerList" :key="index">
+      <view class="flex mb-8 font-size-12">
+        <text class="w-60 color-99A0AE">住客姓名</text>
+        <text class="color-525866">{{ item.visitorName }}</text>
       </view>
     </view>
+    <view class="flex font-size-12">
+      <text class="w-60 color-99A0AE">联系电话</text>
+      <text class="color-525866">{{ contactPhone }}</text>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { defineProps, computed } from "vue";
 
-// 订单类型常量
-const ORDER_TYPES = {
-  HOTEL: "0", // 酒店订单
-  TICKET: "1", // 门票订单
-  DINING: "2", // 餐饮订单
-};
-
-// 信息配置映射
-const INFO_CONFIG = {
-  [ORDER_TYPES.HOTEL]: {
-    title: "订房信息",
-    contactLabel: "联系房客：",
-  },
-  default: {
-    title: "游客信息",
-    contactLabel: "联系游客：",
-  },
-};
-
 const props = defineProps({
   orderData: {
     type: Object,
@@ -53,44 +32,14 @@ const props = defineProps({
   },
 });
 
-// 使用计算属性缓存信息标题
-const infoTitle = computed(() => {
-  const config = INFO_CONFIG[props.orderData.orderType] || INFO_CONFIG.default;
-  return config.title;
-});
-
-// 使用计算属性缓存联系人标签
-const contactLabel = computed(() => {
-  const config = INFO_CONFIG[props.orderData.orderType] || INFO_CONFIG.default;
-  return config.contactLabel;
-});
-
 // 使用计算属性处理用户信息列表，提供更好的响应性和缓存
-const consumerList = computed(() => {
-  return props.orderData.consumerInfoList || [];
-});
+const consumerList = computed(() => props.orderData.consumerInfoList || []);
+
+// 联系电话
+const contactPhone = computed(() => consumerList.value[0]?.contactPhone);
 
 // 检查是否有用户数据
-const hasConsumerData = computed(() => {
-  return consumerList.value.length > 0;
-});
-
-// 生成更稳定的key值，优先使用唯一标识
-const getConsumerKey = (item, index) => {
-  return item.id || item.visitorName || `consumer-${index}`;
-};
-
-// 格式化电话号码显示
-const formatPhone = (phone) => {
-  if (!phone) return "未填写";
-  // 简单的电话号码格式化，中间部分用*号隐藏
-  if (phone.length === 11) {
-    return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
-  }
-  return phone;
-};
+const hasConsumerData = computed(() => consumerList.value.length);
 </script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
+<style scoped lang="scss"></style>