feat: 会话窗口
Lei OT
1 year ago
parent
5d83ce7662
commit
807edcb74f
@ -1,30 +1,48 @@
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { List, Avatar } from 'antd';
|
||||
import { List, Avatar, Flex } from 'antd';
|
||||
import { useConversationContext } from '@/stores/ConversationContext';
|
||||
|
||||
import { ChatItem, ChatList } from 'react-chat-elements';
|
||||
/**
|
||||
* []
|
||||
*/
|
||||
const Conversations = observer(({ conversations }) => {
|
||||
const { switchConversation, conversationsList } = useConversationContext()
|
||||
const { switchConversation, conversationsList } = useConversationContext();
|
||||
console.log(conversationsList);
|
||||
const [chatlist, setChatlist] = useState([]);
|
||||
useEffect(() => {
|
||||
setChatlist(
|
||||
(conversationsList || []).map((item) => ({
|
||||
...item,
|
||||
avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.name}`,
|
||||
alt: item.name,
|
||||
title: item.name,
|
||||
subtitle: item.lastMessage,
|
||||
date: item.last_time,
|
||||
unread: item.new_msgs,
|
||||
}))
|
||||
);
|
||||
|
||||
return () => {};
|
||||
}, [conversationsList]);
|
||||
|
||||
return (
|
||||
<List
|
||||
dataSource={conversationsList || []}
|
||||
renderItem={(item, ii) => (
|
||||
<List.Item onClick={() => switchConversation(item)} actions={[<a key='list-loadmore-edit'>mark</a>]}>
|
||||
<List.Item.Meta
|
||||
avatar={
|
||||
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.name}`} >
|
||||
{item.name}
|
||||
</Avatar>
|
||||
}
|
||||
title={item.name}
|
||||
// description='{最近的消息}'
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<>
|
||||
<ChatList className='chat-list' dataSource={chatlist} onClick={(item) => switchConversation(item)} />
|
||||
{/* <List
|
||||
dataSource={conversationsList || []}
|
||||
renderItem={(item, ii) => (
|
||||
// actions={[<a key='list-loadmore-edit'>mark</a>]}
|
||||
<List.Item onClick={() => switchConversation(item)}>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.name}`}>{item.name}</Avatar>}
|
||||
title={item.name}
|
||||
// description='{最近的消息}'
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
});
|
||||
export default Conversations;
|
||||
|
||||
@ -1,7 +1,69 @@
|
||||
import { observer } from 'mobx-react';
|
||||
import { Card } from 'antd';
|
||||
import { Card, Flex, Avatar, Typography, Radio, Button } from 'antd';
|
||||
import { useAuthContext } from '@/stores/AuthContext.js';
|
||||
import { useConversationContext } from '@/stores/ConversationContext';
|
||||
import { useGetJson } from '@/hooks/userFetch';
|
||||
|
||||
const orderTags = [
|
||||
{ value: 'potential', label: '潜力' },
|
||||
{ value: 'important', label: '重点' },
|
||||
{ label: '休眠', value: 'snooze' },
|
||||
];
|
||||
|
||||
const orderStatus = [
|
||||
{ value: 'pending', label: '报价中' },
|
||||
// { value: 'in-progress', label: '处理中' },
|
||||
{ value: 'lost', label: '丢失' },
|
||||
{ value: 'later', label: '以后联系' },
|
||||
];
|
||||
|
||||
const { Meta } = Card;
|
||||
|
||||
const CustomerProfile = observer(({ customer }) => {
|
||||
return <Card bordered={false} title={customer.name}>{/* other profile details */}</Card>;
|
||||
const { errors } = useConversationContext();
|
||||
const { loginUser: currentUser } = useAuthContext();
|
||||
const orderInfo = useGetJson('http://127.0.0.1:4523/m2/3888351-0-default/144062941');
|
||||
const { quotes, contact, last_contact, ...order } = orderInfo || {};
|
||||
|
||||
return (
|
||||
<div className=' divide-x-0 divide-y divide-dotted divide-slate-400/[.24]'>
|
||||
<Card
|
||||
bordered={false}
|
||||
title={order?.order_no}
|
||||
extra={<Radio.Group size={'small'} options={orderTags} value={'important'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}>
|
||||
<Meta
|
||||
title={<Radio.Group size={'small'} options={orderStatus} value={'pending'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}
|
||||
description={' '}
|
||||
/>
|
||||
<Flex gap={16}>
|
||||
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${contact?.name}`} />
|
||||
<Flex vertical={true} justify='space-between'>
|
||||
<Typography.Text strong>{contact?.name}</Typography.Text>
|
||||
<div>
|
||||
{contact?.phone} <span>{contact?.email}</span>{' '}
|
||||
</div>
|
||||
{/* <div>{order?.order_no}</div> */}
|
||||
<div>
|
||||
{order?.location} <span>{order?.local_datetime}</span>
|
||||
</div>
|
||||
<div></div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Flex vertical={true} className='p-2 '>
|
||||
<div>最新报价</div>
|
||||
<p className='m-0 py-2 '>{quotes?.[0]?.name}</p>
|
||||
<Flex justify={'space-between'} >
|
||||
<Button size={'small'}>Book</Button>
|
||||
<Button size={'small'}>报价历史</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<p className='p-2 overflow-auto h-40'>{order?.order_detail}</p>
|
||||
<Flex vertical={true} className='p-2 '>
|
||||
<div>沟通记录</div>
|
||||
<p className='m-0 py-2 '>{quotes?.[0]?.name}</p>
|
||||
</Flex>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
export default CustomerProfile;
|
||||
|
||||
Loading…
Reference in New Issue