功能：请前往小程序继续操作

src/components/layout/header/index.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { CommonAPI } from '@/api';
 import { HeaderWrap } from '@/components/layout/header/styled';
+import QrcodePopover from '@/components/qrcodePopover';
 import { RootState } from '@/store';
 import { AddressState, setAddress } from '@/store/module/address';
 import { setGlobalData } from '@/store/module/globalData';
@@ -64,6 +65,14 @@ const HeaderView: React.FC<{
       getAccountInfo().then();
     }
   }, []);
+  // 顶部Tab列表
+  const tabList = [
+    { label: '个人中心', value: 'pages/mine/index' },
+    { label: '购物车', value: 'page-cart/cart-list/index' },
+    { label: '我的订单', value: 'pages/order/index' },
+    { label: '消息', value: 'pages/message/index' },
+    { label: '联系客服', value: 'page-mine/help-center/index' },
+  ];
   // 右上角按钮
   const items: MenuProps['items'] = [
     {
@@ -124,21 +133,13 @@ const HeaderView: React.FC<{
           </div>
           <div className="header-nav">
             <div className="nav-tab">
+              {tabList?.map((i, j) => (
+                <QrcodePopover path={i.value} key={j}>
                   <Button type={'link'} className="tab-item">
-                个人中心
-              </Button>
-              <Button type={'link'} className="tab-item">
-                购物车
-              </Button>
-              <Button type={'link'} className="tab-item">
-                我的订单
-              </Button>
-              <Button type={'link'} className="tab-item">
-                消息
-              </Button>
-              <Button type={'link'} className="tab-item">
-                联系客服
+                    {i.label}
                   </Button>
+                </QrcodePopover>
+              ))}
             </div>
             {!!userInfo?.id && (
               <div className="nav-user">
@@ -165,12 +166,16 @@ const HeaderView: React.FC<{
                   登录
                 </Button>
               )}
+              <QrcodePopover path={'page-service/service-flyer/index'}>
                 <Button type={'primary'} className="action-item">
-                发布需求
+                  发布任务
                 </Button>
+              </QrcodePopover>
+              <QrcodePopover path={'page-identity/identity-list/index'}>
                 <Button type={'primary'} className="action-item">
                   加盟入驻
                 </Button>
+              </QrcodePopover>
             </div>
           </div>
         </div>

src/components/layout/index.tsx

-import React, { useState } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import ContentView from '@/components/layout/content';
 import FooterView from '@/components/layout/footer';
@@ -13,8 +13,6 @@ const LayoutView: React.FC<{
   children?: React.ReactNode;
   placeholder?: boolean;
 }> = ({ children, placeholder }) => {
-  // 打开二维码弹窗
-  const [qrcodeShow, setQrcodeShow] = useState<boolean>(false);
   // store
   const dispatch = useDispatch();
   // system
@@ -22,10 +20,11 @@ const LayoutView: React.FC<{
     (state: RootState) => state.globalData,
   ) as GlobalDataState;
   // 关闭弹窗
-  const handleClose = () => {
+  const handleModalClose = () => {
     dispatch(
       setGlobalData({
         loginModalVisible: false,
+        qrcodeModalVisible: false,
       }),
     );
   };
@@ -47,12 +46,12 @@ const LayoutView: React.FC<{
       {/* 登录弹窗 */}
       <LoginModalView
         open={globalData?.loginModalVisible}
-        onCancel={handleClose}
+        onCancel={handleModalClose}
       />
       {/* 功能正在完善中 */}
       <QrcodeModalView
-        open={qrcodeShow}
-        onCancel={() => setQrcodeShow(false)}
+        open={globalData?.qrcodeModalVisible}
+        onCancel={handleModalClose}
       />
     </LayoutWrap>
   );

src/components/qrcodeModal/index.tsx

-import React from 'react';
-import { Modal } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { message, Modal } from 'antd';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { CommonAPI } from '@/api';
+import { RootState } from '@/store';
+import { GlobalDataState } from '@/store/module/globalData';
+
+const QrcodeModalView = ({
+  open,
+  onCancel,
+}: {
+  open: boolean;
+  onCancel: () => void;
+}) => {
+  // system
+  const globalData = useSelector(
+    (state: RootState) => state.globalData,
+  ) as GlobalDataState;
+  // 登录二维码的地址
+  const [qrCodeData, setQrCodeData] = useState<string>();
+  // 获取登录二维码
+  const getQrcodeLogin = async () => {
+    // 获取二维码
+    const res = await CommonAPI.getAppletQRCode({
+      page: globalData?.qrcodeModalPath || 'pages/welcome/index',
+      scene: globalData?.qrcodeModalScene || 'type=share',
+    });
+    if (res && res.code === '200') {
+      if (!res.result) {
+        message.warning('获取登录二维码失败');
+        return;
+      }
+      // 设置当前登录的二维码
+      setQrCodeData(`data:image/png;base64,${res.result}`);
+    }
+  };
+  // 组件挂载
+  useEffect(() => {
+    if (!open) return;
+    getQrcodeLogin().then();
+  }, [open]);
+  return (
+    <Modal
+      title="提示"
+      open={open}
+      footer={null}
+      onCancel={onCancel}
+      width={350}
+    >
+      <QrcodeModalWrap>
+        <div className="qrcode">
+          {qrCodeData && (
+            <img
+              className="animate__animated animate__faster animate__fadeIn"
+              style={{ width: '100%', height: '100%' }}
+              src={qrCodeData}
+              alt="云享飞小程序"
+            />
+          )}
+        </div>
+        <div className="title">请前往小程序继续操作</div>
+      </QrcodeModalWrap>
+    </Modal>
+  );
+};
+export default QrcodeModalView;
 
 export const QrcodeModalWrap = styled.div`
   position: relative;
@@ -14,11 +78,11 @@ export const QrcodeModalWrap = styled.div`
   padding-top: 1rem;
   .qrcode {
     width: 12.68rem;
-    height: 15.68rem;
-    background-image: url('https://file.iuav.com/file/sharefly-qrcode-wx.jpg');
+    height: 12.68rem;
+    //background-image: url('https://file.iuav.com/file/sharefly-qrcode-wx.jpg');
     //background-size: 100% 100%;
-    background-size: cover;
-    background-position: center;
+    //background-size: cover;
+    //background-position: center;
   }
   .title {
     color: #000;
@@ -27,21 +91,3 @@ export const QrcodeModalWrap = styled.div`
     font-weight: bold;
   }
 `;
-const QrcodeModalView = ({
-  open,
-  onCancel,
-}: {
-  open: boolean;
-  onCancel: () => void;
-}) => {
-  return (
-    <Modal title="提示" open={open} footer={null} onCancel={onCancel}>
-      <QrcodeModalWrap>
-        <div className="qrcode"></div>
-        <div className="title">功能正在完善中</div>
-        <div className="title">请前往小程序以获得更好体验</div>
-      </QrcodeModalWrap>
-    </Modal>
-  );
-};
-export default QrcodeModalView;

src/pages/cart/submit/[id].tsx

@@ -3,7 +3,7 @@ import { Input } from 'antd';
 import Big from 'big.js';
 import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { InterDataType } from '@/api/interface';
 import { AppMallGoodsDetails } from '@/api/interface/mall';
@@ -13,7 +13,7 @@ import LayoutView from '@/components/layout';
 import PaymentCheckout from '@/components/payment-checkout';
 import SubmitAddressView from '@/components/submit-comp/submit-address';
 import SubmitProductView from '@/components/submit-comp/submit-product';
-import { GlobalDataState } from '@/store/module/globalData';
+import { GlobalDataState, setGlobalData } from '@/store/module/globalData';
 import { formatMoney } from '@/utils/money';
 
 // 商品详情类型
@@ -44,6 +44,8 @@ const MallCartSubmitView: React.FC<{
 }> = ({ productDetail }) => {
   // 路由钩子
   const router = useRouter();
+  // store
+  const dispatch = useDispatch();
   // globalData
   const globalData = useSelector(
     (state: any) => state.globalData,
@@ -69,6 +71,24 @@ const MallCartSubmitView: React.FC<{
     const productSpecNum = Big(globalData?.productSpecNum || 1);
     return salePrice.mul(productSpecNum)?.toNumber();
   };
+  // 提交订单
+  const handleSubmit = () => {
+    if (!productDetail?.id) return;
+    const { id, specId, type } = router.query as { [key: string]: string };
+    const path = `k=${id}&sId=${specId}&sNum=${
+      globalData?.productSpecNum || 1
+    }&t=${type}`;
+    dispatch(
+      setGlobalData({
+        qrcodeModalVisible: true,
+        qrcodeModalPath:
+          path.length >= 32
+            ? 'page-product/product-detail/index'
+            : 'page-order/product-confirm/index',
+        qrcodeModalScene: path.length >= 32 ? `id=${id}` : path,
+      }),
+    );
+  };
   return (
     <LayoutView>
       <MallCartSubmitWrap>
@@ -110,8 +130,11 @@ const MallCartSubmitView: React.FC<{
             </div>
             <PaymentCheckout cost={getCheckoutPrice()} />
           </div>
-          <div className="checkout-submit select-none cursor-pointer">
-            提交订单
+          <div
+            className="checkout-submit select-none cursor-pointer"
+            onClick={handleSubmit}
+          >
+            {router?.query?.type === '1' ? '提交订单' : '提交意向'}
           </div>
         </div>
       </MallCartSubmitWrap>

src/store/module/globalData.ts

@@ -6,6 +6,9 @@ import { UserAddressSelectList } from '@/api/interface/user';
 
 export type GlobalDataState = {
   loginModalVisible: boolean;
+  qrcodeModalVisible: boolean;
+  qrcodeModalPath?: string;
+  qrcodeModalScene?: string;
   userAddressList?: InterDataType<UserAddressSelectList>;
   userAddressSelectId?: number;
   productSpecNum?: number;
@@ -13,6 +16,9 @@ export type GlobalDataState = {
 
 const initialState: GlobalDataState = {
   loginModalVisible: false,
+  qrcodeModalVisible: false,
+  qrcodeModalPath: undefined,
+  qrcodeModalScene: undefined,
   userAddressList: undefined,
   userAddressSelectId: undefined,
   productSpecNum: undefined,