添加授信保证金显示

src/api/account.ts

@@ -57,3 +57,18 @@ export const rechargeOrder = (
     method: 'POST',
     data: params,
   });
+
+type CreditInfo = {
+  amount: number;
+  areaId: number;
+  operateId: number;
+  showType: string;
+};
+
+export const fetchCreditDeposites = (params: {
+  areaId: number;
+}): Promise<ResponseDataEntity<CreditInfo>> =>
+  baseFetch({
+    url: '/dcxy/api/creditDeposits',
+    data: params,
+  });

src/hooks/useCreditDeposits.ts

+import { fetchCreditDeposites } from '@/api/account';
+import { useEffect, useReducer } from '@tarojs/taro';
+import Actions from '@/types/Store/Actions';
+
+type CreditDepositsState = {
+  amount: number; // 金额
+
+  areaId: number; // 区域id
+
+  operateId: number; // 运营商id
+
+  showType: string; //展示类型 1授信额度 2保证金
+};
+
+const reducer = (state: CreditDepositsState, action: Actions) => {
+  switch (action.type) {
+    case 'updateCreditInfo':
+      return action.payload;
+    default:
+      return state;
+  }
+};
+const initState = {
+  amount: 0,
+  areaId: 0,
+  operateId: 0,
+  showType: '',
+};
+
+const useCreditDeposits = (areaId: number): CreditDepositsState => {
+  const [state, dispatch] = useReducer(reducer, initState);
+
+  useEffect(() => {
+    fetchCreditDeposites({
+      areaId: areaId,
+    }).then(res => {
+      if (res.data) {
+        dispatch({ type: 'updateCreditInfo', payload: res.data });
+      }
+    });
+  }, [areaId]);
+
+  return state;
+};
+
+export default useCreditDeposits;

src/pages/Account/Account.scss

@@ -5,21 +5,36 @@
     .Account-Card {
       position: relative;
       height: 360px;
-      .Account-Card-Aimi {
+      .Account-Card-money {
         padding: 60px 80px 36px;
         color: #fff;
-        .Account-Card-Aimi-label {
+        display: flex;
+        .Account-Card-label {
           font-size: 24px;
           margin-bottom: 16px;
         }
-        .Account-Card-Aimi-num {
+        .Account-Card-num {
           font-size: 44px;
         }
+        .Account-Card-Aimi {
+          width: 248px;
+        }
+        .Account-Card-credit {
+          position: relative;
+          padding-left: 66px;
+          &::after {
+            content: ' ';
+            position: absolute;
+            top: 46px;
+            left: 0;
+            height: 40px;
+            border-right: 1px solid #b5bffa;
+          }
+        }
       }
       .Account-line {
-        width: 252px;
         border-bottom: 1px solid #b5bffa;
-        margin-left: 40px;
+        margin: 0 40px;
       }
       .Account-Card-Bean {
         padding: 30px 40px 0;

src/pages/Account/Account.tsx

@@ -21,6 +21,7 @@ import AES from 'crypto-js/aes';
 import Utf8 from 'crypto-js/enc-utf8';
 import ECBmode from 'crypto-js/mode-ecb';
 import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
+import useCreditDeposits from '@/hooks/useCreditDeposits';
 
 enum PaywayCode {
   wx = 2,
@@ -44,6 +45,7 @@ export const AccountComponent = () => {
     userinfo,
     serviceList,
   );
+  const creditInfo = useCreditDeposits(userinfo.areaId);
 
   const clickPayBtn = () => {
     if (!payConfigId) {
@@ -143,20 +145,27 @@ export const AccountComponent = () => {
       <View className='Account-Card-warp'>
         <View className='Account-Card'>
           <Image className='bg' src={AccountCardBg} />
+          <View className='Account-Card-money'>
             <View className='Account-Card-Aimi'>
-            <View className='Account-Card-Aimi-label'>艾米余额</View>
-
+              <View className='Account-Card-label'>艾米余额</View>
               {filterBeanList.length &&
                 filterBeanList.map(beanItem =>
                   beanItem.serviceId === BeanType.aimi ? (
-                  <View
-                    key={beanItem.serviceId}
-                    className='Account-Card-Aimi-num'>
+                    <View key={beanItem.serviceId} className='Account-Card-num'>
                       {beanItem.money.toFixed(2)}
                     </View>
                   ) : null,
                 )}
             </View>
+            {creditInfo.showType && (
+              <View className='Account-Card-credit'>
+                <View className='Account-Card-label'>
+                  {creditInfo.showType == '1' ? '我的授信' : '我的保证金'}
+                </View>
+                <View className='Account-Card-num'>{creditInfo.amount}</View>
+              </View>
+            )}
+          </View>
           <View className='Account-line' />
 
           <View className='Account-Card-Bean'>