feat: 打开邮件详情

src/actions/EmailActions.js

@@ -1,5 +1,6 @@
 import { fetchJSON, postForm } from '@/utils/request';
 import { API_HOST } from '@/config';
+import testData from './test1.json';
 
 /**
  * 获取顾问签名
@@ -15,3 +16,20 @@ export const salesSignature = async (opisn, lgc = 1) => {
     return '';
   }
 };
+
+export const postSendEmail = async (body) => {
+  const formData = new FormData();
+  Object.keys(body).forEach(function (key) {
+    formData.append(key, body[key]);
+  });
+  const { errcode, result } = await postForm(`http://202.103.68.18:888/service-mail/sendmail`, formData);
+};
+
+export const getEmailDetailAction = async (param) => {
+  const { MailContent, MailInfo } = testData
+  return testData
+  // const { MailContent } = await fetchJSON(
+  //   `http://202.103.68.18:888/service-mail/getmail?mai_sn=5036841`
+  // );
+  // return MailContent;
+}

src/stores/OrderStore.js

@@ -101,9 +101,9 @@ export const useOrderStore = create((set, get) => ({
 }))
 
 export const OrderLabelDefaultOptions = [
-  { value: 240003, label: '重点' },
-  { value: 240002, label: '次重点' },
-  { value: 240001, label: '一般' }
+  { value: 240003, label: '重点', emoji: '❣️' },
+  { value: 240002, label: '次重点', emoji: '❗' },
+  { value: 240001, label: '一般', emoji: '' }
 ]
 
 export const OrderStatusDefaultOptions = [
@@ -111,7 +111,7 @@ export const OrderStatusDefaultOptions = [
   { value: 2, label: '报价中' },
   { value: 3, label: '以后联系' },
   { value: 4, label: '等待付订金' },
-  { value: 5, label: '成行' },
+  { value: 5, label: '成行', emoji: '💰' },
   { value: 6, label: '丢失' },
   { value: 7, label: '取消' },
   { value: 8, label: '未报价' }

src/views/Conversations/Online/Components/ChatListItem.jsx

@@ -22,6 +22,15 @@ const TagColorStyle_2 = (tag, outerStyle = false) => {
   return { color: `${color}`, ...outerStyleObj };
 };
 
+const OrderSignEmoji = ({ item }) => (
+  <>
+    {item.order_label_id === 240003 ? '❣️' : ''}
+    {item.order_label_id === 240002 ? '❗' : ''}
+    {item.order_state_id === 5 ? '💰' : ''}
+    {item.intour === 1 ? '👣' : ''}
+  </>
+)
+
 const NewTagForm = ({onSubmit,...props}) => {
   const [form] = Form.useForm();
   const [subLoding, setSubLoding] = useState(false);
@@ -262,10 +271,6 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
             letterItem={{ id: item.whatsapp_name || item.whatsapp_phone_number, letter: (item.whatsapp_name || item.whatsapp_phone_number).slice(0, 5) }}
             alt={item.whatsapp_name}
             title={(item.top_state === 1 ? '🔝' : '')
-              // + (item.order_label_id === 240003 ? '🔴' : '')
-              // + (item.order_label_id === 240002 ? '🟠' : '')
-              // + (item.order_state_id === 4 ? '🌹' : '')
-              // + (item.intour === 0 ? '🧳' : '')
               + (item.conversation_memo || item.whatsapp_name || item.whatsapp_phone_number)}
             // subtitle={item.coli_id}
             subtitle={
@@ -278,6 +283,7 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
                 {/* <span><ReadIcon />最后一条消息</span> */}
                 <span>{item?.last_message?.text?.body || ''}</span>
                 <div className='text-sm'>
+                  <OrderSignEmoji item={item} />
                   {(item?.tags || [])?.map((tag) => (
                     <Tag key={tag.label} style={{ ...TagColorStyle(tag.label) }} className='text-xs px-0.5 me-0.5'>
                       {tag.label}

src/views/Conversations/Online/Components/EmailDetail.jsx

@@ -1,47 +1,87 @@
-import { useState } from 'react';
-import { Button, Divider, Avatar } from 'antd';
-import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
-import { stringToColour } from '@/utils/commons';
-import EmailEditorPopup from '../Input/EmailEditorPopup';
-import DnDModal from '@/components/DndModal';
-import useStyleStore from '@/stores/StyleStore';
+import { useState, useEffect } from 'react'
+import { Button, Divider, Avatar } from 'antd'
+import { ReplyIcon, ShareForwardIcon } from '@/components/Icons'
+import { stringToColour } from '@/utils/commons'
+import EmailEditorPopup from '../Input/EmailEditorPopup'
+import DnDModal from '@/components/DndModal'
+import useStyleStore from '@/stores/StyleStore'
+import { getEmailDetailAction } from '@/actions/EmailActions'
 
 const TagColorStyle = (tag) => {
-  const color = stringToColour(tag);
-  return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` };
-};
+  const color = stringToColour(tag)
+  return {
+    color: `${color}`,
+    borderColor: `${color}66`,
+    backgroundColor: `${color}0D`,
+  }
+}
 
 const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
-  let { emailOrigin } = emailDetail;
-  emailOrigin = emailOrigin || {};
+  let { emailOrigin } = emailDetail
+  emailOrigin = emailOrigin || {}
   // const [open, setOpen] = useState(false);
-  const [initialPosition, setInitialPosition] = useState({});
-  const [initialSize, setInitialSize] = useState({});
+  const [initialPosition, setInitialPosition] = useState({})
+  const [initialSize, setInitialSize] = useState({})
   function onHandleMove(e) {
-    const { top, left, width, height } = e;
-    setInitialPosition({ top, left });
+    const { top, left, width, height } = e
+    setInitialPosition({ top, left })
   }
   function onHandleResize(e) {
-    const { top, left, width, height } = e;
-    setInitialPosition({ top, left });
-    setInitialSize({ width, height });
+    const { top, left, width, height } = e
+    setInitialPosition({ top, left })
+    setInitialSize({ width, height })
   }
 
-  const [action, setAction] = useState('');
+  const [action, setAction] = useState('')
 
-  const [openEmailEditor, setOpenEmailEditor] = useState(false);
-  const [fromEmail, setFromEmail] = useState('');
-  const [ReferEmailMsg, setReferEmailMsg] = useState('');
+  const [openEmailEditor, setOpenEmailEditor] = useState(false)
+  const [fromEmail, setFromEmail] = useState('')
+  const [ReferEmailMsg, setReferEmailMsg] = useState('')
   const onOpenEditor = (emailOrigin, action) => {
-    const { replyToEmail: email_addr, content } = emailOrigin;
-    setOpenEmailEditor(true);
-    setFromEmail(email_addr);
-    setReferEmailMsg(emailOrigin);
-    setAction(action);
-    setOpen(false);
-  };
+    const { replyToEmail: email_addr, content } = emailOrigin
+    setOpenEmailEditor(true)
+    setFromEmail(email_addr)
+    setReferEmailMsg(emailOrigin)
+    setAction(action)
+    setOpen(false)
+  }
+
+  const [mobile] = useStyleStore((state) => [state.mobile])
+
+  const [mailData, setMailData] = useState({})
+  const [mailInfo, setMailInfo] = useState({})
+  const getEmailDetail = async () => {
+    const data = await getEmailDetailAction()
+    const { MailContent, MailInfo } = data
+    setMailData(data)
+    setMailInfo((JSON.parse(MailInfo))[0]);
+  }
+
+  useEffect(() => {
+    getEmailDetail()
+
+    return () => {}
+  }, [emailDetail])
+
+  const ActionBtns = (props) => (
+    <div className={`flex items-center w-full ${props.className || ''}`}>
+      <Button
+        onClick={() => onOpenEditor(emailOrigin, 'reply')}
+        size='small'
+        type='text'
+        icon={<ReplyIcon className='text-indigo-500' />}>
+        回复
+      </Button>
+      <Button
+        onClick={() => onOpenEditor(emailOrigin, 'forward')}
+        size='small'
+        type='text'
+        icon={<ShareForwardIcon className='text-primary' />}>
+        转发
+      </Button>
+    </div>
+  )
 
-  const [mobile] = useStyleStore((state) => [state.mobile]);
   return (
     <>
       <DnDModal
@@ -51,28 +91,7 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
         initial={{ top: 74 }}
         onMove={onHandleMove}
         onResize={onHandleResize}
-        footer={
-          mobile ? (
-            <>
-              <div className='flex items-center w-full '>
-                <Button
-                  onClick={() => onOpenEditor(emailOrigin, 'reply')}
-                  size='small'
-                  type='text'
-                  icon={<ReplyIcon className='text-indigo-500' />}>
-                  回复
-                </Button>
-                <Button
-                  onClick={() => onOpenEditor(emailOrigin, 'forward')}
-                  size='small'
-                  type='text'
-                  icon={<ShareForwardIcon className='text-primary' />}>
-                  转发
-                </Button>
-              </div>
-            </>
-          ) : null
-        }>
+        footer={mobile ? <ActionBtns className='w-full' /> : null}>
         {/* email toolbar */}
         <div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
           {/* <div className='flex items-center justify-start '>
@@ -91,56 +110,42 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
               <div className='flex gap-2 mb-2 items-center'>
                 <Avatar
                   className=''
-                  style={TagColorStyle(emailOrigin.fromEmail)}>
-                  {(emailOrigin.fromName || '').substring(0, 1)}
+                  // style={TagColorStyle(emailOrigin.fromEmail)}>
+                  style={TagColorStyle(mailInfo.MAI_From)}>
+                  {(mailInfo.MAI_From || '').substring(0, 1)}
                 </Avatar>
                 <div className=' flex flex-col'>
                   <span className=' font-bold text-base'>
-                    {emailOrigin.fromName}
+                    {mailInfo.MAI_From}
                   </span>
                   <span className='text-neutral-500'>
-                    {emailOrigin.fromEmail}
-                  </span>
+                    {mailInfo.MAI_To}
+                    </span>
                 </div>
               </div>
               <div className='flex flex-col justify-start gap-1 items-end'>
-                <div className='flex items-center  '>
-                  <Button
-                    onClick={() => onOpenEditor(emailOrigin, 'reply')}
-                    size='small'
-                    type='text'
-                    icon={<ReplyIcon className='text-indigo-500' />}>
-                    回复
-                  </Button>
-                  <Button
-                    onClick={() => onOpenEditor(emailOrigin, 'forward')}
-                    size='small'
-                    type='text'
-                    icon={<ShareForwardIcon className='text-primary' />}>
-                    转发
-                  </Button>
-                </div>
+                <ActionBtns />
                 {/* <div>{emailDetail.dateText}</div> */}
                 <div className='text-xs '>{emailDetail.localDate}</div>
               </div>
             </div>
             <div className='text-sm'>
               <span className='text-neutral-500 pr-2'>收件人:</span>
-              {emailOrigin.toName}
+              {mailInfo.MAI_To}
               <span className='text-neutral-600'>
-                &nbsp;&nbsp;&lt;{emailOrigin.toEmail}&gt;
+                &nbsp;&nbsp;&lt;{mailInfo.MAI_To}&gt;
               </span>
             </div>
-            {emailOrigin.cc && (
+            {mailInfo.cc && (
               <div className='text-sm'>
                 <span className='text-neutral-500 pr-2'>抄送:</span>
-                {emailOrigin.cc}
+                {mailInfo.cc}
               </div>
             )}
-            {emailOrigin.bcc && (
+            {mailInfo.bcc && (
               <div className='text-sm'>
                 <span className='text-neutral-500 pr-2'>密送:</span>
-                {emailOrigin.bcc}
+                {mailInfo.bcc}
               </div>
             )}
             {/* <div className='text-sm'>
@@ -151,7 +156,8 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
             {/* <div className='mt-2'>{emailOrigin.body}</div> */}
             <div
               className='mt-2'
-              dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div>
+              // mailData
+              dangerouslySetInnerHTML={{ __html: mailData.MailContent }}></div>
             {/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
           </div>
         </div>
@@ -167,5 +173,5 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
       />
     </>
   )
-};
-export default EmailDetail;
+}
+export default EmailDetail