完成订单详情获取和展示

src/stores/OrderStore.js

@@ -6,14 +6,20 @@ const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback';
 
 const useOrderStore = create((set, get) => ({
 
-  orderDetail: {
-    order_no: ''
-  },
+  orderDetail: {},
+
+  customerDetail: {},
+
+  lastQuotation: {},
 
   fetchOrderDetail: async (colisn) => {
     const json = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn })
     if (json.errcode === 0 && json.result.length > 0) {
-      set(state => ({ orderDetail: json.result[0] }))
+      set(() => ({ 
+        orderDetail: json.result[0], 
+        customerDetail: json.result[0].contact[0],
+        lastQuotation: json.result[0].quotes.length > 0 ? json.result[0].quotes[0] : {},
+       }))
     }
   }
 }))

src/views/Conversations/Components/CustomerProfile.jsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
 import { Card, Flex, Select, Typography, Radio, Button, Table } from 'antd'
 import { useAuthContext } from '@/stores/AuthContext.js'
-import { UserOutlined, EditOutlined, EllipsisOutlined, SmileOutlined, SyncOutlined, PhoneOutlined, MailOutlined, WhatsAppOutlined, SmileTwoTone  } from '@ant-design/icons'
+import { UserOutlined, LinkOutlined, EllipsisOutlined, SmileOutlined, SyncOutlined, PhoneOutlined, MailOutlined, WhatsAppOutlined, SmileTwoTone  } from '@ant-design/icons'
 
 import CreatePayment from './CreatePayment'
 import QuotesHistory from './QuotesHistory'
@@ -10,16 +10,12 @@ import useOrderStore from '@/stores/OrderStore'
 
 const CustomerProfile = (() => {
   let { state } = useLocation()
-  console.info(state)
   const { order_sn: order_sn } = useParams()
-  console.log('invoke customer profile+++++++++++++++++++++++++++++++++++++++++++++', order_sn)
-  const { orderDetail, fetchOrderDetail } = useOrderStore()
+  const { orderDetail, customerDetail, lastQuotation, fetchOrderDetail } = useOrderStore()
   const { loginUser: currentUser } = useAuthContext()
 
   useEffect(() => {
     fetchOrderDetail(order_sn)
-    console.info('CustomerProfile.useEffect')
-    console.info(orderDetail)
   }, [])
 
   return (
@@ -33,11 +29,12 @@ const CustomerProfile = (() => {
               width: '100%'
             }}
             variant='borderless'
-            defaultValue='240003'
+            defaultValue={orderDetail.tags}
             options={[
-              { value: '240003', label: '重点' },
-              { value: '240002', label: '次重点' },
-              { value: '240001', label: '一般' }
+              { value: 0, label: '未设置' },
+              { value: 240003, label: '重点' },
+              { value: 240002, label: '次重点' },
+              { value: 240001, label: '一般' }
             ]}
           />,
           <Select
@@ -45,37 +42,37 @@ const CustomerProfile = (() => {
               width: '100%'
             }}
             variant='borderless'
-            defaultValue='1'
+            defaultValue={orderDetail.states}
             options={[
-              { value: '1', label: '新订单' },
-              { value: '2', label: '报价中' },
-              { value: '3', label: '以后联系' },
-              { value: '4', label: '等待付订金' },
-              { value: '5', label: '成行' },
-              { value: '6', label: '丢失' },
-              { value: '7', label: '取消' }
+              { value: 1, label: '新订单' },
+              { value: 2, label: '报价中' },
+              { value: 3, label: '以后联系' },
+              { value: 4, label: '等待付订金' },
+              { value: 5, label: '成行' },
+              { value: 6, label: '丢失' },
+              { value: 7, label: '取消' }
             ]}
           />
         ]}
         >
         <Flex gap={10}>
           <Flex vertical={true} justify='space-between'>
-            <Typography.Text ><UserOutlined className=' pr-1' />{'Tyler-Jane Ines (R2)'}</Typography.Text>
-            <Typography.Text ><PhoneOutlined className=' pr-1' />{'0118754786932'}</Typography.Text>
-            <Typography.Text ><MailOutlined className=' pr-1' />{'tyler-jane@gmail.com'}</Typography.Text>
-            <Typography.Text ><WhatsAppOutlined className='pr-1' />{'0118754786932'}</Typography.Text>
+            <Typography.Text ><UserOutlined className=' pr-1' />{customerDetail.name}</Typography.Text>
+            <Typography.Text ><PhoneOutlined className=' pr-1' />{customerDetail.phone}</Typography.Text>
+            <Typography.Text ><MailOutlined className=' pr-1' />{customerDetail.email}</Typography.Text>
+            <Typography.Text ><WhatsAppOutlined className='pr-1' />{customerDetail.whatsapp_phone_number}</Typography.Text>
           </Flex>
         </Flex>
       </Card>
       <Flex vertical={true} className='p-2 '>
         <Typography.Text strong>最新报价</Typography.Text>
-        <p className='m-0 py-2 line-clamp-2 '>{'1st Japan Trip'}</p>
+        <p className='m-0 py-2 line-clamp-2 '><a target='_blank' href={lastQuotation.letterurl}>{lastQuotation.lettertitle}<LinkOutlined /></a></p>
         <Flex justify={'space-between'} >
           <CreatePayment />
           <QuotesHistory />
         </Flex>
       </Flex>
-      <p className='p-2 shadow-inner overflow-auto max-h-72 m-0 break-words whitespace-pre-wrap ' dangerouslySetInnerHTML={{__html: 'Form Detail'}}></p>
+      <p className='p-2 shadow-inner overflow-auto max-h-72 m-0 break-words whitespace-pre-wrap ' dangerouslySetInnerHTML={{__html: orderDetail.order_detail}}></p>
     </div>
   )
 })