解绑

src/components/user/UserEdit.tsx

@@ -12,7 +12,8 @@ import {
     // Spin,
     // Upload,
     UploadFile,
-    // UploadProps
+    // UploadProps,
+    Modal
 } from "antd";
 import {
     // DevUserId,
@@ -20,6 +21,8 @@ import {
     //   uploadImageUrl 
 } from "../../util/AjaxUtils.ts";
 import { useEffect, useState } from "react";
+import { unbind } from '../../request/api.ts'
+import { reMenuActive } from '../../util/cache';
 // import locale from "antd/es/date-picker/locale/zh_CN";
 // import dayjs, { Dayjs } from "dayjs";
 
@@ -52,10 +55,11 @@ type FormDataType = {
 export interface IUserEditProps {
 
     handleConfirm(data: FormDataType): void;
+    isUnbindPhone: boolean;
 }
 
 export default function UserEdit(props: IUserEditProps) {
-
+    const [tipShow, setTipShow] = useState(false); //解除绑定提示
     const [messageApi, contextHolder] = message.useMessage();
     const [form] = Form.useForm<FormDataType>();
     const [userInfoType, setUserInfoType] = useState('PERSONAL');
@@ -73,7 +77,7 @@ export default function UserEdit(props: IUserEditProps) {
     // };
 
     useEffect(() => {
-        
+
         get<any>({
             messageApi,
             url: 'api/user-info/get-self',
@@ -316,7 +320,15 @@ export default function UserEdit(props: IUserEditProps) {
                     ) : <></>
                 }
 
-
+                <a style={{
+                    // 下划线
+                    textDecoration: 'underline',
+                    display:props.isUnbindPhone? 'block' : 'none'
+                }}
+                    onClick={() => {
+                        setTipShow(true);
+                    }}
+                >解除绑定微信</a>
 
                 {/* <Row gutter={15}>
                     <Col span={12}>
@@ -505,6 +517,44 @@ export default function UserEdit(props: IUserEditProps) {
                     </Flex>
                 </Form.Item>
             </Form >
+            <Modal
+                title="解除绑定"
+                destroyOnClose={true}
+                open={tipShow}
+                // footer={null}
+                maskClosable={false} // 禁止通过点击蒙层关闭
+                onCancel={() => {
+                    setTipShow(false)
+                }}
+                okText="解除"
+                cancelText="取消"
+                okButtonProps={{ style: { background: 'red', color: 'white' } }}
+                width={600}
+                centered
+                onOk={async () => {
+                    // alert('解除')
+                    try {
+                        await unbind()
+                        reMenuActive()
+                        // 清除缓存
+                        sessionStorage.clear()
+                        window.location.href = '/copyright/logout'
+                    } catch (error: any) {
+                        // setLoading(false)
+                        if (error.response) {
+                            const data = error.response.data;
+                            messageApi.open({
+                                type: 'error',
+                                content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                            });
+                        }
+                    }
+                }}
+            >
+                <div>
+                    您确定要解除绑定?如想继续使用本账号,请重新绑定。
+                </div>
+            </Modal>
             {/* <Spin tip="正在提交..." spinning={loading} fullscreen /> */}
             {contextHolder}
         </>

src/layout/head/Head.tsx

@@ -8,7 +8,7 @@ import {
 import {
     //  operatorBaseUrl,
     copyBaseUrl
- } from '../../util/AjaxUtils.ts'
+} from '../../util/AjaxUtils.ts'
 import {
     getCode,
     //  checkPhone,
@@ -162,6 +162,8 @@ export default function Head() {
     // lyp
     const [form] = Form.useForm<any>();
     const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
+    // 解除绑定是否显示
+    const [isUnbindPhone, setIsUnbindPhone] = useState(false); // 解除绑定
     // const [userId, setUserId] = useState(''); // 验证码ID
     // const submit = async (phone: string, code: string) => {
     //     try {
@@ -1017,6 +1019,9 @@ export default function Head() {
                     val: true
                 })
             }
+            if (data.isUpdateWxUsernamePhone != -1) {
+                setIsUnbindPhone(true);
+            }
             //嘻嘻嘻
             // if(!data.hasUserInfo && data.isUpdateWxUsernamePhone != 1) {
             //     setIsSelfModalOpen(true);
@@ -1034,6 +1039,9 @@ export default function Head() {
     //         if (!data.hasUserInfo) {
     //             setIsSelfModalOpen(true);
     //         }
+    //         if (data.isUpdateWxUsernamePhone != -1) {
+    //             setIsUnbindPhone(true);
+    //         }
     //         // if (!data.hasUserInfo && !phoneModal) {
     //         //     setIsSelfModalOpen(true);
     //         // }
@@ -1121,6 +1129,22 @@ export default function Head() {
                 setIsSelfModalOpen(true);
             }
         },
+
+
+        //  ...(isUnbindPhone ? [
+        //     {
+        //         key: 'UnbindPhone',
+        //         label: (
+        //             <div className="dropdown-item">
+        //                 <UserOutlined />
+        //                 <span className="title">解除绑定</span>
+        //             </div>
+        //         ),
+        //         onClick: () => {
+        //             // setIsSelfModalOpen(true);
+        //         }
+        //     }
+        // ] : []),
         {
             key: 'changePass',
             label: (
@@ -1513,7 +1537,10 @@ export default function Head() {
                             })
                         }
                     });
-                }} />
+                }}
+
+                    isUnbindPhone={isUnbindPhone}
+                />
             </Modal>
             <Modal open={isPasswordModalOpen}
                 centered

src/request/api.ts

@@ -113,5 +113,7 @@ export const updatePhone = (params:any) => newRequest.post(`/operator/oauth/wx/u
 
 // 更新绑定手机号
 export const updateBindPhone = (params:any) => phoneRequest.post(`/operator/api/user-wx-update-username/update-phone`, params)
+// 解绑
+export const unbind = () => phoneRequest.get(`/operator/api/user-wx-update-username/unlock-phone`)
 
 //---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

src/util/AjaxUtils.ts

@@ -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 = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
-// export const DevUserId: string = '2339d51f-f6cf-4f93-92dd-56c372dfbe36'; 
+export const DevUserId: string = 'e3e40f95-7a3f-4b53-a1a0-51dd4e881d74'; 
 // 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 = '';