优化加入会议设置

src/components/JoinMeetingModal/index.tsx

@@ -2,9 +2,10 @@ import { GetCheckoutRoomNum, GetRoomInfo, GetRoomRtcToken } from '@/api/Home/Ind
 import styles from '@/components/JoinMeetingModal/index.module.scss'
 import ImageUrl from '@/utils/package/ImageUrl';
 import { Modal, message } from 'antd';
-import { useState, useImperativeHandle, forwardRef } from "react";
+import { useState, useImperativeHandle, forwardRef, useRef } from "react";
 import { useNavigate } from 'react-router-dom';
 import Avatar from '@/components/Avatar';
+import JoinSetting from '../JoinSetting';
 const JoinMeetingModal = forwardRef((props: any, ref: any) => {
   useImperativeHandle(ref, () => ({
     changeModal: (item: any) => {
@@ -12,23 +13,9 @@ const JoinMeetingModal = forwardRef((props: any, ref: any) => {
       setIsJoinMeetingModal(true)
     }
   }))
-  const navigate = useNavigate();
+  const joinSettingRef = useRef<any>();
   const [isJoinMeetingModal, setIsJoinMeetingModal] = useState(false);
   const [info, setInfo] = useState<any>('');
-  const isGetCheckoutRoomNum = async (roomNum: string, callBack: Function): Promise<void> => {
-    await GetCheckoutRoomNum(roomNum).then(res => {
-      if (res.code === 200) {
-        callBack(res.data)
-      }
-    })
-  }
-  const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise<void> => {
-    await GetRoomRtcToken(roomNum).then(res => {
-      if (res.code === 200) {
-        callBack(res.data)
-      }
-    })
-  }
   return (
     <>
       <Modal
@@ -53,33 +40,11 @@ const JoinMeetingModal = forwardRef((props: any, ref: any) => {
               <span>拒绝</span>
             </div>
             <div onClick={() => {
-              if (location.hash.indexOf('/meeting') !== -1) {
+              if (location.hash.indexOf('/meeting') === 1) {
                 setIsJoinMeetingModal(false)
                 return message.error('您已经在房间中了，请退出房间重试。')
               }
-              isGetCheckoutRoomNum(info.roomNum, (bool: boolean) => {
+              joinSettingRef.current.changeModal(info.roomNum)
-                if (bool) {
-                  getRoomRtcToken(info.roomNum, (token: string) => {
-                    if (token) {
-                      GetRoomInfo(info.roomNum).then(res => {
-                        if (res.code === 200) {
-                          setIsJoinMeetingModal(false)
-                          navigate(`/meeting`, {
-                            state: {
-                              channelId: info.roomNum,
-                              token,
-                              roomId: res.data.id,
-                              roomName: res.data.roomName,
-                            }
-                          })
-                        }
-                      })
-                    }
-                  })
-                } else {
-                  message.error('房间号不存在！')
-                }
-              })
             }}>
               <img src={ImageUrl.icon37} alt="" />
               <span>接听</span>
@@ -87,6 +52,7 @@ const JoinMeetingModal = forwardRef((props: any, ref: any) => {
           </div>
         </div>
       </Modal>
+      <JoinSetting ref={joinSettingRef} />
     </>
   )
 })

src/components/JoinSetting/index.module.scss

@@ -0,0 +1,66 @@
+.joinRoomSettingModal {
+
+  >div:nth-child(1) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    >span {
+      color: #ccc;
+      text-align: center;
+    }
+
+    >input {
+      background: transparent;
+      color: white;
+      border: none;
+      text-align: center;
+      font-size: 30px;
+      box-sizing: border-box;
+      border-bottom: 1px #3F51B5 solid;
+    }
+  }
+
+  >div:nth-child(2) {
+    margin: 10px 0;
+    height: 260px;
+    background-color: #1E1E1F;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    >div {
+      transform: scale(2);
+    }
+  }
+
+  >div:nth-child(3) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    >div:nth-child(1) {
+      display: flex;
+      align-items: center;
+
+      >div {
+        cursor: pointer;
+        height: 40px;
+        width: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        >img {
+          width: 30px;
+        }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+
+    >div:nth-child(2) {}
+  }
+}

src/components/JoinSetting/index.tsx

@@ -0,0 +1,150 @@
+import styles from '@/components/JoinSetting/index.module.scss'
+import { storage } from '@/utils';
+import ImageUrl from '@/utils/package/ImageUrl';
+import { GetCheckoutRoomNum, GetRoomRtcToken, GetRoomInfo } from '@/api/Home/Index';
+import { Button, Modal, message } from 'antd';
+import { useState, useImperativeHandle, forwardRef } from "react";
+import { PostRefresh } from '@/api/Login';
+import Avatar from '@/components/Avatar';
+import { useNavigate } from 'react-router-dom';
+const JoinSetting = forwardRef((props: any, ref: any) => {
+  useImperativeHandle(ref, () => ({
+    changeModal: (roomNum: string = '') => {
+      let userInfo = JSON.parse(storage.getItem('user') as string)
+      setUser(userInfo)
+      setJoinRoomSettingModal(true)
+      setJoinRoomSettingForm({
+        ...joinRoomSettingForm,
+        roomNum,
+      })
+    }
+  }))
+  const navigate = useNavigate();
+  const [user, setUser] = useState<any>({});
+  const [joinRoomSettingModal, setJoinRoomSettingModal] = useState(false)
+  const [joinRoomSettingForm, setJoinRoomSettingForm] = useState({
+    list: [
+      {
+        title: '静音',
+        icon: ImageUrl.icon22,
+        iconActive: ImageUrl.icon22Active,
+        active: false,
+      },
+      {
+        title: '关闭视频',
+        icon: ImageUrl.icon23,
+        iconActive: ImageUrl.icon23Active,
+        active: false,
+      },
+    ],
+    roomNum: '',
+  })
+  const isGetCheckoutRoomNum = async (roomNum: string, callBack: Function): Promise<void> => {
+    await GetCheckoutRoomNum(roomNum).then(res => {
+      if (res.code === 200) {
+        callBack(res.data)
+      }
+    })
+  }
+  const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise<void> => {
+    await GetRoomRtcToken(roomNum).then(res => {
+      if (res.code === 200) {
+        callBack(res.data)
+      }
+    })
+  }
+  const postRefresh = async (callBack: Function): Promise<void> => {
+    await PostRefresh(user.refresh_token).then(res => {
+      if (res.code === 200) {
+        storage.setItem('user', JSON.stringify(res.data))
+        callBack(res.data)
+      }
+    })
+  }
+  return (
+    <>
+      <Modal title="" open={joinRoomSettingModal} footer={null} centered width={'500px'} onCancel={() => setJoinRoomSettingModal(false)}>
+        <div className={styles.joinRoomSettingModal}>
+          <div>
+            <span>请输入会议号</span>
+            <input
+              type="text"
+              value={joinRoomSettingForm.roomNum}
+              maxLength={8}
+              onChange={(e) => {
+                const regex = /^[0-9]*$/;
+                if (regex.test(e.target.value)) {
+                  setJoinRoomSettingForm({
+                    ...joinRoomSettingForm,
+                    roomNum: e.target.value
+                  })
+                }
+              }}
+            />
+          </div>
+          <div>
+            <Avatar name={user.userName} />
+          </div>
+          <div>
+            <div>
+              {
+                joinRoomSettingForm.list.map((item, index) => {
+                  return <div key={index} onClick={() => {
+                    const list = [...joinRoomSettingForm.list]
+                    list[index].active = !list[index].active
+                    setJoinRoomSettingForm({
+                      ...joinRoomSettingForm,
+                      list
+                    })
+                  }}>
+                    <img src={item.active ? item.icon : item.iconActive} alt="" />
+                  </div>
+
+                })
+              }
+            </div>
+            <div>
+              <Button type="primary"
+                onClick={() => {
+                  if (!joinRoomSettingForm.roomNum) {
+                    message.error('请输入会议号！')
+                    return
+                  }
+                  isGetCheckoutRoomNum(joinRoomSettingForm.roomNum, (bool: boolean) => {
+                    if (bool) {
+                      getRoomRtcToken(joinRoomSettingForm.roomNum, (token: string) => {
+                        if (token) {
+                          postRefresh(() => {
+                            setJoinRoomSettingModal(false)
+                            GetRoomInfo(joinRoomSettingForm.roomNum).then(res => {
+                              if (res.code === 200) {
+                                navigate(`/meeting`, {
+                                  state: {
+                                    channelId: joinRoomSettingForm.roomNum,
+                                    token,
+                                    roomId: res.data.id,
+                                    roomName: res.data.roomName,
+                                  }
+                                })
+                              }
+                            })
+                          })
+                        }
+                      })
+                    } else {
+                      message.error('房间号不存在！')
+                    }
+                  })
+                }}
+                className='m-ant-btn'>
+                进入会议
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal >
+    </>
+  )
+})
+
+export default JoinSetting

src/page/Home/Index/index.module.scss

@@ -44,6 +44,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+
       >span {
         flex-shrink: 0;
         color: white;

src/page/Home/Index/index.tsx

@@ -1,15 +1,12 @@
 import styles from '@/page/Home/Index/index.module.scss'
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import Operation from '@/components/Operation';
-import { useNavigate } from 'react-router-dom';
 import { Button, Input, Modal, Pagination, Empty, message } from "antd";
-import { GetRoom, PostRomm, GetCheckoutRoomNum, GetRoomRtcToken, GetRoomInfo } from '@/api/Home/Index';
+import { GetRoom, PostRomm, GetCheckoutRoomNum } from '@/api/Home/Index';
 import ImageUrl from '@/utils/package/ImageUrl'
-import { PostRefresh } from '@/api/Login';
-import { storage } from '@/utils';
 import { RedoOutlined } from '@ant-design/icons';
+import JoinSetting from '@/components/JoinSetting';
 const Index: React.FC = () => {
-  const navigate = useNavigate();
   const [list, setList] = useState({
     data: [],
     total: 0,
@@ -21,13 +18,7 @@ const Index: React.FC = () => {
     roomName: "",
     roomNum: ""
   })
-  const [joinRoomModal, setJoinRoomModal] = useState(false)
+  const joinSettingRef = useRef<any>();
-  const [user, setUser] = useState<any>({});
-  const [joinRoomFrom, setJoinRoomFrom] = useState<string>('')
-  useEffect(() => {
-    let userInfo = JSON.parse(storage.getItem('user') as string)
-    setUser(userInfo)
-  }, []);
   useEffect(() => {
     let time = null as any
     if (time) {
@@ -69,21 +60,6 @@ const Index: React.FC = () => {
       }
     })
   }
-  const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise<void> => {
-    await GetRoomRtcToken(roomNum).then(res => {
-      if (res.code === 200) {
-        callBack(res.data)
-      }
-    })
-  }
-  const postRefresh = async (callBack: Function): Promise<void> => {
-    await PostRefresh(user.refresh_token).then(res => {
-      if (res.code === 200) {
-        storage.setItem('user', JSON.stringify(res.data))
-        callBack(res.data)
-      }
-    })
-  }
 
   return (
     <>
@@ -106,8 +82,7 @@ const Index: React.FC = () => {
             新建会议室
           </Button>
           <Button type="primary" onClick={() => {
-            setJoinRoomFrom('')
+            joinSettingRef.current.changeModal()
-            setJoinRoomModal(true)
           }}
             icon={<img src={ImageUrl.icon8} alt="" />}
             className={`${styles.indexBtnsJoin} drag`}>
@@ -148,20 +123,7 @@ const Index: React.FC = () => {
                       <Button type="primary"
                         iconPosition={'end'}
                         onClick={() => {
-                          postRefresh(() => {
+                          joinSettingRef.current.changeModal(item.roomNum)
-                            getRoomRtcToken(item.roomNum, (res: any) => {
-                              if (res) {
-                                navigate(`/meeting`, {
-                                  state: {
-                                    channelId: item.roomNum,
-                                    token: res,
-                                    roomId: item.id,
-                                    roomName: item.roomName,
-                                  }
-                                })
-                              }
-                            })
-                          })
                         }}
                         icon={<img src={ImageUrl.icon9} alt="" />}
                         className='m-ant-btn'>
@@ -269,60 +231,7 @@ const Index: React.FC = () => {
           </div>
         </div>
       </Modal>
-      <Modal title="加入会议室" open={joinRoomModal} footer={null} closable={false} centered width={'400px'}>
+      <JoinSetting ref={joinSettingRef} />
-        <div>
-          <div>
-            <Input
-              placeholder="请输入房间号"
-              style={{ marginBottom: '14px' }}
-              showCount
-              maxLength={8}
-              value={joinRoomFrom}
-              onChange={(e) => {
-                const regex = /^[0-9 ]*$/;
-                if (regex.test(e.target.value)) {
-                  setJoinRoomFrom(e.target.value)
-                }
-              }}
-            />
-          </div>
-          <div style={{
-            display: 'flex', justifyContent: 'center'
-          }}>
-            <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setJoinRoomModal(false)}>取消</Button>
-            <Button type="primary" className='m-ant-btn' onClick={() => {
-              if (!joinRoomFrom) {
-                return message.error('请输入房间号！')
-              }
-              postRefresh(() => {
-                isGetCheckoutRoomNum(joinRoomFrom, (bool: boolean) => {
-                  if (bool) {
-                    getRoomRtcToken(joinRoomFrom, (token: string) => {
-                      if (token) {
-                        setJoinRoomModal(false)
-                        GetRoomInfo(joinRoomFrom).then(res => {
-                          if (res.code === 200) {
-                            navigate(`/meeting`, {
-                              state: {
-                                channelId: joinRoomFrom,
-                                token,
-                                roomId: res.data.id,
-                                roomName: res.data.roomName,
-                              }
-                            })
-                          }
-                        })
-                      }
-                    })
-                  } else {
-                    message.error('房间号不存在！')
-                  }
-                })
-              })
-            }}>加入</Button>
-          </div>
-        </div>
-      </Modal>
     </>
   )
 }

src/utils/styles/main.css

@@ -16,6 +16,11 @@ img {
   display: block;
 }
 
+
+input {
+  outline: none;
+}
+
 #root {
   height: 100%;
   width: 100%;