cfel-base-components 2.4.4 → 2.5.1

package/src/components/layout/user-card/index.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { SwapOutlined, FormOutlined } from "@ant-design/icons";
+import "./index.scss";
+
+interface UserType {
+  name: string;
+  avatar: string;
+  tenantName: string;
+  role: any[];
+}
+interface CustomType {
+  type: string;
+  isCompleted: number;
+  isAudited: number;
+  hrefUrl: string;
+  historyAction?: any;
+}
+interface MyWalletInfoType {
+  availableCashAmount: string;
+  availableAmount: string;
+  currency: string;
+}
+
+interface AmountInfoType {
+  residueNum: string;
+  currencyCode: string;
+}
+
+const renderCurrency = (currency: string) => {
+  switch (currency) {
+    case "CNY":
+      return "¥ ";
+    case "USD":
+      return "$ ";
+    case "JPY":
+      return "JP¥ ";
+    default:
+      return "¥ ";
+  }
+};
+
+export default function UserCard({
+  myWalletInfo,
+  amountInfo,
+  customAction,
+}: any) {
+  const { user, custom, switchTenantUrl, logoutUrl } = (window as any)
+    ?.g_config;
+
+  const { name, avatar, tenantName, role }: UserType = user || {};
+
+  const { isCompleted, isAudited }: CustomType = custom || {};
+
+  const { availableCashAmount, availableAmount, currency }: MyWalletInfoType =
+    myWalletInfo || {};
+  const { residueNum, currencyCode }: AmountInfoType = amountInfo || {};
+
+  const UserCard = () => {
+    return (
+      <div className="layout-user-card">
+        <div className="user-info">
+          <img className="user-avatar" src={avatar} />
+          <div className="user-info-right">
+            <span className="name">{name}</span>
+            <div className="role-list">
+              {role?.map((i) => (
+                <span className="role-item" key={i}>
+                  {i}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {myWalletInfo && (
+          <div className="lios-userInfo">
+            <div className="lios-li">
+              <div className="lios-key">现金余额</div>
+              <div className="lios-value">
+                <span>{renderCurrency(currency)}</span>
+                {availableCashAmount || "加载中..."}
+              </div>
+            </div>
+            <div className="lios-li">
+              <div className="lios-key">可用额度</div>
+              <div className="lios-value">
+                <span>{renderCurrency(currency)}</span>
+                {availableAmount || "加载中..."}
+              </div>
+            </div>
+            {amountInfo && (
+              <div className="lios-li">
+                <div className="lios-key">抵用金余额</div>
+                <div className="lios-value">
+                  <span>{renderCurrency(currencyCode)}</span>
+                  {residueNum || "加载中..."}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {custom && (
+          <div className="lios-userInfo">
+            <div className="lios-li li-flex">
+              <div className="lios-key">客户类型</div>
+              <div className="lios-value">{custom.type || ""}</div>
+              <div
+                className="lios-icon"
+                onClick={() => {
+                  customAction && customAction();
+                }}
+              >
+                <FormOutlined />
+              </div>
+            </div>
+            <div className="lios-li">
+              <div className="lios-key">是否审核</div>
+              <div className="lios-value">{isAudited ? "是" : "否"}</div>
+            </div>
+            <div className="lios-li">
+              <div className="lios-key">是否资料完备</div>
+              <div className="lios-value">{isCompleted ? "是" : "否"}</div>
+            </div>
+          </div>
+        )}
+
+        {tenantName && (
+          <div className="lios-tenant">
+            <div className="tenant-label">租户</div>
+            <div className="tenant-switch">
+              <div className="tenant-value">{tenantName}</div>
+              {switchTenantUrl && (
+                <div
+                  className="tenant-icon"
+                  onClick={() => {
+                    location.href = switchTenantUrl;
+                  }}
+                >
+                  <SwapOutlined />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {logoutUrl && (
+          <div
+            className="lios-logout"
+            onClick={() => {
+              location.href = logoutUrl;
+            }}
+          >
+            <svg
+              className="logout-icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="5022"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M295.589 239.512c17.942-12.888 42.935-8.79 55.823 9.153 12.888 17.942 8.79 42.935-9.153 55.823C266.667 358.783 221 445.786 221 540.488 221 700.92 351.272 831 512 831s291-130.08 291-290.512c0-94.663-45.63-181.634-121.17-235.935-17.937-12.895-22.026-37.89-9.131-55.827 12.894-17.938 37.889-22.026 55.827-9.132C824.752 308.766 883 419.788 883 540.488 883 745.13 716.884 911 512 911S141 745.13 141 540.488c0-120.75 58.297-231.812 154.589-300.976z"
+                fill="currentColor"
+                p-id="5023"
+              ></path>
+              <path
+                d="M512 113c21.87 0 39.641 17.552 39.995 39.339L552 153v297c0 22.091-17.909 40-40 40-21.87 0-39.641-17.552-39.995-39.339L472 450V153c0-22.091 17.909-40 40-40z"
+                fill="currentColor"
+                p-id="5024"
+              ></path>
+            </svg>
+            退出登录
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return UserCard();
+}