best-unit 0.0.13 → 0.0.15

package/package.json

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

package/src/api/axiosInstance.ts

@@ -4,33 +4,28 @@ import type {
   AxiosResponse,
   InternalAxiosRequestConfig,
 } from "axios";
+import { message } from "../components/common/Message";
 
 export interface CreateAxiosOptions {
   baseURL?: string;
   timeout?: number;
-  getToken?: () => string | null;
   getLocale?: () => string | null;
   onError?: (msg: string, error: any) => void;
 }
 
 export function createAxiosInstance(options: CreateAxiosOptions = {}) {
-  const {
-    baseURL = "/api",
-    timeout = 10000,
-    getToken,
-    getLocale,
-    onError,
-  } = options;
+  const { baseURL = "/api", timeout = 10000, getLocale, onError } = options;
 
   const instance: AxiosInstance = axios.create({ baseURL, timeout });
 
   // 请求拦截：加 token、国际化
   instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-    if (getToken) {
-      const token = getToken();
-      if (token)
-        config.headers = { ...config.headers, Authorization: token } as any;
-    }
+    const fundUnitParams = JSON.parse(
+      sessionStorage.getItem("fund_unit_params") || "{}"
+    );
+    const { token } = fundUnitParams;
+    config.headers = { ...config.headers, Authorization: token } as any;
+
     if (getLocale) {
       const locale = getLocale();
       if (locale)
@@ -48,17 +43,29 @@ export function createAxiosInstance(options: CreateAxiosOptions = {}) {
       if (response.data && response.data.code === 0) {
         return response.data;
       }
+      const errorMsg =
+        response.data?.msg || response.data?.message || "未知错误";
+
+      // 显示错误消息
+      message.error(errorMsg);
+
       if (onError) {
-        onError(
-          response.data?.msg || response.data?.message || "未知错误",
-          response
-        );
+        onError(errorMsg, response);
       }
       return Promise.reject(response.data || { message: "未知错误" });
     },
     (error) => {
+      const errorMsg =
+        error.response?.data?.msg ||
+        error.response?.data?.message ||
+        error.message ||
+        "网络请求失败";
+
+      // 显示错误消息
+      message.error(errorMsg);
+
       if (onError) {
-        onError(error.message, error);
+        onError(errorMsg, error);
       }
       return Promise.reject(error);
     }

package/src/api/index.ts

@@ -1,16 +1,97 @@
-import axiosInstance from "./axiosInstance";
-
-export function getBalance(params: {
-  merchant_id: string;
-  biz_type: string;
-  token?: string;
-}) {
-  const { token, ...rest } = params;
-  return axiosInstance.get("/balance", {
-    params: rest,
-    headers: token ? { Authorization: token } : undefined,
-  });
+import http from "./axiosInstance";
+import type { AxiosProgressEvent } from "axios";
+// 获取余额
+export function getBalance() {
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  return http
+    .get("/balance", {
+      params: {
+        merchant_id: fundUnitParams.merchant_id,
+        biz_type: fundUnitParams.biz_type,
+      },
+    })
+    .then((res) => {
+      const data = res.data;
+      return {
+        totalAmount: data.total_amount || 0,
+        availableAmount: data.available_amount || 0,
+        frozenAmount: data.frozen_amount || 0,
+      };
+    });
 }
 
+// 获取所有字典
+export const getAllDicts = async () => {
+  return http.get("/all-dicts", {}).then((res) => {
+    sessionStorage.setItem("all_dicts", JSON.stringify(res.data));
+    return res.data || {};
+  });
+};
+
+// 上传文件
+export const uploadFile = async (
+  file: any,
+  onProgress?: (percent: number) => void
+) => {
+  return http
+    .post("/oss/upload", file, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+        if (progressEvent.total) {
+          const percent = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          onProgress && onProgress(percent);
+        }
+      },
+    })
+    .then((res) => {
+      return res.data?.url || "";
+    });
+};
+
+// 创建离线充值
+export const createOfflineRecharge = async (data: any) => {
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+
+  const params = {
+    merchant_id: Number(fundUnitParams.merchantId),
+    biz_type: fundUnitParams.bizType,
+    source_operator: String(fundUnitParams.userId),
+    transfer_no: data.transferNo,
+    transfer_channel: data.transferChannel,
+    voucher_urls: data.voucherUrls,
+  };
+  return http.post("/offline/recharge/create", params, {});
+};
+
+// 创建在线充值
+export const createOnlineRecharge = async (data: any) => {
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+
+  console.log(fundUnitParams, "fundUnitParams");
+
+  const params = {
+    merchant_id: Number(fundUnitParams.merchantId),
+    biz_type: fundUnitParams.bizType,
+    source_operator: String(fundUnitParams.userId),
+    amount: data.amount,
+    currency: data.currency,
+    recharge_channel: data.rechargeChannel,
+    return_url: window.location.href,
+  };
+  return http.post("/online/recharge/create", params, {}).then((res) => {
+    return res.data.redirect_url;
+  });
+};
+
 // 示例用法：
 // getBalance({ merchant_id: '1128', biz_type: 'ad', token: 'xxx' }).then(res => console.log(res));

package/src/components/{ModalForm → business/recharge-sdk}/components/Button.tsx

@@ -1,29 +1,13 @@
 import type { ComponentChildren } from "preact";
-import { getBalance } from "../../../api";
 
 interface ButtonProps {
   onClick?: () => void;
   color?: string;
   children: ComponentChildren;
-  merchantId?: string;
-  bizType?: string;
-  token?: string;
 }
 
-export function ThemedButton({
-  onClick,
-  color,
-  children,
-  merchantId,
-  bizType,
-  token,
-}: ButtonProps) {
+export function ThemedButton({ onClick, color, children }: ButtonProps) {
   // 组件加载时直接调用
-  if (merchantId && bizType) {
-    getBalance({ merchant_id: merchantId, biz_type: bizType, token }).then(
-      (res) => console.log(res)
-    );
-  }
   return (
     <button
       style={{

package/src/components/{ModalForm → business/recharge-sdk}/components/OfflineTransferForm.tsx

@@ -1,11 +1,13 @@
 import type { FunctionalComponent } from "preact";
-import { useRef } from "preact/hooks";
+import { Upload } from "../../../common/Upload";
+import { createOfflineRecharge } from "../../../../api";
+import { message } from "../../../common/Message";
 
 interface OfflineTransferFormProps {
   formState: {
     platform: string;
     transactionId: string;
-    files: File[];
+    files: string[]; // 绑定url数组
     platformError?: string;
     transactionIdError?: string;
     filesError?: string;
@@ -20,7 +22,9 @@ interface OfflineTransferFormProps {
 export const OfflineTransferForm: FunctionalComponent<
   OfflineTransferFormProps
 > = ({ formState, setFormState, onClose, loading, whiteTheme = false }) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const allDicts = JSON.parse(sessionStorage.getItem("all_dicts") || "{}");
+  console.log(allDicts, "allDicts");
+  const channelDict = allDicts.channel;
 
   // 样式对象
   const theme = whiteTheme
@@ -227,29 +231,7 @@ export const OfflineTransferForm: FunctionalComponent<
         },
       };
 
-  const handleFileChange = (e: any) => {
-    const files = Array.from(e.target.files).slice(0, 10);
-    setFormState((state: any) => ({ ...state, files, filesError: "" }));
-  };
-
-  const handleDrop = (e: any) => {
-    e.preventDefault();
-    const files = Array.from(e.dataTransfer.files).slice(0, 10);
-    setFormState((state: any) => ({ ...state, files, filesError: "" }));
-  };
-
-  const handleDragOver = (e: any) => {
-    e.preventDefault();
-  };
-
-  const handleRemoveFile = (idx: number) => {
-    setFormState((state: any) => ({
-      ...state,
-      files: state.files.filter((_: File, i: number) => i !== idx),
-    }));
-  };
-
-  const handleSubmit = (e: any) => {
+  const handleSubmit = async (e: any) => {
     e.preventDefault();
     let valid = true;
     setFormState((state: any) => ({
@@ -280,15 +262,13 @@ export const OfflineTransferForm: FunctionalComponent<
       valid = false;
     }
     if (!valid) return;
-    // 打印表单值
-    console.log("OfflineTransferForm values:", formState);
-  };
-
-  // 文件大小格式化
-  const formatSize = (size: number) => {
-    if (size > 1024 * 1024) return (size / 1024 / 1024).toFixed(2) + " MB";
-    if (size > 1024) return (size / 1024).toFixed(2) + " KB";
-    return size + " B";
+    await createOfflineRecharge({
+      transferChannel: formState.platform,
+      transferNo: formState.transactionId,
+      voucherUrls: formState.files,
+    });
+    onClose();
+    message.success("离线充值创建成功");
   };
 
   return (
@@ -312,9 +292,12 @@ export const OfflineTransferForm: FunctionalComponent<
             }));
           }}
         >
-          <option value="paypal">PayPal</option>
-          <option value="alipay">支付宝</option>
-          <option value="wechat">微信</option>
+          <option value="" disabled hidden>
+            请选择支付平台
+          </option>
+          {channelDict.map((item: any) => (
+            <option value={item.value}>{item.label}</option>
+          ))}
         </select>
         {formState.platformError && (
           <div style={theme.error}>{formState.platformError}</div>
@@ -349,63 +332,19 @@ export const OfflineTransferForm: FunctionalComponent<
         <div style={theme.label}>
           <span style={{ color: "#F53F3F" }}>*</span> 上传文件
         </div>
-        <div
-          style={{
-            ...theme.upload,
-            ...(formState.filesError ? theme.uploadError : {}),
-          }}
-          onClick={() => fileInputRef.current?.click()}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-        >
-          <div style={{ fontSize: 48, marginBottom: 12 }}>
-            {/* 优化后的上传图标 */}
-            <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
-              <rect x="8" y="8" width="48" height="48" rx="12" fill="#F4F6FA" />
-              <rect x="28" y="20" width="8" height="24" rx="4" fill="#E5E6EB" />
-            </svg>
-          </div>
-          <div style={{ color: "#222", fontSize: 15, marginBottom: 4 }}>
-            点击或拖拽文件到此处上传
-          </div>
-          <div style={{ color: "#999", fontSize: 13 }}>
-            支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传 10 个文件
-          </div>
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            accept=".jpg,.jpeg,.png,.pdf"
-            style={{ display: "none" }}
-            onChange={handleFileChange}
-          />
-        </div>
-        {formState.files && formState.files.length > 0 && (
-          <div style={{ marginTop: 12 }}>
-            {formState.files.map((file, idx) => (
-              <div key={idx} style={theme.fileItem}>
-                <div style={{ display: "flex", alignItems: "center", flex: 1 }}>
-                  <span style={{ fontWeight: 500 }}>{file.name}</span>
-                  <span
-                    style={{ color: "#8C8F93", fontSize: 13, marginLeft: 8 }}
-                  >
-                    ({formatSize(file.size)})
-                  </span>
-                </div>
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleRemoveFile(idx);
-                  }}
-                  style={theme.removeBtn}
-                >
-                  移除
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
+        <Upload
+          value={formState.files}
+          onChange={(urls) =>
+            setFormState((state: any) => ({
+              ...state,
+              files: urls,
+              filesError: "",
+            }))
+          }
+          maxCount={10}
+          accept={".jpg,.jpeg,.png,.pdf"}
+          multiple={true}
+        />
         {formState.filesError && (
           <div style={theme.error}>{formState.filesError}</div>
         )}

package/src/components/{ModalForm → business/recharge-sdk}/components/OnlineRechargeForm.tsx

@@ -20,6 +20,11 @@ interface OnlineRechargeFormProps {
 export const OnlineRechargeForm: FunctionalComponent<
   OnlineRechargeFormProps
 > = ({ formState, setFormState, onClose, loading, whiteTheme = false }) => {
+  const allDicts = JSON.parse(sessionStorage.getItem("all_dicts") || "{}");
+  const currencyDict = allDicts.currency || [];
+  const channelDict =
+    allDicts.channel?.filter((item: any) => item.payment_support) || [];
+
   const theme = whiteTheme
     ? {
         label: {
@@ -237,9 +242,12 @@ export const OnlineRechargeForm: FunctionalComponent<
             }));
           }}
         >
-          <option value="USD">USD - 美元</option>
-          <option value="CNY">CNY - 人民币</option>
-          <option value="EUR">EUR - 欧元</option>
+          <option value="" disabled hidden>
+            请选择充值币种
+          </option>
+          {currencyDict.map((item: any) => (
+            <option value={item.value}>{item.label}</option>
+          ))}
         </select>
       </div>
       <div style={{ marginBottom: 18 }}>
@@ -286,9 +294,12 @@ export const OnlineRechargeForm: FunctionalComponent<
             }));
           }}
         >
-          <option value="alipay">支付宝</option>
-          <option value="wechat">微信</option>
-          <option value="paypal">PayPal</option>
+          <option value="" disabled hidden>
+            请选择支付平台
+          </option>
+          {channelDict.map((item: any) => (
+            <option value={item.value}>{item.label}</option>
+          ))}
         </select>
         {formState.rechargeChannelError && (
           <div style={theme.error}>{formState.rechargeChannelError}</div>

package/src/components/{ModalForm/components/recharge.tsx → business/recharge-sdk/components/Recharge.tsx}

@@ -16,17 +16,16 @@ interface ModalFormProps {
   token?: string;
 }
 
-export function ModalForm({
+export function Recharge({
   visible,
   onClose,
   onSubmit,
   color,
   whiteTheme = true,
 }: ModalFormProps & { whiteTheme?: boolean }) {
-  console.log(1111);
   const [formState, setFormState] = useState({
     amount: "",
-    rechargeChannel: "paypal",
+    rechargeChannel: "",
     currency: "USD",
     loading: false,
     error: "",
@@ -36,7 +35,7 @@ export function ModalForm({
   });
   const [activeTab, setActiveTab] = useState<"online" | "offline">("online");
   const [offlineFormState, setOfflineFormState] = useState({
-    platform: "paypal",
+    platform: "",
     transactionId: "",
     files: [],
     platformError: "",
@@ -51,7 +50,7 @@ export function ModalForm({
       setActiveTab("online");
       setFormState({
         amount: "",
-        rechargeChannel: "paypal",
+        rechargeChannel: "",
         currency: "USD",
         loading: false,
         error: "",
@@ -60,7 +59,7 @@ export function ModalForm({
         currencyError: "",
       });
       setOfflineFormState({
-        platform: "paypal",
+        platform: "",
         transactionId: "",
         files: [],
         platformError: "",
@@ -220,6 +219,7 @@ export function ModalForm({
           padding: 32,
           borderRadius: 12,
           minWidth: 400,
+          maxWidth: 400,
           color: color || theme.modalColor,
           boxShadow: theme.modalBoxShadow,
           position: "relative",

package/src/components/{ModalForm → business/recharge-sdk}/index.tsx

@@ -1,33 +1,30 @@
 import { useState } from "preact/hooks";
 import { ThemedButton } from "./components/Button";
-import { ModalForm } from "./components/recharge";
+import { Recharge } from "./components/Recharge";
 import register from "preact-custom-element";
+import { createOnlineRecharge, getAllDicts } from "../../../api";
+getAllDicts();
 
 export function BestUnit(props: any) {
   const [visible, setVisible] = useState(false);
   const [whiteTheme, setWhiteTheme] = useState(true);
   const color = props.theme?.primaryColor;
-  const merchantId = props.merchant_id;
-  const bizType = props.biz_type;
-  const token = props.token;
-
   const handleSubmit = async (form: {
     amount: string;
     rechargeChannel: string;
     currency: string;
   }) => {
-    console.log("submit", form);
+    const result = await createOnlineRecharge({
+      amount: form.amount,
+      currency: form.currency,
+      rechargeChannel: form.rechargeChannel,
+    });
+    window.open(result, "_blank");
   };
 
   return (
     <div>
-      <ThemedButton
-        color={color}
-        onClick={() => setVisible(true)}
-        merchantId={merchantId}
-        bizType={bizType}
-        token={token}
-      >
+      <ThemedButton color={color} onClick={() => setVisible(true)}>
         打开表单
       </ThemedButton>
       <button
@@ -42,15 +39,12 @@ export function BestUnit(props: any) {
       >
         {whiteTheme ? "切换为暗黑主题" : "切换为白色主题"}
       </button>
-      <ModalForm
+      <Recharge
         visible={visible}
         onClose={() => setVisible(false)}
         onSubmit={handleSubmit}
         color={color}
         whiteTheme={whiteTheme}
-        merchantId={merchantId}
-        bizType={bizType}
-        token={token}
       />
     </div>
   );