cfel-base-components 2.0.6 → 2.0.8

package/demo/src/index.jsx

@@ -2,6 +2,7 @@ import React from "react"
 import { createRoot } from 'react-dom/client';
 import style from './index.module.less';
 import { SwapOutlined, } from '@ant-design/icons';
+import { history } from 'umi';
 
 import './index.scss';
 import PageContainer from '../../src/components/base-component/PageContainer';
@@ -41,7 +42,8 @@ const App = () => {
             type:(window)?.g_config?.custom?.type,
             isCompleted:(window)?.g_config?.custom?.isCompleted,
             isAudited:(window)?.g_config?.custom?.isAudited,
-            hrefUrl='/web/user-info'
+            hrefUrl='/web/user-info',
+            historyAction:history
           }}
           logoutUrl={(window)?.g_config?.logoutUrl}
           switchTenantUrl={(window)?.g_config?.switchTenantUrl}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",

package/src/components/layout/index.scss

@@ -222,8 +222,9 @@ body {
     }
 
     .lios-tenant {
-        margin-bottom: 12px;
-
+        padding: 5px 0px;
+        margin: 5px 0px;
+        border-top: 1px solid rgba(5, 5, 5, 0.06);
         .tenant-label {
             font-size: 12px;
             color: rgba(0, 0, 0, .5);
@@ -252,8 +253,8 @@ body {
 
     }
     .lios-userInfo{
-        padding: 10px 0px;
-        margin: 10px 0px;
+        padding: 5px 0px;
+        margin: 5px 0px;
         border-top: 1px solid rgba(5, 5, 5, 0.06);
         border-bottom: 1px solid rgba(5, 5, 5, 0.06);
         .li-flex{
@@ -263,6 +264,7 @@ body {
             }
         }
         .lios-li{
+            line-height: 22px;
             .lios-key{
                 font-size: 12px;
                 color: rgba(0, 0, 0, .5);
@@ -273,6 +275,9 @@ body {
                 display: inline-block;
                 font-size: 12px;
                 color: rgba(0, 0, 0, .85);
+                span{
+                    padding-left: 5px;
+                  }
             }
             .lios-icon{
                 width: 40px;

package/src/components/layout/index.tsx

@@ -21,7 +21,13 @@ export interface LiosLayoutlProps {
     type: string,
     isCompleted: number,
     isAudited: number,
-    hrefUrl:string
+    hrefUrl:string,
+    historyAction?: any;
+  }
+  myWalletInfo?:{
+    availableCashAmount:string,
+    availableAmount:string,
+    currency:string
   }
   logoutUrl?: string,
   switchTenantUrl?: string,
@@ -46,7 +52,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     switchTenantUrl,
     defaultOpenKeys,
     productList,
-    logoData
+    logoData,
+    myWalletInfo
   } = props
 
   const {
@@ -58,15 +65,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const {
     isCompleted,
     isAudited,
-    hrefUrl
+    hrefUrl,
+    historyAction
   } = custom || {}
+  const {
+    availableCashAmount,
+    availableAmount,
+    currency
+  } = myWalletInfo || {}
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
   const [currentProduct, setCurrentProduct] = useState<any>({});
 
   const { Sider } = Layout;
 
   const [collapsed, setCollapsed] = useState(false);
-
+  const [currencyList, setCurrencyList] = useState([
+    { value: 'JPY', label: '日元' },
+    { value: 'SAR', label: '沙特币' },
+    { value: 'USD', label: '美元' },
+    { value: 'CNY', label: '人民币' }
+  ])
   useEffect(() => {
     if (!productList) return
     let cp = productList?.filter((i: any) => i.productCode == productCode)[0]
@@ -78,7 +96,24 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   };
   const editUserInfo = () => {
     const { origin } = window.location
-    window.location.href = origin +  hrefUrl 
+    if(historyAction){
+      historyAction?.push({
+        pathname: hrefUrl
+      });
+    }else{
+      window.location.href = origin +  hrefUrl 
+    }
+    
+  }
+  const currencyText = (currencyText:string)=>{
+    let text = ''
+    currencyList.some((item:any)=>{
+      if(item.value == currencyText){
+        text =  item.label
+        return true
+      }
+    })
+    return text
   }
   const UserCard = () => {
     return <div className='lios-user-card'>
@@ -97,7 +132,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           </div>
         </div>
       </div>
-
+      
+      {
+        myWalletInfo && <div className='lios-userInfo'>
+          <div className='lios-li'>
+            <div className='lios-key'>现金余额</div>
+            <div className='lios-value'>{availableCashAmount || '加载中...'}
+            <span>{currencyText(currency)}</span></div>
+          </div>
+          <div className='lios-li'>
+            <div className='lios-key'>可用额度</div>
+            <div className='lios-value'>{availableAmount || '加载中...'}
+            <span>{currencyText(currency)}</span></div>
+          </div>
+        </div>
+      }
       {
         custom && <div className='lios-userInfo'>
           <div className='lios-li li-flex'>