best-unit 1.5.3 → 2.0.2

package/dist/types/global.d.ts

@@ -139,6 +139,7 @@ declare global {
       };
       "best-statistical-balance": any;
       "best-refresh-button": any;
+      "best-payment": any;
     }
   }
 }

package/package.json

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

package/src/api/index.ts

@@ -84,7 +84,9 @@ export const createOfflineRecharge = async (data: any) => {
       ? String(fundUnitParams.userId)
       : undefined,
     transfer_no: data.transferNo,
+    transfer_date: data.transferDate,
     transfer_channel: data.transferChannel,
+    payer_name: data.payerName,
     voucher_urls: data.voucherUrls,
   };
   return http().post("/offline/recharge/create", params, {});
@@ -154,5 +156,35 @@ 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") || "{}"
+  );
+  return http()
+    .get("/offline/channel/map", {
+      params: {
+        currency: data.currency,
+        biz_type: fundUnitParams.bizType,
+      },
+    })
+    .then((res) => {
+      return {
+        onlineChannel:
+          res.data?.online_channels.map((item: any) => ({
+            value: item.value,
+            label: item.label,
+            icon: item.icon,
+          })) || [],
+        offlineChannel:
+          res.data?.offline_channels.map((item: any) => ({
+            value: item.value,
+            label: item.label,
+            icon: item.icon,
+          })) || [],
+      };
+    });
+};
+
 // 示例用法：
 // getBalance({ merchant_id: '1128', biz_type: 'ad', token: 'xxx' }).then(res => console.log(res));

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

@@ -0,0 +1,38 @@
+import { useState } from "preact/hooks";
+import { Button } from "@/components/common/button";
+import { PaymentDialog } from "./payment-dialog";
+import register from "preact-custom-element";
+import { createOnlineRecharge } from "@/api";
+import { t } from "@/local";
+
+export function BestUnitPayment() {
+  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>
+      <PaymentDialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+}
+
+register(BestUnitPayment, "best-payment", ["theme"], { shadow: false });
+
+export default BestUnitPayment;

package/src/components/business/payment-sdk/offline-detail/index.tsx

@@ -0,0 +1,97 @@
+import { t } from "@/local";
+import { getOfflineDetailTheme } from "./theme";
+import { useEffect, useState } from "preact/hooks";
+import { getChannelInfo } from "@/api";
+
+interface OfflineDetailProps {
+  onConfirm: () => void;
+  channelCode: string; // 银行转账渠道编码
+}
+
+export function OfflineDetail({ onConfirm, channelCode }: OfflineDetailProps) {
+  const theme = getOfflineDetailTheme();
+  const [detailLines, setDetailLines] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!channelCode) return;
+    let mounted = true;
+    getChannelInfo({ code: channelCode })
+      .then((res) => {
+        if (!mounted) return;
+        if (Array.isArray(res)) {
+          setDetailLines(res.map((v) => String(v)));
+          return;
+        }
+        if (res && typeof res === "object") {
+          const lines: string[] = [];
+          Object.keys(res).forEach((k) => {
+            const v = (res as any)[k];
+            lines.push(`${k}: ${v}`);
+          });
+          setDetailLines(lines);
+          return;
+        }
+        setDetailLines(res ? [String(res)] : []);
+      })
+      .catch(() => setDetailLines([]));
+    return () => {
+      mounted = false;
+    };
+  }, [channelCode]);
+
+  return (
+    <div style={theme.container}>
+      <div style={theme.header}>
+        <span style={theme.titleBar} />
+        {t("银行转账")}
+      </div>
+
+      {detailLines.length > 0 && (
+        <div style={theme.detailCard}>
+          {detailLines.map((line, idx) => {
+            const parts = String(line).split(":");
+            const label = parts.shift()?.trim() || "";
+            const value = parts.join(":").trim();
+            return (
+              <div
+                key={idx}
+                style={{
+                  ...theme.row,
+                  ...(idx === detailLines.length - 1 ? theme.rowLast : {}),
+                  ...(idx % 2 === 1 ? theme.rowAlt : {}),
+                }}
+              >
+                <div style={theme.labelMuted}>{label}</div>
+                <div style={theme.valueStrong}>{value || "-"}</div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <button type="button" onClick={onConfirm} style={theme.confirmButton}>
+        {t("确认转账详情")}
+      </button>
+
+      <div style={theme.noticeBox}>{t("转账后提交银行回单提示")}</div>
+
+      <div style={theme.reminderTitle}>{t("温馨提示")}</div>
+      <ul style={theme.reminderList}>
+        <li>{t("支付金额匹配提醒")}</li>
+        <li>{t("保存交易回单提醒")}</li>
+        <li>{t("查看余额提醒")}</li>
+        <li>{t("联系客服提醒")}</li>
+        <li>{t("P卡转账延迟提醒")}</li>
+        <li>
+          {t("平台服务费说明")}{" "}
+          <a href="#" style={theme.link}>
+            {t("费用政策")}
+          </a>{" "}
+          {t("详情")}
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default OfflineDetail;

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

@@ -0,0 +1,255 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+function createOfflineDetailThemes() {
+  const size = getInitParams<Size>("size");
+  const base = {
+    container: {
+      background: "#fff",
+      borderRadius: 8,
+      padding: size === Size.SMALL ? 16 : 20,
+      width: "100%",
+      maxWidth: "100%",
+      boxSizing: "border-box",
+      // 响应式设计
+      "@media (max-width: 1020px)": {
+        maxWidth: "100%",
+        margin: 0,
+        padding: size === Size.SMALL ? 12 : 16,
+      },
+      "@media (min-width: 1021px)": {
+        maxWidth: 600,
+        margin: "0 auto",
+      },
+    },
+    header: {
+      fontSize: size === Size.SMALL ? 16 : 18,
+      fontWeight: 700,
+      marginBottom: size === Size.SMALL ? 16 : 20,
+      textAlign: "left",
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+    },
+    titleBar: {
+      width: 3,
+      height: size === Size.SMALL ? 16 : 20,
+      background: "#1890ff",
+      borderRadius: 2,
+    },
+    bankDetails: {
+      marginBottom: size === Size.SMALL ? 20 : 24,
+    },
+    detailCard: {
+      marginTop: 12,
+      marginBottom: 12,
+      border: "1px solid #f0f0f0",
+      borderRadius: 8,
+      background: "#fafafa", // 统一灰色背景
+      overflow: "hidden",
+    },
+    detailRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: size === Size.SMALL ? "8px 0" : "10px 0",
+      borderBottom: "1px solid #f0f0f0",
+      width: "100%",
+      boxSizing: "border-box",
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 4,
+      },
+    },
+    label: {
+      fontSize: size === Size.SMALL ? 13 : 14,
+      color: "#666",
+      fontWeight: 500,
+      minWidth: 120,
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        minWidth: "auto",
+        marginBottom: 2,
+      },
+    },
+    value: {
+      fontSize: size === Size.SMALL ? 13 : 14,
+      color: "#222",
+      fontWeight: 500,
+      textAlign: "right",
+      flex: 1,
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        textAlign: "left",
+        flex: "none",
+        width: "100%",
+      },
+    },
+    valueWithCopy: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      flex: 1,
+      justifyContent: "flex-end",
+      minWidth: 0,
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        flex: "none",
+        width: "100%",
+        justifyContent: "flex-start",
+      },
+    },
+    row: {
+      display: "flex",
+      alignItems: "center",
+      padding: "10px 12px",
+      borderBottom: "1px solid #ededed", // 行间分隔线
+    },
+    rowLast: { borderBottom: "none" },
+    rowAlt: { background: "#fafafa" },
+    labelMuted: {
+      fontSize: size === Size.SMALL ? 13 : 14,
+      color: "#8c8c8c",
+      fontWeight: 500,
+      flex: 0.4,
+    },
+    valueStrong: {
+      fontSize: size === Size.SMALL ? 13 : 14,
+      color: "#111",
+      textAlign: "right",
+      flex: 0.6,
+      wordBreak: "break-all",
+    },
+    copyButton: {
+      padding: size === Size.SMALL ? "4px 8px" : "6px 12px",
+      fontSize: size === Size.SMALL ? 11 : 12,
+      background: "#1890ff",
+      color: "#fff",
+      border: "none",
+      borderRadius: 4,
+      cursor: "pointer",
+      fontWeight: 500,
+      flexShrink: 0,
+      whiteSpace: "nowrap",
+    },
+    confirmButton: {
+      width: "100%",
+      marginBottom: size === Size.SMALL ? 16 : 20,
+      background: "#1890ff",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: size === Size.SMALL ? "12px 16px" : "14px 20px",
+      fontWeight: 600,
+      cursor: "pointer",
+      fontSize: size === Size.SMALL ? 14 : 16,
+    },
+    noticeBox: {
+      marginBottom: size === Size.SMALL ? 16 : 20,
+      padding: size === Size.SMALL ? "10px 12px" : "12px 16px",
+      borderRadius: 6,
+      background: "#FFF7E6",
+      border: "1px solid #FFE7BA",
+      color: "#AD6800",
+      fontSize: size === Size.SMALL ? 12 : 13,
+      lineHeight: 1.5,
+    },
+    reminderTitle: {
+      fontWeight: 600,
+      marginBottom: size === Size.SMALL ? 8 : 12,
+      textAlign: "left",
+      fontSize: size === Size.SMALL ? 14 : 16,
+    },
+    reminderList: {
+      margin: 0,
+      paddingLeft: 18,
+      color: "#666",
+      lineHeight: 1.6,
+      textAlign: "left",
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+    link: {
+      color: "#1890ff",
+      textDecoration: "none",
+      fontWeight: 500,
+    },
+  } as const;
+
+  return {
+    white: {
+      ...base,
+    },
+    dark: {
+      ...base,
+      container: {
+        ...base.container,
+        background: "#181A20",
+        border: "1px solid #2B2E38",
+      },
+      titleBar: {
+        ...base.titleBar,
+        background: "#00E8C6",
+      },
+      label: {
+        ...base.label,
+        color: "#B5B8BE",
+      },
+      value: {
+        ...base.value,
+        color: "#fff",
+      },
+      copyButton: {
+        ...base.copyButton,
+        background: "#00E8C6",
+        color: "#111",
+      },
+      confirmButton: {
+        ...base.confirmButton,
+        background: "#00E8C6",
+        color: "#111",
+      },
+      noticeBox: {
+        ...base.noticeBox,
+        background: "#2A1F0F",
+        border: "1px solid #5C3E12",
+        color: "#F4E3C1",
+      },
+      reminderTitle: {
+        ...base.reminderTitle,
+        color: "#fff",
+      },
+      reminderList: {
+        ...base.reminderList,
+        color: "#B5B8BE",
+      },
+      link: {
+        ...base.link,
+        color: "#00E8C6",
+      },
+    },
+  } as const;
+}
+
+export function getOfflineDetailTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const white = theme === Theme.WHITE;
+  const themes = createOfflineDetailThemes();
+  const base = white ? themes.white : themes.dark;
+
+  if (themeConfig) {
+    const cfg = white ? themeConfig.white : themeConfig.dark;
+    if (cfg?.color) {
+      return {
+        ...base,
+        titleBar: { ...base.titleBar, background: cfg.color },
+        copyButton: { ...base.copyButton, background: cfg.color },
+        confirmButton: { ...base.confirmButton, background: cfg.color },
+        link: { ...base.link, color: cfg.color },
+      } as any;
+    }
+  }
+  return base as any;
+}

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

@@ -0,0 +1,234 @@
+import { useState, useEffect } from "preact/hooks";
+import { t } from "@/local";
+import { getOfflinePaymentTheme } from "./theme";
+import { DatePicker } from "@/components/common/date-picker";
+import { Upload } from "@/components/common/upload";
+import { createOfflineRecharge } from "@/api";
+import { message } from "@/components/common/message";
+
+interface OfflinePaymentProps {
+  onBack: () => void;
+  onCancel: () => void;
+  currency?: string;
+  amount?: string;
+  channel?: string;
+  onAmountError?: (error: string) => void;
+}
+
+export function OfflinePayment({
+  onBack,
+  onCancel,
+  currency = "USD",
+  amount = "",
+  channel = "",
+  onAmountError,
+}: OfflinePaymentProps) {
+  const theme = getOfflinePaymentTheme();
+  const isDark = theme.container.background === "#181A20";
+
+  const [formState, setFormState] = useState({
+    urls: [] as string[],
+    transferTime: "",
+    transferAmount: amount,
+    transactionId: "",
+    payerName: "",
+    filesError: "",
+    timeError: "",
+    amountError: "",
+    transactionIdError: "",
+    payerNameError: "",
+  });
+
+  // 同步外部传入的amount到内部状态
+  useEffect(() => {
+    setFormState((s) => ({ ...s, transferAmount: amount }));
+  }, [amount]);
+
+  // 处理提交
+  const handleSubmit = async () => {
+    let valid = true;
+
+    if (formState.urls.length === 0) {
+      valid = false;
+      setFormState((s) => ({ ...s, filesError: t("请上传银行转账回单") }));
+    }
+
+    if (!formState.transferTime) {
+      valid = false;
+      setFormState((s) => ({ ...s, timeError: t("请选择转账时间") }));
+    }
+
+    if (!amount.trim()) {
+      valid = false;
+      onAmountError?.(t("请输入充值金额"));
+    }
+
+    if (!formState.transactionId.trim()) {
+      valid = false;
+      setFormState((s) => ({
+        ...s,
+        transactionIdError: t("请输入转账交易ID"),
+      }));
+    }
+
+    if (!formState.payerName.trim()) {
+      valid = false;
+      setFormState((s) => ({
+        ...s,
+        payerNameError: t("请输入付款人名称"),
+      }));
+    }
+
+    if (!valid) return;
+
+    try {
+      await createOfflineRecharge({
+        transferDate: formState.transferTime,
+        transferNo: formState.transactionId,
+        transferChannel: channel,
+        voucherUrls: formState.urls,
+        payerName: formState.payerName,
+      });
+      message.success(t("提交成功"));
+      onCancel();
+    } finally {
+      setFormState((s) => ({ ...s, loading: false }));
+    }
+  };
+
+  return (
+    <div style={theme.container}>
+      {/* 返回按钮 */}
+      <div style={theme.header}>
+        <button type="button" onClick={onBack} style={theme.backButton}>
+          <span style={theme.backIcon}>←</span>
+          {t("返回账户信息")}
+        </button>
+      </div>
+
+      {/* 文件上传区域 */}
+      <div style={theme.uploadSection}>
+        <Upload
+          value={formState.urls}
+          onChange={(urls) => {
+            setFormState((s) => ({ ...s, urls, filesError: "" }));
+          }}
+          maxCount={10}
+          accept="image/*,.pdf"
+          multiple={true}
+        />
+        {formState.filesError && (
+          <div style={theme.error}>{formState.filesError}</div>
+        )}
+      </div>
+
+      {/* 转账时间 */}
+      <div style={theme.fieldSection}>
+        <label style={theme.fieldLabel}>
+          <span style={theme.required}>*</span>
+          {t("转账时间")}
+        </label>
+        <DatePicker
+          value={formState.transferTime}
+          placeholder={t("请选择转账时间")}
+          onChange={(value) => {
+            setFormState((s) => ({
+              ...s,
+              transferTime: value,
+              timeError: "",
+            }));
+          }}
+          style={{ width: "100%" }}
+        />
+        {formState.timeError && (
+          <div style={theme.error}>{formState.timeError}</div>
+        )}
+      </div>
+
+      {/* 转账金额 */}
+      <div style={theme.fieldSection}>
+        <label style={theme.fieldLabel}>{t("转账金额")}</label>
+        <div style={theme.inputWrapper}>
+          <input
+            type="text"
+            placeholder={t("请输入实际转账金额")}
+            value={formState.transferAmount}
+            readOnly
+            disabled
+            style={{
+              ...theme.input,
+              ...(isDark ? theme.disabledDark : theme.disabled),
+            }}
+          />
+          <span style={theme.currencySuffix}>{currency}</span>
+        </div>
+      </div>
+
+      {/* 交易ID */}
+      <div style={theme.fieldSection}>
+        <label style={theme.fieldLabel}>
+          <span style={theme.required}>*</span>
+          {t("交易ID")}
+        </label>
+        <input
+          type="text"
+          placeholder={t("请输入转账交易ID")}
+          value={formState.transactionId}
+          onChange={(e) => {
+            setFormState((s) => ({
+              ...s,
+              transactionId: (e.target as HTMLInputElement).value,
+              transactionIdError: "",
+            }));
+          }}
+          style={{
+            ...theme.input,
+            ...(formState.transactionIdError ? theme.inputError : {}),
+          }}
+        />
+        {formState.transactionIdError && (
+          <div style={theme.error}>{formState.transactionIdError}</div>
+        )}
+      </div>
+
+      {/* 付款人名称 */}
+      <div style={theme.fieldSection}>
+        <label style={theme.fieldLabel}>
+          <span style={theme.required}>*</span>
+          {t("付款人名称")}
+        </label>
+        <input
+          type="text"
+          placeholder={t("请输入付款人名称")}
+          value={formState.payerName}
+          onChange={(e) => {
+            setFormState((s) => ({
+              ...s,
+              payerName: (e.target as HTMLInputElement).value,
+              payerNameError: "",
+            }));
+          }}
+          style={{
+            ...theme.input,
+            ...(formState.payerNameError ? theme.inputError : {}),
+          }}
+        />
+        {formState.payerNameError && (
+          <div style={theme.error}>{formState.payerNameError}</div>
+        )}
+      </div>
+
+      {/* 操作按钮 */}
+      <div style={theme.buttonSection}>
+        <button type="button" onClick={onCancel} style={theme.cancelButton}>
+          {t("取消")}
+        </button>
+        <button type="button" onClick={handleSubmit} style={theme.submitButton}>
+          {t("提交审核")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default OfflinePayment;