修改 弹框表格

src/components/custom/OrderDetailContent.vue

@@ -44,79 +44,84 @@
       </table>
     </div>
 
-    <!-- 订单详情表格 -->
+    <!-- 订单详情表格（ArtTable） -->
     <div class="table-section">
-      <div class="table-wrapper">
-        <table class="order-table">
-          <thead>
-            <tr>
-              <th class="col-no">编号</th>
-              <th class="col-model">车型</th>
-              <th class="col-qty">数量/台</th>
-              <th class="col-color">颜色/外</th>
-              <th class="col-interior">内饰</th>
-              <th class="col-modify">改装</th>
-              <th class="col-official">官方指导价/二手挂牌价</th>
-              <th class="col-discount">优惠</th>
-              <th class="col-discount">手续费</th>
-              <th class="col-discount">改装费</th>
-              <th class="col-discount">FOB运费</th>
-              <th class="col-discount">港杂费</th>
-              <th class="col-discount">海运费</th>
-              <th class="col-discount">单价</th>
-              <th class="col-discount">总价</th>
-              <th class="col-discount">利润</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(item, index) in (orderData.veh_list || orderData.items || [])" :key="index">
-              <td class="col-no">{{ index + 1 }}</td>
-              <td class="col-model">{{ item.model_snapshot || item.model || '—' }} <span v-if="item.mileage>0">({{ item.mileage }}km)</span> </td>
-              <td class="col-qty">{{ item.num ?? item.quantity ?? 1 }}</td>
-              <td class="col-color">{{ item.color_exterior_snapshot || item.exteriorColor || '—' }}</td>
-              <td class="col-interior">{{ item.color_interior_snapshot || item.interiorColor || '—' }}</td>
-              <td class="col-modify">{{ item.modify || item.modification || '—' }}</td>
-              <!-- <td class="col-official">{{ formatPrice(Number(item.official_price?.amount ?? item.officialPrice ?? 0)) }}</td> -->
-              <td class="col-official">
-                <span v-if="item.mileage > 0">
-                  {{ item.listing_price?.currency_info || item.listing_price?.amount || item.discount || '—'  }}
-                </span>
-                <span v-else>{{ item.official_price?.currency_info || item.official_price?.amount || item.discount || '—'  }}</span>
-              </td>
-              <td class="col-discount">
-                <span v-if="item.mileage > 0">
-                  {{ item.reduction_price?.currency_info || item.reduction_price?.amount || item.discount || '—'  }}
-                </span>
-                <span v-else>{{ item.discount_price?.currency_info || item.discount_price?.amount || item.discount || '—' }}</span>
-              </td>
-              <td class="col-discount">{{ item.handling_fee?.currency_info || item.handling_fee?.amount || item.discount || '—' }}</td>
-              <td class="col-discount">{{ item.retrofit_fee?.currency_info || item.retrofit_fee?.amount || item.discount || '—' }}</td>
-              <td class="col-discount">{{ item.fob_transport_fee?.currency_info || item.fob_transport_fee?.amount || item.discount || '—' }}</td>
-              <td class="col-discount">{{ item.port_misc_fee?.currency_info || item.port_misc_fee?.amount || item.discount || '—' }}</td>
-              <td class="col-discount">{{ item.ocean_freight?.currency_info || item.ocean_freight?.amount || item.discount || '—' }}</td>
-              <!-- <td class="col-discount">${{ formatPrice(Number(item.unit_price?.amount ?? item.unitPrice ?? 0)) }}</td> -->
-              <td class="col-discount">{{ item.unit_price?.currency_info || item.unit_price?.amount || item.discount || '—'}}</td>
-              <!-- <td class="col-discount">${{ formatPrice(Number(item.total_price?.amount ?? item.totalPrice ?? 0)) }}</td> -->
-              <td class="col-discount">{{ item.total_price?.currency_info || item.total_price?.amount || item.discount || '—' }}</td>
-              <td class="col-discount">{{ item.profit?.currency_info || item.profit?.amount || item.discount || '—' }}</td>
-            </tr>
-            <tr>
-              <td colspan="10"></td>
-              <td colspan="2">
-                <span class="label">合同汇率:</span>
-                <span class="value">{{ orderData.contract_exchange_rate || orderData.contractRate || '—' }}</span>
-              </td>
-              <td colspan="2">
-                <span class="label">合计到岸价:</span>
-                <span class="value">${{ formatPrice(Number(orderData.cif_total_amount?.amount ?? orderData.totalCif ?? 0)) }}</span>
-              </td>
-              <td colspan="2">
-                <span class="label">利润:</span>
-                <span class="value">{{ orderData.profit_total?.currency_info || orderData.profit_total?.amount || '—' }}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <ArtTable :data="vehItems" border :pagination="false">
+        <template #default>
+          <ElTableColumn label="编号" width="60" align="center">
+            <template #default="scope">{{ scope.$index + 1 }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="车型" min-width="160">
+            <template #default="scope">
+              {{ scope.row.model_snapshot || scope.row.model || '—' }}
+              <span v-if="scope.row.mileage > 0">({{ scope.row.mileage }}km)</span>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="数量/台" width="90" align="center">
+            <template #default="scope">{{ scope.row.num ?? scope.row.quantity ?? 1 }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="颜色/外" align="center" prop="color_exterior_snapshot" />
+          <ElTableColumn label="内饰" min-width="120" align="center" prop="color_interior_snapshot" />
+          <ElTableColumn label="改装" min-width="120" align="center" prop="modify" />
+          <ElTableColumn label="官方指导价/二手挂牌价" min-width="175" align="center">
+            <template #default="scope">
+              <span v-if="scope.row.mileage > 0">
+                {{ scope.row.listing_price?.currency_info || scope.row.listing_price?.amount || scope.row.discount || '—' }}
+              </span>
+              <span v-else>
+                {{ scope.row.official_price?.currency_info || scope.row.official_price?.amount || scope.row.discount || '—' }}
+              </span>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="优惠" min-width="120" align="center">
+            <template #default="scope">
+              <span v-if="scope.row.mileage > 0">
+                {{ scope.row.reduction_price?.currency_info || scope.row.reduction_price?.amount || scope.row.discount || '—' }}
+              </span>
+              <span v-else>
+                {{ scope.row.discount_price?.currency_info || scope.row.discount_price?.amount || scope.row.discount || '—' }}
+              </span>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="手续费" min-width="120" align="center">
+            <template #default="scope">{{ scope.row.handling_fee?.currency_info || scope.row.handling_fee?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="改装费" min-width="120" align="center">
+            <template #default="scope">{{ scope.row.retrofit_fee?.currency_info || scope.row.retrofit_fee?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="FOB运费" min-width="120" align="center">
+            <template #default="scope">{{ scope.row.fob_transport_fee?.currency_info || scope.row.fob_transport_fee?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="港杂费" min-width="120" align="center">
+            <template #default="scope">{{ scope.row.port_misc_fee?.currency_info || scope.row.port_misc_fee?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="海运费" min-width="120" align="center">
+            <template #default="scope">{{ scope.row.ocean_freight?.currency_info || scope.row.ocean_freight?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="单价" min-width="120" align="center">
+            <template #default="scope">{{ scope.row.unit_price?.currency_info || scope.row.unit_price?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+          <ElTableColumn label="总价" min-width="120" align="center">
+            <template #default="scope">{{ scope.row.total_price?.currency_info || scope.row.total_price?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+          <ElTableColumn fixed="right" label="利润"  min-width="120" align="center">
+            <template #default="scope">{{ scope.row.profit?.currency_info || scope.row.profit?.amount || scope.row.discount || '—' }}</template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+      <div class="order-summary">
+        <div class="summary-item">
+          <span class="label">合同汇率:</span>
+          <span class="value">{{ orderData.contract_exchange_rate || orderData.contractRate || '—' }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="label">合计到岸价:</span>
+          <span class="value">${{ formatPrice(Number(orderData.cif_total_amount?.amount ?? orderData.totalCif ?? 0)) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="label">利润:</span>
+          <span class="value">{{ orderData.profit_total?.currency_info || orderData.profit_total?.amount || '—' }}</span>
+        </div>
       </div>
     </div>
 
@@ -223,8 +228,13 @@
         })
       }
 
+      const vehItems = computed(() => {
+        return (props.orderData as any).veh_list || (props.orderData as any).items || []
+      })
+
       return {
         paymentTableData,
+        vehItems,
         formatPrice
       }
     }
@@ -333,6 +343,47 @@
   .payment-section {
     margin: 20px 0;
   }
+
+  /* 订单底部汇总样式 */
+  .order-summary {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    flex-wrap: wrap;
+  }
+  .order-summary .summary-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    // background: #fff;
+    // border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+  .order-summary .label {
+    color: #666;
+  }
+  .order-summary .value {
+    font-weight: 600;
+    color: #111;
+  }
+
+  /* ArtTable 表头背景色 */
+  .table-section :deep(.el-table__header th) {
+    background-color: #f5f7fa;
+    color: #333;
+    font-weight: 600;
+  }
+  .table-section :deep(.el-table__header .cell) {
+    padding: 12px 8px;
+  }
   .payment-table {
     width: 100%;
     border-collapse: collapse;