best-unit 1.2.19 → 1.2.21

package/src/components/business/recharge-sdk/components/online-recharge-form/index.tsx

@@ -0,0 +1,199 @@
+import type { FunctionalComponent } from "preact";
+import { useState, useEffect } from "preact/hooks";
+import { t } from "@/local";
+import { Select } from "@/components/common/select";
+import { calcPaymentAmount } from "@/api";
+import { getOnlineRechargeFormTheme } from "./theme";
+
+interface OnlineRechargeFormProps {
+  formState: {
+    amount: string;
+    rechargeChannel: string;
+    currency: string;
+    loading: boolean;
+    error: string;
+    amountError: string;
+    rechargeChannelError: string;
+    currencyError: string;
+  };
+  setFormState: (fn: (state: any) => any) => void;
+  onClose: () => void;
+  loading: boolean;
+}
+
+// 辅助函数：只允许输入数字和小数点，且最多两位小数
+function formatAmountInput(value: string) {
+  // 只保留数字和小数点
+  value = value.replace(/[^\d.]/g, "");
+  // 只保留第一个小数点
+  value = value.replace(/\.(?=.*\.)/g, "");
+  // 保证最多两位小数
+  value = value.replace(/^(\d+)(\.\d{0,2})?.*$/, "$1$2");
+  // 去除前导0（保留0.和0.xx）
+  value = value.replace(/^0+(\d)/, "$1");
+  if (value.startsWith(".")) value = "0" + value;
+  return value;
+}
+// 辅助函数：格式化为两位小数
+function formatToTwoDecimal(value: string) {
+  if (!value) return "";
+  const num = parseFloat(value);
+  if (isNaN(num)) return "";
+  return num.toFixed(2);
+}
+
+export const OnlineRechargeForm: FunctionalComponent<
+  OnlineRechargeFormProps
+> = ({ formState, setFormState, onClose, loading }) => {
+  const allDicts = JSON.parse(sessionStorage.getItem("all_dicts") || "{}");
+  const currencyDict = allDicts?.currency || [];
+  const channelDict =
+    allDicts?.channel?.filter((item: any) => item.payment_support) || [];
+  const [actualAmount, setActualAmount] = useState<string>("");
+  const [showFeeTip, setShowFeeTip] = useState(false);
+  const theme = getOnlineRechargeFormTheme();
+
+  // 当三个参数都填写完整时，计算实际支付金额
+  useEffect(() => {
+    if (formState.currency && formState.amount && formState.rechargeChannel) {
+      calcPaymentAmount({
+        channel: formState.rechargeChannel,
+        amount: formState.amount,
+        currency: formState.currency,
+      })
+        .then((paymentAmount) => {
+          setActualAmount(paymentAmount);
+          setShowFeeTip(true);
+        })
+        .catch((error) => {
+          console.error("计算支付金额失败:", error);
+          setShowFeeTip(false);
+        });
+    } else {
+      setShowFeeTip(false);
+    }
+  }, [formState.currency, formState.amount, formState.rechargeChannel]);
+
+  return (
+    <>
+      <div style={{ marginBottom: 18 }}>
+        <div style={theme.label}>
+          <span style={{ color: "#F53F3F" }}>*</span> {t("充值币种")}
+        </div>
+        <Select
+          value={formState.currency}
+          onChange={(value) => {
+            setFormState((state: any) => ({
+              ...state,
+              currency: value,
+            }));
+          }}
+          options={currencyDict?.map((item: any) => ({
+            value: item.value,
+            label: item.label,
+          }))}
+          placeholder={t("请选择充值币种")}
+        />
+      </div>
+      <div style={{ marginBottom: 18 }}>
+        <div style={theme.label}>
+          <span style={{ color: "#F53F3F" }}>*</span> {t("充值金额")}
+        </div>
+        <input
+          type="text"
+          placeholder={t("请输入充值金额")}
+          value={formState.amount}
+          onInput={(e) => {
+            let value = (e.target as HTMLInputElement).value;
+            value = formatAmountInput(value);
+            let amountError = "";
+            // 只有输入为合法数字且不以小数点结尾时才做区间修正
+            if (value && !value.endsWith(".")) {
+              let num = parseFloat(value);
+              if (!isNaN(num)) {
+                if (num < 1) num = 1;
+                if (num > 999999.99) num = 999999.99;
+                value = num.toString();
+                // 如果原始输入有小数点且小数点后有内容，保留小数部分
+                if (/\./.test((e.target as HTMLInputElement).value)) {
+                  const decimalPart = (
+                    e.target as HTMLInputElement
+                  ).value.split(".")[1];
+                  if (decimalPart !== undefined && decimalPart.length > 0) {
+                    value = num.toFixed(Math.min(decimalPart.length, 2));
+                  }
+                }
+              }
+            }
+            setFormState((state: any) => ({
+              ...state,
+              amount: value,
+              amountError,
+            }));
+          }}
+          onBlur={(e) => {
+            let value = (e.target as HTMLInputElement).value;
+            value = formatToTwoDecimal(value);
+            setFormState((state: any) => ({
+              ...state,
+              amount: value,
+              amountError: "",
+            }));
+          }}
+          style={{
+            ...theme.input,
+            ...(formState.amountError ? theme.inputError : {}),
+          }}
+        />
+        {formState.amountError && (
+          <div style={theme.error}>{formState.amountError}</div>
+        )}
+      </div>
+      <div style={{ marginBottom: 24 }}>
+        <div style={theme.label}>
+          <span style={{ color: "#F53F3F" }}>*</span> {t("支付平台")}
+        </div>
+        <Select
+          value={formState.rechargeChannel}
+          onChange={(value) => {
+            setFormState((state: any) => ({
+              ...state,
+              rechargeChannel: value,
+              rechargeChannelError: value ? "" : state.rechargeChannelError,
+            }));
+          }}
+          options={channelDict?.map((item: any) => ({
+            value: item.value,
+            label: item.label,
+          }))}
+          placeholder={t("请选择支付平台")}
+        ></Select>
+        {formState.rechargeChannelError && (
+          <div style={theme.error}>{formState.rechargeChannelError}</div>
+        )}
+      </div>
+      {/* 手续费提示 */}
+      {showFeeTip && actualAmount && (
+        <div style={theme.feeTip}>
+          {channelDict.find(
+            (item: any) => item.value === formState.rechargeChannel
+          )?.label || formState.rechargeChannel}
+          {t("需要收取手续费，实际支付金额约为：")}${actualAmount}
+        </div>
+      )}
+      {formState.error && (
+        <div style={{ color: "#ff4d4f", marginBottom: 12 }}>
+          {formState.error}
+        </div>
+      )}
+      <div style={{ display: "flex", justifyContent: "flex-end", gap: 12 }}>
+        <button type="button" onClick={onClose} style={theme.buttonCancel}>
+          {t("取消")}
+        </button>
+        <button type="submit" disabled={loading} style={theme.buttonSubmit}>
+          {loading ? t("提交中...") : t("去支付")}
+        </button>
+      </div>
+    </>
+  );
+};

package/src/components/business/recharge-sdk/components/online-recharge-form/theme.tsx

@@ -0,0 +1,159 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+// 动态生成主题配置的函数
+function createOnlineRechargeFormThemes() {
+  const size = getInitParams<Size>("size"); // 每次调用时重新获取最新值
+
+  return {
+    white: {
+      label: {
+        marginBottom: size === Size.SMALL ? 6 : 8,
+        fontSize: size === Size.SMALL ? 12 : 14,
+        color: "#222",
+        textAlign: "left",
+        display: "block",
+      },
+      input: {
+        width: "100%",
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        boxSizing: "border-box",
+        border: "1px solid #E5E6EB",
+        background: "#fff",
+        color: "#222",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        outline: "none",
+        marginBottom: 0,
+      },
+      inputError: {
+        border: "1px solid #ff4d4f",
+      },
+      selectError: {
+        border: "1px solid #ff4d4f",
+      },
+      error: {
+        color: "#ff4d4f",
+        fontSize: size === Size.SMALL ? 12 : 13,
+        marginTop: size === Size.SMALL ? 2 : 4,
+        textAlign: "left",
+      },
+      buttonCancel: {
+        background: "#fff",
+        color: "#222",
+        border: "1px solid #E5E6EB",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        cursor: "pointer",
+      },
+      buttonSubmit: {
+        background: "#1890ff",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        cursor: "pointer",
+        fontWeight: 600,
+      },
+      feeTip: {
+        marginBottom: 24,
+        padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
+        background: "#f6ffed",
+        border: "1px solid #b7eb8f",
+        borderRadius: 6,
+        fontSize: size === Size.SMALL ? 12 : 14,
+        color: "#52c41a",
+      },
+    },
+    dark: {
+      label: {
+        marginBottom: size === Size.SMALL ? 6 : 8,
+        fontSize: size === Size.SMALL ? 12 : 14,
+        color: "#fff",
+        textAlign: "left",
+        display: "block",
+      },
+      input: {
+        width: "100%",
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        boxSizing: "border-box",
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        outline: "none",
+        marginBottom: 0,
+      },
+      inputError: {
+        border: "1px solid #ff4d4f",
+      },
+      selectError: {
+        border: "1px solid #ff4d4f",
+      },
+      error: {
+        color: "#ff4d4f",
+        fontSize: size === Size.SMALL ? 12 : 13,
+        marginTop: size === Size.SMALL ? 2 : 4,
+        textAlign: "left",
+      },
+      buttonCancel: {
+        background: "#23262F",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        cursor: "pointer",
+      },
+      buttonSubmit: {
+        background: "#00E8C6",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        cursor: "pointer",
+        fontWeight: 600,
+      },
+      feeTip: {
+        marginBottom: size === Size.SMALL ? 16 : 24,
+        padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
+        background: "#1a1a1a",
+        border: "1px solid #333",
+        borderRadius: 6,
+        fontSize: size === Size.SMALL ? 12 : 14,
+        color: "#52c41a",
+      },
+    },
+  };
+}
+
+export function getOnlineRechargeFormTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const whiteTheme = theme === Theme.WHITE;
+
+  // 每次调用时重新生成主题配置
+  const onlineRechargeFormThemes = createOnlineRechargeFormThemes();
+  const baseTheme = whiteTheme
+    ? onlineRechargeFormThemes.white
+    : onlineRechargeFormThemes.dark;
+  // 如果初始化时传入了按钮配置，则覆盖默认配置
+  if (themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    if (config?.color) {
+      return {
+        ...baseTheme,
+        buttonSubmit: {
+          ...baseTheme.buttonSubmit,
+          background: config.color,
+        },
+      };
+    }
+  }
+
+  return baseTheme;
+}

package/src/components/business/recharge-sdk/components/recharge/index.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from "preact/hooks";
+import { OnlineRechargeForm } from "../online-recharge-form";
+import { OfflineTransferForm } from "../offline-transfer-form";
+import { t } from "@/local";
+import { Modal } from "@/components/common/modal";
+import { getRechargeTheme } from "./theme";
+import { getInitParams } from "@/utils/business";
+import { Size } from "@/types";
+const size = getInitParams<Size>("size");
+interface ModalFormProps {
+  visible: boolean;
+  onClose: () => void;
+  onSubmit: (form: {
+    amount: string;
+    rechargeChannel: string;
+    currency: string;
+  }) => Promise<void>;
+  color?: string;
+  merchantId?: string;
+  bizType?: string;
+  token?: string;
+}
+
+export function Recharge({ visible, onClose, onSubmit }: ModalFormProps) {
+  const [formState, setFormState] = useState({
+    amount: "",
+    rechargeChannel: "",
+    currency: "USD",
+    loading: false,
+    error: "",
+    amountError: "",
+    rechargeChannelError: "",
+    currencyError: "",
+  });
+  const [offlineFormState, setOfflineFormState] = useState({
+    platform: "",
+    transactionId: "",
+    files: [],
+    platformError: "",
+    transactionIdError: "",
+    filesError: "",
+    loading: false,
+  });
+  const [activeTab, setActiveTab] = useState<"online" | "offline">("online");
+  const theme = getRechargeTheme();
+
+  // 每次关闭弹窗时重置内容
+  useEffect(() => {
+    if (!visible) {
+      setActiveTab("online");
+      setFormState({
+        amount: "",
+        rechargeChannel: "",
+        currency: "USD",
+        loading: false,
+        error: "",
+        amountError: "",
+        rechargeChannelError: "",
+        currencyError: "",
+      });
+      setOfflineFormState({
+        platform: "",
+        transactionId: "",
+        files: [],
+        platformError: "",
+        transactionIdError: "",
+        filesError: "",
+        loading: false,
+      });
+    }
+  }, [visible]);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    let valid = true;
+    setFormState((state) => ({
+      ...state,
+      amountError: "",
+      rechargeChannelError: "",
+    }));
+    if (!formState.amount.trim()) {
+      setFormState((state) => ({ ...state, amountError: t("请输入充值金额") }));
+      valid = false;
+    }
+    if (!formState.rechargeChannel) {
+      setFormState((state) => ({
+        ...state,
+        rechargeChannelError: t("请选择支付平台"),
+      }));
+      valid = false;
+    }
+    if (!valid) return;
+    setFormState((state) => ({ ...state, loading: true, error: "" }));
+    try {
+      await onSubmit({
+        amount: formState.amount,
+        rechargeChannel: formState.rechargeChannel,
+        currency: formState.currency,
+      });
+      onClose();
+    } catch {
+      setFormState((state) => ({ ...state, error: t("提交失败，请重试") }));
+    } finally {
+      setFormState((state) => ({ ...state, loading: false }));
+    }
+  };
+
+  return (
+    <Modal visible={visible} onClose={onClose} title={t("充值 / 转账")}>
+      {/* tab 按钮区域 */}
+      <div
+        style={{
+          display: "flex",
+          marginBottom: size === Size.SMALL ? 16 : 28,
+        }}
+      >
+        <button
+          type="button"
+          onClick={() => setActiveTab("online")}
+          style={theme.tabBtn(activeTab === "online", true)}
+        >
+          {t("在线充值")}
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab("offline")}
+          style={theme.tabBtn(activeTab === "offline", false)}
+        >
+          {t("线下转账")}
+        </button>
+      </div>
+      {/* tab 内容区域 */}
+      {activeTab === "online" ? (
+        <form onSubmit={handleSubmit}>
+          <OnlineRechargeForm
+            formState={formState}
+            setFormState={setFormState}
+            onClose={onClose}
+            loading={formState.loading}
+          />
+        </form>
+      ) : (
+        <OfflineTransferForm
+          formState={offlineFormState}
+          setFormState={setOfflineFormState}
+          onClose={onClose}
+          loading={offlineFormState.loading}
+        />
+      )}
+    </Modal>
+  );
+}

package/src/components/business/recharge-sdk/components/recharge/theme.tsx

@@ -0,0 +1,68 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+// 动态生成主题配置的函数
+function createRechargeThemes() {
+  const size = getInitParams<Size>("size"); // 每次调用时重新获取最新值
+
+  return {
+    white: {
+      tabBtn: (active: boolean, left: boolean) => ({
+        flex: 1,
+        background: active ? "#fff" : "#F7F8FA",
+        color: active ? "#1890ff" : "#222",
+        border: "1px solid #F0F1F3",
+        borderRadius: left ? "8px 0 0 8px" : "0 8px 8px 0",
+        fontWeight: active ? 600 : 400,
+        fontSize: size === Size.SMALL ? 12 : 16,
+        height: size === Size.SMALL ? 32 : 48,
+        boxShadow: active ? "0 2px 8px 0 rgba(20,20,20,0.04)" : "none",
+        outline: "none",
+        cursor: "pointer",
+        transition: "all 0.2s",
+      }),
+    },
+    dark: {
+      tabBtn: (active: boolean, left: boolean) => ({
+        flex: 1,
+        background: active ? "#23262F" : "#181A20",
+        color: active ? "#00E8C6" : "#fff",
+        border: "1px solid #444C5C",
+        borderRadius: left ? "8px 0 0 8px" : "0 8px 8px 0",
+        fontWeight: active ? 600 : 400,
+        fontSize: size === Size.SMALL ? 12 : 16,
+        height: size === Size.SMALL ? 32 : 48,
+        boxShadow: active ? "0 2px 8px 0 rgba(20,20,20,0.10)" : "none",
+        outline: "none",
+        cursor: "pointer",
+        transition: "all 0.2s",
+      }),
+    },
+  };
+}
+
+export function getRechargeTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const whiteTheme = theme === Theme.WHITE;
+
+  // 每次调用时重新生成主题配置
+  const rechargeThemes = createRechargeThemes();
+  const baseTheme = whiteTheme ? rechargeThemes.white : rechargeThemes.dark;
+
+  // 如果初始化时传入了主题配置，则覆盖默认配置
+  if (themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    if (config?.color) {
+      return {
+        ...baseTheme,
+        tabBtn: (active: boolean, left: boolean) => ({
+          ...baseTheme.tabBtn(active, left),
+          color: active ? config.color : baseTheme.tabBtn(active, left).color,
+        }),
+      };
+    }
+  }
+
+  return baseTheme;
+}

package/src/components/business/recharge-sdk/index.tsx

@@ -0,0 +1,37 @@
+import { useState } from "preact/hooks";
+import { Button } from "@/components/common/button";
+import { Recharge } from "./components/recharge";
+import register from "preact-custom-element";
+import { createOnlineRecharge } from "@/api";
+import { t } from "@/local";
+
+export function BestUnit() {
+  const [visible, setVisible] = useState(false);
+  const handleSubmit = async (form: {
+    amount: string;
+    rechargeChannel: string;
+    currency: string;
+  }) => {
+    const result = await createOnlineRecharge({
+      amount: form.amount,
+      currency: form.currency,
+      rechargeChannel: form.rechargeChannel,
+    });
+    window.open(result, "_blank");
+  };
+
+  return (
+    <div>
+      <Button onClick={() => setVisible(true)}>{t("充值/转账")}</Button>
+      <Recharge
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+}
+
+register(BestUnit, "best-recharge", ["theme"], { shadow: false });
+
+export default BestUnit;