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/Conversations/Components/CustomerProfile.jsx b/src/views/Conversations/Components/CustomerProfile.jsx index 104a0fb..9f59273 100644 --- a/src/views/Conversations/Components/CustomerProfile.jsx +++ b/src/views/Conversations/Components/CustomerProfile.jsx @@ -4,23 +4,24 @@ import { useEffect } from 'react' import { useParams } from 'react-router-dom' import useOrderStore from '@/stores/OrderStore' +import useConversationStore from '@/stores/ConversationStore' import QuotesHistory from './QuotesHistory' const CustomerProfile = (() => { const { notification } = App.useApp() - const { order_sn: order_sn } = useParams() + const currentOrder = useConversationStore((state) => state.currentConversation?.coli_sn || '') const { orderDetail, customerDetail, lastQuotation, quotationList, fetchOrderDetail, setOrderPropValue } = useOrderStore() useEffect(() => { - if (order_sn) fetchOrderDetail(order_sn) - }, [order_sn]) + if (currentOrder) fetchOrderDetail(currentOrder) + }, [currentOrder]) let regularText = '' if (orderDetail.buytime > 0) regularText = '(R' + orderDetail.buytime + ')' - if (order_sn) { + if (currentOrder) { return (
{ -

+

) } else { 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/OrderFollow.jsx b/src/views/OrderFollow.jsx index 63ea22f..e3655ca 100644 --- a/src/views/OrderFollow.jsx +++ b/src/views/OrderFollow.jsx @@ -15,8 +15,7 @@ import { useShallow } from 'zustand/react/shallow' const { RangePicker } = DatePicker -// eslint-disable-next-line react/display-name -const AdvanceSearchForm = memo(function ({ initialValues, onSubmit }) { +const AdvanceSearchForm = memo(function noName({ initialValues, onSubmit }) { const DATE_RANGE_PRESETS = [ { @@ -43,11 +42,14 @@ const AdvanceSearchForm = memo(function ({ initialValues, onSubmit }) { label: '本年', value: [dayjs().startOf('y'), dayjs().endOf('y')], }, - ]; + ] + const [form] = Form.useForm() + function handleSubmit(values) { onSubmit?.(values) } + return (
{ const deptOrderList = groupOrderData[deptNo] - collapseItems.push( + deptItems.push( { key: index, label: deptMap.get(deptNo), @@ -321,11 +324,13 @@ function OrderGroupTable({ formValues }) { ) }) - return ( 0} - whenTrue={} - whenFalse={} - />) + return ( + 0} + whenTrue={} + whenFalse={} + /> + ) } function OrderFollow() { diff --git a/src/views/dingding/Callback.jsx b/src/views/dingding/Callback.jsx index 1a105fe..6b2fcdb 100644 --- a/src/views/dingding/Callback.jsx +++ b/src/views/dingding/Callback.jsx @@ -42,7 +42,7 @@ function Callback() { ) } else if (loginStatus === 302) { - navigate('/m/login') + navigate('/m/conversation') } else if (loginStatus === 403) { return ( 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} + /> + + + )} + /> +