You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
3.8 KiB
JavaScript
76 lines
3.8 KiB
JavaScript
import { Card, Flex, Avatar, Typography, Radio, Button, Table } from 'antd';
|
|
import { useAuthContext } from '@/stores/AuthContext.js';
|
|
import { useConversationState } from '@/stores/ConversationContext';
|
|
import { useLocation } from 'react-router-dom'
|
|
import { HomeOutlined, LoadingOutlined, SettingFilled, SmileOutlined, SyncOutlined, PhoneOutlined, MailOutlined, WhatsAppOutlined, SmileTwoTone } from '@ant-design/icons';
|
|
|
|
import CreatePayment from './CreatePayment';
|
|
import QuotesHistory from './QuotesHistory';
|
|
|
|
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 = (({ colisn }) => {
|
|
let { state } = useLocation()
|
|
console.info(state)
|
|
console.log('invoke customer profile+++++++++++++++++++++++++++++++++++++++++++++', colisn);
|
|
const { customerOrderProfile: orderInfo } = useConversationState();
|
|
const { loginUser: currentUser } = useAuthContext();
|
|
const { quotes, contact, last_contact, ...order } = orderInfo;
|
|
|
|
return (
|
|
<div className=' divide-x-0 divide-y divide-dashed divide-gray-300 '>
|
|
<Card className='p-2 '
|
|
bordered={false}
|
|
title={order?.order_no}
|
|
extra={<Radio.Group size={'small'} options={orderTags} value={'important'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}>
|
|
<Meta className='py-2 text-right'
|
|
// title={<Radio.Group size={'small'} options={orderStatus} value={'pending'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}
|
|
description={<Radio.Group size={'small'} options={orderStatus} value={'pending'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}
|
|
/>
|
|
<Flex gap={10}>
|
|
{/* <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${contact?.name}`} /> */}
|
|
<Flex vertical={true} justify='space-between'>
|
|
<Typography.Text strong >{contact?.[0]?.name}</Typography.Text>
|
|
{contact?.[0]?.phone && <Typography.Text ><PhoneOutlined className=' pr-1' />{contact?.[0]?.phone}</Typography.Text>}
|
|
{contact?.[0]?.email && <Typography.Text ><MailOutlined className=' pr-1' />{contact?.[0]?.email}</Typography.Text>}
|
|
{contact?.[0]?.whatsapp_phone_number && <Typography.Text ><WhatsAppOutlined className='pr-1 text-whatsapp' />{contact?.[0]?.whatsapp_phone_number}</Typography.Text>}
|
|
{/* <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 '>
|
|
<Typography.Text strong>最新报价</Typography.Text>
|
|
<p className='m-0 py-2 line-clamp-2 '>{quotes?.[0]?.lettertitle}</p>
|
|
<Flex justify={'space-between'} >
|
|
<CreatePayment />
|
|
<QuotesHistory />
|
|
</Flex>
|
|
</Flex>
|
|
{/* <pre className='p-2 overflow-auto max-h-72 m-0' dangerouslySetInnerHTML={{__html: order?.order_detail}}></pre> */}
|
|
<p className='p-2 shadow-inner overflow-auto max-h-72 m-0 break-words whitespace-pre-wrap ' dangerouslySetInnerHTML={{__html: order?.order_detail}}></p>
|
|
{/* <Flex vertical={true} className='p-2 '>
|
|
<Typography.Text strong>沟通记录</Typography.Text>
|
|
<Table size={'small'} columns={[{ title: '进程', dataIndex: 'title' }, { title: '状态', dataIndex: 'title2' },]} />
|
|
</Flex> */}
|
|
</div>
|
|
);
|
|
});
|
|
export default CustomerProfile;
|