支付
This commit is contained in:
xixi
parent
b9ef03390b
commit
9c27b25d8a
@ -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>
|
||||
@ -45,7 +45,7 @@ export default function CardProjEdit(props: IProjEdit) {
|
||||
|
||||
</div>
|
||||
|
||||
<div className='downBoxx'></div>
|
||||
<div className='downBoxx' ></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -15,14 +15,14 @@ import {
|
||||
import {
|
||||
ReloadOutlined
|
||||
} from '@ant-design/icons'
|
||||
import {useEffect, useRef, useState} from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import locale from 'antd/locale/zh_CN';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import {DevUserId, get, post, uploadImageUrl} from "../../util/AjaxUtils.ts";
|
||||
import {UploadOutlined} from "@ant-design/icons";
|
||||
import { DevUserId, get, post, uploadImageUrl } from "../../util/AjaxUtils.ts";
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import useMessage from "antd/es/message/useMessage";
|
||||
import {errorImage} from "../../util/CommonUtil.ts";
|
||||
import { errorImage } from "../../util/CommonUtil.ts";
|
||||
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
// 每秒更新一次计时器
|
||||
@ -132,7 +133,7 @@ export default function Payment(props: IPaymentProps) {
|
||||
onBefore() {
|
||||
setIsLoading(true);
|
||||
},
|
||||
onSuccess({data}) {
|
||||
onSuccess({ data }) {
|
||||
setAccountRechargeId(data.accountRechargeId);
|
||||
setThirdPartyPayUrl(data.thirdPartyPayUrl);
|
||||
countdown();
|
||||
@ -147,7 +148,7 @@ export default function Payment(props: IPaymentProps) {
|
||||
get<PaySystemBank>({
|
||||
messageApi,
|
||||
url: '/api/pay/get-pay-system-bank',
|
||||
onSuccess({data}) {
|
||||
onSuccess({ data }) {
|
||||
setPaySystemBank(data);
|
||||
}
|
||||
})
|
||||
@ -164,6 +165,7 @@ export default function Payment(props: IPaymentProps) {
|
||||
return;
|
||||
}
|
||||
getPay();
|
||||
// countdown()
|
||||
}, [thirdParty, isRechargeMoneyEdit, refreshQrCodeCount]);
|
||||
|
||||
|
||||
@ -172,7 +174,7 @@ export default function Payment(props: IPaymentProps) {
|
||||
if (isRechargeMoneyEdit) {
|
||||
return (
|
||||
<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={() => {
|
||||
const money = form.getFieldValue('rechargeMoney');
|
||||
if (money < moneyRange[0]) {
|
||||
@ -190,7 +192,7 @@ export default function Payment(props: IPaymentProps) {
|
||||
return (
|
||||
<div>
|
||||
<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={() => {
|
||||
setIsRechargeMoneyEdit(true);
|
||||
}}>修改</Button>
|
||||
@ -201,51 +203,53 @@ 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">
|
||||
<colgroup>
|
||||
<col width="100"/>
|
||||
<col/>
|
||||
<col width="100" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="table-label">公司名称</td>
|
||||
<td>
|
||||
<span id="bankAccountName">{paySystemBank.bankAccountName}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">开户银行</td>
|
||||
<td>
|
||||
<span id="bankName">{paySystemBank.bankName}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">银行账号</td>
|
||||
<td>
|
||||
<span id="bankNumber">{paySystemBank.bankNumber}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">银行联行号</td>
|
||||
<td>
|
||||
<span id="bankUnionpayNumber">{paySystemBank.bankUnionpayNumber}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">打款备注</td>
|
||||
<td>
|
||||
<div id="bankRemark">{paySystemBank.bankRemark}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">说明</td>
|
||||
<td>
|
||||
<div className="mark">请打款时必须按照以上备注填写</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">公司名称</td>
|
||||
<td>
|
||||
<span id="bankAccountName">{paySystemBank.bankAccountName}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">开户银行</td>
|
||||
<td>
|
||||
<span id="bankName">{paySystemBank.bankName}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">银行账号</td>
|
||||
<td>
|
||||
<span id="bankNumber">{paySystemBank.bankNumber}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">银行联行号</td>
|
||||
<td>
|
||||
<span id="bankUnionpayNumber">{paySystemBank.bankUnionpayNumber}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">打款备注</td>
|
||||
<td>
|
||||
<div id="bankRemark">{paySystemBank.bankRemark}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">说明</td>
|
||||
<td>
|
||||
<div className="mark">请打款时必须按照以上备注填写</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -253,88 +257,88 @@ export default function Payment(props: IPaymentProps) {
|
||||
<Divider orientation="left" plain>付款方信息</Divider>
|
||||
<table className="pay-table">
|
||||
<colgroup>
|
||||
<col width="100"/>
|
||||
<col/>
|
||||
<col width="100" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="table-label">公司名称 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="orgName"
|
||||
style={{marginBottom: '0'}}
|
||||
rules={[{required: true, message: '请输入公司名称'}]}
|
||||
>
|
||||
<Input placeholder="请输入公司名称"/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">开户银行 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="orgBank"
|
||||
style={{marginBottom: '0'}}
|
||||
rules={[{required: true, message: '请输入开户行'}]}
|
||||
>
|
||||
<Input placeholder="请输入开户行"/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">银行账号 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="orgNumber"
|
||||
style={{marginBottom: '0'}}
|
||||
rules={[{required: true, message: '请输入银行账号'}]}
|
||||
>
|
||||
<Input placeholder="请输入银行账号"/>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">打款时间 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="rechargeFinalTime"
|
||||
style={{marginBottom: '0'}}
|
||||
rules={[{required: true, message: '请选择打款时间'}]}
|
||||
>
|
||||
<ConfigProvider locale={locale}>
|
||||
<DatePicker showTime placeholder="请选择打款时间"
|
||||
onChange={(_date, dateString) => {
|
||||
form.setFieldValue('rechargeFinalTime', dateString);
|
||||
}}/>
|
||||
</ConfigProvider>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">打款凭证 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="rechargeVoucher"
|
||||
style={{marginBottom: '0'}}
|
||||
valuePropName="fileList"
|
||||
getValueFromEvent={(e: any) => {
|
||||
console.log(e);
|
||||
if(e.file.status === 'done') {
|
||||
rechargeVoucherArray.push(e.file.response.data.fileId);
|
||||
setRechargeVoucherArray(rechargeVoucherArray);
|
||||
}
|
||||
if(e.file.status === 'removed') {
|
||||
const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId);
|
||||
setRechargeVoucherArray(idArray);
|
||||
}
|
||||
return e.fileList;
|
||||
}}
|
||||
rules={[{required: true, message: '请上传打款凭证'}]}
|
||||
>
|
||||
<Upload name="image"
|
||||
<tr>
|
||||
<td className="table-label">公司名称 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="orgName"
|
||||
style={{ marginBottom: '0' }}
|
||||
rules={[{ required: true, message: '请输入公司名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入公司名称" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">开户银行 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="orgBank"
|
||||
style={{ marginBottom: '0' }}
|
||||
rules={[{ required: true, message: '请输入开户行' }]}
|
||||
>
|
||||
<Input placeholder="请输入开户行" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">银行账号 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="orgNumber"
|
||||
style={{ marginBottom: '0' }}
|
||||
rules={[{ required: true, message: '请输入银行账号' }]}
|
||||
>
|
||||
<Input placeholder="请输入银行账号" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">打款时间 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="rechargeFinalTime"
|
||||
style={{ marginBottom: '0' }}
|
||||
rules={[{ required: true, message: '请选择打款时间' }]}
|
||||
>
|
||||
<ConfigProvider locale={locale}>
|
||||
<DatePicker showTime placeholder="请选择打款时间"
|
||||
onChange={(_date, dateString) => {
|
||||
form.setFieldValue('rechargeFinalTime', dateString);
|
||||
}} />
|
||||
</ConfigProvider>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="table-label">打款凭证 *</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
name="rechargeVoucher"
|
||||
style={{ marginBottom: '0' }}
|
||||
valuePropName="fileList"
|
||||
getValueFromEvent={(e: any) => {
|
||||
console.log(e);
|
||||
if (e.file.status === 'done') {
|
||||
rechargeVoucherArray.push(e.file.response.data.fileId);
|
||||
setRechargeVoucherArray(rechargeVoucherArray);
|
||||
}
|
||||
if (e.file.status === 'removed') {
|
||||
const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId);
|
||||
setRechargeVoucherArray(idArray);
|
||||
}
|
||||
return e.fileList;
|
||||
}}
|
||||
rules={[{ required: true, message: '请上传打款凭证' }]}
|
||||
>
|
||||
<Upload name="image"
|
||||
maxCount={2}
|
||||
action={uploadImageUrl()}
|
||||
headers={{'X-USER-ID': DevUserId}}
|
||||
headers={{ 'X-USER-ID': DevUserId }}
|
||||
beforeUpload={(file: FileType) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJpgOrPng) {
|
||||
@ -342,32 +346,32 @@ export default function Payment(props: IPaymentProps) {
|
||||
}
|
||||
return isJpgOrPng;
|
||||
}}
|
||||
>
|
||||
<Button icon={<UploadOutlined/>}>上传凭证图片</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>上传凭证图片</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <>
|
||||
<Flex gap="middle" align="center" justify="center" vertical>
|
||||
<div className="qr-code">
|
||||
<Image src={thirdPartyPayUrl} fallback={errorImage} preview={false}/>
|
||||
{
|
||||
<Image src={thirdPartyPayUrl} fallback={errorImage} preview={false} />
|
||||
{/* {
|
||||
isCountdownTimeout ? (
|
||||
<div className="qr-timeout" onClick={() => {
|
||||
setRefreshQrCodeCount(refreshQrCodeCount + 1);
|
||||
}}>
|
||||
<ReloadOutlined/>
|
||||
<ReloadOutlined />
|
||||
<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"
|
||||
@ -409,7 +424,7 @@ export default function Payment(props: IPaymentProps) {
|
||||
<Form.Item
|
||||
label="支付方式"
|
||||
name="thirdParty"
|
||||
rules={[{required: true}]}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Radio.Group onChange={(e) => {
|
||||
form.setFieldValue('thirdParty', e.target.value);
|
||||
@ -424,22 +439,22 @@ export default function Payment(props: IPaymentProps) {
|
||||
<Form.Item
|
||||
label="充值金额"
|
||||
name="rechargeMoney"
|
||||
rules={[{required: true, message: '请输入金额'}]}
|
||||
rules={[{ required: true, message: '请输入金额' }]}
|
||||
>
|
||||
{renderMoney()}
|
||||
</Form.Item>
|
||||
{renderPayBody()}
|
||||
<div style={{marginTop: '15px', textAlign: 'center'}}>
|
||||
<Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-primary)'}}>
|
||||
<div style={{ marginTop: '15px', textAlign: 'center' }}>
|
||||
<Button type="primary" htmlType="submit" style={{ backgroundColor: 'var(--color-primary)' }}>
|
||||
完成付款
|
||||
</Button>
|
||||
<Button type="default" style={{marginLeft: '15px'}} onClick={() => {
|
||||
<Button type="default" style={{ marginLeft: '15px' }} onClick={() => {
|
||||
props.handleCancel();
|
||||
}}>关闭窗口</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Spin>
|
||||
{messageApiContext}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -16,6 +16,7 @@
|
||||
|
||||
.pay-table tr td .mark {
|
||||
color: red;
|
||||
/* background-color: ; */
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import './recharge-head.css';
|
||||
import Payment from "../payment/Payment.tsx";
|
||||
import {Modal} from "antd";
|
||||
import {useState} from "react";
|
||||
import { Modal } from "antd";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function RechargeHead() {
|
||||
|
||||
@ -11,15 +11,16 @@ export default function RechargeHead() {
|
||||
<>
|
||||
<div className="head-item recharge-head">
|
||||
<div onClick={() => {
|
||||
setIsPaymentModalOpen(true);
|
||||
setIsPaymentModalOpen(true);
|
||||
}}>充值</div>
|
||||
</div>
|
||||
<Modal open={isPaymentModalOpen}
|
||||
title="充值"
|
||||
onCancel={() => {
|
||||
setIsPaymentModalOpen(false);
|
||||
}}
|
||||
footer={false}
|
||||
destroyOnClose={true}
|
||||
title="充值"
|
||||
onCancel={() => {
|
||||
setIsPaymentModalOpen(false);
|
||||
}}
|
||||
footer={false}
|
||||
>
|
||||
<Payment
|
||||
handleConfirm={() => {
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,28 +1,47 @@
|
||||
.scrolling-ad-container {
|
||||
overflow: hidden; /* 隐藏超出盒子的部分 */
|
||||
white-space: nowrap; /* 内容不换行 */
|
||||
position: relative; /* 使子元素的动画定位参考于此 */
|
||||
padding: 10px; /* 内容内边距 */
|
||||
width: 100%; /* 盒子的宽度 */
|
||||
height: 30px; /* 盒子的高度 */
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中对齐文字 */
|
||||
box-sizing: border-box; /* 包含内边距和边框 */
|
||||
|
||||
overflow: hidden;
|
||||
/* 隐藏超出盒子的部分 */
|
||||
white-space: nowrap;
|
||||
/* 内容不换行 */
|
||||
position: relative;
|
||||
/* 使子元素的动画定位参考于此 */
|
||||
padding: 10px;
|
||||
/* 内容内边距 */
|
||||
width: 100%;
|
||||
/* 盒子的宽度 */
|
||||
height: 50px;
|
||||
/* 盒子的高度 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 垂直居中对齐文字 */
|
||||
box-sizing: border-box;
|
||||
/* 包含内边距和边框 */
|
||||
}
|
||||
|
||||
.scrolling-ad-content {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
padding-left: 100%;
|
||||
/* 确保广告从盒子外开始滚动 */
|
||||
white-space: nowrap;
|
||||
/* 内容不换行 */
|
||||
animation: scrollLeft 20s linear infinite;
|
||||
/* 滚动动画，持续时间为20秒，线性匀速，无限循环 */
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes scrollLeft {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
/* 从容器的右边开始 */
|
||||
}
|
||||
|
||||
.scrolling-ad-content {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
padding-left: 100%; /* 确保广告从盒子外开始滚动 */
|
||||
animation: scrollLeft 25s linear infinite; /* 滚动动画，持续时间为25秒，线性匀速，无限循环 */
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
/* 向左移动到容器的左边 */
|
||||
}
|
||||
|
||||
@keyframes scrollLeft {
|
||||
0% {
|
||||
transform: translateX(0); /* 从盒子的右边开始 */
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%); /* 向左移动到盒子的左边 */
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 悬停时停止动画 */
|
||||
.scrolling-ad-container:hover .scrolling-ad-content {
|
||||
animation-play-state: paused; /* 悬停时动画暂停 */
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
position: relative;
|
||||
/* overflow: scroll; */
|
||||
}
|
||||
.downBox{
|
||||
|
||||
.downBox {
|
||||
width: 25px;
|
||||
height: 8px;
|
||||
background-color: pink;
|
||||
@ -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,16 +118,19 @@
|
||||
right: -15%;
|
||||
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%;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
|
||||
@ -171,7 +177,7 @@
|
||||
|
||||
.step-proj .step .processing-four {
|
||||
width: 100%;
|
||||
|
||||
|
||||
/* width: 309px; */
|
||||
height: 56px;
|
||||
/* background-color: pink; */
|
||||
@ -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');
|
||||
|
||||
.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,
|
||||
|
||||
@ -13,6 +13,7 @@ export interface IProjEdit {
|
||||
background?:string;
|
||||
shadow?:string;
|
||||
handleEdit(): void;
|
||||
|
||||
}
|
||||
|
||||
export interface IProjLoading {
|
||||
|
||||
@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
|
||||
import { message } from "antd";
|
||||
import {
|
||||
CloseOutlined
|
||||
} from '@ant-design/icons';
|
||||
} from '@ant-design/icons';
|
||||
import CardProjType from "../../components/card/CardProjType.tsx";
|
||||
import {
|
||||
// IProjCharge,
|
||||
@ -39,16 +39,16 @@ export default function ProjCreate() {
|
||||
const [freeCount, setFreeCount] = useState(0) //免费次数
|
||||
const nav = useNavigate();
|
||||
const height = window.innerHeight - 170;
|
||||
const [show,setShow] = useState(true) //是否显示广告
|
||||
const [ad,setAd] = useState('')
|
||||
const [show, setShow] = useState(true) //是否显示广告
|
||||
const [ad, setAd] = useState('')
|
||||
const getAd = () => {
|
||||
get<any>({
|
||||
messageApi: messageApi,
|
||||
url: '/api/env/custom/get-proj-create-notice',
|
||||
onSuccess({ data }) {
|
||||
console.log('广告',data);
|
||||
console.log('广告', 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: '创建项目' }]));
|
||||
@ -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%'}}>
|
||||
<ScrollAd ad = {ad}></ScrollAd>
|
||||
<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
|
||||
|
||||
@ -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,8 +249,8 @@ export default function ProjEdit() {
|
||||
// nav(`/proj-edit/config-mod-list-show/${pathParams.projId}`)
|
||||
setSoftwareManagementShowOpen(true)
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: '第6步:设置功能列表显示顺序',
|
||||
@ -262,7 +266,8 @@ export default function ProjEdit() {
|
||||
// nav(`/proj-edit/config-menu-list-show/${pathParams.projId}`)
|
||||
setDisplayOrderShowOpen(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
)
|
||||
setConfigArray(configArray);
|
||||
|
||||
@ -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
BIN
src/static/ad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user