scrm.antd/src/pages/ChatLogs/components/ChatRedpacket.tsx

import { RedEnvelopeFilled } from '@ant-design/icons';
import { IChatItem } from '../ChatLogsType';

export const ChatRedpacket: React.FC<IChatItem> = (props) => {
  const type: any = {
    1: '普通红包',
    2: '拼手气群红包',
    3: '激励群红包',
  };
  function content() {
    try {
      const msg = JSON.parse(props.chat?.content as string);
      return (
        <div>
          <div style={{ display: 'flex' }}>
            <RedEnvelopeFilled
              style={{ fontSize: 40, color: 'red', flexShrink: 0, paddingRight: 8 }}
            />
            <div>
              <div style={{ wordBreak: 'break-all' }}>{msg.wish}</div>
              <div style={{ wordBreak: 'break-all' }}>
                {msg.totalcnt}个，{(msg.totalamount / 100).toFixed(2)}元
              </div>
            </div>
          </div>
          <div style={{ borderTop: '1px solid #ddd', marginTop: 8, paddingTop: 8, color: '#999' }}>
            {type[msg.type]}
          </div>
        </div>
      );
    } catch (_e) {
      return (
        <div>
          <div style={{ display: 'flex' }}>
            <RedEnvelopeFilled
              style={{ fontSize: 40, color: 'red', flexShrink: 0, paddingRight: 8 }}
            />
            <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
          </div>
          <div style={{ borderTop: '1px solid #ddd', marginTop: 8, paddingTop: 8, color: '#999' }}>
            红包
          </div>
        </div>
      );
    }
  }

  return <>{content()}</>;
};