功能：跳转小程序提示

src/components/home-comp/home-brand/index.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
 import { ListCompanyInfoByCoopIdType } from '@/api/interface/home';
+import QrcodePopover from '@/components/qrcodePopover';
 
 // 列表类型
 type ListType = InterListType<ListCompanyInfoByCoopIdType>;
@@ -34,24 +35,32 @@ const HomeBrandView = () => {
   }, []);
   return (
     <HomeBrandWrap>
-      <div className="brand-item">
-        <div className="item-icon">
-          <img
-            src="/assets/image/home/home-brand-all.png"
-            alt="全部品牌"
-            className="image"
-          />
+      <QrcodePopover path={'page-product/product-company/index'}>
+        <div className="brand-item">
+          <div className="item-icon">
+            <img
+              src="/assets/image/home/home-brand-all.png"
+              alt="全部品牌"
+              className="image"
+            />
+          </div>
         </div>
-      </div>
+      </QrcodePopover>
       {companyList?.map((i, j) => (
-        <div key={j} className="brand-item">
-          <div className="item-logo">
-            <img src={i.brandLogo} alt={i.brandName} className="image" />
+        <QrcodePopover
+          key={j}
+          path={'page-product/product-store/index'}
+          scene={`id=${Number(i?.backUserAccountId)}`}
+        >
+          <div className="brand-item">
+            <div className="item-logo">
+              <img src={i.brandLogo} alt={i.brandName} className="image" />
+            </div>
+            <Button type={'link'} className="item-name text-ellipsis">
+              {i.brandName || i.companyName}
+            </Button>
           </div>
-          <Button type={'link'} className="item-name text-ellipsis">
-            {i.brandName || i.companyName}
-          </Button>
-        </div>
+        </QrcodePopover>
       ))}
     </HomeBrandWrap>
   );

src/components/home-comp/home-news/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { RightOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
+import QrcodePopover from '@/components/qrcodePopover';
 
 const HomeNewsView = () => {
   // 帖子类型
@@ -114,10 +115,12 @@ const HomeNewsView = () => {
             </div>
           ))}
         </div>
-        <div className="head-more flex-between">
-          <div className="more-text">更多</div>
-          <RightOutlined style={{ fontSize: 10, color: '#33333380' }} />
-        </div>
+        <QrcodePopover path={'page-home/news-list/index'}>
+          <div className="head-more flex-between">
+            <div className="more-text">更多</div>
+            <RightOutlined style={{ fontSize: 10, color: '#33333380' }} />
+          </div>
+        </QrcodePopover>
         <img
           className="head-bg"
           src="https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/sharefly-web-news.png"

src/components/home-comp/home-product/index.tsx

@@ -37,8 +37,8 @@ const HomeProductView = () => {
     );
   };
   // 跳转详情
-  const handleDetail = async (item: ListType[0]['mallGoodsList'][0]) => {
-    await router.push(`/mall/product/${item.id}`);
+  const handleDetail = (item: ListType[0]['mallGoodsList'][0]) => {
+    router.push(`/mall/product/${item.id}`).then();
   };
   // 组件挂载
   useEffect(() => {

src/components/home-comp/home-service/index.tsx

 import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
@@ -8,6 +9,8 @@ import { IndustryListPagesType } from '@/api/interface/home';
 type ListType = InterListType<IndustryListPagesType>;
 
 const HomeServiceView = () => {
+  // 路由钩子
+  const router = useRouter();
   // 刷新子组件
   const [refresh, setRefresh] = useState<boolean>(true);
   // 服务列表
@@ -33,6 +36,10 @@ const HomeServiceView = () => {
       setRefresh(true);
     }, 0);
   };
+  // 跳转详情
+  const handleDetail = (item: ListType[0]['inspectionDTOS'][0]) => {
+    router.push(`/service/${item?.industryTypeId}/${item?.id}`).then();
+  };
   // componentDidMount
   useEffect(() => {
     getIndustryListPages().then();
@@ -56,6 +63,7 @@ const HomeServiceView = () => {
             <div
               className="service-item animate__animated animate__fast animate__fadeIn"
               key={j}
+              onClick={() => handleDetail(i)}
             >
               <img
                 className="item-image"

src/components/home-comp/home-tab/comp/tabView01.tsx

 import React, { useEffect, useState } from 'react';
 import { Button } from 'antd';
 import { useRouter } from 'next/router';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterDataType } from '@/api/interface';
 import { AppCategoryInfoType } from '@/api/interface/home';
+import { setGlobalData } from '@/store/module/globalData';
 
 // 列表类型
 type ListType = InterDataType<AppCategoryInfoType>;
@@ -12,6 +14,8 @@ type ListType = InterDataType<AppCategoryInfoType>;
 const TabView01 = () => {
   // 导航钩子
   const router = useRouter();
+  // store
+  const dispatch = useDispatch();
   // 列表数据
   const [tabList, setTabList] = useState<ListType>([]);
   // 获取云享商城分类
@@ -26,10 +30,20 @@ const TabView01 = () => {
   };
   // 跳转一级分类详情
   const handleMain = (i: ListType[0]) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
     router.push(`/mall/${i?.id}`).then();
   };
   // 跳转二级分类详情
   const handleSecond = (i: ListType[0], n: ListType[0]['subDTOList'][0]) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
     router.push(`/mall/${i?.id}/${n?.id}`).then();
   };
   // 组件挂载

src/components/home-comp/home-tab/comp/tabView02.tsx

 import React, { useEffect, useState } from 'react';
 import { Button } from 'antd';
 import { useRouter } from 'next/router';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
 import { IndustryListPagesType } from '@/api/interface/home';
+import { setGlobalData } from '@/store/module/globalData';
 
 // 列表类型
 type ListType = InterListType<IndustryListPagesType>;
@@ -12,6 +14,8 @@ type ListType = InterListType<IndustryListPagesType>;
 const TabView02 = () => {
   // 导航钩子
   const router = useRouter();
+  // store
+  const dispatch = useDispatch();
   // 列表数据
   const [tabList, setTabList] = useState<ListType>([]);
   // 获取分类列表
@@ -27,6 +31,11 @@ const TabView02 = () => {
   };
   // 跳转一级分类详情
   const handleMain = (i: ListType[0]) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
     router.push(`/service/${i?.id}`).then();
   };
   // 跳转二级分类详情
@@ -34,6 +43,11 @@ const TabView02 = () => {
     i: ListType[0],
     n: ListType[0]['inspectionDTOS'][0],
   ) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
     router.push(`/service/${i?.id}/${n?.id}`).then();
   };
   // 组件挂载

src/components/home-comp/home-tab/index.tsx

@@ -23,7 +23,7 @@ const HomeTabView = () => {
       moduleCode: 'HOME_MENU_NEW',
     });
     if (res && res.code === '200') {
-      setCategoryList(res.result || []);
+      setCategoryList(res.result.slice(0, 2) || []);
     }
   };
   // 选择分类

src/components/home-comp/home-task/index.tsx

@@ -5,10 +5,14 @@ import {
   VerticalAlignTopOutlined,
 } from '@ant-design/icons';
 import dayjs from 'dayjs';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterDataType } from '@/api/interface';
 import { AppPublishListType } from '@/api/interface/home';
+import QrcodePopover from '@/components/qrcodePopover';
+import { setGlobalData } from '@/store/module/globalData';
+import { UserInfoState } from '@/store/module/userInfo';
 import { formatLocationStr } from '@/utils/formatLocation';
 import { bigNumberTransform } from '@/utils/money';
 
@@ -16,6 +20,10 @@ import { bigNumberTransform } from '@/utils/money';
 type ListType = InterDataType<AppPublishListType>;
 
 const HomeTaskView = () => {
+  // store
+  const dispatch = useDispatch();
+  // userInfo
+  const userInfo = useSelector((state: any) => state.userInfo) as UserInfoState;
   // 服务标签类型
   const serviceTagList = [
     {
@@ -108,6 +116,25 @@ const HomeTaskView = () => {
     // formatMoney(props.detail?.orderAmount)
     return i?.orderAmount > 1 ? money : i?.orderAmount;
   };
+  // 跳转详情
+  const handleDetail = (item: ListType[0]) => {
+    // 判断是否登录
+    if (!userInfo?.id) {
+      dispatch(
+        setGlobalData({
+          loginModalVisible: true,
+        }),
+      );
+      return;
+    }
+    dispatch(
+      setGlobalData({
+        qrcodeModalVisible: true,
+        qrcodeModalPath: 'page-order/order-flyer/index',
+        qrcodeModalScene: `id=${Number(item?.id)}`,
+      }),
+    );
+  };
   // 组件挂载
   useEffect(() => {
     getRequirementsListType().then();
@@ -117,16 +144,18 @@ const HomeTaskView = () => {
     <HomeTaskWrap>
       <div className="task-title">
         <div className="title-label">抢单大厅</div>
-        <div className="title-more">
-          <div className="more-label">更多</div>
-          <div className="more-icon">
-            <RightOutlined style={{ color: '#998e8b', fontSize: 13 }} />
+        <QrcodePopover path={'page-service/service-task/index'}>
+          <div className="title-more">
+            <div className="more-label">更多</div>
+            <div className="more-icon">
+              <RightOutlined style={{ color: '#998e8b', fontSize: 13 }} />
+            </div>
           </div>
-        </div>
+        </QrcodePopover>
       </div>
       <div className="task-list">
         {requireList?.map((i, j) => (
-          <div className="list-item" key={j}>
+          <div className="list-item" key={j} onClick={() => handleDetail(i)}>
             <div className="item-title">
               {i?.orderLevelEnum !== 'REGULAR_ORDER' && (
                 <div

src/components/layout/content/index.tsx

-import React from 'react';
+import React, { useEffect } from 'react';
+import { Spin } from 'antd';
+import { useDispatch, useSelector } from 'react-redux';
 import { ContentWrap } from '@/components/layout/content/styled';
+import { GlobalDataState, setGlobalData } from '@/store/module/globalData';
 
 const ContentView = ({ children }: { children?: React.ReactNode }) => {
+  // store
+  const dispatch = useDispatch();
+  // globalData
+  const globalData = useSelector(
+    (state: any) => state.globalData,
+  ) as GlobalDataState;
+  // 页面挂载时自动将加载中移除
+  useEffect(() => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: false,
+      }),
+    );
+  }, []);
   return (
     <div className={'animate__animated animate__faster animate__fadeIn'}>
+      <Spin spinning={globalData?.loadingSpinnerVisible} fullscreen />
       <ContentWrap>{!!children && children}</ContentWrap>
     </div>
   );

src/components/qrcodePopover/index.tsx

@@ -57,7 +57,7 @@ const QrcodePopover: React.FC<{
   return (
     <Popover
       content={content}
-      trigger="focus"
+      trigger={'click'}
       placement="bottomRight"
       onOpenChange={handleOpenChange}
     >

src/store/module/globalData.ts

@@ -6,6 +6,7 @@ import { ListInspectionPriceUnit } from '@/api/interface/service';
 import { UserAddressSelectList } from '@/api/interface/user';
 
 export type GlobalDataState = {
+  loadingSpinnerVisible: boolean;
   loginModalVisible: boolean;
   qrcodeModalVisible: boolean;
   qrcodeModalPath?: string;
@@ -17,6 +18,7 @@ export type GlobalDataState = {
 };
 
 const initialState: GlobalDataState = {
+  loadingSpinnerVisible: false,
   loginModalVisible: false,
   qrcodeModalVisible: false,
 };