弹窗修改

src/App.tsx

@@ -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,
+    // Modal,
-    Form,
+    // Form,
-    Button,
+    // Button,
-    Input
+    // Input
 } from 'antd';
 import { get } from "./util/AjaxUtils.ts";
 const App: React.FC = () => {
+    
     const [isTokenFetched, setIsTokenFetched] = useState(false);
-    const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
+    // const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
-    const [form] = Form.useForm<any>();
+    // 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());
+    // const [userId, setUserId] = useState(''); // 验证码ID
-        console.log(res);
+    // 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) {
+    //   }catch (error: any) {
 
-        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 onFinish = async (values: any) => {
+    // const onFinish = async (values: any) => {
-        // console.log('Success:', values);
+    //     // console.log('Success:', values);
-        try {
+    //     try {
-            const res = await checkPhone(values.phone)
+    //         const res = await checkPhone(values.phone)
-            // console.log(res);
+    //         // console.log(res);
-            if(res.data == 'SUCCESS'){
+    //         if(res.data == 'SUCCESS'){
-                submit(values.phone,values.smsCode)
+    //             submit(values.phone,values.smsCode)
-            }else{
+    //         }else{
            
-                messageApi.open({
+    //             messageApi.open({
-                    type: 'error',
+    //                 type: 'error',
-                    content: '手机号已被绑定,请更换手机号',
+    //                 content: '手机号已被绑定,请更换手机号',
-                });
+    //             });
-            }
+    //         }
 
-        } catch (error: any) {
+    //     } catch (error: any) {
 
-            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 [countdown, setCountdown] = useState(0); // 倒计时状态
+    // const [countdown, setCountdown] = useState(0); // 倒计时状态
 
-    const sendCode = async () => {
+    // const sendCode = async () => {
-        try {
+    //     try {
-            // 验证手机号输入项
+    //         // 验证手机号输入项
-            await form.validateFields(['phone']);
+    //         await form.validateFields(['phone']);
 
-            setCountdown(120);
+    //         setCountdown(120);
-            console.log('发送验证码');
+    //         console.log('发送验证码');
-            const timer = setInterval(() => {
+    //         const timer = setInterval(() => {
-                setCountdown((prevCountdown) => {
+    //             setCountdown((prevCountdown) => {
-                    if (prevCountdown > 0) {
+    //                 if (prevCountdown > 0) {
-                        return prevCountdown - 1;
+    //                     return prevCountdown - 1;
-                    } else {
+    //                 } else {
-                        clearInterval(timer);
+    //                     clearInterval(timer);
-                        return 0;
+    //                     return 0;
-                    }
+    //                 }
-                });
+    //             });
-            }, 1000);
+    //         }, 1000);
-            // 获取表单phone的值
+    //         // 获取表单phone的值
-            // const phone = form.getFieldValue('phone');
+    //         // const phone = form.getFieldValue('phone');
-            await getCode(form.getFieldValue('phone'))
+    //         await getCode(form.getFieldValue('phone'))
 
-        } catch (error: any) {
+    //     } catch (error: any) {
 
-            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 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) {
+                // if (data.isUpdateWxUsernamePhone == 1) {
-                    setIsUpdateWxUsernamePhone(true);
+                //     setIsUpdateWxUsernamePhone(true);
-                }
+                // }
-                setUserId(data.userId);
+                // 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>
 
         );

src/layout/head/Head.tsx

@@ -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);
+            // console.log('嘎嘎嘎哈哈', data);
-            if(!data.hasUserInfo && data.isUpdateWxUsernamePhone != 1) {
+            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,7 +977,8 @@ export default function Head() {
         // 五分钟刷新一次用户信息
         setInterval(reloadUserInterval, 5 * 60 * 1000);
         getMyPackNum()
-
+        // console.log('是否关闭',phoneModal);
+        
     }, [])
     const loginFlag = async () => {
         try {
@@ -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}
 

src/request/request.ts

@@ -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
 

src/route/ProductRelease/ProductRelease.tsx

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

src/route/index/Index.tsx

@@ -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' >

src/store/index.ts

@@ -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)

src/util/AjaxUtils.ts

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