表单提交
This commit is contained in:
lyp
parent
b3537caa07
commit
9b1d9206d2
@ -2,9 +2,14 @@ import './head.css'
|
||||
// import { NodeJS } from 'types/node';
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector
|
||||
useSelector,
|
||||
|
||||
} 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 RechargeHead from '../../components/recharge/RechargeHead.tsx';
|
||||
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 { useContext, useEffect, useState } from "react";
|
||||
import { useContext, useEffect, useState, useRef } from "react";
|
||||
import {
|
||||
put, get,
|
||||
// post,
|
||||
@ -136,52 +141,102 @@ import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx';
|
||||
import type {
|
||||
TableColumnsType,
|
||||
} from 'antd';
|
||||
// import { log } from 'console';
|
||||
// import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
|
||||
export default function Head() {
|
||||
// const currentUrl = window.location.href;
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
// const triggerFormSubmit = () => {
|
||||
// if (formRef.current) {
|
||||
// formRef.current.submit();
|
||||
// }
|
||||
// };
|
||||
// lyp
|
||||
const [form] = Form.useForm<any>();
|
||||
const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
|
||||
const [userId, setUserId] = useState(''); // 验证码ID
|
||||
const submit = async (phone: any, code: any) => {
|
||||
try {
|
||||
const formData = new URLSearchParams();
|
||||
formData.append('userId', userId);
|
||||
formData.append('phone', phone);
|
||||
formData.append('smsCode', code);
|
||||
// const submit = async (phone: string, code: string) => {
|
||||
// try {
|
||||
// const formData = new URLSearchParams();
|
||||
// formData.append('userId', userId);
|
||||
// formData.append('phone', phone);
|
||||
// formData.append('smsCode', code);
|
||||
|
||||
const res = await updatePhone(formData.toString());
|
||||
console.log(res);
|
||||
// // await updatePhone();
|
||||
// const res = await updatePhone(formData);
|
||||
// console.log('表单提交数据', res)
|
||||
// // console.log(res);
|
||||
|
||||
} catch (error: any) {
|
||||
setPhoneLoading(false)
|
||||
if (error.response) {
|
||||
const data = error.response.data;
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||||
});
|
||||
} else {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
// } catch (error: any) {
|
||||
// setPhoneLoading(false)
|
||||
// if (error.response) {
|
||||
// const data = error.response.data;
|
||||
// messageApi.open({
|
||||
// type: 'error',
|
||||
// content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||||
// });
|
||||
// } else {
|
||||
// console.error(error)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
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) => {
|
||||
// console.log('Success:', values);
|
||||
try {
|
||||
setPhoneLoading(true)
|
||||
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') {
|
||||
setPhoneLoading(true)
|
||||
submit(values.phone, values.smsCode)
|
||||
setPhoneLoading(false)
|
||||
if (formRef.current) {
|
||||
|
||||
// // 触发表单提交
|
||||
formRef.current.submit();
|
||||
// console.log(formRef.current);
|
||||
}
|
||||
|
||||
} else {
|
||||
setPhoneLoading(false)
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: '手机号已被绑定,请更换手机号',
|
||||
});
|
||||
}
|
||||
|
||||
// await submit(values.phone, values.smsCode)
|
||||
} catch (error: any) {
|
||||
setPhoneLoading(false)
|
||||
if (error.response) {
|
||||
@ -269,8 +324,9 @@ export default function Head() {
|
||||
})
|
||||
}
|
||||
// useEffect(() => {
|
||||
// getPickList();
|
||||
// }, [packPage]);
|
||||
// console.log('路径',currentUrl);
|
||||
|
||||
// }, []);
|
||||
|
||||
|
||||
// const [page, setPage] = useState(1) //邀请码使用人数分页
|
||||
@ -1876,166 +1932,176 @@ export default function Head() {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Spin tip="正在绑定..." spinning={phoneloading} >
|
||||
<div className='phoneMaskBox'>
|
||||
<div className='phoneBoxLeft'>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 79,
|
||||
marginLeft: 43
|
||||
}}
|
||||
>
|
||||
<img src={title} alt="" width={79} height={27} />
|
||||
</div>
|
||||
<div
|
||||
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>
|
||||
{/* <Spin tip="正在绑定..." spinning={phoneloading} style={{
|
||||
zIndex: 101,
|
||||
}}> */}
|
||||
<div className='phoneMaskBox'>
|
||||
<div className='phoneBoxLeft'>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 79,
|
||||
marginLeft: 43
|
||||
}}
|
||||
>
|
||||
<img src={title} alt="" width={79} height={27} />
|
||||
</div>
|
||||
<div className='phoneBoxRight'>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
fontSize: 20,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
// height: 21,
|
||||
// background: 'pink'
|
||||
<div
|
||||
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 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={() => {
|
||||
setIsUpdateWxUsernamePhone(false);
|
||||
dispath({
|
||||
type: 'changePhoneModal',
|
||||
val: false
|
||||
})
|
||||
getUserData()
|
||||
}}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style={{
|
||||
// background:'pink',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
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 className='closeTitle' onClick={() => {
|
||||
setIsUpdateWxUsernamePhone(false);
|
||||
dispath({
|
||||
type: 'changePhoneModal',
|
||||
val: false
|
||||
})
|
||||
getUserData()
|
||||
}}>跳过，下次再说</div>
|
||||
|
||||
|
||||
|
||||
<div style={{
|
||||
// background:'pink',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
display: 'none'
|
||||
}}>
|
||||
<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'
|
||||
// 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>
|
||||
<form ref={formRef}
|
||||
action={operatorBaseUrl + '/operator/oauth/wx/update/phone'} method='post'
|
||||
>
|
||||
<input name="userId" defaultValue={userId} />
|
||||
<input name="phone" defaultValue={form.getFieldValue('phone') || ''} />
|
||||
<input name="smsCode" defaultValue={form.getFieldValue('smsCode') || ''} />
|
||||
{/* <input name="errorRedirectUrl" defaultValue={encodeURI(currentUrl)} /> */}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
{/* </Spin> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -2669,8 +2669,10 @@ export default function Index() {
|
||||
allowClear
|
||||
/>
|
||||
<DatePicker placeholder="开始时间"
|
||||
style={{ width: '130px',
|
||||
height: '31px', marginLeft: 5 }}
|
||||
style={{
|
||||
width: '130px',
|
||||
height: '31px', marginLeft: 5
|
||||
}}
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
onChange={sellStratTimeChange}
|
||||
@ -2678,8 +2680,10 @@ export default function Index() {
|
||||
allowClear
|
||||
/>
|
||||
<DatePicker placeholder="结束时间"
|
||||
style={{ width: '130px',
|
||||
height: '31px', marginLeft: 5 }}
|
||||
style={{
|
||||
width: '130px',
|
||||
height: '31px', marginLeft: 5
|
||||
}}
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
onChange={sellEndTimeChange}
|
||||
@ -3103,9 +3107,9 @@ export default function Index() {
|
||||
</Modal>
|
||||
<Modal title="可领取优惠券"
|
||||
footer={null}
|
||||
|
||||
centered
|
||||
destroyOnClose
|
||||
open={getCouponModal &&!phoneModal}
|
||||
open={getCouponModal && !phoneModal}
|
||||
width={809}
|
||||
onCancel={() => {
|
||||
// setCouponModal(false)
|
||||
@ -3113,7 +3117,7 @@ export default function Index() {
|
||||
setGetCouponModal(false)
|
||||
}}
|
||||
zIndex={99}
|
||||
>
|
||||
>
|
||||
<div className='headModal-bot'>
|
||||
{couponArray.map((item: any) => {
|
||||
return (
|
||||
@ -3312,25 +3316,26 @@ export default function Index() {
|
||||
centered
|
||||
>
|
||||
{/* <div style={{ height: `${height - 20}px`, borderTop: '1px solid #e8e8e8' }}> */}
|
||||
<EditModal nav={
|
||||
()=>{
|
||||
nav('/product-release', {
|
||||
state: {
|
||||
sellKeywords: '',
|
||||
sellBelongType: '',
|
||||
sellDate: '',
|
||||
language: '',
|
||||
sellBoxtype: '',
|
||||
}
|
||||
})
|
||||
}
|
||||
} closeModal={() => { setSellModal(false) }} ></EditModal>
|
||||
<EditModal nav={
|
||||
() => {
|
||||
nav('/product-release', {
|
||||
state: {
|
||||
sellKeywords: '',
|
||||
sellBelongType: '',
|
||||
sellDate: '',
|
||||
language: '',
|
||||
sellBoxtype: '',
|
||||
}
|
||||
})
|
||||
}
|
||||
} closeModal={() => { setSellModal(false) }} ></EditModal>
|
||||
{/* </div> */}
|
||||
|
||||
</Modal>
|
||||
<div className='couponMask-box'
|
||||
style={{ display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 &&!phoneModal? 'unset' : 'none',
|
||||
zIndex:99
|
||||
style={{
|
||||
display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 && !phoneModal ? 'unset' : 'none',
|
||||
zIndex: 99
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
@ -22,8 +22,8 @@ export const WebSocketBaseUrl: string = `ws://${host}:7025/copyright`;
|
||||
|
||||
axios.defaults.baseURL = `${copyBaseUrl}/copyright`;
|
||||
|
||||
export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
|
||||
// export const DevUserId: string = 'a2ab4e3a-fd92-4723-9217-f9955ee92911';
|
||||
// export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
|
||||
export const DevUserId: string = 'ccb00bbe-a6cd-468a-a8e2-a6f39f6acccb';
|
||||
// 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 = '';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user