搜索

src/page/Meeting/index.module.scss

@@ -256,6 +256,7 @@
 
           .active {
             border: 1px solid white;
+            box-sizing: border-box;
           }
 
           .meetingContentSwiperCardVdeio {

src/page/Meeting/index.tsx

@@ -113,6 +113,7 @@ const Meeting: React.FC = () => {
   const [currentEffective, setCurrentEffective] = useState(0)
   const [open, setOpen] = useState(false)
   const [meetingMode, setMeetingMode] = useState('')
+  const [userSearchValue, setUserSearchValue] = useState('')
   useEffect(() => {
     let time = null as any;
     if (isInit) {
@@ -352,7 +353,12 @@ const Meeting: React.FC = () => {
   const getRoomUser = async (): Promise<void> => {
     await GetRoomUser(state.channelId).then(res => {
       if (res.code === 200) {
-        setRoomUserList(res.data)
+        setRoomUserList(res.data.map((item: any) => {
+          return {
+            isShow: true,
+            ...item
+          }
+        }))
       }
     })
   }
@@ -532,11 +538,30 @@ const Meeting: React.FC = () => {
                           placeholder="请输入用户名"
                           className='drag'
                           prefix={<SearchOutlined style={{ color: 'white' }} />}
+                          value={userSearchValue}
+                          onChange={(e) => {
+                            setUserSearchValue(e.target.value)
+                            const newRoomUserList = [...roomUserList]
+                            newRoomUserList.forEach(row => {
+                              if (e.target.value) {
+                                if (row.userName.indexOf(e.target.value) !== -1) {
+                                  row.isShow = true;
+                                } else {
+                                  row.isShow = false;
+                                }
+                              } else {
+                                row.isShow = true;
+                              }
+                            });
+                            setRoomUserList(newRoomUserList)
+                          }}
                         />
                       </div>
                       <div className={styles.meetingUserListContent}>
-                        {roomUserList.map((item: any, index: number) =>
-                          <div key={index} className='drag'>
+                        {roomUserList.map((item: any, index: number) => {
+                          return (
+                            <>
+                              {item.isShow ? <div key={index} className='drag'>
                                 <div>
                                   <div><img src={ImageUrl.avatar} alt="" /></div>
                                   <span>
@@ -602,7 +627,10 @@ const Meeting: React.FC = () => {
                                     }}
                                   >踢出房间</Button>
                                 </div> : null}
-                          </div>
+                              </div> : null}
+                            </>
+                          )
+                        }
                         )}
                       </div>
                       <div className={`${styles.meetingUserListFooter} drag`}>