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

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

@ -33,7 +33,7 @@ export default function CardProjEdit(props: IProjEdit) {
return ( return (
// props.step === 1 ? 'complete-one' : props.step === 2 ? 'complete-two' : props.step === 3 ? 'complete-three' : props.step === 4 ? 'complete-four' : '' // 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={ }> */}
<div className='card-proj-edit-text'> <div className='card-proj-edit-text'>
<div className="title">{props.title}</div> <div className="title">{props.title}</div>
@ -45,7 +45,7 @@ export default function CardProjEdit(props: IProjEdit) {
</div> </div>
<div className='downBoxx'></div> <div className='downBoxx' ></div>
</div> </div>
) )
} }

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

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

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

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

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

@ -15,14 +15,14 @@ import {
import { import {
ReloadOutlined ReloadOutlined
} from '@ant-design/icons' } from '@ant-design/icons'
import {useEffect, useRef, useState} from "react"; import { useEffect, useRef, useState } from "react";
import locale from 'antd/locale/zh_CN'; import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
import {DevUserId, get, post, uploadImageUrl} from "../../util/AjaxUtils.ts"; import { DevUserId, get, post, uploadImageUrl } from "../../util/AjaxUtils.ts";
import {UploadOutlined} from "@ant-design/icons"; import { UploadOutlined } from "@ant-design/icons";
import useMessage from "antd/es/message/useMessage"; import useMessage from "antd/es/message/useMessage";
import {errorImage} from "../../util/CommonUtil.ts"; import { errorImage } from "../../util/CommonUtil.ts";
dayjs.locale('zh-cn'); dayjs.locale('zh-cn');
@ -64,7 +64,7 @@ interface IPaymentProps {
} }
export default function Payment(props: IPaymentProps) { export default function Payment(props: IPaymentProps) {
const [mask, setMask] = useState(false)
const [form] = Form.useForm<FormFieldType>(); const [form] = Form.useForm<FormFieldType>();
const [messageApi, messageApiContext] = useMessage(); const [messageApi, messageApiContext] = useMessage();
const [isRechargeMoneyEdit, setIsRechargeMoneyEdit] = useState(false); const [isRechargeMoneyEdit, setIsRechargeMoneyEdit] = useState(false);
@ -81,7 +81,7 @@ export default function Payment(props: IPaymentProps) {
bankUnionpayNumber: '' bankUnionpayNumber: ''
}); });
const [countdownTime, setCountdownTime] = useState(''); const [countdownTime, setCountdownTime] = useState('');
const [isCountdownTimeout, setIsCountdownTimeout] = useState(false); // const [isCountdownTimeout, setIsCountdownTimeout] = useState(false);
const moneyRange: number[] = [0.01, 2000]; const moneyRange: number[] = [0.01, 2000];
const countdownIntervalRef = useRef<number | undefined>(); const countdownIntervalRef = useRef<number | undefined>();
const [refreshQrCodeCount, setRefreshQrCodeCount] = useState(0); const [refreshQrCodeCount, setRefreshQrCodeCount] = useState(0);
@ -93,13 +93,13 @@ export default function Payment(props: IPaymentProps) {
if (countdownIntervalRef.current) { if (countdownIntervalRef.current) {
clearInterval(countdownIntervalRef.current); clearInterval(countdownIntervalRef.current);
} }
if (thirdParty == ThirdPartyEnum.DGZZ) { // if (thirdParty == ThirdPartyEnum.DGZZ) {
return; // return;
} // }
const Time = new Date().getTime(); const Time = new Date().getTime();
// 设定计时器的时间为60秒 // 设定计时器的时间为60秒
const countDownDate = new Date(Time + 270 * 1000).getTime(); const countDownDate = new Date(Time + 270 * 1000).getTime();
// const countDownDate = new Date(Time + 5 * 1000).getTime();
// 更新计时器的秒数 // 更新计时器的秒数
const updateCountdown = () => { const updateCountdown = () => {
const now = new Date().getTime(); const now = new Date().getTime();
@ -111,8 +111,9 @@ export default function Payment(props: IPaymentProps) {
setCountdownTime(minutes + ":" + (seconds < 10 ? "0" : "") + seconds); setCountdownTime(minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
if (distance <= 0) { if (distance <= 0) {
setCountdownTime('已失效'); setCountdownTime('已失效');
setIsCountdownTimeout(true); // setIsCountdownTimeout(true);
clearInterval(countdownIntervalRef.current); clearInterval(countdownIntervalRef.current);
setMask(true)
} }
} }
// 每秒更新一次计时器 // 每秒更新一次计时器
@ -132,7 +133,7 @@ export default function Payment(props: IPaymentProps) {
onBefore() { onBefore() {
setIsLoading(true); setIsLoading(true);
}, },
onSuccess({data}) { onSuccess({ data }) {
setAccountRechargeId(data.accountRechargeId); setAccountRechargeId(data.accountRechargeId);
setThirdPartyPayUrl(data.thirdPartyPayUrl); setThirdPartyPayUrl(data.thirdPartyPayUrl);
countdown(); countdown();
@ -147,7 +148,7 @@ export default function Payment(props: IPaymentProps) {
get<PaySystemBank>({ get<PaySystemBank>({
messageApi, messageApi,
url: '/api/pay/get-pay-system-bank', url: '/api/pay/get-pay-system-bank',
onSuccess({data}) { onSuccess({ data }) {
setPaySystemBank(data); setPaySystemBank(data);
} }
}) })
@ -164,6 +165,7 @@ export default function Payment(props: IPaymentProps) {
return; return;
} }
getPay(); getPay();
// countdown()
}, [thirdParty, isRechargeMoneyEdit, refreshQrCodeCount]); }, [thirdParty, isRechargeMoneyEdit, refreshQrCodeCount]);
@ -172,7 +174,7 @@ export default function Payment(props: IPaymentProps) {
if (isRechargeMoneyEdit) { if (isRechargeMoneyEdit) {
return ( return (
<div> <div>
<InputNumber min={0.01} max={2000} defaultValue={form.getFieldValue('rechargeMoney')}/> <InputNumber min={0.01} max={2000} defaultValue={form.getFieldValue('rechargeMoney')} />
<Button type="link" onClick={() => { <Button type="link" onClick={() => {
const money = form.getFieldValue('rechargeMoney'); const money = form.getFieldValue('rechargeMoney');
if (money < moneyRange[0]) { if (money < moneyRange[0]) {
@ -190,7 +192,7 @@ export default function Payment(props: IPaymentProps) {
return ( return (
<div> <div>
<span>￥</span> <span>￥</span>
<span style={{fontWeight: 'bold', fontSize: '16px'}}>{form.getFieldValue('rechargeMoney')}</span> <span style={{ fontWeight: 'bold', fontSize: '16px' }}>{form.getFieldValue('rechargeMoney')}</span>
<Button type="link" onClick={() => { <Button type="link" onClick={() => {
setIsRechargeMoneyEdit(true); setIsRechargeMoneyEdit(true);
}}>修改</Button> }}>修改</Button>
@ -201,13 +203,15 @@ export default function Payment(props: IPaymentProps) {
const renderPayBody = () => { const renderPayBody = () => {
if (thirdParty == '对公转账') { if (thirdParty == '对公转账') {
return ( return (
<> <div >
<div>倒计时:{countdownTime}</div>
<div> <div>
<Divider orientation="left" plain>收款方信息</Divider> <Divider orientation="left" plain>收款方信息</Divider>
<table className="pay-table"> <table className="pay-table">
<colgroup> <colgroup>
<col width="100"/> <col width="100" />
<col/> <col />
</colgroup> </colgroup>
<tbody> <tbody>
<tr> <tr>
@ -253,8 +257,8 @@ export default function Payment(props: IPaymentProps) {
<Divider orientation="left" plain>付款方信息</Divider> <Divider orientation="left" plain>付款方信息</Divider>
<table className="pay-table"> <table className="pay-table">
<colgroup> <colgroup>
<col width="100"/> <col width="100" />
<col/> <col />
</colgroup> </colgroup>
<tbody> <tbody>
<tr> <tr>
@ -262,10 +266,10 @@ export default function Payment(props: IPaymentProps) {
<td> <td>
<Form.Item <Form.Item
name="orgName" name="orgName"
style={{marginBottom: '0'}} style={{ marginBottom: '0' }}
rules={[{required: true, message: '请输入公司名称'}]} rules={[{ required: true, message: '请输入公司名称' }]}
> >
<Input placeholder="请输入公司名称"/> <Input placeholder="请输入公司名称" />
</Form.Item> </Form.Item>
</td> </td>
</tr> </tr>
@ -274,10 +278,10 @@ export default function Payment(props: IPaymentProps) {
<td> <td>
<Form.Item <Form.Item
name="orgBank" name="orgBank"
style={{marginBottom: '0'}} style={{ marginBottom: '0' }}
rules={[{required: true, message: '请输入开户行'}]} rules={[{ required: true, message: '请输入开户行' }]}
> >
<Input placeholder="请输入开户行"/> <Input placeholder="请输入开户行" />
</Form.Item> </Form.Item>
</td> </td>
</tr> </tr>
@ -286,10 +290,10 @@ export default function Payment(props: IPaymentProps) {
<td> <td>
<Form.Item <Form.Item
name="orgNumber" name="orgNumber"
style={{marginBottom: '0'}} style={{ marginBottom: '0' }}
rules={[{required: true, message: '请输入银行账号'}]} rules={[{ required: true, message: '请输入银行账号' }]}
> >
<Input placeholder="请输入银行账号"/> <Input placeholder="请输入银行账号" />
</Form.Item> </Form.Item>
</td> </td>
</tr> </tr>
@ -298,14 +302,14 @@ export default function Payment(props: IPaymentProps) {
<td> <td>
<Form.Item <Form.Item
name="rechargeFinalTime" name="rechargeFinalTime"
style={{marginBottom: '0'}} style={{ marginBottom: '0' }}
rules={[{required: true, message: '请选择打款时间'}]} rules={[{ required: true, message: '请选择打款时间' }]}
> >
<ConfigProvider locale={locale}> <ConfigProvider locale={locale}>
<DatePicker showTime placeholder="请选择打款时间" <DatePicker showTime placeholder="请选择打款时间"
onChange={(_date, dateString) => { onChange={(_date, dateString) => {
form.setFieldValue('rechargeFinalTime', dateString); form.setFieldValue('rechargeFinalTime', dateString);
}}/> }} />
</ConfigProvider> </ConfigProvider>
</Form.Item> </Form.Item>
</td> </td>
@ -315,26 +319,26 @@ export default function Payment(props: IPaymentProps) {
<td> <td>
<Form.Item <Form.Item
name="rechargeVoucher" name="rechargeVoucher"
style={{marginBottom: '0'}} style={{ marginBottom: '0' }}
valuePropName="fileList" valuePropName="fileList"
getValueFromEvent={(e: any) => { getValueFromEvent={(e: any) => {
console.log(e); console.log(e);
if(e.file.status === 'done') { if (e.file.status === 'done') {
rechargeVoucherArray.push(e.file.response.data.fileId); rechargeVoucherArray.push(e.file.response.data.fileId);
setRechargeVoucherArray(rechargeVoucherArray); setRechargeVoucherArray(rechargeVoucherArray);
} }
if(e.file.status === 'removed') { if (e.file.status === 'removed') {
const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId); const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId);
setRechargeVoucherArray(idArray); setRechargeVoucherArray(idArray);
} }
return e.fileList; return e.fileList;
}} }}
rules={[{required: true, message: '请上传打款凭证'}]} rules={[{ required: true, message: '请上传打款凭证' }]}
> >
<Upload name="image" <Upload name="image"
maxCount={2} maxCount={2}
action={uploadImageUrl()} action={uploadImageUrl()}
headers={{'X-USER-ID': DevUserId}} headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={(file: FileType) => { beforeUpload={(file: FileType) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) { if (!isJpgOrPng) {
@ -343,7 +347,7 @@ export default function Payment(props: IPaymentProps) {
return isJpgOrPng; return isJpgOrPng;
}} }}
> >
<Button icon={<UploadOutlined/>}>上传凭证图片</Button> <Button icon={<UploadOutlined />}>上传凭证图片</Button>
</Upload> </Upload>
</Form.Item> </Form.Item>
</td> </td>
@ -351,23 +355,23 @@ export default function Payment(props: IPaymentProps) {
</tbody> </tbody>
</table> </table>
</div> </div>
</> </div>
) )
} }
return <> return <>
<Flex gap="middle" align="center" justify="center" vertical> <Flex gap="middle" align="center" justify="center" vertical>
<div className="qr-code"> <div className="qr-code">
<Image src={thirdPartyPayUrl} fallback={errorImage} preview={false}/> <Image src={thirdPartyPayUrl} fallback={errorImage} preview={false} />
{ {/* {
isCountdownTimeout ? ( isCountdownTimeout ? (
<div className="qr-timeout" onClick={() => { <div className="qr-timeout" onClick={() => {
setRefreshQrCodeCount(refreshQrCodeCount + 1); setRefreshQrCodeCount(refreshQrCodeCount + 1);
}}> }}>
<ReloadOutlined/> <ReloadOutlined />
<span className="label">点击刷新</span> <span className="label">点击刷新</span>
</div> </div>
) : <></> ) : <></>
} } */}
</div> </div>
<div>{countdownTime}</div> <div>{countdownTime}</div>
</Flex> </Flex>
@ -375,7 +379,18 @@ export default function Payment(props: IPaymentProps) {
} }
return ( 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}> <Spin tip="正在提交..." spinning={isLoading}>
<Form <Form
name="basic" name="basic"
@ -409,7 +424,7 @@ export default function Payment(props: IPaymentProps) {
<Form.Item <Form.Item
label="支付方式" label="支付方式"
name="thirdParty" name="thirdParty"
rules={[{required: true}]} rules={[{ required: true }]}
> >
<Radio.Group onChange={(e) => { <Radio.Group onChange={(e) => {
form.setFieldValue('thirdParty', e.target.value); form.setFieldValue('thirdParty', e.target.value);
@ -424,22 +439,22 @@ export default function Payment(props: IPaymentProps) {
<Form.Item <Form.Item
label="充值金额" label="充值金额"
name="rechargeMoney" name="rechargeMoney"
rules={[{required: true, message: '请输入金额'}]} rules={[{ required: true, message: '请输入金额' }]}
> >
{renderMoney()} {renderMoney()}
</Form.Item> </Form.Item>
{renderPayBody()} {renderPayBody()}
<div style={{marginTop: '15px', textAlign: 'center'}}> <div style={{ marginTop: '15px', textAlign: 'center' }}>
<Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-primary)'}}> <Button type="primary" htmlType="submit" style={{ backgroundColor: 'var(--color-primary)' }}>
完成付款 完成付款
</Button> </Button>
<Button type="default" style={{marginLeft: '15px'}} onClick={() => { <Button type="default" style={{ marginLeft: '15px' }} onClick={() => {
props.handleCancel(); props.handleCancel();
}}>关闭窗口</Button> }}>关闭窗口</Button>
</div> </div>
</Form> </Form>
</Spin> </Spin>
{messageApiContext} {messageApiContext}
</> </div>
) )
} }

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

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

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

@ -1,7 +1,7 @@
import './recharge-head.css'; import './recharge-head.css';
import Payment from "../payment/Payment.tsx"; import Payment from "../payment/Payment.tsx";
import {Modal} from "antd"; import { Modal } from "antd";
import {useState} from "react"; import { useState } from "react";
export default function RechargeHead() { export default function RechargeHead() {
@ -15,6 +15,7 @@ export default function RechargeHead() {
}}>充值</div> }}>充值</div>
</div> </div>
<Modal open={isPaymentModalOpen} <Modal open={isPaymentModalOpen}
destroyOnClose={true}
title="充值" title="充值"
onCancel={() => { onCancel={() => {
setIsPaymentModalOpen(false); 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' import './scrollAd.css'
export default function ScrollAd(props:any) { export default function ScrollAd(props:any) {
useEffect(() => { // useEffect(() => {
const scrollInterval = setInterval(() => { // const scrollInterval = setInterval(() => {
const adContainer = document.getElementById('scrolling-ad-container'); // const adContainer = document.getElementById('scrolling-ad-container');
if (adContainer) { // if (adContainer) {
adContainer.scrollLeft += 1; // 每次滚动的距离 // adContainer.scrollLeft += 1;
if (adContainer.scrollLeft % adContainer.scrollWidth === 0) { // if (adContainer.scrollLeft % adContainer.scrollWidth === 0) {
clearInterval(scrollInterval); // 滚动到末尾时停止滚动 // clearInterval(scrollInterval);
} // }
} // }
}, 50); // 滚动速度，单位毫秒 // }, 50);
return () => clearInterval(scrollInterval); // 组件卸载时清除定时器 // return () => clearInterval(scrollInterval);
}, []); // }, []);
return ( return (
<div id="scrolling-ad-container" className="scrolling-ad-container"> <div id="scrolling-ad-container" className="scrolling-ad-container">
<div className="scrolling-ad-content"> <div className="scrolling-ad-content">
{props.ad} {/* {props.ad} */}
{/* 广告11111111111111111111111112222222222222222222223333333333333 */} 广告11111111111111111111111112222222222222222222223333333333333广告哈哈哈哈哈呵呵呵呵嘻嘻嘻嘻和嘎嘎嘎嘎嘎嘎嘎哈哈哈哈和额呵呵呵呵哈哈很大很大深度暗杀开橙卡故事背景噶大哥哈克很大空间的哈客户的客户
</div> </div>
</div> </div>
) )
} }

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

@ -1,28 +1,47 @@
.scrolling-ad-container { .scrolling-ad-container {
overflow: hidden; /* 隐藏超出盒子的部分 */ overflow: hidden;
white-space: nowrap; /* 内容不换行 */ /* 隐藏超出盒子的部分 */
position: relative; /* 使子元素的动画定位参考于此 */ white-space: nowrap;
padding: 10px; /* 内容内边距 */ /* 内容不换行 */
width: 100%; /* 盒子的宽度 */ position: relative;
height: 30px; /* 盒子的高度 */ /* 使子元素的动画定位参考于此 */
padding: 10px;
/* 内容内边距 */
width: 100%;
/* 盒子的宽度 */
height: 50px;
/* 盒子的高度 */
display: flex; display: flex;
align-items: center; /* 垂直居中对齐文字 */ align-items: center;
box-sizing: border-box; /* 包含内边距和边框 */ /* 垂直居中对齐文字 */
box-sizing: border-box;
/* 包含内边距和边框 */
}
} .scrolling-ad-content {
.scrolling-ad-content {
font-size: 16px;
display: inline-block; display: inline-block;
padding-left: 100%; /* 确保广告从盒子外开始滚动 */ font-size: 16px;
animation: scrollLeft 25s linear infinite; /* 滚动动画，持续时间为25秒，线性匀速，无限循环 */ padding-left: 100%;
/* 确保广告从盒子外开始滚动 */
white-space: nowrap;
/* 内容不换行 */
animation: scrollLeft 20s linear infinite;
/* 滚动动画，持续时间为20秒，线性匀速，无限循环 */
}
/* 定义动画 */
@keyframes scrollLeft {
0% {
transform: translateX(0);
/* 从容器的右边开始 */
} }
@keyframes scrollLeft {
0% {
transform: translateX(0); /* 从盒子的右边开始 */
}
100% { 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); console.log('路由', location.pathname);
setAllShow(location.pathname.includes('/proj-eall') ? true : false) setAllShow(location.pathname.includes('/proj-eall') ? true : false)
}, []) }, [])
const height = window.innerHeight - 390; const height = window.innerHeight - 375;
// 状态值 已完成:Process.COMPLETE 进行中: Process.PROCESSING 未操作:Process.PENDING // 状态值 已完成:Process.COMPLETE 进行中: Process.PROCESSING 未操作:Process.PENDING
const renderStepNo = () => { const renderStepNo = () => {
@ -109,7 +109,7 @@ export default function StepProjEdit(props: IStepProj) {
</div> </div>
<div className='downBox'></div> <div className='downBox'></div>
</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" style={{ }}> */}
<div className="step-card-list">{props.children}</div> <div className="step-card-list">{props.children}</div>
</div> </div>

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

@ -5,7 +5,8 @@
position: relative; position: relative;
/* overflow: scroll; */ /* overflow: scroll; */
} }
.downBox{
.downBox {
width: 25px; width: 25px;
height: 8px; height: 8px;
background-color: pink; background-color: pink;
@ -15,6 +16,7 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
.step-proj .step { .step-proj .step {
width: 100%; width: 100%;
height: 56px; height: 56px;
@ -106,6 +108,7 @@
background: url('../../static/editPro/four.png'); background: url('../../static/editPro/four.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
/* 已完成状态连接线 */ /* 已完成状态连接线 */
.step-proj .step .setLine { .step-proj .step .setLine {
width: 10%; width: 10%;
@ -115,16 +118,19 @@
right: -15%; right: -15%;
top: 17px; top: 17px;
} }
.step-proj .step .complete-oneLine{
background:url('../../static/editPro/lineone.png'); .step-proj .step .complete-oneLine {
background: url('../../static/editPro/lineone.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.step-proj .step .complete-twoLine{
background:url('../../static/editPro/linetwo.png'); .step-proj .step .complete-twoLine {
background: url('../../static/editPro/linetwo.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.step-proj .step .complete-threeLine{
background:url('../../static/editPro/linethree.png'); .step-proj .step .complete-threeLine {
background: url('../../static/editPro/linethree.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -180,6 +186,7 @@
background: url('../../static/editPro/processingFour.png'); background: url('../../static/editPro/processingFour.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.step-proj .step .processing-num { .step-proj .step .processing-num {
width: 21px; width: 21px;
height: 21px; height: 21px;
@ -242,10 +249,12 @@
color: #71757E; color: #71757E;
margin-left: 15%; margin-left: 15%;
} }
.step-proj .step .no-line{
background:url('../../static/editPro/lineno.png'); .step-proj .step .no-line {
background: url('../../static/editPro/lineno.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
/* Top 状态:未操作 结束 ------------------------------------------------------------ */ /* Top 状态:未操作 结束 ------------------------------------------------------------ */
@ -336,17 +345,46 @@
.step-proj .step-card { .step-proj .step-card {
margin-top: 40px; margin-top: 40px;
padding: 10px 0; /* padding: 10px 0px; */
/* box-sizing: border-box; */
/* border: 1px solid var(--color-border); */ /* border: 1px solid var(--color-border); */
overflow: auto; 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 { .step-proj .step-card .step-card-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.step-proj .step-card .step-card-list .card-proj-edit, .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-loading,
.step-proj .step-card .step-card-list .card-proj-result, .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; background?:string;
shadow?:string; shadow?:string;
handleEdit(): void; handleEdit(): void;
} }
export interface IProjLoading { export interface IProjLoading {

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

@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
import { message } from "antd"; import { message } from "antd";
import { import {
CloseOutlined CloseOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import CardProjType from "../../components/card/CardProjType.tsx"; import CardProjType from "../../components/card/CardProjType.tsx";
import { import {
// IProjCharge, // IProjCharge,
@ -39,16 +39,16 @@ export default function ProjCreate() {
const [freeCount, setFreeCount] = useState(0) //免费次数 const [freeCount, setFreeCount] = useState(0) //免费次数
const nav = useNavigate(); const nav = useNavigate();
const height = window.innerHeight - 170; const height = window.innerHeight - 170;
const [show,setShow] = useState(true) //是否显示广告 const [show, setShow] = useState(true) //是否显示广告
const [ad,setAd] = useState('') const [ad, setAd] = useState('')
const getAd = () => { const getAd = () => {
get<any>({ get<any>({
messageApi: messageApi, messageApi: messageApi,
url: '/api/env/custom/get-proj-create-notice', url: '/api/env/custom/get-proj-create-notice',
onSuccess({ data }) { onSuccess({ data }) {
console.log('广告',data); console.log('广告', data);
setAd(data.data) setAd(data.data)
setShow(data.data==''?false:true) setShow(data.data == '' ? false : true)
} }
}) })
// sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }])); // sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }]));
@ -81,16 +81,21 @@ export default function ProjCreate() {
{contextHolder} {contextHolder}
<div style={{}}> <div style={{}}>
<div className="proj-create" style={{ height: `${height}px`, overflow: 'auto', position: 'relative' }}> <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={{
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}> position: 'absolute', top: 0, left: 0, width: '100%', background: 'rgba(0, 0, 0, 0.1)',
<div style={{width:'100%'}}> // display:show?'block':'none'
<ScrollAd ad = {ad}></ScrollAd> }}>
<div style={{ position:'relative' }}>
<div className='adContent' style={{ width: '' }}>
<ScrollAd ad={ad}></ScrollAd>
</div> </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) setShow(false)
}}> }}>
<CloseOutlined /> <CloseOutlined />
</div> </div>
</div> </div>
</div> </div>
<CardProjType <CardProjType

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

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

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

@ -13,13 +13,19 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
/* .proj-create::-webkit-scrollbar {
display: none;
} */
.proj-create .proj { .proj-create .proj {
margin-top: 33px; margin-top: 33px;
} }
.proj-create .test{ .proj-create .test{
/* height: 30p; */ /* 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; 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://192.168.43.145:7025/copyright';
// axios.defaults.baseURL = 'http://127.0.0.1:7025/copyright'; // axios.defaults.baseURL = 'http://127.0.0.1:7025/copyright';
// axios.defaults.baseURL = 'https://www.aimzhu.com/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 = 'ws://127.0.0.1:7025/copyright';
export const WebSocketBaseUrl: string = '/copyright'; export const WebSocketBaseUrl: string = 'ws://192.168.0.103:7025/copyright';
// export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067 // 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 = 'c2438eb8-2685-49a9-bf02-5111a5192d96'; // 18647109157
export const DevUserId: string = ''; // export const DevUserId: string = '';
type Req<T> = { type Req<T> = {
messageApi: MessageInstance; messageApi: MessageInstance;