best-unit 2.0.1 → 2.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "best-unit",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.0.3",
   "type": "module",
   "main": "dist/best-unit.cjs",
   "module": "dist/best-unit.js",

package/src/api/index.ts

@@ -156,7 +156,7 @@ export const getChannelInfo = async (data: { code: string }) => {
     });
 };
 
-// /sdk/offline/channel/map
+// 获取币种对应渠道
 export const getOfflineChannelMap = async (data: { currency: string }) => {
   const fundUnitParams = JSON.parse(
     sessionStorage.getItem("fund_unit_params") || "{}"
@@ -186,5 +186,32 @@ export const getOfflineChannelMap = async (data: { currency: string }) => {
     });
 };
 
+// /sdk/business_exchange_rate/calculate
+// 计算业务汇率
+export const calculateBusinessExchangeRate = async (data: {
+  currency: string;
+  amount: string;
+}) => {
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  return http()
+    .post("/business_exchange_rate/calculate", {
+      fund_balance_id: fundUnitParams.fundBalanceId,
+      merchant_id: fundUnitParams.merchantId,
+      biz_type: fundUnitParams.bizType,
+      amount: data.amount,
+      payment_currency: data.currency,
+    })
+    .then((res) => {
+      return {
+        amount: res.data.amount,
+        exchangeRate: res.data.exchange_rate,
+        currency: res.data.currency,
+        consistent: res.data.consistent,
+      };
+    });
+};
+
 // 示例用法：
 // getBalance({ merchant_id: '1128', biz_type: 'ad', token: 'xxx' }).then(res => console.log(res));

package/src/components/business/payment-sdk/offline-payment/theme.tsx

@@ -7,7 +7,7 @@ function createOfflinePaymentThemes() {
     container: {
       background: "#fff",
       borderRadius: 8,
-      padding: size === Size.SMALL ? 16 : 20,
+      padding: size === Size.SMALL ? 14 : 16,
       width: "100%",
       maxWidth: "100%",
       boxSizing: "border-box",
@@ -17,7 +17,7 @@ function createOfflinePaymentThemes() {
       },
     },
     header: {
-      marginBottom: size === Size.SMALL ? 20 : 24,
+      marginBottom: size === Size.SMALL ? 16 : 20,
     },
     backButton: {
       display: "flex",
@@ -27,19 +27,19 @@ function createOfflinePaymentThemes() {
       border: "none",
       color: "#1890ff",
       cursor: "pointer",
-      fontSize: size === Size.SMALL ? 14 : 16,
+      fontSize: size === Size.SMALL ? 13 : 14,
       fontWeight: 500,
     },
     backIcon: {
       fontSize: size === Size.SMALL ? 16 : 18,
     },
     uploadSection: {
-      marginBottom: size === Size.SMALL ? 24 : 32,
+      marginBottom: size === Size.SMALL ? 18 : 24,
     },
     uploadArea: {
       border: "2px dashed #D9D9D9",
       borderRadius: 8,
-      padding: size === Size.SMALL ? "40px 20px" : "60px 30px",
+      padding: size === Size.SMALL ? "30px 16px" : "40px 20px",
       textAlign: "center",
       cursor: "pointer",
       background: "#FAFAFA",
@@ -52,36 +52,36 @@ function createOfflinePaymentThemes() {
       },
     },
     uploadIcon: {
-      fontSize: size === Size.SMALL ? 48 : 64,
-      marginBottom: size === Size.SMALL ? 12 : 16,
+      fontSize: size === Size.SMALL ? 40 : 52,
+      marginBottom: size === Size.SMALL ? 10 : 12,
     },
     uploadTitle: {
-      fontSize: size === Size.SMALL ? 16 : 18,
+      fontSize: size === Size.SMALL ? 14 : 16,
       fontWeight: 600,
       color: "#222",
-      marginBottom: size === Size.SMALL ? 8 : 12,
+      marginBottom: size === Size.SMALL ? 6 : 10,
     },
     uploadHint: {
-      fontSize: size === Size.SMALL ? 13 : 14,
+      fontSize: size === Size.SMALL ? 12 : 13,
       color: "#999",
     },
     hiddenInput: {
       display: "none",
     },
     fileList: {
-      marginTop: size === Size.SMALL ? 12 : 16,
+      marginTop: size === Size.SMALL ? 10 : 12,
     },
     fileItem: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      padding: size === Size.SMALL ? "8px 12px" : "10px 16px",
+      padding: size === Size.SMALL ? "6px 10px" : "8px 12px",
       background: "#F5F5F5",
       borderRadius: 6,
-      marginBottom: 8,
+      marginBottom: 6,
     },
     fileName: {
-      fontSize: size === Size.SMALL ? 13 : 14,
+      fontSize: size === Size.SMALL ? 12 : 13,
       color: "#222",
     },
     removeButton: {
@@ -98,14 +98,14 @@ function createOfflinePaymentThemes() {
       justifyContent: "center",
     },
     fieldSection: {
-      marginBottom: size === Size.SMALL ? 20 : 24,
+      marginBottom: size === Size.SMALL ? 12 : 16,
     },
     fieldLabel: {
       display: "block",
-      fontSize: size === Size.SMALL ? 14 : 16,
+      fontSize: size === Size.SMALL ? 13 : 14,
       fontWeight: 500,
       color: "#222",
-      marginBottom: size === Size.SMALL ? 8 : 12,
+      marginBottom: size === Size.SMALL ? 6 : 10,
     },
     required: {
       color: "#ff4d4f",
@@ -116,11 +116,12 @@ function createOfflinePaymentThemes() {
     },
     input: {
       width: "100%",
-      padding: size === Size.SMALL ? "10px 12px" : "12px 16px",
+      // 与左侧支付金额输入框保持一致高度
+      padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
       borderRadius: 6,
       border: "1px solid #D9D9D9",
       outline: "none",
-      fontSize: size === Size.SMALL ? 14 : 16,
+      fontSize: 14,
       boxSizing: "border-box",
     },
     inputError: {
@@ -139,25 +140,25 @@ function createOfflinePaymentThemes() {
     },
     calendarIcon: {
       position: "absolute",
-      right: size === Size.SMALL ? 12 : 16,
+      right: size === Size.SMALL ? 8 : 10,
       top: "50%",
       transform: "translateY(-50%)",
-      fontSize: size === Size.SMALL ? 16 : 18,
+      fontSize: size === Size.SMALL ? 12 : 14,
       pointerEvents: "none",
     },
     currencySuffix: {
       position: "absolute",
-      right: size === Size.SMALL ? 12 : 16,
+      right: size === Size.SMALL ? 10 : 12,
       top: "50%",
       transform: "translateY(-50%)",
-      fontSize: size === Size.SMALL ? 14 : 16,
+      fontSize: size === Size.SMALL ? 12 : 14,
       color: "#999",
       pointerEvents: "none",
     },
     buttonSection: {
       display: "flex",
-      gap: size === Size.SMALL ? 12 : 16,
-      marginTop: size === Size.SMALL ? 32 : 40,
+      gap: size === Size.SMALL ? 10 : 12,
+      marginTop: size === Size.SMALL ? 24 : 32,
       width: "100%",
       boxSizing: "border-box",
       // 响应式设计
@@ -168,12 +169,12 @@ function createOfflinePaymentThemes() {
     },
     cancelButton: {
       flex: 1,
-      padding: size === Size.SMALL ? "10px 16px" : "12px 20px",
+      padding: size === Size.SMALL ? "8px 12px" : "10px 16px",
       borderRadius: 6,
       border: "1px solid #D9D9D9",
       background: "#fff",
       color: "#222",
-      fontSize: size === Size.SMALL ? 14 : 16,
+      fontSize: size === Size.SMALL ? 12 : 14,
       fontWeight: 500,
       cursor: "pointer",
       minWidth: 0,
@@ -181,12 +182,12 @@ function createOfflinePaymentThemes() {
     },
     submitButton: {
       flex: 1,
-      padding: size === Size.SMALL ? "10px 16px" : "12px 20px",
+      padding: size === Size.SMALL ? "8px 12px" : "10px 16px",
       borderRadius: 6,
       border: "none",
       background: "#1890ff",
       color: "#fff",
-      fontSize: size === Size.SMALL ? 14 : 16,
+      fontSize: size === Size.SMALL ? 12 : 14,
       fontWeight: 600,
       cursor: "pointer",
       minWidth: 0,

package/src/components/business/payment-sdk/online-payment/index.tsx

@@ -146,13 +146,19 @@ export function OnlinePayment({
 
       <div style={theme.reminderTitle}>{t("温馨提示")}</div>
       <ul style={theme.reminderList}>
-        <li>{t("支付金额须与申请金额一致，请勿多付、少付或分批提交。")}</li>
-        <li>{t("请妥善保存回单并提供准确的支付时间，否则可能无法核验。")}</li>
-        <li>
+        <li style={theme.listItem}>
+          {t("支付金额须与申请金额一致，请勿多付、少付或分批提交。")}
+        </li>
+        <li style={theme.listItem}>
+          {t("请妥善保存回单并提供准确的支付时间，否则可能无法核验。")}
+        </li>
+        <li style={theme.listItem}>
           {t("工作时间提交4小时内审核，非工作时间将顺延至下一个工作日。")}
         </li>
-        <li>{t("如有问题，请联系平台客服。")}</li>
-        <li>{t("预付充值将收取平台服务费，具体以官方为准。")}</li>
+        <li style={theme.listItem}>{t("如有问题，请联系平台客服。")}</li>
+        <li style={theme.listItem}>
+          {t("预付充值将收取平台服务费，具体以官方为准。")}
+        </li>
       </ul>
 
       {formState.error && <div style={theme.error}>{formState.error}</div>}

package/src/components/business/payment-sdk/online-payment/theme.tsx

@@ -98,6 +98,12 @@ function createOnlinePaymentThemes() {
       color: "#6b7280",
       lineHeight: 1.6,
       textAlign: "left",
+      listStyleType: "disc",
+      listStylePosition: "outside",
+    },
+    listItem: {
+      listStyleType: "disc",
+      listStylePosition: "outside",
     },
     error: {
       color: "#ff4d4f",

package/src/components/business/payment-sdk/select-payment/index.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "preact/hooks";
 import { t } from "@/local";
 import { getSelectPaymentTheme } from "./theme";
-import { getOfflineChannelMap } from "@/api";
+import { getOfflineChannelMap, calculateBusinessExchangeRate } from "@/api";
+import { useRef } from "preact/hooks";
 
 interface SelectPaymentProps {
   onChannelChange: (channel: string, paymentType: string) => void;
@@ -39,6 +40,34 @@ export function SelectPayment({
     amountError: "",
   });
 
+  const [bizRate, setBizRate] = useState<{
+    exchangeRate: number;
+    amount: number;
+    currency: string;
+    consistent?: boolean;
+  } | null>(null);
+
+  // 防抖定时器
+  const bizRateTimerRef = useRef<number | null>(null);
+
+  const triggerBizRate = () => {
+    if (!formState.amount || Number(formState.amount) <= 0) {
+      setBizRate(null);
+      return;
+    }
+    if (bizRateTimerRef.current) {
+      clearTimeout(bizRateTimerRef.current);
+    }
+    bizRateTimerRef.current = window.setTimeout(() => {
+      calculateBusinessExchangeRate({
+        currency: formState.currency,
+        amount: formState.amount,
+      })
+        .then((res) => setBizRate(res))
+        .catch(() => setBizRate(null));
+    }, 300);
+  };
+
   // 根据币种拉取线上/线下渠道映射，初始化默认选项
   useEffect(() => {
     getOfflineChannelMap({ currency: formState.currency }).then((res) => {
@@ -79,6 +108,7 @@ export function SelectPayment({
   const handleCurrencyChange = (currency: string) => {
     setFormState((s) => ({ ...s, currency }));
     onCurrencyChange(currency);
+    triggerBizRate();
   };
 
   // 处理金额变化
@@ -86,6 +116,8 @@ export function SelectPayment({
     const formattedAmount = formatAmountInput(amount);
     setFormState((s) => ({ ...s, amount: formattedAmount, amountError: "" }));
     onAmountChange(formattedAmount);
+    // 输入金额后触发汇率计算
+    triggerBizRate();
   };
 
   // 处理渠道变化
@@ -96,6 +128,8 @@ export function SelectPayment({
       paymentType,
     }));
     onChannelChange(channel, paymentType);
+    // 切换渠道也触发汇率计算
+    triggerBizRate();
   };
   return (
     <div style={theme.left}>
@@ -137,6 +171,22 @@ export function SelectPayment({
         <div style={theme.inputSuffixAbs}>{formState.currency}</div>
       </div>
       {amountError && <div style={theme.error}>{amountError}</div>}
+      {bizRate && bizRate.consistent === false && (
+        <div style={theme.bizRateBox}>
+          <div>{t("您的支付币种与默认币种不一致，将转换为默认币种入账")}</div>
+          <div>
+            {t("目前汇率为：")} {formState.currency}
+            {t(`→${bizRate.currency} = `)}
+            <span style={theme.bizRateStrong}>{bizRate.exchangeRate}</span>
+          </div>
+          <div>
+            {t("钱包预计增加")}
+            <span style={theme.bizRateStrong}>
+              {bizRate.currency} {bizRate.amount}
+            </span>
+          </div>
+        </div>
+      )}
 
       <div style={{ height: 20 }} />
       <div style={theme.fieldLabel}>{t("支付方式")}</div>

package/src/components/business/payment-sdk/select-payment/theme.tsx

@@ -74,6 +74,14 @@ function createSelectPaymentThemes() {
       pointerEvents: "none",
       fontSize: size === Size.SMALL ? 12 : 13,
     },
+    bizRateBox: {
+      marginTop: 6,
+      color: "#666",
+      fontSize: size === Size.SMALL ? 12 : 13,
+      textAlign: "left",
+      lineHeight: 1.6,
+    },
+    bizRateStrong: { color: "#111", fontWeight: 600 },
     subTitle: {
       fontSize: size === Size.SMALL ? 12 : 14,
       marginTop: size === Size.SMALL ? 10 : 14,

package/src/components/common/upload/index.tsx

@@ -5,6 +5,7 @@ import { t } from "@/local";
 import { getUploadTheme } from "./theme";
 import { getInitParams } from "@/utils/business";
 import { Size } from "@/types";
+import uploadSvg from "@/image/upload.svg";
 
 interface UploadProps {
   value?: string[];
@@ -72,26 +73,26 @@ export const Upload: FunctionalComponent<UploadProps> = ({
         }}
         onClick={() => !disabled && fileInputRef.current?.click()}
       >
-        <div
+        <img
+          src={uploadSvg}
+          alt="upload"
           style={{
-            fontSize: size === Size.SMALL ? 32 : 48,
+            width: size === Size.SMALL ? 40 : 48,
+            height: size === Size.SMALL ? 40 : 48,
             marginBottom: size === Size.SMALL ? 8 : 12,
           }}
-        >
-          📁
-        </div>
+        />
         <div
           style={{
             color: "#222",
-            fontSize: size === Size.SMALL ? 12 : 15,
+            fontSize: size === Size.SMALL ? 13 : 16,
             marginBottom: size === Size.SMALL ? 4 : 8,
           }}
         >
-          {t("点击或拖拽文件到此处上传")}
+          {t("Please upload the bank transfer receipt")}
         </div>
         <div style={{ color: "#999", fontSize: size === Size.SMALL ? 12 : 13 }}>
-          {t("支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传")}{" "}
-          {maxCount} {t("个文件")}
+          {t("Click or drag file to this area to upload")}
         </div>
         <input
           ref={fileInputRef}

package/src/image/date.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760084950168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6759" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M932.579556 137.272889h-192V64.142222a9.159111 9.159111 0 0 0-9.130667-9.159111h-64a9.159111 9.159111 0 0 0-9.159111 9.159111v73.130667H365.738667V64.142222a9.159111 9.159111 0 0 0-9.159111-9.159111h-64a9.159111 9.159111 0 0 0-9.130667 9.159111v73.130667h-192c-20.224 0-36.579556 16.355556-36.579556 36.579555v758.869334c0 20.195556 16.355556 36.551111 36.579556 36.551111h841.130667c20.252444 0 36.579556-16.327111 36.579555-36.551111V173.852444c0-20.224-16.355556-36.579556-36.579555-36.579555zM886.897778 887.011556H137.159111V452.693333H886.897778v434.261334z m-749.710222-512V219.534222h146.289777v54.869334c0 5.034667 4.124444 9.130667 9.130667 9.130666h64a9.159111 9.159111 0 0 0 9.159111-9.130666V219.562667h292.551111v54.869333c0 5.034667 4.124444 9.130667 9.159111 9.130667h64a9.159111 9.159111 0 0 0 9.130667-9.130667V219.562667h146.289778v155.448889H137.159111z" p-id="6760"></path></svg>

package/src/image/upload.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760084964886" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M519.224889 451.498667a9.102222 9.102222 0 0 0-14.421333 0l-128 161.962666a9.102222 9.102222 0 0 0 7.224888 14.734223h84.451556v277.048888c0 5.006222 4.096 9.102222 9.130667 9.102223h68.551111a9.159111 9.159111 0 0 0 9.159111-9.102223v-276.935111H640a9.102222 9.102222 0 0 0 7.224889-14.734222l-128-162.076444z" p-id="7146" fill="#1677ff"></path><path d="M854.186667 345.742222C801.848889 207.644444 668.444444 109.511111 512.227556 109.511111S222.634667 207.559111 170.296889 345.6A228.693333 228.693333 0 0 0 0 566.670222a228.494222 228.494222 0 0 0 228.465778 228.579556h45.795555a9.159111 9.159111 0 0 0 9.159111-9.159111v-68.551111a9.159111 9.159111 0 0 0-9.130666-9.159112H228.465778a140.885333 140.885333 0 0 1-101.717334-43.064888 141.653333 141.653333 0 0 1-39.879111-103.537778 140.600889 140.600889 0 0 1 29.923556-82.403556 143.217778 143.217778 0 0 1 75.548444-49.948444l43.320889-11.320889 15.872-41.813333a280.632889 280.632889 0 0 1 100.693334-129.479112 276.707556 276.707556 0 0 1 160-50.545777c57.742222 0 113.038222 17.493333 160 50.517333a280.832 280.832 0 0 1 100.693333 129.479111l15.758222 41.728 43.207111 11.434667a142.364444 142.364444 0 0 1 105.244445 137.244444c0 37.831111-14.734222 73.500444-41.472 100.238222a140.572444 140.572444 0 0 1-100.124445 41.472h-45.795555a9.159111 9.159111 0 0 0-9.159111 9.159112v68.551111c0 5.034667 4.096 9.159111 9.130666 9.159111h45.824A228.494222 228.494222 0 0 0 1024 566.641778a228.608 228.608 0 0 0-169.813333-220.899556z" p-id="7147" fill="#1677ff"></path></svg>