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-14 17:38:30 +08:00
parent d0c41c022a
commit 477c132903
7 changed files with 351 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
src/App.tsx
View File

@ -15,19 +15,20 @@ import {
GlobalDispatchContext,
} from "./context/GlobalContext.ts";
import React, { Reducer, useReducer, useState, useEffect } from "react";
import { getCode, checkPhone,updatePhone } from './request/api.ts'
// import { getCode, checkPhone,updatePhone } from './request/api.ts'
import {
message,
Modal,
Form,
Button,
Input
// Modal,
// Form,
// Button,
// Input
} from 'antd';
import { get } from "./util/AjaxUtils.ts";
const App: React.FC = () => {
const [isTokenFetched, setIsTokenFetched] = useState(false);
const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
const [form] = Form.useForm<any>();
// const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
// const [form] = Form.useForm<any>();
const globalDataReducer = (state: GlobalData, action: GlobalDataAction) => {
if (action.type == GlobalDataActionType.REFRESH_SELF) {
if (action.user) {
@ -51,97 +52,98 @@ const App: React.FC = () => {
hasUserInfo: false
}
});
const [userId, setUserId] = useState(''); // 验证码ID
const [messageApi, messageContext] = message.useMessage();
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 res = await updatePhone(formData.toString());
console.log(res);
// 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);
}catch (error: any) {
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 onFinish = async (values: any) => {
// console.log('Success:', values);
try {
const res = await checkPhone(values.phone)
// const res = await updatePhone(formData.toString());
// console.log(res);
if(res.data == 'SUCCESS'){
submit(values.phone,values.smsCode)
}else{
messageApi.open({
type: 'error',
content: '手机号已被绑定,请更换手机号',
});
}
// }catch (error: any) {
} catch (error: any) {
// 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 onFinish = async (values: any) => {
// // console.log('Success:', values);
// try {
// const res = await checkPhone(values.phone)
// // console.log(res);
// if(res.data == 'SUCCESS'){
// submit(values.phone,values.smsCode)
// }else{
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)
}
}
// messageApi.open({
// type: 'error',
// content: '手机号已被绑定,请更换手机号',
// });
// }
};
const [countdown, setCountdown] = useState(0); // 倒计时状态
// } catch (error: any) {
const sendCode = async () => {
try {
// 验证手机号输入项
await form.validateFields(['phone']);
// 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)
// }
// }
setCountdown(120);
console.log('发送验证码');
const timer = setInterval(() => {
setCountdown((prevCountdown) => {
if (prevCountdown > 0) {
return prevCountdown - 1;
} else {
clearInterval(timer);
return 0;
}
});
}, 1000);
// 获取表单phone的值
// const phone = form.getFieldValue('phone');
await getCode(form.getFieldValue('phone'))
// };
// const [countdown, setCountdown] = useState(0); // 倒计时状态
} catch (error: any) {
// const sendCode = async () => {
// try {
// // 验证手机号输入项
// await form.validateFields(['phone']);
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)
}
}
// setCountdown(120);
// console.log('发送验证码');
// const timer = setInterval(() => {
// setCountdown((prevCountdown) => {
// if (prevCountdown > 0) {
// return prevCountdown - 1;
// } else {
// clearInterval(timer);
// return 0;
// }
// });
// }, 1000);
// // 获取表单phone的值
// // const phone = form.getFieldValue('phone');
// await getCode(form.getFieldValue('phone'))
}
// } catch (error: any) {
// 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 nav = useNavigate();
useEffect(() => {
@ -153,10 +155,10 @@ const App: React.FC = () => {
// console.log('嘻嘻嘻', data);
// setIsUpdateWxUsernamePhone(data.isUpdateWxUsernamePhone);
// if (data.isUpdateWxUsernamePhone == 1) {
if (data.isUpdateWxUsernamePhone == 1) {
setIsUpdateWxUsernamePhone(true);
}
setUserId(data.userId);
// if (data.isUpdateWxUsernamePhone == 1) {
// setIsUpdateWxUsernamePhone(true);
// }
// setUserId(data.userId);
// const currentToken = sessionStorage.getItem('token');
sessionStorage.setItem('token', data.accessToken);
const token = sessionStorage.getItem('token');
@ -197,7 +199,7 @@ const App: React.FC = () => {
</GlobalDispatchContext.Provider>
</GlobalContext.Provider>
</Provider>
<Modal
{/* <Modal
title="绑定手机号"
okText="确认"
cancelText="取消"
@ -212,7 +214,7 @@ const App: React.FC = () => {
}}
width={500}
centered
zIndex={100}
// zIndex={100}
>
<div className='phoneBox'>
<Form name="Form"
@ -294,7 +296,7 @@ const App: React.FC = () => {
</Form>
</div>
</Modal>
</Modal> */}
</div>
);

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

@ -4,11 +4,12 @@ import {
useDispatch,
useSelector
} from 'react-redux'
import { getCode, checkPhone, updatePhone } from '../../request/api'
import BalanceHead from '../../components/balance/BalanceHead.tsx';
import RechargeHead from '../../components/recharge/RechargeHead.tsx';
import {
// Empty,
Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table,
Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button
// Form, Button, InputNumber
} from "antd";
import pack from '../../static/pack.png'
@ -130,6 +131,103 @@ import type {
} from 'antd';
// import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
export default function Head() {
// 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 res = await updatePhone(formData.toString());
console.log(res);
} catch (error: any) {
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 onFinish = async (values: any) => {
// console.log('Success:', values);
try {
const res = await checkPhone(values.phone)
// console.log(res);
if (res.data == 'SUCCESS') {
submit(values.phone, values.smsCode)
} else {
messageApi.open({
type: 'error',
content: '手机号已被绑定,请更换手机号',
});
}
} catch (error: any) {
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 [countdown, setCountdown] = useState(0); // 倒计时状态
const sendCode = async () => {
try {
// 验证手机号输入项
await form.validateFields(['phone']);
setCountdown(120);
console.log('发送验证码');
const timer = setInterval(() => {
setCountdown((prevCountdown) => {
if (prevCountdown > 0) {
return prevCountdown - 1;
} else {
clearInterval(timer);
return 0;
}
});
}, 1000);
// 获取表单phone的值
// const phone = form.getFieldValue('phone');
await getCode(form.getFieldValue('phone'))
} catch (error: any) {
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 [packloading, setPackloading] = useState(false)
const [packList, setPackList] = useState<any[]>([]) //服务包列表
const [packPage, setPackPage] = useState(1) //服务包分页
@ -180,6 +278,7 @@ export default function Head() {
const redxuState: any = useSelector(state => state)
// const [packageType, setPackageType] = useState('')
const packNum = redxuState.packNum
const phoneModal = redxuState.phoneModal
// const packItems: MenuProps['items'] = [
// {
// key: '1',
@ -813,15 +912,38 @@ export default function Head() {
useEffect(() => {
// getLength()
reloadUser(messageApi, globalDispatchContext).then((data) => {
// console.log('嘎嘎嘎哈哈',data);
if(!data.hasUserInfo && data.isUpdateWxUsernamePhone != 1) {
// console.log('嘎嘎嘎哈哈', data);
setUserId(data.userId)
if (data.isUpdateWxUsernamePhone == 1) {
setIsUpdateWxUsernamePhone(true);
dispath({
type: 'changePhoneModal',
val: true
})
}
//嘻嘻嘻
// if(!data.hasUserInfo && data.isUpdateWxUsernamePhone != 1) {
// setIsSelfModalOpen(true);
// }
if (!data.hasUserInfo ) {
setIsSelfModalOpen(true);
}
// if (!data.hasUserInfo) {
});
}, [globalContext.user]);
const getUserData = () => {
reloadUser(messageApi, globalDispatchContext).then((data) => {
console.log(data);
//嘻嘻嘻
if(!data.hasUserInfo ) {
setIsSelfModalOpen(true);
}
// if (!data.hasUserInfo && !phoneModal) {
// setIsSelfModalOpen(true);
// }
});
}, [globalContext.user]);
}
// 刷新用户信息
const reloadUserInterval = async () => {
await reloadUser(messageApi, globalDispatchContext);
@ -855,6 +977,7 @@ export default function Head() {
// 五分钟刷新一次用户信息
setInterval(reloadUserInterval, 5 * 60 * 1000);
getMyPackNum()
// console.log('是否关闭',phoneModal);
}, [])
const loginFlag = async () => {
@ -1249,8 +1372,9 @@ export default function Head() {
</div>
</div>
</div>
<Modal open={isSelfModalOpen}
<Modal open={isSelfModalOpen && !phoneModal}
centered
zIndex={100}
destroyOnClose={true}
title="个人信息"
footer={false}
@ -1618,6 +1742,110 @@ export default function Head() {
</div>
</div>
</Modal>
<Modal
title="绑定手机号"
okText="确认"
cancelText="取消"
destroyOnClose={true}
footer={null}
open={isUpdateWxUsernamePhone}
// onOk={() => {
// setOrderDetailModal(false)
// }}
onCancel={() => {
setIsUpdateWxUsernamePhone(false);
dispath({
type: 'changePhoneModal',
val: false
})
getUserData()
}}
width={500}
centered
// zIndex={100}
>
<div className='phoneBox'>
<Form name="Form"
form={form}
onFinish={onFinish}
initialValues={{ softWare: '' }}
// style={{ maxWidth: 600 }}
>
<div className='phoneBoxInput'>
<div className='phoneBoxTitle'>手机号<span style={{ color: 'red' }}>*</span></div>
<Form.Item name="phone" label="" rules={[{ required: true, message: '请输入手机号' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入有效的手机号'
}
]}>
<Input style={{
width: '300px',
height: '42px',
}} placeholder="请输入手机号" />
</Form.Item>
</div>
<div className='phoneBoxInput' style={{
position: 'relative',
// backgroundColor:'pink',
}}>
<div className='phoneBoxTitle'>验证码<span style={{ color: 'red' }}>*</span></div>
<Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
<Input style={{
width: '300px',
height: '42px',
}} placeholder="请输入验证码" />
</Form.Item>
{countdown === 0 ? (
<div
style={{
position: 'absolute',
right: '0',
top: '0',
width: '90px',
height: '42px',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
cursor: 'pointer',
color: '#929292',
paddingRight: 10,
}}
onClick={sendCode}
>
发送验证码
</div>
) : (
<div
style={{
position: 'absolute',
right: '0',
top: '0',
width: '90px',
height: '42px',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
color: '#929292',
paddingRight: 10,
}}
>
倒计时 {countdown} 秒
</div>
)}
</div>
<div>
<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</div>
</Form>
</div>
</Modal>
{/* <Modal title="优惠券"
footer={null}

5
src/request/request.ts
View File

@ -1,6 +1,9 @@
import axios from "axios";
import {baseUrl} from '../util/AjaxUtils'
const baseURL = baseUrl; //买卖功能baseUrl
// const baseURL = 'http://192.168.0.115:8099'; // 开票功能baseUrl
const baseURL = 'http://192.168.0.115:8081'; //买卖功能baseUrl
// const baseURL = 'http://192.168.0.115:8081'; //买卖功能baseUrl
// const baseURL = 'http://192.168.0.15:8091'; //绑定手机号baseUrl

1
src/route/ProductRelease/ProductRelease.tsx
View File

@ -42,6 +42,7 @@ export default function ProductRelease() {
// if (sellDate) {
// console.log('sellDate', dayjs(sellDate).year());
// }
setPage(1)
getGoodsDate(1)
}, [state])

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

@ -76,6 +76,7 @@ interface DataType {
}
export default function Index() {
// const height = window.innerHeight - 180;
const columns: TableColumnsType<DataType> = [
{
@ -205,6 +206,7 @@ export default function Index() {
const dispath = useDispatch()
//redux的belongArray
const redxuState: any = useSelector(state => state)
const phoneModal = redxuState.phoneModal
// const belongArray = redxuState.belongArray
// const belongArrayList = belongArray.map((item:any) => ({
@ -946,7 +948,7 @@ export default function Index() {
const [correctionSearchBox, setCorrectionSearchBox] = useState(false)
// 新增合同按钮是否显示
const [contractSearchBox, setContractSearchBox] = useState(false)
// 优惠券遮罩层是否i西安市
// 优惠券遮罩层是否显示
const [coupon, setCoupon] = useState(false)
// 获取优惠券弹出层是否显示
const [getCouponModal, setGetCouponModal] = useState(false)
@ -3103,7 +3105,7 @@ export default function Index() {
footer={null}
destroyOnClose
open={getCouponModal}
open={getCouponModal &&!phoneModal}
width={809}
onCancel={() => {
// setCouponModal(false)
@ -3327,7 +3329,9 @@ export default function Index() {
</Modal>
<div className='couponMask-box'
style={{ display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 ? 'unset' : 'none' }}
style={{ display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 &&!phoneModal? 'unset' : 'none',
zIndex:99
}}
>
<div className='couponMask' >

6
src/store/index.ts
View File

@ -23,7 +23,8 @@ const baseState = {
packNum:{
ALL:0,
MATERIAL:0,
}
},
phoneModal:false,
}
// 创建仓库
@ -77,6 +78,9 @@ const reducer = (state = baseState, action: any) => {
if (action.type == 'upPackNum') {
nstate.packNum = action.val
}
if(action.type == 'changePhoneModal'){
nstate.phoneModal = action.val
}
return nstate
}
const store = createStore(reducer)

9
src/util/AjaxUtils.ts
View File

@ -2,8 +2,9 @@ import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
import type { MessageInstance } from "antd/es/message/interface";
export const Axios = axios;
axios.defaults.baseURL = 'http://192.168.0.15:7025/copyright';
export const baseUrl = 'http://192.168.0.15:7025'
// axios.defaults.baseURL = 'http://192.168.0.15:7025/copyright';
axios.defaults.baseURL = `${baseUrl}/copyright`;
// axios.defaults.baseURL = 'http://192.168.0.115:8091/copyright';
// axios.defaults.baseURL = 'http://192.168.0.103:7025/copyright';
// axios.defaults.baseURL = 'http://192.168.43.145:7025/copyright';
@ -15,8 +16,8 @@ export const WebSocketBaseUrl: string = 'ws://192.168.0.15:7025/copyright';
// 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 = 'a2ab4e3a-fd92-4723-9217-f9955ee92911';
export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
// export const DevUserId: string = 'a2ab4e3a-fd92-4723-9217-f9955ee92911';
// 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 = '';