开发: 添加小屏幕css[少], 聊天记录投票. 客户中心修改, 工作台支持小屏

src/pages/ChatLogs/components/ChatVote.tsx

@@ -1,15 +1,80 @@
+import { SignalFilled } 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 ChatVote: React.FC<IChatItem> = (props) => {
-  const votetype: any = { 101: '发起投票', 102: '参与投票' };
+  const votetype: any = { '101': '发起投票', '102': '参与投票' };
+  const [open, setOpen] = useState(false);
+  const [voteitem, setVoteitem] = useState([]);
+
+  useEffect(() => {
+    try {
+      const msg = JSON.parse(props.chat?.content as string);
+      setVoteitem(msg?.voteitem);
+    } catch (e) {}
+  }, [props.chat]);
 
   function content() {
+    try {
+      const msg = JSON.parse(props.chat?.content as string);
+
+      return (
+        <>
+          <div
+            style={{ display: 'flex', color: '#000', flexDirection: 'column', cursor: 'pointer' }}
+            onClick={() => setOpen(true)}
+          >
+            <div style={{ wordBreak: 'break-all', fontWeight: 'bold' }}>{msg?.votetitle}</div>
+            <div style={{ wordBreak: 'break-all' }}>
+              {Array.isArray(msg?.voteitem)
+                ? [0, 1, 2].map((item) => {
+                    return msg?.voteitem[item] ? (
+                      <div className={styles.voteitem}>{msg?.voteitem[item]}</div>
+                    ) : (
+                      <></>
+                    );
+                  })
+                : null}
+            </div>
+            <div
+              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
+            >
+              <SignalFilled style={{ color: '#F0B40E' }} /> 投票 [
+              {votetype[msg?.votetype as string]}]
+            </div>
+          </div>
+          <Modal
+            open={open}
+            title={msg?.votetitle}
+            centered
+            onCancel={() => {
+              setOpen(false);
+            }}
+            footer={false}
+          >
+            <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
+              {Array.isArray(voteitem)
+                ? voteitem.map((item) => {
+                    return (
+                      <div key={item} className={styles.voteitem}>
+                        {item}
+                      </div>
+                    );
+                  })
+                : null}
+            </div>
+          </Modal>
+        </>
+      );
+    } catch (e) {}
+
     return (
       <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
-        <div style={{ wordBreak: 'break-all' }}>{props.chat?.votetitle}</div>
-        <div style={{ wordBreak: 'break-all' }}>{props.chat?.voteitem}</div>
+        <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
         <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
-          投票 [{votetype[props.chat?.votetype as string]}]
+          <SignalFilled style={{ color: '#F0B40E' }} /> 投票
         </div>
       </div>
     );