diff --git a/src/components/JoinMeetingModal/index.tsx b/src/components/JoinMeetingModal/index.tsx index ca801ba..d8edaae 100644 --- a/src/components/JoinMeetingModal/index.tsx +++ b/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(); const [isJoinMeetingModal, setIsJoinMeetingModal] = useState(false); const [info, setInfo] = useState(''); - const isGetCheckoutRoomNum = async (roomNum: string, callBack: Function): Promise => { - await GetCheckoutRoomNum(roomNum).then(res => { - if (res.code === 200) { - callBack(res.data) - } - }) - } - const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise => { - await GetRoomRtcToken(roomNum).then(res => { - if (res.code === 200) { - callBack(res.data) - } - }) - } return ( <> { 拒绝
{ - if (location.hash.indexOf('/meeting') !== -1) { + if (location.hash.indexOf('/meeting') === 1) { setIsJoinMeetingModal(false) return message.error('您已经在房间中了，请退出房间重试。') } - isGetCheckoutRoomNum(info.roomNum, (bool: boolean) => { - 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('房间号不存在！') - } - }) + joinSettingRef.current.changeModal(info.roomNum) }}> 接听 @@ -87,6 +52,7 @@ const JoinMeetingModal = forwardRef((props: any, ref: any) => {
+ ) }) diff --git a/src/components/JoinSetting/index.module.scss b/src/components/JoinSetting/index.module.scss new file mode 100644 index 0000000..140ca1f --- /dev/null +++ b/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) {} + } +} \ No newline at end of file diff --git a/src/components/JoinSetting/index.tsx b/src/components/JoinSetting/index.tsx new file mode 100644 index 0000000..a0930c9 --- /dev/null +++ b/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({}); + 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 => { + await GetCheckoutRoomNum(roomNum).then(res => { + if (res.code === 200) { + callBack(res.data) + } + }) + } + const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise => { + await GetRoomRtcToken(roomNum).then(res => { + if (res.code === 200) { + callBack(res.data) + } + }) + } + const postRefresh = async (callBack: Function): Promise => { + await PostRefresh(user.refresh_token).then(res => { + if (res.code === 200) { + storage.setItem('user', JSON.stringify(res.data)) + callBack(res.data) + } + }) + } + return ( + <> + setJoinRoomSettingModal(false)}> +
+
+ 请输入会议号 + { + const regex = /^[0-9]*$/; + if (regex.test(e.target.value)) { + setJoinRoomSettingForm({ + ...joinRoomSettingForm, + roomNum: e.target.value + }) + } + }} + /> +
+
+ +
+
+
+ { + joinRoomSettingForm.list.map((item, index) => { + return
{ + const list = [...joinRoomSettingForm.list] + list[index].active = !list[index].active + setJoinRoomSettingForm({ + ...joinRoomSettingForm, + list + }) + }}> + +
+ + }) + } +
+
+ +
+
+
+ + + ) +}) + +export default JoinSetting \ No newline at end of file diff --git a/src/page/Home/Index/index.module.scss b/src/page/Home/Index/index.module.scss index 4ffacf4..98bb1db 100644 --- a/src/page/Home/Index/index.module.scss +++ b/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; diff --git a/src/page/Home/Index/index.tsx b/src/page/Home/Index/index.tsx index c53c0a5..e302169 100644 --- a/src/page/Home/Index/index.tsx +++ b/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 [user, setUser] = useState({}); - const [joinRoomFrom, setJoinRoomFrom] = useState('') - useEffect(() => { - let userInfo = JSON.parse(storage.getItem('user') as string) - setUser(userInfo) - }, []); + const joinSettingRef = useRef(); useEffect(() => { let time = null as any if (time) { @@ -69,21 +60,6 @@ const Index: React.FC = () => { } }) } - const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise => { - await GetRoomRtcToken(roomNum).then(res => { - if (res.code === 200) { - callBack(res.data) - } - }) - } - const postRefresh = async (callBack: Function): Promise => { - 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 = () => { 新建会议室 - - - - + ) } diff --git a/src/utils/styles/main.css b/src/utils/styles/main.css index fc5348e..f59645d 100644 --- a/src/utils/styles/main.css +++ b/src/utils/styles/main.css @@ -16,6 +16,11 @@ img { display: block; } + +input { + outline: none; +} + #root { height: 100%; width: 100%;