Skip to content

W
web
提交 3607b7bf 作者: ZhangLingKun
操作

功能：提交成功弹窗

上级 aca83790
流水线 #7686 已通过 于阶段
in 5 分 5 秒
正在显示 包含 74 行增加 和 20 行删除
src/components/layout/index.tsx
...@@ -6,6 +6,7 @@ import HeaderView from '@/components/layout/header'; ...@@ -6,6 +6,7 @@ import HeaderView from '@/components/layout/header';
import { LayoutWrap } from '@/components/layout/styled'; import { LayoutWrap } from '@/components/layout/styled';
import LoginModalView from '@/components/loginModal'; import LoginModalView from '@/components/loginModal';
import QrcodeModalView from '@/components/qrcodeModal'; import QrcodeModalView from '@/components/qrcodeModal';
import ToastModalView from '@/components/toastModal';
import { RootState } from '@/store'; import { RootState } from '@/store';
import { GlobalDataState, setGlobalData } from '@/store/module/globalData'; import { GlobalDataState, setGlobalData } from '@/store/module/globalData';
...@@ -25,6 +26,7 @@ const LayoutView: React.FC<{ ...@@ -25,6 +26,7 @@ const LayoutView: React.FC<{
setGlobalData({ setGlobalData({
loginModalVisible: false, loginModalVisible: false,
qrcodeModalVisible: false, qrcodeModalVisible: false,
toastModalVisible: false,
}), }),
); );
}; };
...@@ -53,6 +55,11 @@ const LayoutView: React.FC<{ ...@@ -53,6 +55,11 @@ const LayoutView: React.FC<{
open={globalData?.qrcodeModalVisible} open={globalData?.qrcodeModalVisible}
onCancel={handleModalClose} onCancel={handleModalClose}
/> />
{/* 功能正在完善中 */}
<ToastModalView
open={globalData?.toastModalVisible}
onCancel={handleModalClose}
/>
</LayoutWrap> </LayoutWrap>
); );
}; };
......
src/components/product-comp/product-head/index.tsx
...@@ -227,9 +227,9 @@ const ProductHeadView: React.FC<{ detail: DetailType }> = ({ detail }) => { ...@@ -227,9 +227,9 @@ const ProductHeadView: React.FC<{ detail: DetailType }> = ({ detail }) => {
</div> </div>
</div> </div>
<div className="content-action flex-start select-none"> <div className="content-action flex-start select-none">
<div className="action-item" onClick={() => handleSubmit(3)}> {/* <div className="action-item" onClick={() => handleSubmit(3)}> */}
加入购物车 {/* 加入购物车 */}
</div> {/* </div> */}
<div className="action-item" onClick={() => handleSubmit(2)}> <div className="action-item" onClick={() => handleSubmit(2)}>
提交意向 提交意向
</div> </div>
......
src/components/toastModal/index.tsx
import React from 'react'; import React from 'react';
import { CheckCircleOutlined } from '@ant-design/icons';
import { Modal } from 'antd'; import { Modal } from 'antd';
import styled from 'styled-components';
const ToastModalView: React.FC<{ const ToastModalView: React.FC<{
open: boolean; open: boolean;
onCancel: () => void; onCancel: () => void;
}> = ({ open, onCancel }) => { }> = ({ open, onCancel }) => {
return ( return (
<Modal open={open} title={'提示'}> <Modal
通知弹窗 open={open}
title={'提示'}
onCancel={onCancel}
width={400}
footer={null}
>
<ToastModalWrap>
<CheckCircleOutlined style={{ color: '#07c160', fontSize: 68 }} />
<div className="toast-title">订单提交成功</div>
</ToastModalWrap>
</Modal> </Modal>
); );
}; };
export default ToastModalView; export default ToastModalView;
// 样式
const ToastModalWrap = styled.div`
position: relative;
width: 100%;
height: 16.8rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
box-sizing: border-box;
padding-top: 3rem;
.toast-title {
font-size: 20px;
font-weight: bold;
margin-top: 2.5rem;
}
`;
src/pages/_document.tsx
...@@ -17,6 +17,8 @@ const MyDocument = () => ( ...@@ -17,6 +17,8 @@ const MyDocument = () => (
{/* eslint-disable-next-line */} {/* eslint-disable-next-line */}
<title>云享飞</title> <title>云享飞</title>
{/* <title>【云享飞 iuav.com】无人机分类信息 - 让世界为天空所用</title> */} {/* <title>【云享飞 iuav.com】无人机分类信息 - 让世界为天空所用</title> */}
{/* 强制使用浅色模式 */}
<meta name="color-scheme" content="light" />
</Head> </Head>
<body> <body>
<Main /> <Main />
......
src/pages/cart/submit/[id].tsx
import React from 'react'; import React from 'react';
import { Input } from 'antd'; import { Input, Modal } from 'antd';
import Big from 'big.js'; import Big from 'big.js';
import { GetServerSidePropsContext } from 'next'; import { GetServerSidePropsContext } from 'next';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
...@@ -74,20 +74,35 @@ const MallCartSubmitView: React.FC<{ ...@@ -74,20 +74,35 @@ const MallCartSubmitView: React.FC<{
// 提交订单 // 提交订单
const handleSubmit = () => { const handleSubmit = () => {
if (!productDetail?.id) return; if (!productDetail?.id) return;
const { id, specId, type } = router.query as { [key: string]: string }; Modal.confirm({
const path = `k=${id}&sId=${specId}&sNum=${ title: '提示',
globalData?.productSpecNum || 1 content: `确认提交订单？`,
}&t=${type}`; onOk: () => {
dispatch( dispatch(setGlobalData({ loadingSpinnerVisible: true }));
setGlobalData({ setTimeout(() => {
qrcodeModalVisible: true, dispatch(
qrcodeModalPath: setGlobalData({
path.length >= 32 toastModalVisible: true,
? 'page-product/product-detail/index' loadingSpinnerVisible: false,
: 'page-order/product-confirm/index', }),
qrcodeModalScene: path.length >= 32 ? `id=${id}` : path, );
}), }, 1000);
); },
});
// 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 ( return (
<LayoutView> <LayoutView>
......
src/store/module/globalData.ts
...@@ -15,12 +15,14 @@ export type GlobalDataState = { ...@@ -15,12 +15,14 @@ export type GlobalDataState = {
userAddressSelectId?: number; userAddressSelectId?: number;
productSpecNum?: number; productSpecNum?: number;
priceUnitList?: InterDataType<ListInspectionPriceUnit>; priceUnitList?: InterDataType<ListInspectionPriceUnit>;
toastModalVisible: boolean;
}; };
const initialState: GlobalDataState = { const initialState: GlobalDataState = {
loadingSpinnerVisible: false, loadingSpinnerVisible: false,
loginModalVisible: false, loginModalVisible: false,
qrcodeModalVisible: false, qrcodeModalVisible: false,
toastModalVisible: false,
}; };
const globalDataSlice = createSlice({ const globalDataSlice = createSlice({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论