移动端: 订单详情

src/main.jsx

@@ -16,6 +16,9 @@ import ErrorPage from '@/components/ErrorPage'
 import Conversations from '@/views/Conversations/ChatWindow'
 import MobileConversation from '@/views/mobile/Conversation'
 import MobileChat from '@/views/mobile/Chat'
+import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper';
+import CustomerProfile from '@/views/Conversations/Components/CustomerProfile';
+
 import DingdingLogin from '@/views/dingding/Login'
 import useAuthStore from '@/stores/AuthStore'
 import '@/assets/index.css'
@@ -40,6 +43,12 @@ const router = createBrowserRouter([
           },
           { path: 'm/chat/:order_sn', element: <MobileChat /> },
           { path: 'm/chat', element: <MobileChat /> },
+          {
+            element: <MobileSecondHeader />,
+            children: [
+              { path: 'm/order', element: <CustomerProfile /> },
+            ],
+          },
         ]
       : [
           {

src/views/MobileApp.jsx

@@ -1,22 +1,21 @@
-import { useEffect, } from 'react'
-import '@/assets/App.css'
-import AppLogo from '@/assets/logo-gh.png'
-import { useThemeContext } from '@/stores/ThemeContext'
-import useAuthStore from '@/stores/AuthStore'
-import { Col, Layout, Row, Typography, theme, Space, Avatar, Dropdown, Flex, } from 'antd'
-import { DownOutlined } from '@ant-design/icons'
-import { NavLink, Outlet,  Link } from 'react-router-dom'
-const { Header, Footer, Content } = Layout
-const { Title } = Typography
+import { useEffect } from 'react';
+import '@/assets/App.css';
+import AppLogo from '@/assets/logo-gh.png';
+import { useThemeContext } from '@/stores/ThemeContext';
+import useAuthStore from '@/stores/AuthStore';
+import { Col, Layout, Row, Typography, theme, Space, Avatar, Dropdown, Flex } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import { NavLink, Outlet, Link } from 'react-router-dom';
+const { Header, Footer, Content } = Layout;
+const { Title } = Typography;
 
 function MobileApp() {
-
-  const {colorPrimary, borderRadius} = useThemeContext()
-  const loginUser = useAuthStore(state => state.loginUser)
+  const { colorPrimary, borderRadius } = useThemeContext();
+  const loginUser = useAuthStore((state) => state.loginUser);
 
   const {
     token: { colorBgContainer },
-  } = theme.useToken()
+  } = theme.useToken();
 
   useEffect(() => {
     const handleLoad = () => {
@@ -46,30 +45,34 @@ function MobileApp() {
   return (
     <Layout>
       <Header className='header px-2' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
-        <Row gutter={{ md: 24 }} align='middle'>
+        <Flex justify={'space-between'}>
+          <NavLink to='/'>
+            <img src={AppLogo} className='logo' alt='App logo' />
+            {!('Notification' in window) && <span>🔕</span>}
+          </NavLink>
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  label: <Link to='/p/dingding/logout'>退出</Link>,
+                  key: '3',
+                },
+              ],
+            }}
+            trigger={['click']}>
+            <a onClick={(e) => e.preventDefault()} style={{ color: colorPrimary }}>
+              <Space>
+                <Avatar src={loginUser.avatarUrl}>{loginUser?.username?.substring(1)}</Avatar>
+                {loginUser.username}
+                <DownOutlined />
+              </Space>
+            </a>
+          </Dropdown>
+        </Flex>
+        {/* <Row gutter={{ md: 24 }} align='middle'>
           <Col flex="auto" style={{ color: "white", marginBottom: "0", display: "flex", justifyContent: "center" }}>
-            <NavLink to='/m/conversation'>
-              <img src={AppLogo} className='logo' alt='App logo' />
-            </NavLink>
-            <Dropdown
-              menu={{
-                items: [
-                  {
-                    label: <Link to='/p/dingding/logout'>退出</Link>,
-                    key: '3',
-                  },
-                ]
-              }}
-              trigger={['click']}
-            >
-              <a onClick={(e) => e.preventDefault()} style={{ color: colorPrimary }}>
-                <Space><Avatar
-                src={loginUser.avatarUrl}>{loginUser?.username?.substring(1)}</Avatar>{loginUser.username}<DownOutlined /></Space>
-              </a>
-            </Dropdown>
-            {!("Notification" in window) && <span>🔕</span>}
           </Col>
-        </Row>
+        </Row> */}
       </Header>
       <Layout>
         <Content
@@ -84,7 +87,7 @@ function MobileApp() {
       </Layout>
       {/* <Footer>桂林海纳国际旅行社有限公司</Footer> */}
     </Layout>
-  )
+  );
 }
 
-export default MobileApp
+export default MobileApp;

src/views/mobile/Chat.jsx

@@ -2,7 +2,7 @@ import { Layout, Button } from 'antd';
 import MessagesHeader from '@/views/Conversations/Components/MessagesHeader';
 import MessagesWrapper from '@/views/Conversations/Components/MessagesWrapper';
 import InputComposer from '@/views/Conversations/Components/InputComposer';
-import { UnorderedListOutlined } from '@ant-design/icons';
+import { UnorderedListOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 
 const { Content, Header, Footer } = Layout;
@@ -13,8 +13,9 @@ function Chat() {
     <>
       <Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 20px)', height: 'calc(100vh - 20px)', minWidth: '360px' }}>
         <Header className=' px-2 ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'>
-          <Button type='text' icon={<UnorderedListOutlined />} onClick={() => navigate('/m/conversation')} className=' rounded-none rounded-l' />
+          <Button type='text' icon={<MenuFoldOutlined />} onClick={() => navigate('/m/conversation')} className=' rounded-none rounded-l' />
           <MessagesHeader />
+          <Button type='text' icon={<MenuUnfoldOutlined />} onClick={() => navigate('/m/order')} className=' rounded-none rounded-r' />
         </Header>
         <Content className='flex-grow bg-whatsapp-bg relative'>
           <MessagesWrapper />

src/views/mobile/SecondHeaderWrapper.jsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { NavLink, Outlet, Link, useNavigate } from 'react-router-dom';
+import { Layout, Button, Flex, theme } from 'antd';
+import { LeftOutlined, HomeOutlined } from '@ant-design/icons';
+
+const { Content, Header } = Layout;
+const HeaderWrapper = ({ children, ...props }) => {
+  const navigate = useNavigate();
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+  return (
+    <>
+      <Layout>
+        <Header
+          className='header px-2 h-8 border-0 border-b border-neutral-200 border-solid '
+          style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
+          <Flex justify={'space-between'} align={'center'}>
+            <Button onClick={() => navigate(-1)} type='link' icon={<LeftOutlined />} />
+            <Button onClick={() => navigate('/', { replace: true })} type='link' icon={<HomeOutlined />} />
+          </Flex>
+        </Header>
+        <Content className='' style={{ backgroundColor: colorBgContainer }}>
+          <Outlet />
+        </Content>
+      </Layout>
+    </>
+  );
+};
+export default HeaderWrapper;