邀请

src/App.tsx

@@ -1,5 +1,5 @@
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import '@/utils/styles/App.scss'
 import { Route, Routes, useNavigate, Navigate } from 'react-router-dom';
 import Home from '@/page/Home/index'
@@ -11,9 +11,11 @@ import NotFound from '@/page/NotFound/index'
 import { storage } from '@/utils'
 import { Spin } from "antd";
 import { onSignalr, offSignalr } from "@/utils/package/signalr";
+import JoinMeetingModal from "./components/JoinMeetingModal";
 
 const App: React.FC = () => {
   const navigate = useNavigate();
+  const joinMeetingModalRef = useRef<any>();
   const [_windowSize, setWindowSize] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
@@ -66,6 +68,7 @@ const App: React.FC = () => {
             body: item.roomName,
             name: item.InviterName,
           })
+          joinMeetingModalRef.current.changeModal(item)
           break;
       }
     })
@@ -106,6 +109,7 @@ const App: React.FC = () => {
         <Route path='*' element={<NotFound />} />
       </Routes>
       <Spin spinning={spinning} fullscreen />
+      <JoinMeetingModal ref={joinMeetingModalRef} />
     </>
   )
 }

src/components/InvitingPersonnelModal/index.tsx

@@ -165,6 +165,7 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
             <Button type="primary" className='m-ant-btn' onClick={() => {
               if (checkedList.length) {
                 PostRoomInvite(state.roomId, checkedList.map((item: any) => item.id))
+                setIsInvitingPersonnelModal(false)
               } else {
                 message.error('请选择人员')
               }

src/components/JoinMeetingModal/index.module.scss

@@ -0,0 +1,55 @@
+.joinMeetingModal {
+  >div:nth-child(1) {
+    display: flex;
+    align-items: center;
+
+    >div:nth-child(1) {
+      width: 44px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+
+      >img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    >div:nth-child(2) {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+
+      >span:nth-child(1) {
+        color: #989696;
+        font-size: 16px;
+      }
+
+      >span:nth-child(2) {
+        color: white;
+        margin-top: 4px;
+        font-size: 16px;
+      }
+    }
+  }
+
+  >div:nth-child(2) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+
+    >div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+
+      >span {
+        color: white;
+        font-size: 16px;
+      }
+    }
+  }
+}

src/components/JoinMeetingModal/index.tsx

@@ -0,0 +1,88 @@
+import { GetCheckoutRoomNum, GetRoomInfo, GetRoomRtcToken } from '@/api/Home/Index';
+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 { useNavigate } from 'react-router-dom';
+const JoinMeetingModal = forwardRef((props: any, ref: any) => {
+  useImperativeHandle(ref, () => ({
+    changeModal: (item: any) => {
+      setInfo(item)
+      setIsJoinMeetingModal(true)
+    }
+  }))
+  const navigate = useNavigate();
+  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
+        title=""
+        open={isJoinMeetingModal}
+        footer={null}
+        onCancel={() => setIsJoinMeetingModal(false)}
+        centered
+        width={'300px'}
+      >
+        <div className={styles.joinMeetingModal}>
+          <div>
+            <div><img src={ImageUrl.avatar} alt="" /></div>
+            <div>
+              <span>{info.InviterName} 邀请你加入</span>
+              <span>{info.roomName}</span>
+            </div>
+          </div>
+          <div>
+            <div style={{ marginRight: '40px' }} onClick={() => setIsJoinMeetingModal(false)}>
+              <img src={ImageUrl.icon38} alt="" />
+              <span>拒绝</span>
+            </div>
+            <div onClick={() => {
+              isGetCheckoutRoomNum(info.roomNum, (bool: boolean) => {
+                if (bool) {
+                  getRoomRtcToken(info.roomNum, (token: string) => {
+                    if (token) {
+                      GetRoomInfo(info.roomNum).then(res => {
+                        if (res.code === 200) {
+                          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>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+})
+
+export default JoinMeetingModal

src/utils/package/imageUrl.ts

@@ -44,6 +44,8 @@ import icon33 from '@/assets/icon33.png'
 import icon34 from '@/assets/icon34.png'
 import icon35 from '@/assets/icon35.png'
 import icon36 from '@/assets/icon36.png'
+import icon37 from '@/assets/icon37.png'
+import icon38 from '@/assets/icon38.png'
 export default {
   avatar,
   error,
@@ -91,4 +93,6 @@ export default {
   icon34,
   icon35,
   icon36,
+  icon37,
+  icon38,
 }