From a5a2fea04533511334002955386d9b178b4d0bfb Mon Sep 17 00:00:00 2001 From: Albert Coady Date: Mon, 6 Jul 2026 10:59:04 +0800 Subject: [PATCH] Polish EasyPay custom method UI --- frontend/src/assets/icons/payment.svg | 9 ++ .../payment/PaymentMethodSelector.vue | 4 +- .../payment/PaymentProviderDialog.vue | 86 +++++++++---------- .../__tests__/PaymentProviderDialog.spec.ts | 14 +-- frontend/src/i18n/locales/zh.ts | 4 +- 5 files changed, 65 insertions(+), 52 deletions(-) create mode 100644 frontend/src/assets/icons/payment.svg diff --git a/frontend/src/assets/icons/payment.svg b/frontend/src/assets/icons/payment.svg new file mode 100644 index 0000000000..c78bea4cf7 --- /dev/null +++ b/frontend/src/assets/icons/payment.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/payment/PaymentMethodSelector.vue b/frontend/src/components/payment/PaymentMethodSelector.vue index 8ed565053c..ed31578c27 100644 --- a/frontend/src/components/payment/PaymentMethodSelector.vue +++ b/frontend/src/components/payment/PaymentMethodSelector.vue @@ -44,6 +44,7 @@ import alipayIcon from '@/assets/icons/alipay.svg' import wxpayIcon from '@/assets/icons/wxpay.svg' import stripeIcon from '@/assets/icons/stripe.svg' import airwallexIcon from '@/assets/icons/airwallex.svg' +import paymentIcon from '@/assets/icons/payment.svg' export interface PaymentMethodOption { type: string @@ -68,6 +69,7 @@ const METHOD_ICONS: Record = { wxpay: wxpayIcon, stripe: stripeIcon, airwallex: airwallexIcon, + credit_card: paymentIcon, } const sortedMethods = computed(() => { @@ -83,7 +85,7 @@ function methodIcon(type: string): string { if (type.includes('alipay')) return METHOD_ICONS.alipay if (type.includes('wxpay')) return METHOD_ICONS.wxpay if (type === 'airwallex') return METHOD_ICONS.airwallex - return METHOD_ICONS[type] || stripeIcon + return METHOD_ICONS[type] || paymentIcon } function methodLabel(method: PaymentMethodOption): string { diff --git a/frontend/src/components/payment/PaymentProviderDialog.vue b/frontend/src/components/payment/PaymentProviderDialog.vue index 4c2dccbab5..838a33dd9a 100644 --- a/frontend/src/components/payment/PaymentProviderDialog.vue +++ b/frontend/src/components/payment/PaymentProviderDialog.vue @@ -70,6 +70,49 @@ +
+
+
+
+ {{ t('admin.settings.payment.easypayCustomMethods') }} +
+

+ {{ t('admin.settings.payment.easypayCustomMethodsHint') }} +

+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
@@ -168,49 +211,6 @@
-
-
-
-
- {{ t('admin.settings.payment.easypayCustomMethods') }} -
-

- {{ t('admin.settings.payment.easypayCustomMethodsHint') }} -

-
- -
-
-
-
- - -
-
- - -
-
- - -
- -
-
-
-
diff --git a/frontend/src/components/payment/__tests__/PaymentProviderDialog.spec.ts b/frontend/src/components/payment/__tests__/PaymentProviderDialog.spec.ts index 9221455275..a84ff4cbda 100644 --- a/frontend/src/components/payment/__tests__/PaymentProviderDialog.spec.ts +++ b/frontend/src/components/payment/__tests__/PaymentProviderDialog.spec.ts @@ -187,9 +187,10 @@ describe('PaymentProviderDialog payment guide', () => { await nextTick() const inputs = wrapper.findAll('input[type="text"]') - const ldcTypeInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === 'ldc') - const upstreamTypeInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === 'epay') - const displayNameInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === 'LDC') + const customTypeInputs = inputs.filter(input => (input.element as HTMLInputElement).placeholder === 'credit_card') + const ldcTypeInput = customTypeInputs[0] + const upstreamTypeInput = customTypeInputs[1] + const displayNameInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === '信用卡') if (!ldcTypeInput || !upstreamTypeInput || !displayNameInput) { throw new Error('custom method inputs not found') } @@ -229,9 +230,10 @@ describe('PaymentProviderDialog payment guide', () => { await nextTick() const inputs = wrapper.findAll('input[type="text"]') - const typeInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === 'ldc') - const upstreamTypeInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === 'epay') - const displayNameInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === 'LDC') + const customTypeInputs = inputs.filter(input => (input.element as HTMLInputElement).placeholder === 'credit_card') + const typeInput = customTypeInputs[0] + const upstreamTypeInput = customTypeInputs[1] + const displayNameInput = inputs.find(input => (input.element as HTMLInputElement).placeholder === '信用卡') if (!typeInput || !upstreamTypeInput || !displayNameInput) { throw new Error('custom method inputs not found') } diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts index f4b38b2d85..bd49ba0ccf 100644 --- a/frontend/src/i18n/locales/zh.ts +++ b/frontend/src/i18n/locales/zh.ts @@ -6422,8 +6422,8 @@ export default { field_cid: '支付渠道 ID', field_cidAlipay: '支付宝渠道 ID', field_cidWxpay: '微信渠道 ID', - easypayCustomMethods: '易支付自定义方式', - easypayCustomMethodsHint: '添加当前易支付接口额外支持的方式。支付方式会记录到 Sub2API 订单中，上游 type 会作为易支付 type 参数提交。', + easypayCustomMethods: '易支付自定义支付方式', + easypayCustomMethodsHint: '添加当前易支付服务商额外支持的支付方式。支付方式会记录到 Sub2API 订单中，上游 type 会作为易支付 type 参数提交。', addCustomMethod: '添加方式', customMethodType: '支付方式', customMethodUpstreamType: '上游 type',