From fb7f1209c47883662fed6d378bc8f7074cfa51d2 Mon Sep 17 00:00:00 2001 From: Jimmy Date: Thu, 14 Mar 2024 16:01:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E3=80=81=E4=BC=9A=E8=AF=9D=E3=80=81=E8=81=8A?= =?UTF-8?q?=E5=A4=A9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.jsx | 11 +++- src/views/MobileApp.jsx | 68 ++++++++++++++++++++++ src/views/mobile/Chat.jsx | 68 ++++++++++++++++++++++ src/views/mobile/Conversation.jsx | 90 ++++++++++++++++++++++++++++++ src/views/mobile/Login.jsx | 93 +++++-------------------------- 5 files changed, 249 insertions(+), 81 deletions(-) create mode 100644 src/views/MobileApp.jsx create mode 100644 src/views/mobile/Chat.jsx create mode 100644 src/views/mobile/Conversation.jsx diff --git a/src/main.jsx b/src/main.jsx index fbe6594..972bfd2 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,9 +1,10 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { createBrowserRouter, RouterProvider } from 'react-router-dom' +import { createBrowserRouter, RouterProvider, useNavigate } from 'react-router-dom' import { ThemeContext } from '@/stores/ThemeContext' import AuthApp from '@/views/AuthApp' import Standlone from '@/views/Standlone' +import MobileApp from '@/views/MobileApp' import OrderFollow from '@/views/OrderFollow' import ChatHistory from '@/views/ChatHistory' import SalesManagement from '@/views/SalesManagement' @@ -12,6 +13,8 @@ import DingdingCallback from '@/views/dingding/Callback' import AccountProfile from '@/views/AccountProfile' import ErrorPage from '@/components/ErrorPage' import Conversations from '@/views/Conversations/ChatWindow' +import MobileConversation from '@/views/mobile/Conversation' +import MobileChat from '@/views/mobile/Chat' import MobileLogin from '@/views/mobile/Login' import useAuthStore from '@/stores/AuthStore' import '@/assets/index.css' @@ -39,13 +42,15 @@ const router = createBrowserRouter([ children: [ { path: 'dingding/qrcode', element: }, { path: 'dingding/callback', element: }, + { path: 'mobile-login', element: }, ], }, { path: '/m', - element: , + element: , children: [ - { path: 'login', element: }, + { path: 'conversation', element: }, + { path: 'chat', element: }, ], }, ]) diff --git a/src/views/MobileApp.jsx b/src/views/MobileApp.jsx new file mode 100644 index 0000000..c00e1d5 --- /dev/null +++ b/src/views/MobileApp.jsx @@ -0,0 +1,68 @@ +import '@/assets/App.css' +import AppLogo from '@/assets/logo-gh.png' +import { useThemeContext } from '@/stores/ThemeContext' +import useAuthStore from '@/stores/AuthStore' +import { App as AntApp, Col, ConfigProvider, Empty, Layout, Row, Typography, theme, Space, Avatar } from 'antd' +import { DownOutlined } from '@ant-design/icons' +import { NavLink, Outlet } 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 { + token: { colorBgContainer }, + } = theme.useToken() + + function renderLayout() { + return ( + +
+ + + + App logo + + {loginUser?.username?.substring(1)}{loginUser.username}​ + + +
+ + + + + +
桂林海纳国际旅行社有限公司
+ + ) + } + + return ( + } + > + + {renderLayout()} + + + ) +} + +export default MobileApp diff --git a/src/views/mobile/Chat.jsx b/src/views/mobile/Chat.jsx new file mode 100644 index 0000000..e8a5d73 --- /dev/null +++ b/src/views/mobile/Chat.jsx @@ -0,0 +1,68 @@ +import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react'; +import { App, Avatar, List, Layout, Input, DatePicker, Button, Spin } from 'antd'; +import { ChatItem, MessageBox } from 'react-chat-elements'; +import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions'; +import { isEmpty } from '@/utils/utils'; +import useFormStore from '@/stores/FormStore'; +import { useShallow } from 'zustand/react/shallow'; + + +import { RightOutlined } from '@ant-design/icons' + +import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions'; +import SearchInput from '@/components/SearchInput'; + +const { Sider, Content, Header, Footer } = Layout; +const { TextArea } = Input +const { RangePicker } = DatePicker; + +const data = [ + { + title: 'Tyler Dru Kelly', + avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000, + msgTime: 'Hi Nazly Parlindungan Siregar, this is Sharon , travel advisor of Asia Highlights. We got your inquiry for your trip toJapan , are you available for a quick chat to discuss about your trip? I have some ideas to share with you . Looking forward to talking with you!', + }, + { + title: 'Chhavi', + avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000, + msgTime: 'Hi Sharon, thanks for reaching out. I am extremely busy person, please feel free to write down or send me any note and I will respond to you immediately. Cheers🙏', + }, + { + title: 'Nathan Posey', + avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000, + msgTime: 'It is too late to see cherry blossom from April 28, is it ok for you? For your 7 days tour, visit Tokyo and Kyoto is ok. I will suggest a tour with private car for you because your mother cannot walk too much.', + }, +] + +function Chat() { + const { notification } = App.useApp() + return ( + <> + ( + + } + title={{item.title}} + description={item.msgTime} + /> + + + )} + /> +