基于Taro.js开发的H5应用

2025-07-05 23:13:44 +08:00
commit 3db95dbe9b
262 changed files with 18029 additions and 0 deletions
--- a/src/pages/index/Menu.tsx
+++ b/src/pages/index/Menu.tsx
@@ -0,0 +1,113 @@
+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 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 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}`})
+    }
+  }
+
+  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'}>
+                {
+                  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>
+                }
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+export default Page