cfel-base-components 2.0.7 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "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,10 +253,9 @@ 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{
             display: flex;
             .lios-value{
@@ -263,6 +263,7 @@ body {
             }
         }
         .lios-li{
+            line-height: 22px;
             .lios-key{
                 font-size: 12px;
                 color: rgba(0, 0, 0, .5);
@@ -273,6 +274,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

@@ -24,6 +24,11 @@ export interface LiosLayoutlProps {
     hrefUrl:string,
     historyAction?: any;
   }
+  myWalletInfo?:{
+    availableCashAmount:string,
+    availableAmount:string,
+    currency:string
+  }
   logoutUrl?: string,
   switchTenantUrl?: string,
   defaultOpenKeys?: string[],
@@ -47,7 +52,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     switchTenantUrl,
     defaultOpenKeys,
     productList,
-    logoData
+    logoData,
+    myWalletInfo
   } = props
 
   const {
@@ -62,13 +68,23 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     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]
@@ -89,6 +105,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     }
     
   }
+  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'>
       <div className='user-info'>
@@ -106,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'>