使用 Zustand 管理订单状态

src/stores/OrderStore.js

@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+import { fetchJSON, postJSON } from '@/utils/request'
+
+const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback';
+
+const useOrderStore = create((set, get) => ({
+
+  orderDetail: {
+    order_no: ''
+  },
+
+  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] }))
+    }
+  }
+}))
+
+export default  useOrderStore

src/views/Conversations/Components/CustomerProfile.jsx

@@ -1,42 +1,32 @@
-import { Card, Flex, Select, Typography, Radio, Button, Table } from 'antd';
-import { useAuthContext } from '@/stores/AuthContext.js';
-// import { useConversationState } from '@/stores/ConversationContext';
+import { useEffect } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
-import { UserOutlined, EditOutlined, EllipsisOutlined, SmileOutlined, SyncOutlined, PhoneOutlined, MailOutlined, WhatsAppOutlined, SmileTwoTone  } from '@ant-design/icons';
+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 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;
+import CreatePayment from './CreatePayment'
+import QuotesHistory from './QuotesHistory'
+import useOrderStore from '@/stores/OrderStore'
 
 const CustomerProfile = (() => {
   let { state } = useLocation()
   console.info(state)
-  console.log(useParams());
-  const { order_sn: colisn } = useParams();
-  console.log('invoke customer profile+++++++++++++++++++++++++++++++++++++++++++++', colisn);
-  // const { customerOrderProfile: orderInfo } = useConversationState();
-  const { loginUser: currentUser } = useAuthContext();
-  const { quotes, contact, last_contact, ...order } = {}; // orderInfo;
+  const { order_sn: order_sn } = useParams()
+  console.log('invoke customer profile+++++++++++++++++++++++++++++++++++++++++++++', order_sn)
+  const { orderDetail, fetchOrderDetail } = useOrderStore()
+  const { loginUser: currentUser } = useAuthContext()
+
+  useEffect(() => {
+    fetchOrderDetail(order_sn)
+    console.info('CustomerProfile.useEffect')
+    console.info(orderDetail)
+  }, [])
 
   return (
     <div className=' divide-x-0 divide-y divide-dashed divide-gray-300 '>
       <Card className='p-2 '
         bordered={false}
-        title={'Albee240210036'}
+        title={orderDetail.order_no}
         actions={[
           <Select
             style={{
@@ -79,14 +69,14 @@ const CustomerProfile = (() => {
       </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>
+        <p className='m-0 py-2 line-clamp-2 '>{'1st Japan Trip'}</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: order?.order_detail}}></p>
+      <p className='p-2 shadow-inner overflow-auto max-h-72 m-0 break-words whitespace-pre-wrap ' dangerouslySetInnerHTML={{__html: 'Form Detail'}}></p>
     </div>
-  );
-});
-export default CustomerProfile;
+  )
+})
+export default CustomerProfile