Skip to content

W
web
提交 6a700ddd 作者: ZhangLingKun
操作

功能：用户协议

上级 6c4a45b6
正在显示 包含 198 行增加 和 36 行删除
src/components/agreeModal/index.tsx 0 → 100644
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,30 +111,51 @@ const FooterView = () => {
</div>
</div>
<div className="footer-end">
<QrcodePopover path={'page-mine/help-center/index'}>
<Button type={'link'} className="end-item">
常见问题
</Button>
</QrcodePopover>
<QrcodePopover path={'page-mine/help-center/index'}>
<Button type={'link'} className="end-item">
意见反馈
</Button>
</QrcodePopover>
<QrcodePopover path={'page-mine/sharefly-about/index'}>
<Button type={'link'} className="end-item">
免责声明
<div className="flex w-full items-center">
<QrcodePopover path={'page-mine/help-center/index'}>
<Button type={'link'} className="end-item">
常见问题
</Button>
</QrcodePopover>
<QrcodePopover path={'page-mine/help-center/index'}>
<Button type={'link'} className="end-item">
意见反馈
</Button>
</QrcodePopover>
<QrcodePopover path={'page-mine/sharefly-about/index'}>
<Button type={'link'} className="end-item">
免责声明
</Button>
</QrcodePopover>
</div>
<div className="flex w-full items-center">
<div className="mr-4 text-999">
Copyright © 2021 - 2024 云享飞 版权所有
</div>
<Button
type={'link'}
className="p-0 text-999"
onClick={() => {
window.location.href = 'https://beian.miit.gov.cn';
}}
>
浙ICP备2023014395号
</Button>
</QrcodePopover>
<Button
type={'link'}
className="end-item"
onClick={() => {
window.location.href = 'https://beian.miit.gov.cn';
}}
>
浙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({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论