基于Taro.js开发的H5应用

src/pages/index/Menu.tsx

@@ -1,113 +1,39 @@
 import {useEffect, useState} from 'react'
-import {navigateTo} from '@tarojs/taro'
 import Taro from '@tarojs/taro'
-import {Button} from '@tarojs/components';
 import {Image} from '@nutui/nutui-react-taro'
 import {getSiteInfo} from "@/api/layout";
-import {TenantId} from "@/utils/config";
 import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
 
 const Page = () => {
 
-  const [loading, setLoading] = useState(true)
-  const [isLogin, setIsLogin] = useState<boolean>(false)
-  const [navItems, setNavItems] = useState<CmsNavigation[]>([])
+    const [navItems, setNavItems] = useState<CmsNavigation[]>([])
 
-  /* 获取用户手机号 */
-  const handleGetPhoneNumber = ({detail}) => {
-    const {code, encryptedData, iv} = detail
-    Taro.login({
-      success: function () {
-        if (code) {
-          Taro.request({
-            url: 'https://server.gxwebsoft.com/api/wx-login/loginByMpWxPhone',
-            method: 'POST',
-            data: {
-              code,
-              encryptedData,
-              iv,
-              notVerifyPhone: true,
-              refereeId: 0,
-              sceneType: 'save_referee',
-              tenantId: TenantId
-            },
-            header: {
-              'content-type': 'application/json',
-              TenantId
-            },
-            success: function (res) {
-              Taro.setStorageSync('access_token', res.data.data.access_token)
-              Taro.setStorageSync('UserId', res.data.data.user.userId)
-              Taro.setStorageSync('Phone', res.data.data.user.phone)
-              setIsLogin(true)
-              Taro.showToast({
-                title: '登录成功',
-                icon: 'success'
-              });
-            }
-          })
-        } else {
-          console.log('登录失败！')
-        }
-      }
-    })
-  }
+    const reload = () => {
+        getSiteInfo().then(res => {
+            console.log(res);
+            console.log(res.topNavs, 'top');
+            setNavItems(res.topNavs || []);
+        })
+    };
 
-  const onLogin = (item: any) => {
-    if(!isLogin){
-      return navigateTo({url: `/pages/category/category?id=${item.navigationId}`})
-    }else {
-      // 善款明细
-      if(item.navigationId == 4119){
-        return navigateTo({url: `/bszx/pay-record/pay-record`})
-      }
-      return navigateTo({url: `/pages/category/category?id=${item.navigationId}`})
-    }
-  }
+    useEffect(() => {
+        reload();
+    }, [])
 
-  const reload = () => {
-    getSiteInfo().then(res => {
-      console.log(res);
-      console.log(res.topNavs,'top');
-      setNavItems(res.topNavs || []);
-    })
-
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    reload();
-  }, [])
-
-  return (
-    <div className={'my-3'}>
-      <div>
-        <div className={'flex justify-between pb-2 px-1'}>
-          {
-            navItems.map((item, index) => (
-              <div key={index} className={'text-center'}>
+    return (
+        <div className={'py-2 my-3 mx-2'}>
+            <div className={'bg-white grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-2'}>
                 {
-                  isLogin && !loading ?
-                    <div className={'flex flex-col justify-center items-center'} onClick={() => {
-                      onLogin(item)
-                    }}>
-                      <Image src={item.icon} height={28} width={28}/>
-                      <div className={'mt-2'} style={{fontSize: '15px'}}>{item?.title}</div>
-                    </div>
-                    :
-                    <Button className={'text-white'} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
-                      <div className={'flex flex-col justify-center items-center'}>
-                        <Image src={item.icon} height={28} width={28}/>
-                        <div className={'mt-2 text-gray-700'} style={{fontSize: '15px'}}>{item?.title}</div>
-                      </div>
-                    </Button>
+                    navItems.map((item) => (
+                        <div className={'flex flex-col justify-center items-center'} onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}>
+                            <Image className={'shadow-xl rounded-lg'} style={{borderRadius: '8px'}} src={item.icon}
+                                   height={90} width={90}/>
+                            <div className={'mt-2 text-gray-700'} style={{fontSize: '15px'}}>{item?.title}</div>
+                        </div>
+                    ))
                 }
-              </div>
-            ))
-          }
+            </div>
         </div>
-      </div>
-    </div>
-  )
+    )
 }
 export default Page