From cb9dcaec2e20ba098382ef4a35058258fbd1821e Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Thu, 9 Apr 2026 17:29:18 +0800
Subject: [PATCH] fix(payment): show both order ID and order number in result
 pages

Display order ID (#24) and order number (sub2_xxx) as separate rows
in payment result and status panel success views.
---
 frontend/src/components/payment/PaymentStatusPanel.vue | 6 +++++-
 frontend/src/i18n/locales/en.ts                        | 1 +
 frontend/src/i18n/locales/zh.ts                        | 3 ++-
 frontend/src/views/user/PaymentResultView.vue          | 6 +++++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/payment/PaymentStatusPanel.vue b/frontend/src/components/payment/PaymentStatusPanel.vue
index f629dcf2f5..0dcbc63d06 100644
--- a/frontend/src/components/payment/PaymentStatusPanel.vue
+++ b/frontend/src/components/payment/PaymentStatusPanel.vue
@@ -14,7 +14,11 @@
             <div class="space-y-2 text-sm">
               <div class="flex justify-between">
                 <span class="text-gray-500 dark:text-gray-400">{{ t('payment.orders.orderId') }}</span>
-                <span class="font-medium text-gray-900 dark:text-white">{{ paidOrder.out_trade_no || '#' + paidOrder.id }}</span>
+                <span class="font-medium text-gray-900 dark:text-white">#{{ paidOrder.id }}</span>
+              </div>
+              <div v-if="paidOrder.out_trade_no" class="flex justify-between">
+                <span class="text-gray-500 dark:text-gray-400">{{ t('payment.orders.orderNo') }}</span>
+                <span class="font-medium text-gray-900 dark:text-white">{{ paidOrder.out_trade_no }}</span>
               </div>
               <div class="flex justify-between">
                 <span class="text-gray-500 dark:text-gray-400">{{ t('payment.orders.amount') }}</span>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 808b65b3fa..34e4826296 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -5123,6 +5123,7 @@ export default {
       title: 'My Orders',
       empty: 'No orders yet',
       orderId: 'Order ID',
+      orderNo: 'Order No.',
       amount: 'Amount',
       payAmount: 'Paid',
       status: 'Status',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index d4ed66247e..3b574ab11e 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -5319,7 +5319,8 @@ export default {
     orders: {
       title: '我的订单',
       empty: '暂无订单',
-      orderId: '订单号',
+      orderId: '订单 ID',
+      orderNo: '订单编号',
       amount: '金额',
       payAmount: '实付',
       status: '状态',
diff --git a/frontend/src/views/user/PaymentResultView.vue b/frontend/src/views/user/PaymentResultView.vue
index 91165432d4..8c5447b795 100644
--- a/frontend/src/views/user/PaymentResultView.vue
+++ b/frontend/src/views/user/PaymentResultView.vue
@@ -30,7 +30,11 @@
           <div class="space-y-3 text-sm">
             <div class="flex justify-between">
               <span class="text-gray-500 dark:text-gray-400">{{ t('payment.orders.orderId') }}</span>
-              <span class="font-medium text-gray-900 dark:text-white">{{ order.out_trade_no || '#' + order.id }}</span>
+              <span class="font-medium text-gray-900 dark:text-white">#{{ order.id }}</span>
+            </div>
+            <div v-if="order.out_trade_no" class="flex justify-between">
+              <span class="text-gray-500 dark:text-gray-400">{{ t('payment.orders.orderNo') }}</span>
+              <span class="font-medium text-gray-900 dark:text-white">{{ order.out_trade_no }}</span>
             </div>
             <div class="flex justify-between">
               <span class="text-gray-500 dark:text-gray-400">{{ t('payment.orders.amount') }}</span>