From d67758d3611e8f19d4a8a384f27e857f3b248199 Mon Sep 17 00:00:00 2001 From: zhengw <247276359@qq.com> Date: Wed, 12 Apr 2023 10:10:16 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91:=20=E8=81=8A=E5=A4=A9?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ChatLogs/components/ChatBar.tsx | 9 ++ src/pages/ChatLogs/components/ChatEmotion.tsx | 13 ++- src/pages/ChatLogs/components/ChatImage.tsx | 12 ++- .../components/ChatMeetingVoiceCall.tsx | 50 ++++++++++ src/pages/ChatLogs/components/ChatRecord.tsx | 97 +++++++++++++++++-- src/pages/ChatLogs/components/ChatTime.tsx | 6 +- src/pages/ChatLogs/components/ChatVideo.tsx | 63 +++++++++++- src/pages/ChatLogs/components/ChatVoice.tsx | 54 ++++++++--- .../ChatLogs/components/ChatVoiptext.tsx | 50 ++++++++++ src/pages/ChatLogs/components/ChatWeapp.tsx | 54 +++++++++++ .../ChatLogs/components/index.module.scss | 9 +- src/pages/ChatLogs/index.tsx | 40 ++++---- src/services/utils.ts | 11 +++ 13 files changed, 416 insertions(+), 52 deletions(-) create mode 100644 src/pages/ChatLogs/components/ChatMeetingVoiceCall.tsx create mode 100644 src/pages/ChatLogs/components/ChatVoiptext.tsx create mode 100644 src/pages/ChatLogs/components/ChatWeapp.tsx diff --git a/src/pages/ChatLogs/components/ChatBar.tsx b/src/pages/ChatLogs/components/ChatBar.tsx index 54d33fc..1354b96 100644 --- a/src/pages/ChatLogs/components/ChatBar.tsx +++ b/src/pages/ChatLogs/components/ChatBar.tsx @@ -6,12 +6,15 @@ import { ChatFile } from './ChatFile'; import { ChatImage } from './ChatImage'; import { ChatLink } from './ChatLink'; import { ChatLocation } from './ChatLocation'; +import { ChatMeetingVoiceCall } from './ChatMeetingVoiceCall'; import { ChatRecord } from './ChatRecord'; import { ChatRedpacket } from './ChatRedpacket'; import { ChatRevoke } from './ChatRevoke'; import { ChatText } from './ChatText'; import { ChatVideo } from './ChatVideo'; import { ChatVoice } from './ChatVoice'; +import { ChatVoiptext } from './ChatVoiptext'; +import { ChatWeapp } from './ChatWeapp'; export const ChatBar: React.FC = (props) => { const { from, to, chat } = props; @@ -37,6 +40,12 @@ export const ChatBar: React.FC = (props) => { return ; } else if (chat?.msg_type == 'chatrecord') { return ; + } else if (chat?.msg_type == 'meeting_voice_call') { + return ; + } else if (chat?.msg_type == 'voiptext') { + return ; + } else if (chat?.msg_type == 'weapp') { + return ; } else if (chat?.msg_type == 'revoke') { return ; } else if (chat?.msg_type == 'agree' || chat?.msg_type == 'disagree') { diff --git a/src/pages/ChatLogs/components/ChatEmotion.tsx b/src/pages/ChatLogs/components/ChatEmotion.tsx index 2e8373d..b660935 100644 --- a/src/pages/ChatLogs/components/ChatEmotion.tsx +++ b/src/pages/ChatLogs/components/ChatEmotion.tsx @@ -1,15 +1,18 @@ -import React from 'react'; +import { Image } from 'antd'; +import React, { useState } from 'react'; import { IChatItem } from '../ChatLogsType'; import styles from './index.module.scss'; // 表情 export const ChatEmotion: React.FC = (props) => { + const [visible, setVisible] = useState(false); function content() { try { const msg = JSON.parse(props.chat?.content as string); return (
= (props) => { justifyContent: 'center', }} > - { + setVisible(value); + }, + }} src={`/api/${msg.path}`} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} alt="" diff --git a/src/pages/ChatLogs/components/ChatImage.tsx b/src/pages/ChatLogs/components/ChatImage.tsx index 70c7bba..52d1532 100644 --- a/src/pages/ChatLogs/components/ChatImage.tsx +++ b/src/pages/ChatLogs/components/ChatImage.tsx @@ -1,13 +1,17 @@ +import { Image } from 'antd'; +import { useState } from 'react'; import { IChatItem } from '../ChatLogsType'; import styles from './index.module.scss'; export const ChatImage: React.FC = (props) => { + const [visible, setVisible] = useState(false); function content() { try { const msg = JSON.parse(props.chat?.content as string); return (
= (props) => { justifyContent: 'center', }} > - { + setVisible(value); + }, + }} src={`/api/${msg.path}`} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} alt="" diff --git a/src/pages/ChatLogs/components/ChatMeetingVoiceCall.tsx b/src/pages/ChatLogs/components/ChatMeetingVoiceCall.tsx new file mode 100644 index 0000000..cae7cdf --- /dev/null +++ b/src/pages/ChatLogs/components/ChatMeetingVoiceCall.tsx @@ -0,0 +1,50 @@ +import { IChatItem } from '../ChatLogsType'; +import styles from './index.module.scss'; + +export const ChatMeetingVoiceCall: React.FC = (props) => { + function content() { + try { + const msg = JSON.parse(props.chat?.content as string); + // todo console.log(msg); + return ( + +
// TODO 音频存档
+ + ); + } catch (_e) { + return ( +
+
{props.chat?.content}
+
+ ); + } + } + + return ( + <> + {props.from?.user_id == props.chat?.msg_from ? ( +
+
+
{props.from?.name}
+
{content()}
+
+
{props.from?.name[0]}
+
+ ) : ( +
+
+ +
+
+
{props.to?.cust_info.name}
+
{content()}
+
+
+ )} + + ); +}; diff --git a/src/pages/ChatLogs/components/ChatRecord.tsx b/src/pages/ChatLogs/components/ChatRecord.tsx index e0ed823..f00e7f7 100644 --- a/src/pages/ChatLogs/components/ChatRecord.tsx +++ b/src/pages/ChatLogs/components/ChatRecord.tsx @@ -1,26 +1,79 @@ -import { FileTextFilled } from '@ant-design/icons'; +import { Modal } from 'antd'; +import { useEffect, useState } from 'react'; import { IChatItem } from '../ChatLogsType'; import styles from './index.module.scss'; export const ChatRecord: React.FC = (props) => { + const [visible, setVisible] = useState(false); + + function chatRecordContent(data: any) { + // todo console.log(msg); + + if (data.type == 'ChatRecordText') { + const content = JSON.parse(data.content); + return
{content.content}
; + } else if (data.type == 'ChatRecordImage') { + return
[图片]
; + } else if (data.type == 'ChatRecordFile') { + return
[文件]
; + } else if (data.type == 'ChatRecordVideo') { + return
[视频]
; + } else if (data.type == 'ChatRecordLink') { + return
[链接]
; + } else if (data.type == 'ChatRecordLocation') { + return
[位置]
; + } else if (data.type == 'ChatRecordMixed') { + return
[混合信息]
; + } + return
[未匹配到类型信息]
; + } + + const [record, setRecord] = useState(null); + + useEffect(() => { + try { + const msg = JSON.parse(props.chat?.content as string); + setRecord(msg); + } catch (e) {} + }, [props.chat]); + function content() { try { const msg = JSON.parse(props.chat?.content as string); + // setRecord(msg); + console.log(msg); return ( - { + setVisible(true); + }} > -
{msg.file_name}
- - +
{msg.title}
+ {msg.item[0] ? ( +
{chatRecordContent(msg.item[0])}
+ ) : null} + {msg.item[1] ? ( +
{chatRecordContent(msg.item[1])}
+ ) : null} + {msg.item[2] ? ( +
{chatRecordContent(msg.item[2])}
+ ) : null} +
+ 聊天记录 +
+
); } catch (_e) { return (
{props.chat?.content}
-
); } @@ -28,6 +81,32 @@ export const ChatRecord: React.FC = (props) => { return ( <> + { + setVisible(false); + }} + > +
+ {record ? ( +
+ {record.item.map((item: any) => { + console.log(item); + return ( +
+ {chatRecordContent(item)} +
+ ); + })} +
+ ) : null} +
+ {props.from?.user_id == props.chat?.msg_from ? (
diff --git a/src/pages/ChatLogs/components/ChatTime.tsx b/src/pages/ChatLogs/components/ChatTime.tsx index 5892ebf..ceb4931 100644 --- a/src/pages/ChatLogs/components/ChatTime.tsx +++ b/src/pages/ChatLogs/components/ChatTime.tsx @@ -16,9 +16,9 @@ export const ChatTime: React.FC = (props) => { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); const dayDiff = - (Date.parse( + (new Date( `${now.getFullYear()}-${padWith(now.getMonth() + 1)}-${padWith(now.getDate())} 00:00:00`, - ) - + ).getTime() - new Date(props.msgtime).getTime()) / (24 * 60 * 60 * 1000) + 1; @@ -58,7 +58,7 @@ export const ChatTime: React.FC = (props) => { }; return ( -
+
= (props) => { + const [open, setOpen] = useState(false); + const videoRef = useRef(); + function playLen(v: number) { const len = Number(v) || 0; if (len > 60) { @@ -19,10 +24,58 @@ export const ChatVideo: React.FC = (props) => { const msg = JSON.parse(props.chat?.content as string); // console.log(msg); return ( - - - {playLen(msg.play_length)} - + <> +
{ + setOpen(true); + videoRef.current.play().catch((error) => { + console.log(error); + }); + }} + > + + {playLen(msg.play_length)} +
+
{ + setOpen(false); + videoRef.current.pause(); + }} + > + + +
+ ); } catch (_e) { return ( diff --git a/src/pages/ChatLogs/components/ChatVoice.tsx b/src/pages/ChatLogs/components/ChatVoice.tsx index b4113c6..9e30ead 100644 --- a/src/pages/ChatLogs/components/ChatVoice.tsx +++ b/src/pages/ChatLogs/components/ChatVoice.tsx @@ -1,24 +1,56 @@ import { FileTextFilled } from '@ant-design/icons'; +import { useRef, useState } from 'react'; import { IChatItem } from '../ChatLogsType'; import styles from './index.module.scss'; export const ChatVoice: React.FC = (props) => { + const [open, setOpen] = useState(false); + const audioRef = useRef(); + function content() { try { const msg = JSON.parse(props.chat?.content as string); return ( - - - {msg.play_length}" - - - - - +
+
{ + const audios = document.querySelectorAll('audio'); + if (audios) { + audios.forEach((el) => { + el.pause(); + }); + } + audioRef.current.play().catch((error: any) => { + console.log(error); + }); + setOpen(true); + }} + > + + {msg.play_length}" + + + + +
+ +
); } catch (_e) { return ( diff --git a/src/pages/ChatLogs/components/ChatVoiptext.tsx b/src/pages/ChatLogs/components/ChatVoiptext.tsx new file mode 100644 index 0000000..372c193 --- /dev/null +++ b/src/pages/ChatLogs/components/ChatVoiptext.tsx @@ -0,0 +1,50 @@ +import { durationFormat } from '@/services/utils'; +import { IChatItem } from '../ChatLogsType'; +import styles from './index.module.scss'; + +export const ChatVoiptext: React.FC = (props) => { + function content() { + try { + // todo /// + const msg = JSON.parse(props.chat?.content as string); + // console.log(msg); + return ( +
+
+ 音视频通话 {durationFormat(msg.callduration)} +
+
+ ); + } catch (_e) { + return ( +
+
{props.chat?.content}
+
+ ); + } + } + + return ( + <> + {props.from?.user_id == props.chat?.msg_from ? ( +
+
+
{props.from?.name}
+
{content()}
+
+
{props.from?.name[0]}
+
+ ) : ( +
+
+ +
+
+
{props.to?.cust_info.name}
+
{content()}
+
+
+ )} + + ); +}; diff --git a/src/pages/ChatLogs/components/ChatWeapp.tsx b/src/pages/ChatLogs/components/ChatWeapp.tsx new file mode 100644 index 0000000..47e8be7 --- /dev/null +++ b/src/pages/ChatLogs/components/ChatWeapp.tsx @@ -0,0 +1,54 @@ +import { FileTextFilled } from '@ant-design/icons'; +import { IChatItem } from '../ChatLogsType'; +import styles from './index.module.scss'; + +export const ChatWeapp: React.FC = (props) => { + function content() { + try { + const msg = JSON.parse(props.chat?.content as string); + console.log(msg); + + return ( + +
{msg.file_name}
+ + + ); + } catch (_e) { + return ( +
+
{props.chat?.content}
+ +
+ ); + } + } + + return ( + <> + {props.from?.user_id == props.chat?.msg_from ? ( +
+
+
{props.from?.name}
+
{content()}
+
+
{props.from?.name[0]}
+
+ ) : ( +
+
+ +
+
+
{props.to?.cust_info.name}
+
{content()}
+
+
+ )} + + ); +}; diff --git a/src/pages/ChatLogs/components/index.module.scss b/src/pages/ChatLogs/components/index.module.scss index c8f0a08..9281391 100644 --- a/src/pages/ChatLogs/components/index.module.scss +++ b/src/pages/ChatLogs/components/index.module.scss @@ -12,7 +12,6 @@ } .chatAvatar { - flex-shrink: 0; width: 34px; height: 34px; @@ -109,3 +108,11 @@ color: #fff; } } + +.imgPreview { + & > div { + display: flex; + justify-content: center; + align-items: center; + } +} diff --git a/src/pages/ChatLogs/index.tsx b/src/pages/ChatLogs/index.tsx index dad0950..a2bb889 100644 --- a/src/pages/ChatLogs/index.tsx +++ b/src/pages/ChatLogs/index.tsx @@ -124,9 +124,9 @@ const ChatLogs: React.FC = () => { if (res.err_code == 0) { if (Array.isArray(res.data)) { if (param.curr_page == 1) { - setChatLogs([...res.data, { curr_page: param.curr_page }]); + setChatLogs([...res.data.reverse(), { curr_page: param.curr_page }]); } else { - setChatLogs([...res.data, { curr_page: param.curr_page }, ...chatLogs]); + setChatLogs([...res.data.reverse(), { curr_page: param.curr_page }, ...chatLogs]); } } } @@ -270,28 +270,28 @@ const ChatLogs: React.FC = () => { >
); } else { - if (timeDiffRef.current == '') { - timeDiffRef.current = item.msg_time; - timeShowRef.current = false; - } else { - if ( - Date.parse(item.msg_time) - Date.parse(timeDiffRef.current) > - 5 * 60 * 1000 - ) { - timeDiffRef.current = item.msg_time; - timeShowRef.current = true; - } else { - timeShowRef.current = false; - } - } + // if (timeDiffRef.current == '') { + // timeDiffRef.current = item.msg_time; + // timeShowRef.current = false; + // } else { + // if ( + // new Date(item.msg_time).getTime() - new Date(timeDiffRef.current).getTime() > + // 5 * 60 * 1000 + // ) { + // timeDiffRef.current = item.msg_time; + // timeShowRef.current = true; + // } else { + // timeShowRef.current = false; + // } + // } - if (i == 0) { - timeShowRef.current = true; - } + // if (i == 0) { + // timeShowRef.current = true; + // } return (
- {timeShowRef.current ? : null} +
); diff --git a/src/services/utils.ts b/src/services/utils.ts index 2d4abb2..df2181b 100644 --- a/src/services/utils.ts +++ b/src/services/utils.ts @@ -35,3 +35,14 @@ export const notificationError = (message: IError) => { console.log('window.NotificationCF未绑定antd的notification'); } }; + +export const durationFormat = (v: number) => { + const len = Number(v) || 0; + if (len > 60) { + return `${Math.floor(len / 60) + .toString() + .padStart(2, '0')}:${(len % 60).toString().padStart(2, '0')}`; + } else { + return `00:${len.toString().padStart(2, '0')}`; + } +};