功能：用户协议

src/components/agreeModal/index.tsx

+import React, { useEffect, useState } from 'react';
+import { Button, Modal } from 'antd';
+import { useRouter } from 'next/router';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterDataType } from '@/api/interface';
+import { ListBannerImgType } from '@/api/interface/home';
+import { RootState } from '@/store';
+import { GlobalDataState, setGlobalData } from '@/store/module/globalData';
+
+type AgreeType = InterDataType<ListBannerImgType>;
+
+const AgreeModalView: React.FC<{
+  open: boolean;
+}> = ({ open }) => {
+  // store
+  const dispatch = useDispatch();
+  // 路由钩子
+  const router = useRouter();
+  // system
+  const globalData = useSelector(
+    (state: RootState) => state.globalData,
+  ) as GlobalDataState;
+  // 协议内容
+  const [agreementData, setAgreementData] = useState<AgreeType>();
+  // 关闭弹窗
+  const handleClose = () => {
+    dispatch(setGlobalData({ agreeModalVisible: false }));
+    // 如果需要返回
+    if (globalData.toastModalBack) router.back();
+  };
+  // 获取协议
+  const getAgreementData = async () => {
+    const res = await HomeAPI.listBannerImg({
+      moduleCode: 'SHAREFLY_ABOUT',
+    });
+    if (res && res.code === '200') {
+      setAgreementData(res.result);
+    }
+  };
+  useEffect(() => {
+    if (!open) return;
+    getAgreementData().then();
+  }, [open]);
+  return (
+    <Modal
+      open={open}
+      title={
+        globalData?.agreeModalType === 1 ? '云享飞隐私协议' : '云享飞用户协议'
+      }
+      onCancel={handleClose}
+      width={720}
+      footer={null}
+    >
+      <AgreeModalWrap>
+        <div className={'content'}>
+          {agreementData?.[globalData?.agreeModalType]?.textContent && (
+            <div
+              className="w-full"
+              dangerouslySetInnerHTML={{
+                __html:
+                  agreementData?.[globalData?.agreeModalType]?.textContent,
+              }}
+            />
+          )}
+        </div>
+        <Button type="primary" onClick={handleClose}>
+          同意并继续
+        </Button>
+      </AgreeModalWrap>
+    </Modal>
+  );
+};
+
+export default AgreeModalView;
+// 样式
+const AgreeModalWrap = styled.div`
+  position: relative;
+  width: 100%;
+  height: 26.8rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+  box-sizing: border-box;
+  .content {
+    position: relative;
+    width: 100%;
+    height: 24.8rem;
+    margin-bottom: 1rem;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      -webkit-border-radius: 2em;
+      -moz-border-radius: 2em;
+      border-radius: 2em;
+      width: 7px;
+      height: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #d9d9d9;
+      -webkit-border-radius: 2em;
+      -moz-border-radius: 2em;
+      border-radius: 2em;
+    }
+  }
+`;

src/components/layout/footer/index.tsx

 import React from 'react';
+import { PhoneOutlined, ShopOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import { FooterWrap } from '@/components/layout/footer/styled';
 import QrcodePopover from '@/components/qrcodePopover';
@@ -110,6 +111,7 @@ const FooterView = () => {
           </div>
         </div>
         <div className="footer-end">
+          <div className="flex w-full items-center">
             <QrcodePopover path={'page-mine/help-center/index'}>
               <Button type={'link'} className="end-item">
                 常见问题
@@ -125,9 +127,14 @@ const FooterView = () => {
                 免责声明
               </Button>
             </QrcodePopover>
+          </div>
+          <div className="flex w-full items-center">
+            <div className="mr-4 text-999">
+              Copyright © 2021 - 2024 云享飞 版权所有
+            </div>
             <Button
               type={'link'}
-            className="end-item"
+              className="p-0 text-999"
               onClick={() => {
                 window.location.href = 'https://beian.miit.gov.cn';
               }}
@@ -135,6 +142,21 @@ const FooterView = () => {
               浙ICP备2023014395号
             </Button>
           </div>
+          <div className="absolute right-0 top-4">
+            <div className="mb-1">
+              <ShopOutlined className="mr-2 text-999" />
+              <span className="text-999">
+                浙江省杭州市富阳区春江街道富春湾大道2723号17幢283号
+              </span>
+            </div>
+            <div>
+              <PhoneOutlined className="mr-2 -scale-x-100 text-999" />
+              <span className="text-999">
+                联系电话：0571-87199598/17706710318
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
     </FooterWrap>
   );

src/components/layout/footer/styled.tsx

@@ -7,7 +7,7 @@ export const FooterWrap = styled.div`
   .footer-wrap {
     position: relative;
     max-width: 1190px;
-    height: 19.13rem;
+    min-height: 19.13rem;
     box-sizing: border-box;
     margin: 0 auto;
     border-radius: 0;
@@ -15,25 +15,27 @@ export const FooterWrap = styled.div`
     //padding: 0 12rem;
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: flex-start;
     flex-direction: column;
   }
   &::after {
     position: absolute;
     content: '';
     bottom: 5rem;
-    left: 12rem;
-    width: calc(100% - 24rem);
+    left: calc((100% - 1190px) / 2);
+    width: 1190px;
     height: 0.02rem;
     background: #bfbfbf;
   }
   .footer-end {
     position: relative;
     width: 100%;
-    height: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    min-height: 5rem;
+    padding: 1rem 0;
+    box-sizing: border-box;
+    //display: flex;
+    //align-items: center;
+    //justify-content: center;
     .end-item {
       font-size: 12px;
       font-weight: 400;
@@ -64,7 +66,7 @@ export const FooterWrap = styled.div`
     align-items: flex-start;
     justify-content: space-between;
     box-sizing: border-box;
-    padding-top: 2.5rem;
+    padding: 2.5rem 0;
     .start-item {
       position: relative;
       min-width: 8.6rem;

src/components/layout/index.tsx

 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import AgreeModalView from '@/components/agreeModal';
 import ContentView from '@/components/layout/content';
 import FooterView from '@/components/layout/footer';
 import HeaderView from '@/components/layout/header';
@@ -60,6 +61,8 @@ const LayoutView: React.FC<{
         open={globalData?.toastModalVisible}
         onCancel={handleModalClose}
       />
+      {/* 协议弹窗 */}
+      <AgreeModalView open={globalData?.agreeModalVisible} />
     </LayoutWrap>
   );
 };

src/components/loginModal/index.tsx

@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { CommonAPI } from '@/api';
 import { RootState } from '@/store';
-import { GlobalDataState } from '@/store/module/globalData';
+import { GlobalDataState, setGlobalData } from '@/store/module/globalData';
 import { setSystem } from '@/store/module/system';
 import { setUserInfo } from '@/store/module/userInfo';
 
@@ -161,6 +161,10 @@ const LoginModalView = ({
     await router.push('/user/signup');
     handleClose();
   };
+  // 打开协议弹窗
+  const handleAgree = (type: number) => {
+    dispatch(setGlobalData({ agreeModalVisible: true, agreeModalType: type }));
+  };
   // 组件挂载
   useEffect(() => {
     if (!open) {
@@ -249,9 +253,19 @@ const LoginModalView = ({
               onChange={(e) => setCheckValue(e.target?.checked)}
             >
               <span>阅读并接受</span>
-              <span className="bold cursor-pointer">云享飞用户协议</span>
+              <span
+                className="bold cursor-pointer"
+                onClick={() => handleAgree(1)}
+              >
+                云享飞用户协议
+              </span>
               <span>和</span>
-              <span className="bold cursor-pointer">隐私协议</span>
+              <span
+                className="bold cursor-pointer"
+                onClick={() => handleAgree(2)}
+              >
+                隐私协议
+              </span>
             </Checkbox>
           </div>
           <div className="signup">

src/pages/order/success/[id].tsx

 import React, { useEffect, useState } from 'react';
 import { CheckCircleFilled } from '@ant-design/icons';
 import { Button } from 'antd';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterDataType } from '@/api/interface';
@@ -13,6 +14,8 @@ import ProductItemView from '@/components/productItem';
 type ListType = InterDataType<RecommendGoodsType>;
 
 const OrderSuccessView = () => {
+  // 路由钩子
+  const router = useRouter();
   // 推荐商品列表
   const [recommendGoodsList, setRecommendGoodsList] = useState<
     ListType[0]['mallGoodsList']
@@ -30,6 +33,10 @@ const OrderSuccessView = () => {
       );
     }
   };
+  // 跳转订单详情
+  const handleDetail = async () => {
+    await router.push(`/order/product/${router.query?.id}`);
+  };
   // 页面加载
   useEffect(() => {
     getRecommendGoodsList().then();
@@ -55,7 +62,7 @@ const OrderSuccessView = () => {
               <div className="item-label">实付款：</div>
               <div className="item-value price">￥19.9</div>
             </div>
-            <Button type="link" className="mb-2 px-0">
+            <Button type="link" className="mb-2 px-0" onClick={handleDetail}>
               查看订单
             </Button>
           </div>

src/store/module/globalData.ts

@@ -18,6 +18,8 @@ export type GlobalDataState = {
   priceUnitList?: InterDataType<ListInspectionPriceUnit>;
   toastModalVisible: boolean;
   toastModalBack: boolean;
+  agreeModalVisible: boolean;
+  agreeModalType: number;
 };
 
 const initialState: GlobalDataState = {
@@ -26,6 +28,8 @@ const initialState: GlobalDataState = {
   qrcodeModalVisible: false,
   toastModalVisible: false,
   toastModalBack: false,
+  agreeModalVisible: false,
+  agreeModalType: 1,
 };
 
 const globalDataSlice = createSlice({