Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支付

Browse Source
This commit is contained in:
xixi 2024-07-25 15:20:54 +08:00
parent b9ef03390b
commit 9c27b25d8a
16 changed files with 334 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/card/CardProjEdit.tsx
View File

@ -33,7 +33,7 @@ export default function CardProjEdit(props: IProjEdit) {
return (
// props.step === 1 ? 'complete-one' : props.step === 2 ? 'complete-two' : props.step === 3 ? 'complete-three' : props.step === 4 ? 'complete-four' : ''
<div className="card-proj-edit" style={{ background: props.background, boxShadow: props.shadow }}>
<div className="card-proj-edit" style={{ background: props.background, boxShadow: props.shadow ,marginBottom:props.title == '第4步:登录页面设置'?5:27}}>
{/* <div className={ }> */}
<div className='card-proj-edit-text'>
<div className="title">{props.title}</div>

4
src/components/card/card-proj-edit.css
View File

@ -2,7 +2,7 @@
width: 95%;
padding: 20px 25px;
box-sizing: border-box;
margin-bottom: 27px;
/* margin-bottom: 27px; */
display: flex;
justify-content: space-between;
border-radius: 4px;
@ -18,7 +18,7 @@
position: absolute;
background: url(../../static/editPro/bot.png);
background-size: 100% 100%;
left: 140px;
left: calc(50% - 12px);
top: -18px;
}
.card-proj-edit .title {

4
src/components/card/card-proj-jump.css
View File

@ -1,11 +1,13 @@
.card-proj-jump {
width: 317px;
width: 100%;
padding: 20px 25px;
box-sizing: border-box;
cursor: pointer;
background-color: #F5FEFA;
/* box-shadow:0px 3px 0px 0px rgba(55,215,138,0.18) ; */
position: relative;
margin-bottom: 5px;
border-radius: 5px;
}

41
src/components/payment/Payment.tsx
View File

@ -64,7 +64,7 @@ interface IPaymentProps {
}
export default function Payment(props: IPaymentProps) {
const [mask, setMask] = useState(false)
const [form] = Form.useForm<FormFieldType>();
const [messageApi, messageApiContext] = useMessage();
const [isRechargeMoneyEdit, setIsRechargeMoneyEdit] = useState(false);
@ -81,7 +81,7 @@ export default function Payment(props: IPaymentProps) {
bankUnionpayNumber: ''
});
const [countdownTime, setCountdownTime] = useState('');
const [isCountdownTimeout, setIsCountdownTimeout] = useState(false);
// const [isCountdownTimeout, setIsCountdownTimeout] = useState(false);
const moneyRange: number[] = [0.01, 2000];
const countdownIntervalRef = useRef<number | undefined>();
const [refreshQrCodeCount, setRefreshQrCodeCount] = useState(0);
@ -93,13 +93,13 @@ export default function Payment(props: IPaymentProps) {
if (countdownIntervalRef.current) {
clearInterval(countdownIntervalRef.current);
}
if (thirdParty == ThirdPartyEnum.DGZZ) {
return;
}
// if (thirdParty == ThirdPartyEnum.DGZZ) {
// return;
// }
const Time = new Date().getTime();
// 设定计时器的时间为60秒
const countDownDate = new Date(Time + 270 * 1000).getTime();
// const countDownDate = new Date(Time + 5 * 1000).getTime();
// 更新计时器的秒数
const updateCountdown = () => {
const now = new Date().getTime();
@ -111,8 +111,9 @@ export default function Payment(props: IPaymentProps) {
setCountdownTime(minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
if (distance <= 0) {
setCountdownTime('已失效');
setIsCountdownTimeout(true);
// setIsCountdownTimeout(true);
clearInterval(countdownIntervalRef.current);
setMask(true)
}
}
// 每秒更新一次计时器
@ -164,6 +165,7 @@ export default function Payment(props: IPaymentProps) {
return;
}
getPay();
// countdown()
}, [thirdParty, isRechargeMoneyEdit, refreshQrCodeCount]);
@ -201,7 +203,9 @@ export default function Payment(props: IPaymentProps) {
const renderPayBody = () => {
if (thirdParty == '对公转账') {
return (
<>
<div >
<div>倒计时:{countdownTime}</div>
<div>
<Divider orientation="left" plain>收款方信息</Divider>
<table className="pay-table">
@ -351,14 +355,14 @@ export default function Payment(props: IPaymentProps) {
</tbody>
</table>
</div>
</>
</div>
)
}
return <>
<Flex gap="middle" align="center" justify="center" vertical>
<div className="qr-code">
<Image src={thirdPartyPayUrl} fallback={errorImage} preview={false} />
{
{/* {
isCountdownTimeout ? (
<div className="qr-timeout" onClick={() => {
setRefreshQrCodeCount(refreshQrCodeCount + 1);
@ -367,7 +371,7 @@ export default function Payment(props: IPaymentProps) {
<span className="label">点击刷新</span>
</div>
) : <></>
}
} */}
</div>
<div>{countdownTime}</div>
</Flex>
@ -375,7 +379,18 @@ export default function Payment(props: IPaymentProps) {
}
return (
<>
<div style={{ position: 'relative' }}>
<div style={{ position: 'absolute', width: '100%', height: '100%', top: 0, left: 0, background: 'rgba(0,0,0,0.6)', zIndex: 99, display: mask ? 'block' : 'none' }}>
<div style={{ color: '#FFF', fontSize: 16, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} >
<div style={{cursor: 'pointer',display: 'flex',flexDirection:'column', alignItems: 'center', justifyContent: 'center' }} onClick={() => {
setMask(false)
setRefreshQrCodeCount(refreshQrCodeCount + 1);
}}>
<div style={{fontSize:70}}><ReloadOutlined /></div>
已失效,点击刷新
</div>
</div>
</div>
<Spin tip="正在提交..." spinning={isLoading}>
<Form
name="basic"
@ -440,6 +455,6 @@ export default function Payment(props: IPaymentProps) {
</Form>
</Spin>
{messageApiContext}
</>
</div>
)
}

1
src/components/payment/payment.css
View File

@ -16,6 +16,7 @@
.pay-table tr td .mark {
color: red;
/* background-color: ; */
}
.qr-code {

1
src/components/recharge/RechargeHead.tsx
View File

@ -15,6 +15,7 @@ export default function RechargeHead() {
}}>充值</div>
</div>
<Modal open={isPaymentModalOpen}
destroyOnClose={true}
title="充值"
onCancel={() => {
setIsPaymentModalOpen(false);

32
src/components/scrollAD/ScrollAd.tsx
View File

@ -1,28 +1,26 @@
import React, { useEffect } from 'react'
// import React, { useEffect } from 'react'
import './scrollAd.css'
export default function ScrollAd(props:any) {
useEffect(() => {
const scrollInterval = setInterval(() => {
const adContainer = document.getElementById('scrolling-ad-container');
if (adContainer) {
adContainer.scrollLeft += 1; // 每次滚动的距离
if (adContainer.scrollLeft % adContainer.scrollWidth === 0) {
clearInterval(scrollInterval); // 滚动到末尾时停止滚动
}
}
}, 50); // 滚动速度，单位毫秒
// useEffect(() => {
// const scrollInterval = setInterval(() => {
// const adContainer = document.getElementById('scrolling-ad-container');
// if (adContainer) {
// adContainer.scrollLeft += 1;
// if (adContainer.scrollLeft % adContainer.scrollWidth === 0) {
// clearInterval(scrollInterval);
// }
// }
// }, 50);
return () => clearInterval(scrollInterval); // 组件卸载时清除定时器
}, []);
// return () => clearInterval(scrollInterval);
// }, []);
return (
<div id="scrolling-ad-container" className="scrolling-ad-container">
<div className="scrolling-ad-content">
{props.ad}
{/* 广告11111111111111111111111112222222222222222222223333333333333 */}
{/* {props.ad} */}
广告11111111111111111111111112222222222222222222223333333333333广告哈哈哈哈哈呵呵呵呵嘻嘻嘻嘻和嘎嘎嘎嘎嘎嘎嘎哈哈哈哈和额呵呵呵呵哈哈很大很大深度暗杀开橙卡故事背景噶大哥哈克很大空间的哈客户的客户
</div>
</div>
)
}

47
src/components/scrollAD/scrollAd.css
View File

@ -1,28 +1,47 @@
.scrolling-ad-container {
overflow: hidden; /* 隐藏超出盒子的部分 */
white-space: nowrap; /* 内容不换行 */
position: relative; /* 使子元素的动画定位参考于此 */
padding: 10px; /* 内容内边距 */
width: 100%; /* 盒子的宽度 */
height: 30px; /* 盒子的高度 */
overflow: hidden;
/* 隐藏超出盒子的部分 */
white-space: nowrap;
/* 内容不换行 */
position: relative;
/* 使子元素的动画定位参考于此 */
padding: 10px;
/* 内容内边距 */
width: 100%;
/* 盒子的宽度 */
height: 50px;
/* 盒子的高度 */
display: flex;
align-items: center; /* 垂直居中对齐文字 */
box-sizing: border-box; /* 包含内边距和边框 */
align-items: center;
/* 垂直居中对齐文字 */
box-sizing: border-box;
/* 包含内边距和边框 */
}
.scrolling-ad-content {
font-size: 16px;
display: inline-block;
padding-left: 100%; /* 确保广告从盒子外开始滚动 */
animation: scrollLeft 25s linear infinite; /* 滚动动画，持续时间为25秒，线性匀速，无限循环 */
font-size: 16px;
padding-left: 100%;
/* 确保广告从盒子外开始滚动 */
white-space: nowrap;
/* 内容不换行 */
animation: scrollLeft 20s linear infinite;
/* 滚动动画，持续时间为20秒，线性匀速，无限循环 */
}
/* 定义动画 */
@keyframes scrollLeft {
0% {
transform: translateX(0); /* 从盒子的右边开始 */
transform: translateX(0);
/* 从容器的右边开始 */
}
100% {
transform: translateX(-100%); /* 向左移动到盒子的左边 */
transform: translateX(-100%);
/* 向左移动到容器的左边 */
}
}
/* 悬停时停止动画 */
.scrolling-ad-container:hover .scrolling-ad-content {
animation-play-state: paused; /* 悬停时动画暂停 */
}

4
src/components/step/StepProjEdit.tsx
View File

@ -12,7 +12,7 @@ export default function StepProjEdit(props: IStepProj) {
console.log('路由', location.pathname);
setAllShow(location.pathname.includes('/proj-eall') ? true : false)
}, [])
const height = window.innerHeight - 390;
const height = window.innerHeight - 375;
// 状态值 已完成:Process.COMPLETE 进行中: Process.PROCESSING 未操作:Process.PENDING
const renderStepNo = () => {
@ -109,7 +109,7 @@ export default function StepProjEdit(props: IStepProj) {
</div>
<div className='downBox'></div>
</div>
<div className="step-card" style={{ maxHeight: `${height - 20}px` }}>
<div className="step-card" style={{ maxHeight: `${height }px` }}>
{/* <div className="step-card" style={{ }}> */}
<div className="step-card-list">{props.children}</div>
</div>

40
src/components/step/step-proj-edit.css
View File

@ -5,6 +5,7 @@
position: relative;
/* overflow: scroll; */
}
.downBox {
width: 25px;
height: 8px;
@ -15,6 +16,7 @@
background-size: 100% 100%;
}
.step-proj .step {
width: 100%;
height: 56px;
@ -106,6 +108,7 @@
background: url('../../static/editPro/four.png');
background-size: 100% 100%;
}
/* 已完成状态连接线 */
.step-proj .step .setLine {
width: 10%;
@ -115,14 +118,17 @@
right: -15%;
top: 17px;
}
.step-proj .step .complete-oneLine {
background: url('../../static/editPro/lineone.png');
background-size: 100% 100%;
}
.step-proj .step .complete-twoLine {
background: url('../../static/editPro/linetwo.png');
background-size: 100% 100%;
}
.step-proj .step .complete-threeLine {
background: url('../../static/editPro/linethree.png');
background-size: 100% 100%;
@ -180,6 +186,7 @@
background: url('../../static/editPro/processingFour.png');
background-size: 100% 100%;
}
.step-proj .step .processing-num {
width: 21px;
height: 21px;
@ -242,10 +249,12 @@
color: #71757E;
margin-left: 15%;
}
.step-proj .step .no-line {
background: url('../../static/editPro/lineno.png');
background-size: 100% 100%;
}
/* Top 状态:未操作 结束 ------------------------------------------------------------ */
@ -336,17 +345,46 @@
.step-proj .step-card {
margin-top: 40px;
padding: 10px 0;
/* padding: 10px 0px; */
/* box-sizing: border-box; */
/* border: 1px solid var(--color-border); */
overflow: auto;
}
.step-card::-webkit-scrollbar {
display: block;
width: 6px;
height: 0;
}
/* 设置滚动条的轨道（背景部分） */
.step-card::-webkit-scrollbar-track {
background: #e2e2e2;
/* 轨道的颜色 */
}
/* 设置滚动条的滑块部分 */
.step-card::-webkit-scrollbar-thumb {
background: #cecece;
/* 滑块的颜色 */
border-radius: 5px;
/* 滑块的圆角 */
}
/* 滑块的颜色在鼠标悬停时改变 */
.step-card::-webkit-scrollbar-thumb:hover {
background: #adadad;
/* 鼠标悬停时滑块的颜色 */
}
.step-proj .step-card .step-card-list {
display: flex;
flex-direction: column;
align-items: center;
}
.step-proj .step-card .step-card-list .card-proj-edit,
.step-proj .step-card .step-card-list .card-proj-loading,
.step-proj .step-card .step-card-list .card-proj-result,

1
src/interfaces/card/ICardProj.ts
View File

@ -13,6 +13,7 @@ export interface IProjEdit {
background?:string;
shadow?:string;
handleEdit(): void;
}
export interface IProjLoading {

13
src/route/proj/ProjCreate.tsx
View File

@ -81,16 +81,21 @@ export default function ProjCreate() {
{contextHolder}
<div style={{}}>
<div className="proj-create" style={{ height: `${height}px`, overflow: 'auto', position: 'relative' }}>
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', background: 'rgba(0, 0, 0, 0.1)' ,display:show?'block':'none'}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
<div style={{width:'100%'}}>
<div style={{
position: 'absolute', top: 0, left: 0, width: '100%', background: 'rgba(0, 0, 0, 0.1)',
// display:show?'block':'none'
}}>
<div style={{ position:'relative' }}>
<div className='adContent' style={{ width: '' }}>
<ScrollAd ad={ad}></ScrollAd>
</div>
<div style={{width:20,fontWeight:700,cursor:'pointer'}} onClick={()=>{
<div style={{ width: 20, fontWeight: 700, cursor: 'pointer',position:'absolute', top:15,right:5 }} onClick={() => {
setShow(false)
}}>
<CloseOutlined />
</div>
</div>
</div>
<CardProjType

19
src/route/proj/ProjEdit.tsx
View File

@ -115,7 +115,8 @@ export default function ProjEdit() {
// nav(`/proj-edit/step1-show/${pathParams.projId}`)
setTitleIntroductionShowOpen(true)
}
}
},
},
{
title: '第2步:软件基本信息填写',
@ -132,7 +133,8 @@ export default function ProjEdit() {
// nav(`/proj-edit/step2-show/${pathParams.projId}`)
setSoftwareShowOpen(true)
}
}
},
},
{
title: '第3步:软件功能特点设置',
@ -148,12 +150,13 @@ export default function ProjEdit() {
// nav(`/proj-edit/step3-show/${pathParams.projId}`)
setSoftwareFeaturesShowOpen(true)
}
}
},
},
{
title: '第4步:登录页面设置',
desc: '对登录界面进行个性化设置，包括背景图片等',
step: 1,
step: 4,
btnName: !isGenerateSuccess ? '设置' : '查看',
// 状态判断lyp
status: data.loginpage.loginpageId ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
@ -165,7 +168,8 @@ export default function ProjEdit() {
// nav(`/proj-edit/config-loginpage-show/${pathParams.projId}`)
setLoginPageShowOpne(true)
}
}
},
},
// {
// title: '著作人信息',
@ -245,7 +249,7 @@ export default function ProjEdit() {
// nav(`/proj-edit/config-mod-list-show/${pathParams.projId}`)
setSoftwareManagementShowOpen(true)
}
}
},
},
{
@ -262,7 +266,8 @@ export default function ProjEdit() {
// nav(`/proj-edit/config-menu-list-show/${pathParams.projId}`)
setDisplayOrderShowOpen(true);
}
}
},
}
)
setConfigArray(configArray);

8
src/route/proj/proj-create.css
View File

@ -13,13 +13,19 @@
background-size: 100% 100%;
}
::-webkit-scrollbar {
display: none;
}
/* .proj-create::-webkit-scrollbar {
display: none;
} */
.proj-create .proj {
margin-top: 33px;
}
.proj-create .test{
/* height: 30p; */
}
.adContent{
/* background-color: red; */
width: calc(100% - 30px);
}

BIN
src/static/ad.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

11
src/util/AjaxUtils.ts
View File

@ -3,16 +3,17 @@ import type {MessageInstance} from "antd/es/message/interface";
export const Axios = axios;
// axios.defaults.baseURL = 'http://192.168.0.163:7025/copyright';
axios.defaults.baseURL = 'http://192.168.0.103:7025/copyright';
// axios.defaults.baseURL = 'http://192.168.43.145:7025/copyright';
// axios.defaults.baseURL = 'http://127.0.0.1:7025/copyright';
// axios.defaults.baseURL = 'https://www.aimzhu.com/copyright';
axios.defaults.baseURL = '/copyright';
// axios.defaults.baseURL = '/copyright';
// export const WebSocketBaseUrl: string = 'ws://127.0.0.1:7025/copyright';
export const WebSocketBaseUrl: string = '/copyright';
// export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
export const WebSocketBaseUrl: string = 'ws://192.168.0.103:7025/copyright';
// export const WebSocketBaseUrl: string = '/copyright';
export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
// export const DevUserId: string = 'c2438eb8-2685-49a9-bf02-5111a5192d96'; // 18647109157
export const DevUserId: string = '';
// export const DevUserId: string = '';
type Req<T> = {
messageApi: MessageInstance;