From 51ebb5ecc28dfb518db0a99bd55babadee75a781 Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Mon, 20 Jul 2026 23:20:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor(h5/code-pay):=20=E6=8A=BD=E5=8F=96?=
 =?UTF-8?q?=E7=A0=81=E7=89=8C=E6=88=90=E5=8A=9F=E7=BB=93=E6=9E=9C=E9=A1=B5?=
 =?UTF-8?q?=E4=B8=BA=E7=8B=AC=E7=AB=8B=E7=BB=84=E4=BB=B6=E5=B9=B6=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E8=81=9A=E5=90=88=E4=B8=8A=E6=B5=AE=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../code-pay/shared/CodePayResultCard.vue     | 288 ++++++++++++++++++
 .../views/code-pay/shared/CodePayShell.vue    | 167 +---------
 src/shared/locales/en-US/codePay.json         |   1 +
 src/shared/locales/id-ID/codePay.json         |   1 +
 src/shared/locales/ja-JP/codePay.json         |   1 +
 src/shared/locales/ko-KR/codePay.json         |   1 +
 src/shared/locales/ms-MY/codePay.json         |   1 +
 src/shared/locales/th-TH/codePay.json         |   1 +
 src/shared/locales/vi-VN/codePay.json         |   1 +
 src/shared/locales/zh-CN/codePay.json         |   1 +
 src/shared/locales/zh-HK/codePay.json         |   1 +
 src/shared/locales/zh-TW/codePay.json         |   1 +
 12 files changed, 312 insertions(+), 153 deletions(-)
 create mode 100644 src/mobile/views/code-pay/shared/CodePayResultCard.vue

diff --git a/src/mobile/views/code-pay/shared/CodePayResultCard.vue b/src/mobile/views/code-pay/shared/CodePayResultCard.vue
new file mode 100644
index 0000000..27991d2
--- /dev/null
+++ b/src/mobile/views/code-pay/shared/CodePayResultCard.vue
@@ -0,0 +1,288 @@
+<script lang="ts" setup>
+/**
+ * 码牌支付 - 成功结果页组件
+ *
+ * 视觉对齐聚合 AggregateResultCard（上浮卡片 + 实心彩色图标 + border-top 摘要表格），
+ * 保留码牌特色：大金额独占行 + 入场动画。
+ * 通道品牌色由父级注入（微信绿 / 支付宝蓝），图标/标题/按钮跟随通道色；
+ * 近黑色品牌（抖音）在深色下主按钮反色为浅底深字。
+ */
+import { computed, unref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDesignSetting } from '@/shared/hooks/setting/useDesignSetting'
+
+defineOptions({ name: 'CodePayResultCard' })
+
+const props = withDefaults(defineProps<{
+  /** 大金额（元字符串），独占一行展示 — 码牌特色 */
+  amount: string
+  /** 标题文案（已 $t，留空走 i18n codePay.paySuccess） */
+  title?: string
+  /** 副提示文案（已 $t，留空走 i18n codePay.paidTip） */
+  tip?: string
+  /** 收款商户名 */
+  merchantName?: string
+  /** 订单号 */
+  orderNo?: string
+  /** 品牌色（浅色） */
+  brandColor?: string
+  /** 品牌色（深色模式压亮，空则用 brandColor） */
+  brandColorDark?: string
+  /** 关闭按钮文案（已 $t，留空走 i18n codePay.closePage） */
+  closeText?: string
+}>(), {
+  title: '',
+  tip: '',
+  merchantName: '',
+  orderNo: '',
+  brandColor: '#5d9dfe',
+  brandColorDark: '',
+  closeText: '',
+})
+
+const emit = defineEmits<{
+  /** 完成/关闭页面（由父级处理 closeWebview） */
+  close: []
+}>()
+
+const { t } = useI18n()
+const { getDarkMode } = useDesignSetting()
+
+/** 近黑色品牌（抖音）：深色下主按钮需浅底深字 */
+function isNearBlackBrand(hex?: string) {
+  if (!hex) {
+    return false
+  }
+  const h = hex.replace('#', '')
+  if (h.length !== 6) {
+    return false
+  }
+  const r = Number.parseInt(h.slice(0, 2), 16)
+  const g = Number.parseInt(h.slice(2, 4), 16)
+  const b = Number.parseInt(h.slice(4, 6), 16)
+  return (r + g + b) / 3 < 60
+}
+
+/** 当前生效品牌色（深色优先 brandColorDark，用于图标/标题/按钮） */
+const effectiveBrand = computed(() => {
+  if (unref(getDarkMode) === 'dark' && props.brandColorDark) {
+    return props.brandColorDark
+  }
+  return props.brandColor
+})
+
+/** 操作按钮色：深色 + 近黑品牌时反色为浅底 */
+const effectiveAction = computed(() => {
+  if (unref(getDarkMode) === 'dark' && isNearBlackBrand(props.brandColor)) {
+    return '#f2f2f2'
+  }
+  return effectiveBrand.value
+})
+
+/** 操作按钮文字色 */
+const effectiveActionText = computed(() => {
+  if (unref(getDarkMode) === 'dark' && isNearBlackBrand(props.brandColor)) {
+    return '#161823'
+  }
+  return '#ffffff'
+})
+
+/** 标题（默认走 i18n） */
+const titleText = computed(() => props.title || t('codePay.paySuccess'))
+
+/** 副提示（默认走 i18n） */
+const tipText = computed(() => props.tip || t('codePay.paidTip'))
+
+/** 关闭按钮文案（默认走 i18n） */
+const closeText = computed(() => props.closeText || t('codePay.closePage'))
+</script>
+
+<template>
+  <div
+    class="code-pay-result"
+    :style="{
+      '--result-color': effectiveBrand,
+      '--brand-action': effectiveAction,
+      '--brand-action-text': effectiveActionText,
+    }"
+  >
+    <!-- 状态图标：实心彩色圆底 + 白色 SVG（对齐聚合） -->
+    <div class="code-pay-result__icon">
+      <svg
+        viewBox="0 0 48 48"
+        width="28"
+        height="28"
+        fill="none"
+        stroke="#fff"
+        stroke-width="4"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <!-- 对勾 -->
+        <path d="M14 24 L21 31 L34 16" />
+      </svg>
+    </div>
+    <!-- 支付成功 -->
+    <p class="code-pay-result__title">
+      {{ titleText }}
+    </p>
+    <!-- 副提示 -->
+    <p class="code-pay-result__tip">
+      {{ tipText }}
+    </p>
+    <!-- 大金额（码牌特色，独占行） -->
+    <div class="code-pay-result__amount">
+      <span class="code-pay-result__currency">¥</span>{{ amount }}
+    </div>
+    <!-- 订单摘要（border-top 分割线表格，对齐聚合） -->
+    <div v-if="merchantName || orderNo" class="code-pay-result__summary">
+      <div v-if="merchantName" class="code-pay-result__summary-row">
+        <!-- 收款商户 -->
+        <span class="code-pay-result__summary-label">{{ t('codePay.merchantDefault') }}</span>
+        <span class="code-pay-result__summary-value">{{ merchantName }}</span>
+      </div>
+      <div v-if="orderNo" class="code-pay-result__summary-row">
+        <!-- 订单号 -->
+        <span class="code-pay-result__summary-label">{{ t('codePay.orderNo') }}</span>
+        <span class="code-pay-result__summary-value">{{ orderNo }}</span>
+      </div>
+    </div>
+    <!-- 完成/关闭 -->
+    <van-button
+      class="code-pay-result__close"
+      round
+      block
+      type="primary"
+      color="var(--brand-action)"
+      @click="emit('close')"
+    >
+      {{ closeText }}
+    </van-button>
+  </div>
+</template>
+
+<style scoped lang="less">
+// 结果状态卡片：上浮卡片风格，对齐聚合 AggregateResultCard
+.code-pay-result {
+  margin: -32px 16px 16px;
+  padding: 24px 20px;
+  background: var(--h5-bg-card);
+  border-radius: 12px;
+  box-shadow: var(--h5-shadow-card);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  box-sizing: border-box;
+  animation: code-pay-result-up 0.45s ease-out;
+}
+
+// 实心彩色圆底图标（对齐聚合，原 80px 半透明底）
+.code-pay-result__icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--result-color);
+  margin-bottom: 4px;
+  flex-shrink: 0;
+  animation: code-pay-result-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+// 状态标题：跟随通道品牌色（对齐聚合）
+.code-pay-result__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--result-color);
+  line-height: 1.4;
+}
+
+// 副提示文案
+.code-pay-result__tip {
+  margin: 0;
+  font-size: 13px;
+  color: var(--h5-text-secondary);
+  line-height: 1.6;
+}
+
+// 大金额（码牌特色，独占行）
+.code-pay-result__amount {
+  font-size: 36px;
+  font-weight: 600;
+  color: var(--h5-text-primary);
+  line-height: 1.2;
+  margin: 12px 0 16px;
+}
+
+.code-pay-result__currency {
+  font-size: 20px;
+  margin-right: 4px;
+  font-weight: 500;
+}
+
+// 订单摘要区：border-top 分割线表格（对齐聚合，原独立阴影卡）
+.code-pay-result__summary {
+  width: 100%;
+  padding-top: 16px;
+  border-top: 1px solid var(--h5-border);
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.code-pay-result__summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 6px 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.code-pay-result__summary-label {
+  color: var(--h5-text-secondary);
+  flex-shrink: 0;
+  min-width: 72px;
+}
+
+.code-pay-result__summary-value {
+  color: var(--h5-text-primary);
+  text-align: right;
+  word-break: break-all;
+}
+
+// 关闭按钮：实心品牌色，对齐聚合 280px
+.code-pay-result__close {
+  margin-top: 16px;
+  width: 100%;
+  max-width: 280px;
+}
+
+@keyframes code-pay-result-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes code-pay-result-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>
diff --git a/src/mobile/views/code-pay/shared/CodePayShell.vue b/src/mobile/views/code-pay/shared/CodePayShell.vue
index b65cde3..9668c93 100644
--- a/src/mobile/views/code-pay/shared/CodePayShell.vue
+++ b/src/mobile/views/code-pay/shared/CodePayShell.vue
@@ -8,6 +8,7 @@
 import { computed, ref, unref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDesignSetting } from '@/shared/hooks/setting/useDesignSetting'
+import CodePayResultCard from './CodePayResultCard.vue'
 
 defineOptions({ name: 'CodePayShell' })
 
@@ -169,47 +170,21 @@ function onPay() {
       '--brand-action-text': effectiveActionText,
     }"
   >
-    <!-- 支付成功结果态：对标收银 cashier__result -->
-    <div v-if="paid" class="code-pay-shell__result">
-      <div class="code-pay-shell__result-icon">
-        <van-icon name="success" size="48" color="#07c160" />
-      </div>
-      <!-- 支付成功 -->
-      <div class="code-pay-shell__result-title">
-        {{ t('codePay.paySuccess') }}
-      </div>
-      <div class="code-pay-shell__result-amount">
-        <span class="code-pay-shell__result-currency">¥</span>{{ displayAmount }}
-      </div>
-      <div v-if="orderNo || merchantName" class="code-pay-shell__result-card">
-        <div v-if="merchantName" class="code-pay-shell__result-row">
-          <!-- 收款商户 -->
-          <span>{{ t('codePay.merchantDefault') }}</span>
-          <span :title="merchantName">{{ merchantName }}</span>
-        </div>
-        <div v-if="orderNo" class="code-pay-shell__result-row">
-          <!-- 订单号 -->
-          <span>{{ t('codePay.orderNo') }}</span>
-          <span :title="orderNo">{{ orderNo }}</span>
-        </div>
-      </div>
-      <!-- 完成/关闭 -->
-      <van-button
-        class="code-pay-shell__result-btn"
-        round
-        block
-        type="primary"
-        color="var(--brand-action)"
-        @click="emit('close')"
-      >
-        {{ t('codePay.closePage') }}
-      </van-button>
-    </div>
+    <!-- 品牌顶栏（paid 和非 paid 都渲染，作为结果卡/收款卡负 margin 叠放对象） -->
+    <div class="code-pay-shell__brand" />
+
+    <!-- 支付成功结果态：独立组件，对齐聚合上浮卡片风格 -->
+    <CodePayResultCard
+      v-if="paid"
+      :amount="displayAmount"
+      :merchant-name="merchantName"
+      :order-no="orderNo"
+      :brand-color="brandColor"
+      :brand-color-dark="brandColorNight || brandColor"
+      @close="emit('close')"
+    />
 
     <template v-else>
-      <!-- 品牌顶栏（文档流，配合上浮卡） -->
-      <div class="code-pay-shell__brand" />
-
       <div class="code-pay-shell__card enter-y">
         <div class="code-pay-shell__merchant">
           <div class="code-pay-shell__avatar">
@@ -522,119 +497,5 @@ function onPay() {
       margin: 0;
     }
   }
-
-  // 成功结果态
-  &__result {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 32px 24px calc(24px + env(safe-area-inset-bottom, 0px));
-    text-align: center;
-    animation: code-pay-result-up 0.45s ease-out;
-  }
-
-  &__result-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin-bottom: 20px;
-    background: rgb(7 193 96 / 10%);
-    animation: code-pay-result-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  &__result-title {
-    font-size: 22px;
-    font-weight: 600;
-    color: var(--h5-text-primary);
-    margin-bottom: 12px;
-  }
-
-  &__result-amount {
-    font-size: 36px;
-    font-weight: 600;
-    color: var(--h5-text-primary);
-    line-height: 1.2;
-    margin-bottom: 24px;
-  }
-
-  &__result-currency {
-    font-size: 20px;
-    margin-right: 4px;
-    font-weight: 500;
-  }
-
-  &__result-card {
-    width: 100%;
-    max-width: 320px;
-    margin-bottom: 28px;
-    padding: 16px 20px;
-    background: var(--h5-bg-card);
-    border-radius: 12px;
-    box-shadow: var(--h5-shadow-card);
-    text-align: left;
-  }
-
-  &__result-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    font-size: 13px;
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    span:first-child {
-      flex-shrink: 0;
-      color: var(--h5-text-secondary);
-    }
-
-    span:last-child {
-      flex: 1;
-      min-width: 0;
-      color: var(--h5-text-primary);
-      text-align: right;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  &__result-btn {
-    width: 100%;
-    max-width: 320px;
-  }
-}
-
-@keyframes code-pay-result-up {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes code-pay-result-pop {
-  from {
-    opacity: 0;
-    transform: scale(0.6);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
 }
 </style>
diff --git a/src/shared/locales/en-US/codePay.json b/src/shared/locales/en-US/codePay.json
index 0945ba8..4b2400e 100644
--- a/src/shared/locales/en-US/codePay.json
+++ b/src/shared/locales/en-US/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "Merchant",
   "payToMerchant": "Pay to {name}",
   "paySuccess": "Payment successful",
+  "paidTip": "Payment completed. Thank you",
   "payFail": "Payment failed, please retry",
   "payLaunched": "Payment launched",
   "payPending": "Order created, please complete payment",
diff --git a/src/shared/locales/id-ID/codePay.json b/src/shared/locales/id-ID/codePay.json
index 59b7049..1343821 100644
--- a/src/shared/locales/id-ID/codePay.json
+++ b/src/shared/locales/id-ID/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "Merchant",
   "payToMerchant": "Bayar ke {name}",
   "paySuccess": "Pembayaran berhasil",
+  "paidTip": "Pembayaran selesai. Terima kasih",
   "payFail": "Pembayaran gagal, coba lagi",
   "payLaunched": "Pembayaran diluncurkan",
   "payPending": "Pesanan dibuat, selesaikan pembayaran",
diff --git a/src/shared/locales/ja-JP/codePay.json b/src/shared/locales/ja-JP/codePay.json
index ac26e3b..71a74a7 100644
--- a/src/shared/locales/ja-JP/codePay.json
+++ b/src/shared/locales/ja-JP/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "加盟店",
   "payToMerchant": "{name} へ支払い",
   "paySuccess": "支払い成功",
+  "paidTip": "支払いが完了しました。ありがとうございます",
   "payFail": "支払いに失敗しました。再試行してください",
   "payLaunched": "支払いを開始しました",
   "payPending": "注文が作成されました。支払いを完了してください",
diff --git a/src/shared/locales/ko-KR/codePay.json b/src/shared/locales/ko-KR/codePay.json
index 0fde8d7..53d43aa 100644
--- a/src/shared/locales/ko-KR/codePay.json
+++ b/src/shared/locales/ko-KR/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "가맹점",
   "payToMerchant": "{name}에 결제",
   "paySuccess": "결제 성공",
+  "paidTip": "결제가 완료되었습니다. 감사합니다",
   "payFail": "결제 실패, 다시 시도하세요",
   "payLaunched": "결제가 시작되었습니다",
   "payPending": "주문이 생성되었습니다. 결제를 완료하세요",
diff --git a/src/shared/locales/ms-MY/codePay.json b/src/shared/locales/ms-MY/codePay.json
index fc016c1..bd1b74a 100644
--- a/src/shared/locales/ms-MY/codePay.json
+++ b/src/shared/locales/ms-MY/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "Pedagang",
   "payToMerchant": "Bayar kepada {name}",
   "paySuccess": "Pembayaran berjaya",
+  "paidTip": "Pembayaran selesai. Terima kasih",
   "payFail": "Pembayaran gagal, cuba lagi",
   "payLaunched": "Pembayaran dilancarkan",
   "payPending": "Pesanan dicipta, sila lengkapkan pembayaran",
diff --git a/src/shared/locales/th-TH/codePay.json b/src/shared/locales/th-TH/codePay.json
index c866aa7..0fa62fe 100644
--- a/src/shared/locales/th-TH/codePay.json
+++ b/src/shared/locales/th-TH/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "ร้านค้า",
   "payToMerchant": "ชำระให้ {name}",
   "paySuccess": "ชำระเงินสำเร็จ",
+  "paidTip": "ชำระเงินสำเร็จ ขอบคุณที่ใช้บริการ",
   "payFail": "ชำระเงินไม่สำเร็จ โปรดลองอีกครั้ง",
   "payLaunched": "เปิดการชำระเงินแล้ว",
   "payPending": "สร้างคำสั่งซื้อแล้ว โปรดชำระเงินให้เสร็จ",
diff --git a/src/shared/locales/vi-VN/codePay.json b/src/shared/locales/vi-VN/codePay.json
index f639ce1..7032f18 100644
--- a/src/shared/locales/vi-VN/codePay.json
+++ b/src/shared/locales/vi-VN/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "Merchant",
   "payToMerchant": "Thanh toán cho {name}",
   "paySuccess": "Thanh toán thành công",
+  "paidTip": "Thanh toán hoàn tất. Cảm ơn bạn",
   "payFail": "Thanh toán thất bại, vui lòng thử lại",
   "payLaunched": "Đã mở thanh toán",
   "payPending": "Đơn đã tạo, vui lòng hoàn tất thanh toán",
diff --git a/src/shared/locales/zh-CN/codePay.json b/src/shared/locales/zh-CN/codePay.json
index 6c53174..06e7a5b 100644
--- a/src/shared/locales/zh-CN/codePay.json
+++ b/src/shared/locales/zh-CN/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "收款商户",
   "payToMerchant": "向{name}付款",
   "paySuccess": "支付成功",
+  "paidTip": "支付已完成，感谢使用",
   "payFail": "支付失败, 请重试",
   "payLaunched": "支付已拉起",
   "payPending": "订单已创建, 请完成支付",
diff --git a/src/shared/locales/zh-HK/codePay.json b/src/shared/locales/zh-HK/codePay.json
index 764fcdf..19b763a 100644
--- a/src/shared/locales/zh-HK/codePay.json
+++ b/src/shared/locales/zh-HK/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "收款商戶",
   "payToMerchant": "向{name}付款",
   "paySuccess": "支付成功",
+  "paidTip": "支付已完成，感謝使用",
   "payFail": "支付失敗，請重試",
   "payLaunched": "支付已拉起",
   "payPending": "訂單已建立，請完成支付",
diff --git a/src/shared/locales/zh-TW/codePay.json b/src/shared/locales/zh-TW/codePay.json
index 764fcdf..19b763a 100644
--- a/src/shared/locales/zh-TW/codePay.json
+++ b/src/shared/locales/zh-TW/codePay.json
@@ -13,6 +13,7 @@
   "merchantDefault": "收款商戶",
   "payToMerchant": "向{name}付款",
   "paySuccess": "支付成功",
+  "paidTip": "支付已完成，感謝使用",
   "payFail": "支付失敗，請重試",
   "payLaunched": "支付已拉起",
   "payPending": "訂單已建立，請完成支付",