修改首页样式以及豆展示问题

src/pages/Home/Home.scss

@@ -78,7 +78,6 @@
     .Home-UserBox-Bean {
       padding: 32px 40px 70px;
       display: flex;
-      justify-content: space-around;
       flex-flow: wrap;
       font-size: 24px;
       color: #666;
@@ -86,6 +85,7 @@
         width: 40%;
         display: flex;
         align-items: center;
+        margin: 0 5%;
       }
       .Home-UserBox-BeanIcon {
         width: 24px;

src/pages/Home/Home.tsx

@@ -44,6 +44,7 @@ import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
 import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
 
 enum BeanType {
+  aimi = 'aimi',
   shower = 'shower',
   hairDryer = 'hairDryer',
   water = 'water',
@@ -130,13 +131,17 @@ class Home extends Component {
         type: ServiceTypeParams.wechatAppV,
       }).then(res => {
         console.log(res);
-        this.setState({
-          serviceList: res.data,
-        });
-        const { beanAccount } = this.state;
-        if (beanAccount && beanAccount.length) {
-          this.getFilterBeanList();
-        }
+        this.setState(
+          {
+            serviceList: res.data,
+          },
+          () => {
+            const { beanAccount } = this.state;
+            if (beanAccount && beanAccount.length) {
+              this.getFilterBeanList();
+            }
+          },
+        );
       });
     }
   }
@@ -151,13 +156,17 @@ class Home extends Component {
     })
       .then(res => {
         const data = res.data;
-        this.setState({
-          beanAccount: data,
-        });
-        const { serviceList } = this.state;
-        if (serviceList && serviceList.length) {
-          this.getFilterBeanList();
-        }
+        this.setState(
+          {
+            beanAccount: data,
+          },
+          () => {
+            const { serviceList } = this.state;
+            if (serviceList && serviceList.length) {
+              this.getFilterBeanList();
+            }
+          },
+        );
       })
       .catch(console.error);
   }
@@ -182,11 +191,7 @@ class Home extends Component {
 
   getFilterBeanList() {
     const { beanAccount, serviceList } = this.state;
-    let beanMap = {
-      [BeanType.water]: 0,
-      [BeanType.shower]: 0,
-      [BeanType.hairDryer]: 0,
-    };
+    let aimiItem = beanAccount.find(item => item.serviceId === '0');
     let cfItem = beanAccount.find(
       item => item.serviceId === '4' || item.serviceId === '12',
     );
@@ -199,6 +204,9 @@ class Home extends Component {
         item.serviceId === '11' ||
         item.serviceId === '9',
     );
+    let beanMap = {
+      [BeanType.aimi]: aimiItem ? aimiItem.money : 0,
+    };
     for (let index = 0; index < serviceList.length; index++) {
       const service = serviceList[index];
       if (
@@ -210,7 +218,7 @@ class Home extends Component {
       } else if (service.serviceId === 4 || service.serviceId === 12) {
         beanMap[BeanType.hairDryer] = cfItem ? cfItem.money : 0;
       } else if (service.serviceId === 5 || service.serviceId === 10) {
-        beanMap[BeanType.hairDryer] = xyItem ? xyItem.money : 0;
+        beanMap[BeanType.shower] = xyItem ? xyItem.money : 0;
       }
     }
     let arr: BeanAccount[] = Object.keys(beanMap).map(k => ({
@@ -293,13 +301,11 @@ class Home extends Component {
   render() {
     const { userinfo } = this.props;
     const {
-      beanAccount,
       annItem,
       barMenuVisiable,
       serviceList,
       filterBeanList,
     } = this.state;
-    let aimiItem = beanAccount.find(item => item.serviceId === '0');
     return (
       <View className='Home'>
         {barMenuVisiable ? (
@@ -347,19 +353,18 @@ class Home extends Component {
           </View>
           <View className='Home-UserBox-line' />
           <View className='Home-UserBox-Bean'>
-            {aimiItem && (
-              <View className='Home-UserBox-BeanItem'>
-                <Image className='Home-UserBox-BeanIcon' src={AimiIcon} />
-                <Text>艾米豆：</Text>
-                <Text className='Home-UserBox-BeanCount'>
-                  {aimiItem ? aimiItem.money.toFixed(2) : '0.00'}
-                </Text>
-              </View>
-            )}
             {filterBeanList &&
               filterBeanList.length &&
               filterBeanList.map(beanItem =>
-                beanItem.serviceId === BeanType.water ? (
+                beanItem.serviceId === BeanType.aimi ? (
+                  <View className='Home-UserBox-BeanItem'>
+                    <Image className='Home-UserBox-BeanIcon' src={AimiIcon} />
+                    <Text>艾米豆：</Text>
+                    <Text className='Home-UserBox-BeanCount'>
+                      {beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
+                    </Text>
+                  </View>
+                ) : beanItem.serviceId === BeanType.water ? (
                   <View
                     key={beanItem.serviceId}
                     className='Home-UserBox-BeanItem'>
@@ -391,9 +396,6 @@ class Home extends Component {
                   </View>
                 ) : null,
               )}
-            {serviceList && serviceList.length % 2 ? null : (
-              <View className='Home-UserBox-BeanItem' />
-            )}
           </View>
 
           <View className='Home-UserBox-Order'>