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:
lyp 2025-04-18 18:50:21 +08:00
parent b3537caa07
commit 9b1d9206d2
3 changed files with 278 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

428
src/layout/head/Head.tsx
View File

@ -2,9 +2,14 @@ import './head.css'
// import { NodeJS } from 'types/node'; // import { NodeJS } from 'types/node';
import { import {
useDispatch, useDispatch,
useSelector useSelector,
} from 'react-redux' } from 'react-redux'
import { getCode, checkPhone, updatePhone } from '../../request/api' import { operatorBaseUrl } from '../../util/AjaxUtils.ts'
import {
getCode, checkPhone,
// updatePhone
} from '../../request/api'
import BalanceHead from '../../components/balance/BalanceHead.tsx'; import BalanceHead from '../../components/balance/BalanceHead.tsx';
import RechargeHead from '../../components/recharge/RechargeHead.tsx'; import RechargeHead from '../../components/recharge/RechargeHead.tsx';
import { import {
@ -110,7 +115,7 @@ interface DataType {
// ]; // ];
import { DownOutlined, UserOutlined, QuestionCircleOutlined, BellOutlined, KeyOutlined, LogoutOutlined, GiftOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined, TableOutlined } from "@ant-design/icons"; import { DownOutlined, UserOutlined, QuestionCircleOutlined, BellOutlined, KeyOutlined, LogoutOutlined, GiftOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined, TableOutlined } from "@ant-design/icons";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState, useRef } from "react";
import { import {
put, get, put, get,
// post, // post,
@ -136,52 +141,102 @@ import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx';
import type { import type {
TableColumnsType, TableColumnsType,
} from 'antd'; } from 'antd';
// import { log } from 'console';
// import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx' // import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
export default function Head() { export default function Head() {
// const currentUrl = window.location.href;
const formRef = useRef<HTMLFormElement>(null);
// const triggerFormSubmit = () => {
// if (formRef.current) {
// formRef.current.submit();
// }
// };
// lyp // lyp
const [form] = Form.useForm<any>(); const [form] = Form.useForm<any>();
const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗 const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
const [userId, setUserId] = useState(''); // 验证码ID const [userId, setUserId] = useState(''); // 验证码ID
const submit = async (phone: any, code: any) => { // const submit = async (phone: string, code: string) => {
try { // try {
const formData = new URLSearchParams(); // const formData = new URLSearchParams();
formData.append('userId', userId); // formData.append('userId', userId);
formData.append('phone', phone); // formData.append('phone', phone);
formData.append('smsCode', code); // formData.append('smsCode', code);
const res = await updatePhone(formData.toString()); // // await updatePhone();
console.log(res); // const res = await updatePhone(formData);
// console.log('表单提交数据', res)
// // console.log(res);
} catch (error: any) { // } catch (error: any) {
setPhoneLoading(false) // setPhoneLoading(false)
if (error.response) { // if (error.response) {
const data = error.response.data; // const data = error.response.data;
messageApi.open({ // messageApi.open({
type: 'error', // type: 'error',
content: data.msg ? data.msg : `${data.path}(${data.status})`, // content: data.msg ? data.msg : `${data.path}(${data.status})`,
}); // });
} else { // } else {
console.error(error) // console.error(error)
} // }
} // }
} // }
const [phoneloading, setPhoneLoading] = useState(false) const [phoneloading, setPhoneLoading] = useState(false)
// const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
// e.preventDefault(); // 阻止表单默认提交行为
// // const form = e.currentTarget;
// // const formData = new FormData(form);
// // const url = operatorBaseUrl + '/operator/oauth/wx/update/phone';
// // console.log('嘻嘻',formData);
// // await fetch(url, {
// // method: 'POST',
// // body: formData
// // });
// // console.log(response);
// // if (!response.ok) {
// // // 响应状态码不是 200-299 时，认为请求失败
// // const errorData = await response.json();
// // messageApi.open({
// // type: 'error',
// // content: errorData.msg ? errorData.msg : `请求失败，状态码: ${response.status}`
// // });
// // } else {
// // console.log('表单提交成功');
// // const result = await response.json();
// // console.log('响应数据:', result);
// // }
// };
const onFinish = async (values: any) => { const onFinish = async (values: any) => {
// console.log('Success:', values); // console.log('Success:', values);
try { try {
setPhoneLoading(true)
const res = await checkPhone(values.phone) const res = await checkPhone(values.phone)
// console.log(res); // const formData = new URLSearchParams();
// formData.append('userId', userId);
// formData.append('phone', values.phone);
// formData.append('smsCode', values.smsCode);
// console.log('结果',res);
if (res.data == 'SUCCESS') { if (res.data == 'SUCCESS') {
setPhoneLoading(true) if (formRef.current) {
submit(values.phone, values.smsCode)
setPhoneLoading(false) // // 触发表单提交
formRef.current.submit();
// console.log(formRef.current);
}
} else { } else {
setPhoneLoading(false)
messageApi.open({ messageApi.open({
type: 'error', type: 'error',
content: '手机号已被绑定,请更换手机号', content: '手机号已被绑定,请更换手机号',
}); });
} }
// await submit(values.phone, values.smsCode)
} catch (error: any) { } catch (error: any) {
setPhoneLoading(false) setPhoneLoading(false)
if (error.response) { if (error.response) {
@ -269,8 +324,9 @@ export default function Head() {
}) })
} }
// useEffect(() => { // useEffect(() => {
// getPickList(); // console.log('路径',currentUrl);
// }, [packPage]);
// }, []);
// const [page, setPage] = useState(1) //邀请码使用人数分页 // const [page, setPage] = useState(1) //邀请码使用人数分页
@ -1876,166 +1932,176 @@ export default function Head() {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}> }}>
<Spin tip="正在绑定..." spinning={phoneloading} > {/* <Spin tip="正在绑定..." spinning={phoneloading} style={{
<div className='phoneMaskBox'> zIndex: 101,
<div className='phoneBoxLeft'> }}> */}
<div <div className='phoneMaskBox'>
style={{ <div className='phoneBoxLeft'>
marginTop: 79, <div
marginLeft: 43 style={{
}} marginTop: 79,
> marginLeft: 43
<img src={title} alt="" width={79} height={27} /> }}
</div> >
<div <img src={title} alt="" width={79} height={27} />
style={{
marginTop: 16,
marginLeft: 43
}}
>
<img src={titleB} alt="" width={109} height={17} />
</div>
<div
style={{
marginTop: 10,
marginLeft: 38,
}}
>
<img src={line} alt="" width={180} height={19} />
</div>
</div> </div>
<div className='phoneBoxRight'> <div
<div style={{ style={{
width: '100%', marginTop: 16,
fontSize: 20, marginLeft: 43
display: 'flex', }}
justifyContent: 'flex-end', >
// height: 21, <img src={titleB} alt="" width={109} height={17} />
// background: 'pink' </div>
<div
style={{
marginTop: 10,
marginLeft: 38,
}}
>
<img src={line} alt="" width={180} height={19} />
</div>
</div>
<div className='phoneBoxRight'>
<div style={{
width: '100%',
fontSize: 20,
display: 'flex',
justifyContent: 'flex-end',
// height: 21,
// background: 'pink'
}}>
<div style={{ cursor: 'pointer' }} onClick={() => {
setIsUpdateWxUsernamePhone(false);
dispath({
type: 'changePhoneModal',
val: false
})
getUserData()
}}> }}>
<div style={{ cursor: 'pointer' }} onClick={() => { <CloseOutlined />
setIsUpdateWxUsernamePhone(false); </div>
dispath({
type: 'changePhoneModal', </div>
val: false <div style={{
}) // background:'pink',
getUserData() width: '100%',
}}> height: '100%',
<CloseOutlined /> display: 'flex',
</div> flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<div className='phoneTitle'>您正在绑定手机号</div>
<div className='phoneTitleB'>绑定手机号后，您可以通过手机号码登录平台</div>
<div style={{
marginTop: 30
}}>
<Form name="Form"
form={form}
onFinish={onFinish}
initialValues={{ softWare: '' }}
// style={{ maxWidth: 600 }}
>
<div className='phoneBoxInput'>
<Form.Item name="phone" label="" rules={[{ required: true, message: '请输入手机号' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入有效的手机号'
}
]}>
<Input style={{
width: '300px',
height: '42px',
fontSize: 16,
background: '#F7F7F7',
}} placeholder="请输入手机号"
/>
</Form.Item>
</div>
<div className='phoneBoxInput' style={{
}}>
<Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
<Input style={{
width: '200px',
height: '42px',
fontSize: 16,
background: '#F7F7F7',
}} placeholder="请输入验证码" />
</Form.Item>
{countdown === 0 ? (
<div
className='sendCode'
onClick={sendCode}
>
发送验证码
</div>
) : (
<div
className='sendCode'
style={{
cursor: 'unset',
}}
>
倒计时 {countdown} 秒
</div>
)}
</div>
<div>
<Form.Item>
<Button style={{
width: 300,
height: 42,
background: '#3B2C0D',
color: '#fff',
fontSize: 16,
borderRadius: 10,
marginTop: 20,
}}
type="primary" htmlType="submit"
disabled={phoneloading}
>
{phoneloading ? '正在绑定...' : '绑定'}
</Button>
</Form.Item>
</div>
</Form>
</div> </div>
<div className='closeTitle' onClick={() => {
setIsUpdateWxUsernamePhone(false);
dispath({
type: 'changePhoneModal',
val: false
})
getUserData()
}}>跳过，下次再说</div>
<div style={{ <div style={{
// background:'pink', display: 'none'
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}> }}>
<div className='phoneTitle'>您正在绑定手机号</div> <form ref={formRef}
<div className='phoneTitleB'>绑定手机号后，您可以通过手机号码登录平台</div> action={operatorBaseUrl + '/operator/oauth/wx/update/phone'} method='post'
<div style={{ >
marginTop: 30 <input name="userId" defaultValue={userId} />
}}> <input name="phone" defaultValue={form.getFieldValue('phone') || ''} />
<Form name="Form" <input name="smsCode" defaultValue={form.getFieldValue('smsCode') || ''} />
form={form} {/* <input name="errorRedirectUrl" defaultValue={encodeURI(currentUrl)} /> */}
onFinish={onFinish} </form>
initialValues={{ softWare: '' }}
// style={{ maxWidth: 600 }}
>
<div className='phoneBoxInput'>
<Form.Item name="phone" label="" rules={[{ required: true, message: '请输入手机号' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入有效的手机号'
}
]}>
<Input style={{
width: '300px',
height: '42px',
fontSize: 16,
background: '#F7F7F7',
}} placeholder="请输入手机号" />
</Form.Item>
</div>
<div className='phoneBoxInput' style={{
}}>
<Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
<Input style={{
width: '200px',
height: '42px',
fontSize: 16,
background: '#F7F7F7',
}} placeholder="请输入验证码" />
</Form.Item>
{countdown === 0 ? (
<div
className='sendCode'
// style={{
// width: '90px',
// height: '42px',
// justifyContent: 'center',
// alignItems: 'center',
// display: 'flex',
// cursor: 'pointer',
// color: '#929292',
// paddingRight: 10,
// }}
onClick={sendCode}
>
发送验证码
</div>
) : (
<div
className='sendCode'
style={{
cursor: 'unset',
}}
>
倒计时 {countdown} 秒
</div>
)}
</div>
<div>
<Form.Item>
<Button style={{
width: 300,
height: 42,
background: '#3B2C0D',
color: '#fff',
fontSize: 16,
borderRadius: 10,
marginTop: 20,
}}
type="primary" htmlType="submit"
disabled={phoneloading}
>
{phoneloading? '正在绑定...' : '绑定'}
</Button>
</Form.Item>
</div>
</Form>
</div>
<div className='closeTitle' onClick={() => {
setIsUpdateWxUsernamePhone(false);
dispath({
type: 'changePhoneModal',
val: false
})
getUserData()
}}>跳过，下次再说</div>
</div> </div>
</div> </div>
</div> </div>
</Spin> </div>
{/* </Spin> */}
</div> </div>
</div> </div>

53
src/route/index/Index.tsx
View File

@ -76,7 +76,7 @@ interface DataType {
} }
export default function Index() { export default function Index() {
// const height = window.innerHeight - 180; // const height = window.innerHeight - 180;
const columns: TableColumnsType<DataType> = [ const columns: TableColumnsType<DataType> = [
{ {
@ -1064,7 +1064,7 @@ export default function Index() {
} }
}) })
} }
// const [languageList, setLanguageList] = useState<any>([]) // 开发者语言列表 // const [languageList, setLanguageList] = useState<any>([]) // 开发者语言列表
// // 获取语言列表 // // 获取语言列表
// const getLanguageListDate = async () => { // const getLanguageListDate = async () => {
@ -2669,8 +2669,10 @@ export default function Index() {
allowClear allowClear
/> />
<DatePicker placeholder="开始时间" <DatePicker placeholder="开始时间"
style={{ width: '130px', style={{
height: '31px', marginLeft: 5 }} width: '130px',
height: '31px', marginLeft: 5
}}
format={dateFormat} format={dateFormat}
locale={locale} locale={locale}
onChange={sellStratTimeChange} onChange={sellStratTimeChange}
@ -2678,8 +2680,10 @@ export default function Index() {
allowClear allowClear
/> />
<DatePicker placeholder="结束时间" <DatePicker placeholder="结束时间"
style={{ width: '130px', style={{
height: '31px', marginLeft: 5 }} width: '130px',
height: '31px', marginLeft: 5
}}
format={dateFormat} format={dateFormat}
locale={locale} locale={locale}
onChange={sellEndTimeChange} onChange={sellEndTimeChange}
@ -3103,9 +3107,9 @@ export default function Index() {
</Modal> </Modal>
<Modal title="可领取优惠券" <Modal title="可领取优惠券"
footer={null} footer={null}
centered
destroyOnClose destroyOnClose
open={getCouponModal &&!phoneModal} open={getCouponModal && !phoneModal}
width={809} width={809}
onCancel={() => { onCancel={() => {
// setCouponModal(false) // setCouponModal(false)
@ -3113,7 +3117,7 @@ export default function Index() {
setGetCouponModal(false) setGetCouponModal(false)
}} }}
zIndex={99} zIndex={99}
> >
<div className='headModal-bot'> <div className='headModal-bot'>
{couponArray.map((item: any) => { {couponArray.map((item: any) => {
return ( return (
@ -3312,25 +3316,26 @@ export default function Index() {
centered centered
> >
{/* <div style={{ height: `${height - 20}px`, borderTop: '1px solid #e8e8e8' }}> */} {/* <div style={{ height: `${height - 20}px`, borderTop: '1px solid #e8e8e8' }}> */}
<EditModal nav={ <EditModal nav={
()=>{ () => {
nav('/product-release', { nav('/product-release', {
state: { state: {
sellKeywords: '', sellKeywords: '',
sellBelongType: '', sellBelongType: '',
sellDate: '', sellDate: '',
language: '', language: '',
sellBoxtype: '', sellBoxtype: '',
} }
}) })
} }
} closeModal={() => { setSellModal(false) }} ></EditModal> } closeModal={() => { setSellModal(false) }} ></EditModal>
{/* </div> */} {/* </div> */}
</Modal> </Modal>
<div className='couponMask-box' <div className='couponMask-box'
style={{ display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 &&!phoneModal? 'unset' : 'none', style={{
zIndex:99 display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 && !phoneModal ? 'unset' : 'none',
zIndex: 99
}} }}
> >

4
src/util/AjaxUtils.ts
View File

@ -22,8 +22,8 @@ export const WebSocketBaseUrl: string = `ws://${host}:7025/copyright`;
axios.defaults.baseURL = `${copyBaseUrl}/copyright`; axios.defaults.baseURL = `${copyBaseUrl}/copyright`;
export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067 // export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
// export const DevUserId: string = 'a2ab4e3a-fd92-4723-9217-f9955ee92911'; export const DevUserId: string = 'ccb00bbe-a6cd-468a-a8e2-a6f39f6acccb';
// export const DevUserId: string = '6fb8e783-243c-4eec-8d98-c9b1c8aeaa00'; // 15042810561 密码123456 // export const DevUserId: string = '6fb8e783-243c-4eec-8d98-c9b1c8aeaa00'; // 15042810561 密码123456
// 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 = '';