best-unit 1.5.2 → 2.0.1

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

@@ -0,0 +1,185 @@
+import { useEffect, useState } from "preact/hooks";
+import { Modal } from "@/components/common/modal";
+import { t } from "@/local";
+import { getPaymentDialogTheme } from "./theme";
+// 线下提交逻辑已移动到 OfflinePayment 内部
+import { SelectPayment } from "../select-payment";
+import { OnlinePayment } from "../online-payment";
+import { OfflinePayment } from "../offline-payment";
+import { OfflineDetail } from "../offline-detail";
+
+interface PaymentDialogProps {
+  visible: boolean;
+  onClose: () => void;
+  onSubmit: (form: {
+    amount: string;
+    rechargeChannel: string;
+    currency: string;
+  }) => Promise<void>;
+}
+
+export function PaymentDialog({
+  visible,
+  onClose,
+  onSubmit,
+}: PaymentDialogProps) {
+  const theme = getPaymentDialogTheme();
+  const [isMobile, setIsMobile] = useState(false);
+
+  const [formState, setFormState] = useState({
+    currency: "USD",
+    amount: "",
+    channel: "",
+    paymentType: "online",
+    loading: false,
+    error: "",
+    amountError: "",
+    channelError: "",
+    showOfflineUpload: false, // 新增：是否显示银行转账回单上传页面
+  });
+
+  // 检测屏幕尺寸
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 1020);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  useEffect(() => {
+    if (!visible) {
+      setFormState({
+        currency: "USD",
+        amount: "",
+        channel: "",
+        paymentType: "online",
+        loading: false,
+        error: "",
+        amountError: "",
+        channelError: "",
+        showOfflineUpload: false,
+      });
+    }
+  }, [visible]);
+
+  // 处理渠道变化
+  const handleChannelChange = (channel: string, paymentType: string) => {
+    setFormState((s) => ({
+      ...s,
+      channel,
+      paymentType,
+      channelError: "",
+    }));
+  };
+
+  // 处理金额变化
+  const handleAmountChange = (amount: string) => {
+    setFormState((s) => ({ ...s, amount, amountError: "" }));
+  };
+
+  // 处理金额错误
+  const handleAmountError = (error: string) => {
+    setFormState((s) => ({ ...s, amountError: error }));
+  };
+
+  // 处理币种变化
+  const handleCurrencyChange = (currency: string) => {
+    setFormState((s) => ({ ...s, currency }));
+  };
+
+  // 处理在线支付提交
+  const handleOnlineSubmit = async (form: {
+    amount: string;
+    currency: string;
+    rechargeChannel: string;
+  }) => {
+    setFormState((s) => ({ ...s, loading: true, error: "" }));
+    try {
+      await onSubmit(form);
+      onClose();
+    } catch {
+      setFormState((s) => ({ ...s, error: t("提交失败，请重试") }));
+    } finally {
+      setFormState((s) => ({ ...s, loading: false }));
+    }
+  };
+
+  // 处理线下支付确认
+  const handleOfflineConfirm = () => {
+    console.log("用户确认银行转账详情");
+    // 切换到银行转账回单上传页面
+    setFormState((s) => ({ ...s, showOfflineUpload: true }));
+  };
+
+  // 处理银行转账回单上传：已在 OfflinePayment 内部直接提交
+
+  // 返回银行转账详情页面
+  const handleBackToOffline = () => {
+    setFormState((s) => ({ ...s, showOfflineUpload: false }));
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      onClose={onClose}
+      title={t("在线支付")}
+      width={isMobile ? "95%" : 960}
+      maxWidth={isMobile ? "95%" : 1000}
+    >
+      <div
+        style={{
+          ...theme.wrapper,
+          ...(isMobile
+            ? {
+                gridTemplateColumns: "1fr",
+                gap: 16,
+                minWidth: "auto",
+              }
+            : {}),
+        }}
+      >
+        <SelectPayment
+          onChannelChange={handleChannelChange}
+          onAmountChange={handleAmountChange}
+          onCurrencyChange={handleCurrencyChange}
+          initialAmount={formState.amount}
+          initialCurrency={formState.currency}
+          initialPaymentType={formState.paymentType}
+          amountError={formState.amountError}
+        />
+
+        {formState.paymentType === "online" ? (
+          <OnlinePayment
+            onSubmit={handleOnlineSubmit}
+            amount={formState.amount}
+            currency={formState.currency}
+            channel={formState.channel}
+            loading={formState.loading}
+            error={formState.error}
+            onAmountError={handleAmountError}
+          />
+        ) : formState.showOfflineUpload ? (
+          <OfflinePayment
+            onBack={handleBackToOffline}
+            onCancel={onClose}
+            currency={formState.currency}
+            amount={formState.amount}
+            channel={formState.channel}
+            onAmountError={handleAmountError}
+          />
+        ) : (
+          <OfflineDetail
+            onConfirm={handleOfflineConfirm}
+            channelCode={formState.channel}
+          />
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+export default PaymentDialog;

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

@@ -0,0 +1,305 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+function createThemes() {
+  const size = getInitParams<Size>("size");
+  const base = {
+    wrapper: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: size === Size.SMALL ? 12 : 20,
+      alignItems: "start",
+      minWidth: 880,
+      // 响应式设计
+      "@media (max-width: 1020px)": {
+        gridTemplateColumns: "1fr",
+        gap: 16,
+        minWidth: "auto",
+        width: "100%",
+      },
+    },
+    fieldLabel: {
+      fontSize: size === Size.SMALL ? 12 : 13,
+      marginBottom: 6,
+      fontWeight: 500,
+      textAlign: "left",
+    },
+    input: {
+      width: "100%",
+      padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+      borderRadius: 6,
+      outline: "none",
+      border: "1px solid",
+      boxSizing: "border-box",
+      paddingRight: size === Size.SMALL ? 48 : 64,
+    },
+    inputError: { border: "1px solid #ff4d4f" },
+    error: {
+      color: "#ff4d4f",
+      marginTop: 6,
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+    inputWrapper: { position: "relative" },
+    inputSuffix: {
+      padding: "0 8px",
+      fontSize: size === Size.SMALL ? 12 : 13,
+      opacity: 0.8,
+    },
+    inputSuffixAbs: {
+      position: "absolute",
+      top: 0,
+      right: size === Size.SMALL ? 10 : 12,
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      color: "#999",
+      pointerEvents: "none",
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+    // 大标题（带左侧蓝色竖条）
+    blockTitle: {
+      fontSize: size === Size.SMALL ? 16 : 18,
+      fontWeight: 700,
+      marginBottom: size === Size.SMALL ? 12 : 16,
+      textAlign: "left",
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+    },
+    // 小标题
+    subTitle: {
+      marginTop: size === Size.SMALL ? 10 : 14,
+      marginBottom: size === Size.SMALL ? 8 : 10,
+      fontWeight: 600,
+      textAlign: "left",
+    },
+    titleBar: {
+      width: 3,
+      height: size === Size.SMALL ? 16 : 20,
+      background: "#1890ff",
+      borderRadius: 2,
+    },
+    methodList: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: 10,
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        gridTemplateColumns: "1fr",
+        gap: 8,
+      },
+    },
+    bankList: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: 10,
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        gridTemplateColumns: "1fr",
+        gap: 8,
+      },
+    },
+  } as const;
+
+  return {
+    white: {
+      ...base,
+      left: {
+        background: "#fff",
+        borderRadius: 8,
+        padding: 16,
+        border: "1px solid #E5E6EB",
+      },
+      right: { background: "#fff", borderRadius: 8, padding: 16 },
+      currencyRow: {
+        display: "flex",
+        gap: 10,
+        flexWrap: "wrap",
+        // 响应式设计
+        "@media (max-width: 480px)": {
+          gap: 8,
+        },
+      },
+      currencyItem: (active: boolean) => ({
+        padding: "6px 12px",
+        borderRadius: 6,
+        border: `1px solid ${active ? "#1890ff" : "#E5E6EB"}`,
+        color: active ? "#1890ff" : "#222",
+        background: active ? "#EEF7FF" : "#fff",
+        cursor: "pointer",
+      }),
+      input: {
+        ...base.input,
+        border: "1px solid #E5E6EB",
+        background: "#fff",
+        color: "#222",
+      },
+      payButton: {
+        width: "100%",
+        marginTop: size === Size.SMALL ? 10 : 14,
+        marginBottom: size === Size.SMALL ? 12 : 16,
+        background: "#1890ff",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "8px 12px" : "12px 16px",
+        fontWeight: 600,
+        cursor: "pointer",
+      },
+      methodItem: (active: boolean) => ({
+        padding: "10px 12px",
+        textAlign: "left",
+        borderRadius: 8,
+        border: `1px solid ${active ? "#1890ff" : "#F0F1F3"}`,
+        background: active ? "#EEF7FF" : "#F7F8FA",
+        cursor: "pointer",
+      }),
+      bankItem: {
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #F0F1F3",
+        background: "#F7F8FA",
+        textAlign: "left",
+      },
+      noticeBox: {
+        marginTop: size === Size.SMALL ? 8 : 12,
+        marginBottom: size === Size.SMALL ? 12 : 16,
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        background: "#FFF7E6",
+        border: "1px solid #FFE7BA",
+        color: "#AD6800",
+        fontSize: size === Size.SMALL ? 12 : 13,
+      },
+      reminderTitle: { fontWeight: 600, margin: "6px 0", textAlign: "left" },
+      reminderList: {
+        margin: 0,
+        paddingLeft: 18,
+        color: "#6b7280",
+        lineHeight: 1.6,
+        textAlign: "left",
+      },
+    },
+    dark: {
+      ...base,
+      left: {
+        background: "#181A20",
+        borderRadius: 8,
+        padding: 16,
+        border: "1px solid #2B2E38",
+      },
+      right: {
+        background: "#181A20",
+        borderRadius: 8,
+        padding: 16,
+        border: "1px solid #2B2E38",
+      },
+      currencyRow: {
+        display: "flex",
+        gap: 10,
+        flexWrap: "wrap",
+        // 响应式设计
+        "@media (max-width: 480px)": {
+          gap: 8,
+        },
+      },
+      currencyItem: (active: boolean) => ({
+        padding: "6px 12px",
+        borderRadius: 6,
+        border: `1px solid ${active ? "#00E8C6" : "#374151"}`,
+        color: active ? "#00E8C6" : "#fff",
+        background: active ? "#0F2824" : "#23262F",
+        cursor: "pointer",
+      }),
+      input: {
+        ...base.input,
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+      },
+      payButton: {
+        width: "100%",
+        marginTop: size === Size.SMALL ? 10 : 14,
+        marginBottom: size === Size.SMALL ? 12 : 16,
+        background: "#00E8C6",
+        color: "#111",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "8px 12px" : "12px 16px",
+        fontWeight: 700,
+        cursor: "pointer",
+      },
+      methodItem: (active: boolean) => ({
+        padding: "10px 12px",
+        textAlign: "left",
+        borderRadius: 8,
+        border: `1px solid ${active ? "#00E8C6" : "#374151"}`,
+        background: active ? "#0F2824" : "#23262F",
+        color: "#fff",
+        cursor: "pointer",
+      }),
+      bankItem: {
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #374151",
+        background: "#23262F",
+        textAlign: "left",
+        color: "#fff",
+      },
+      noticeBox: {
+        marginTop: size === Size.SMALL ? 8 : 12,
+        marginBottom: size === Size.SMALL ? 12 : 16,
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        background: "#2A1F0F",
+        border: "1px solid #5C3E12",
+        color: "#F4E3C1",
+        fontSize: size === Size.SMALL ? 12 : 13,
+      },
+      reminderTitle: {
+        fontWeight: 600,
+        margin: "6px 0",
+        textAlign: "left",
+        color: "#fff",
+      },
+      reminderList: {
+        margin: 0,
+        paddingLeft: 18,
+        color: "#B5B8BE",
+        lineHeight: 1.6,
+        textAlign: "left",
+      },
+    },
+  } as const;
+}
+
+export function getPaymentDialogTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const white = theme === Theme.WHITE;
+  const themes = createThemes();
+  const base = white ? themes.white : themes.dark;
+  if (themeConfig) {
+    const cfg = white ? themeConfig.white : themeConfig.dark;
+    if (cfg?.color) {
+      return {
+        ...base,
+        payButton: { ...base.payButton, background: cfg.color },
+        currencyItem: (active: boolean) => ({
+          ...base.currencyItem(active),
+          border: `1px solid ${
+            active ? cfg.color : white ? "#E5E6EB" : "#374151"
+          }`,
+          color: active ? cfg.color : white ? "#222" : "#fff",
+        }),
+        methodItem: (active: boolean) => ({
+          ...base.methodItem(active),
+          border: `1px solid ${
+            active ? cfg.color : white ? "#F0F1F3" : "#374151"
+          }`,
+        }),
+      } as any;
+    }
+  }
+  return base as any;
+}

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

@@ -0,0 +1,192 @@
+import { useState, useEffect } from "preact/hooks";
+import { t } from "@/local";
+import { getSelectPaymentTheme } from "./theme";
+import { getOfflineChannelMap } from "@/api";
+
+interface SelectPaymentProps {
+  onChannelChange: (channel: string, paymentType: string) => void;
+  onAmountChange: (amount: string) => void;
+  onCurrencyChange: (currency: string) => void;
+  initialAmount?: string;
+  initialCurrency?: string;
+  initialPaymentType?: string;
+  amountError?: string;
+}
+
+export function SelectPayment({
+  onChannelChange,
+  onAmountChange,
+  onCurrencyChange,
+  initialAmount = "",
+  initialCurrency = "USD",
+  initialPaymentType = "online",
+  amountError = "",
+}: SelectPaymentProps) {
+  const theme = getSelectPaymentTheme();
+
+  // 币种从本地字典读取；渠道通过接口获取
+  const allDicts = JSON.parse(sessionStorage.getItem("all_dicts") || "{}");
+  const currencyDict = allDicts?.currency || [];
+  const [onlineChannelDict, setOnlineChannelDict] = useState<any[]>([]);
+  const [bankChannelDict, setBankChannelDict] = useState<any[]>([]);
+
+  const [formState, setFormState] = useState({
+    currency: initialCurrency,
+    amount: initialAmount,
+    onlineChannel: "",
+    bankChannel: "",
+    paymentType: initialPaymentType,
+    amountError: "",
+  });
+
+  // 根据币种拉取线上/线下渠道映射，初始化默认选项
+  useEffect(() => {
+    getOfflineChannelMap({ currency: formState.currency }).then((res) => {
+      const online = res.onlineChannel || [];
+      const offline = res.offlineChannel || [];
+      setOnlineChannelDict(online);
+      setBankChannelDict(offline);
+
+      // 是否展示线上支付
+      const showOnline = online.length > 0;
+      const defaultBank = offline?.[0]?.value || "";
+      const defaultOnline = online?.[0]?.value || "";
+      const paymentType = showOnline ? initialPaymentType : "bank";
+      const channelValue =
+        paymentType === "online" ? defaultOnline : defaultBank;
+
+      setFormState((s) => ({
+        ...s,
+        onlineChannel: defaultOnline,
+        bankChannel: defaultBank,
+        paymentType,
+      }));
+      if (channelValue) onChannelChange(channelValue, paymentType);
+    });
+  }, [formState.currency]);
+
+  // 格式化金额输入
+  function formatAmountInput(value: string) {
+    value = value.replace(/[^\d.]/g, "");
+    value = value.replace(/\.(?=.*\.)/g, "");
+    value = value.replace(/^(\d+)(\.\d{0,2})?.*$/, "$1$2");
+    value = value.replace(/^0+(\d)/, "$1");
+    if (value.startsWith(".")) value = "0" + value;
+    return value;
+  }
+
+  // 处理币种变化
+  const handleCurrencyChange = (currency: string) => {
+    setFormState((s) => ({ ...s, currency }));
+    onCurrencyChange(currency);
+  };
+
+  // 处理金额变化
+  const handleAmountChange = (amount: string) => {
+    const formattedAmount = formatAmountInput(amount);
+    setFormState((s) => ({ ...s, amount: formattedAmount, amountError: "" }));
+    onAmountChange(formattedAmount);
+  };
+
+  // 处理渠道变化
+  const handleChannelChange = (channel: string, paymentType: string) => {
+    setFormState((s) => ({
+      ...s,
+      [paymentType === "online" ? "onlineChannel" : "bankChannel"]: channel,
+      paymentType,
+    }));
+    onChannelChange(channel, paymentType);
+  };
+  return (
+    <div style={theme.left}>
+      <div style={theme.blockTitle}>
+        <span style={theme.titleBar} />
+        {t("选择支付方式")}
+      </div>
+      <div style={theme.fieldLabel}>{t("支付币种")}</div>
+      <div style={theme.currencyRow}>
+        {(currencyDict || []).slice(0, 4).map((c: any) => (
+          <button
+            type="button"
+            onClick={() => handleCurrencyChange(c.value)}
+            style={theme.currencyItem(formState.currency === c.value)}
+          >
+            {c.label}
+          </button>
+        ))}
+      </div>
+
+      <div style={{ height: 12 }} />
+      <div style={theme.fieldLabel}>
+        <span style={theme.required}>*</span>
+        {t("支付金额")}
+      </div>
+      <div style={theme.inputWrapper}>
+        <input
+          type="text"
+          placeholder={t("请输入充值金额")}
+          value={formState.amount}
+          onInput={(e) => {
+            handleAmountChange((e.target as HTMLInputElement).value);
+          }}
+          style={{
+            ...theme.input,
+            ...(amountError ? theme.inputError : {}),
+          }}
+        />
+        <div style={theme.inputSuffixAbs}>{formState.currency}</div>
+      </div>
+      {amountError && <div style={theme.error}>{amountError}</div>}
+
+      <div style={{ height: 20 }} />
+      <div style={theme.fieldLabel}>{t("支付方式")}</div>
+      {onlineChannelDict.length > 0 && (
+        <div>
+          <div style={theme.subTitle}>{t("线上支付")}</div>
+          <div style={theme.methodList}>
+            {onlineChannelDict.map((item: any) => (
+              <button
+                type="button"
+                onClick={() => handleChannelChange(item.value, "online")}
+                style={theme.methodItem(
+                  formState.onlineChannel === item.value &&
+                    formState.paymentType === "online"
+                )}
+              >
+                {item.icon && (
+                  <img
+                    src={item.icon}
+                    alt={item.label}
+                    style={theme.channelIcon}
+                  />
+                )}
+                {item.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div style={theme.subTitle}>{t("银行转账")}</div>
+      <div style={theme.bankList}>
+        {bankChannelDict.map((item: any) => (
+          <button
+            type="button"
+            onClick={() => handleChannelChange(item.value, "bank")}
+            style={theme.bankItem(
+              formState.bankChannel === item.value &&
+                formState.paymentType === "bank"
+            )}
+          >
+            {item.icon && (
+              <img src={item.icon} alt={item.label} style={theme.channelIcon} />
+            )}
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default SelectPayment;