From e51d93341ef9f8427bcb4686cb9b84d35be7531a Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Fri, 17 Jul 2026 09:10:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(cashier):=20=E9=95=BF=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E5=8F=B7=E4=B8=8E=E6=A0=87=E9=A2=98=E5=8D=95=E8=A1=8C=E7=9C=81?=
 =?UTF-8?q?=E7=95=A5=E9=81=BF=E5=85=8D=E6=8A=98=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

H5/WEB 收银台头部与结果态对订单标题、订单号使用 ellipsis，并补充 title 悬停查看全文。
---
 src/mobile/views/cashier/CashierEnvPage.vue | 29 ++++++++++++++++-----
 src/pc/views/cashier/Index.vue              | 28 +++++++++++++++-----
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/mobile/views/cashier/CashierEnvPage.vue b/src/mobile/views/cashier/CashierEnvPage.vue
index 8f2ea67..58bdd69 100644
--- a/src/mobile/views/cashier/CashierEnvPage.vue
+++ b/src/mobile/views/cashier/CashierEnvPage.vue
@@ -401,11 +401,11 @@ onUnmounted(() => {
       <div v-if="order.orderNo" class="cashier__result-order">
         <div class="cashier__result-order-row">
           <span>{{ t('cashier.orderTitle') }}</span>
-          <span>{{ order.title || t('cashier.demoOrderTitle') }}</span>
+          <span :title="order.title || t('cashier.demoOrderTitle')">{{ order.title || t('cashier.demoOrderTitle') }}</span>
         </div>
         <div class="cashier__result-order-row">
           <span>{{ t('cashier.orderNo') }}</span>
-          <span>{{ order.orderNo }}</span>
+          <span :title="order.orderNo">{{ order.orderNo }}</span>
         </div>
         <div v-if="order.amount" class="cashier__result-order-row">
           <span>{{ t('cashier.payableAmount') }}</span>
@@ -436,11 +436,12 @@ onUnmounted(() => {
         <div class="cashier__detail">
           <div class="cashier__detail-row">
             <span>{{ t('cashier.orderTitle') }}</span>
-            <span>{{ order.title || t('cashier.demoOrderTitle') }}</span>
+            <!-- title 便于长文案悬停/长按看全量 -->
+            <span :title="order.title || t('cashier.demoOrderTitle')">{{ order.title || t('cashier.demoOrderTitle') }}</span>
           </div>
           <div class="cashier__detail-row">
             <span>{{ t('cashier.orderNo') }}</span>
-            <span>{{ order.orderNo }}</span>
+            <span :title="order.orderNo">{{ order.orderNo }}</span>
           </div>
         </div>
       </div>
@@ -598,6 +599,7 @@ onUnmounted(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 12px;
     font-size: 13px;
     margin-bottom: 10px;
 
@@ -606,14 +608,18 @@ onUnmounted(() => {
     }
 
     span:first-child {
+      flex-shrink: 0;
       color: @text-sub;
     }
 
     span:last-child {
+      flex: 1;
+      min-width: 0;
       color: @text-main;
-      max-width: 60%;
       text-align: right;
-      word-break: break-all;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
@@ -708,16 +714,27 @@ onUnmounted(() => {
 
   &__detail-row {
     display: flex;
+    align-items: center;
     justify-content: space-between;
+    gap: 12px;
     font-size: 13px;
     margin-bottom: 6px;
 
+    // 左侧标签不收缩
     span:first-child {
+      flex-shrink: 0;
       color: @text-sub;
     }
 
+    // 右侧值单行省略，避免长订单号折行撑高头部
     span:last-child {
+      flex: 1;
+      min-width: 0;
       color: @text-main;
+      text-align: right;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
diff --git a/src/pc/views/cashier/Index.vue b/src/pc/views/cashier/Index.vue
index ddd196a..459aebe 100644
--- a/src/pc/views/cashier/Index.vue
+++ b/src/pc/views/cashier/Index.vue
@@ -306,11 +306,11 @@ onUnmounted(() => {
         <div v-if="order.orderNo" class="pc-cashier__result-order">
           <div class="pc-cashier__result-row">
             <span>{{ t('cashier.orderTitle') }}</span>
-            <span>{{ order.title || t('cashier.demoOrderTitle') }}</span>
+            <span :title="order.title || t('cashier.demoOrderTitle')">{{ order.title || t('cashier.demoOrderTitle') }}</span>
           </div>
           <div class="pc-cashier__result-row">
             <span>{{ t('cashier.orderNo') }}</span>
-            <span>{{ order.orderNo }}</span>
+            <span :title="order.orderNo">{{ order.orderNo }}</span>
           </div>
           <div v-if="order.amount" class="pc-cashier__result-row">
             <span>{{ t('cashier.payableAmount') }}</span>
@@ -333,7 +333,10 @@ onUnmounted(() => {
           <div v-else-if="expired" class="pc-cashier__countdown">
             <span class="pc-cashier__countdown-time">{{ t('cashier.expired') }}</span>
           </div>
-          <div class="pc-cashier__title">
+          <div
+            class="pc-cashier__title"
+            :title="order.title || t('cashier.demoOrderTitle')"
+          >
             {{ order.title || t('cashier.demoOrderTitle') }}
           </div>
           <div class="pc-cashier__price">
@@ -342,7 +345,7 @@ onUnmounted(() => {
               <span>￥</span>{{ amountYuan }}
             </p>
           </div>
-          <div class="pc-cashier__order-no">
+          <div class="pc-cashier__order-no" :title="order.orderNo">
             {{ t('cashier.orderNoLabel') }}{{ order.orderNo }}
           </div>
         </div>
@@ -503,6 +506,10 @@ onUnmounted(() => {
   color: #1e293b;
   padding-right: 180px;
   line-height: 1.4;
+  /* 长标题单行省略，避免折行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .pc-cashier__price {
@@ -532,6 +539,10 @@ onUnmounted(() => {
 .pc-cashier__order-no {
   font-size: 13px;
   color: #94a3b8;
+  /* 长订单号单行省略 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .pc-cashier__content {
@@ -624,6 +635,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 12px;
   font-size: 14px;
   margin-bottom: 12px;
 }
@@ -633,14 +645,18 @@ onUnmounted(() => {
 }
 
 .pc-cashier__result-row span:first-child {
+  flex-shrink: 0;
   color: #94a3b8;
 }
 
 .pc-cashier__result-row span:last-child {
+  flex: 1;
+  min-width: 0;
   color: #1e293b;
-  max-width: 60%;
   text-align: right;
-  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .pc-cashier__result-amount {