贯通商品编号全流程

frontend/src/features/orders/views/OrdersView.vue

@@ -8,6 +8,7 @@ import { fetchOrders, type Order } from '@/features/orders'
 import { useSessionStore } from '@/stores/session'
 import { orderStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
+import { formatListingNo } from '@/utils/listingDisplay'
 
 const loading = ref(false)
 const orders = ref<Order[]>([])
@@ -40,6 +41,9 @@ const displayOrders = computed(() => {
     filtered = filtered.filter(
       order =>
         order.order_no.toLowerCase().includes(keyword) ||
+        formatListingCode(order).toLowerCase().includes(keyword) ||
+        String(order.listing_id).includes(keyword) ||
+        String(order.account_id).includes(keyword) ||
         order.title.toLowerCase().includes(keyword)
     )
   }
@@ -152,6 +156,19 @@ async function copyOrderNo(orderNo: string) {
   }
 }
 
+function formatListingCode(order: Order) {
+  return formatListingNo(order.listing_no, order.listing_id)
+}
+
+async function copyListingCode(order: Order) {
+  try {
+    await navigator.clipboard.writeText(formatListingCode(order))
+    ElMessage.success('商品编号已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
 function getPaymentDeadline(order: Order) {
   if (order.status !== 'pending_payment' || !order.created_at) return null
   if (order.payment_deadline_at) {
@@ -182,7 +199,7 @@ function getCountdownMinutes(order: Order) {
     <div class="orders-toolbar">
       <el-input
         v-model="searchKeyword"
-        placeholder="搜索订单号 / 账号 / 起始数字"
+        placeholder="搜索订单号 / 商品编号 / 账号"
         :prefix-icon="Search"
         clearable
         class="search-input"
@@ -220,6 +237,16 @@ function getCountdownMinutes(order: Order) {
             </div>
           </template>
         </el-table-column>
+        <el-table-column label="商品编号" width="150">
+          <template #default="{ row }">
+            <div class="order-no-cell">
+              <span class="order-no-text">{{ formatListingCode(row) }}</span>
+              <el-icon class="copy-icon" @click="copyListingCode(row)">
+                <CopyDocument />
+              </el-icon>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="title" label="账号" min-width="180" />
         <el-table-column label="金额" width="132">
           <template #default="{ row }">
@@ -299,6 +326,10 @@ function getCountdownMinutes(order: Order) {
               {{ orderRole(order) }}
             </el-tag>
           </div>
+          <button class="listing-code-line" type="button" @click.stop="copyListingCode(order)">
+            商品编号 {{ formatListingCode(order) }}
+            <el-icon><CopyDocument /></el-icon>
+          </button>
           <div class="card-title">{{ order.title }}</div>
           <div class="card-meta">
             <div class="meta-row">
@@ -425,6 +456,22 @@ function getCountdownMinutes(order: Order) {
   color: #4a5568;
 }
 
+.listing-code-line {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 5px;
+  margin-top: 10px;
+  padding: 4px 9px;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
 .copy-icon {
   cursor: pointer;
   color: #9ca3af;