feat:logo切换位置换到leftmenu

6f687d3a · maolipeng · 98b93d21 · 6f687d3a · 6f687d3a · 6f687d3a
Commit 6f687d3a authored Jun 16, 2021 by maolipeng
Hide whitespace changes
Inline Side-by-side

Showing with 47 additions and 17 deletions

src/modules/root/App.tsx
+1 -2

src/modules/root/Header.jsx
+17 -14

src/modules/root/Menu.less
+10 -1

src/modules/root/Menu.tsx
+19 -0

No files found.
--- a/src/modules/root/App.tsx
+++ b/src/modules/root/App.tsx
@@ -116,7 +116,6 @@ const App: React.FC = (props: any) => {
    setMenuType(!menuType);
  }
  if (!storeUserId) {
    return <div></div>
  }
@@ -127,7 +126,7 @@ const App: React.FC = (props: any) => {
      <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
        <Main menuType={menuType} />
      </ConfigProvider>
-      <Menu menuType={menuType} handleMenuType={handleMenuType}/>
+      <Menu menuType={menuType} handleMenuType={handleMenuType} />
    </div>
  )
 }

--- a/src/modules/root/Header.jsx
+++ b/src/modules/root/Header.jsx
@@ -19,6 +19,7 @@ import CourseService from "@/domains/course-domain/CourseService";
 import qrcode from "@/libs/qrcode/qrcode.js";
 import Bus from '@/core/tbus';
 import ClickOutside from '../../components/ClickOutside';
+import _ from "underscore";
 const baseImg = "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png";
 const { confirm } = Modal;
@@ -34,12 +35,13 @@ function Header(props) {
  const [list, setList] = useState([]);
  const [openDropdown, setOpenDropdown] = useState(false);
  const [instScroll, setInstScroll] = useState(false);
-  const [topLeftLogo, setTopLeftLogo] = useState("https://image.xiaomaiketang.com/xm/WEsMPAYxAs.png")
  const ctx = useContext(XMContext);
  const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
  const storeUserId = User.getStoreUserId();
  const enterpriseId = User.getEnterpriseId();
+  const messageHelpRef = useRef(null)
  const domRef = useRef(null);
  const listRef = useRef(list);
@@ -49,13 +51,23 @@ function Header(props) {
      setStoreName(value);
    });
    getStoreList();
-    getTopLeftLogo()
  }, []);
  useEffect(() => {
    storeUserId && getUserInfo();
    enterpriseId ? getEnterpriseUser() : User.setIsAdmin(false);
  }, [storeUserId]);
+  useEffect(()=> {
+    if (!messageHelpRef.current) {
+      return
+    }
+    if (menuType) {
+      messageHelpRef.current.style.marginLeft = "194px"
+    } else {
+      messageHelpRef.current.style.marginLeft = "76px"
+    }
+  },[menuType])
  function getUserInfo() {
    const param = {
@@ -80,15 +92,6 @@ function Header(props) {
    });
  }
-  function getTopLeftLogo() {
-    if (User.getToken()) {
-      StoreService.getStoreDetail({storeId:User.getStoreId()})
-      .then(res=> {
-        setTopLeftLogo(res.result.logo)
-      })
-    }
-  }
  function getStoreList() {
    if (!enterpriseId) return null;
    const params = {
@@ -230,10 +233,10 @@ function Header(props) {
  return (
    <div id="top-container" className="top-container">
      <div className="top top-nav">
-        <div>
+        {/* <div>
          <img src={topLeftLogo} className="logo" alt="" />
-        </div>
+        </div> */}
-        <div className="message-help">
+        <div className="message-help" ref={messageHelpRef}>
          {list.length ? (
            <ClickOutside
              onClickOutside={() => {

--- a/src/modules/root/Menu.less
+++ b/src/modules/root/Menu.less
 @import '../../core/variables.less';
-@top-height: 60px;
+@top-height: 0px;
 @menu-bakg: #FFF;
 @active-color: #2966FF;
 .left-container {
@@ -12,6 +12,15 @@
  width: @xm-left-width;
  background: @menu-bakg;
  color: #333;
+  .topLogo {
+    height: 62px;
+    img {
+      width: 138px;
+      height: 35px;
+      margin-left: 19px;
+      margin-top: 13px;
+    }
+  }
  .menu-type-icon{
    margin:4px  0 0px 150px;
    cursor: pointer;

--- a/src/modules/root/Menu.tsx
+++ b/src/modules/root/Menu.tsx
@@ -5,6 +5,9 @@ import {
 import { Menu} from 'antd';
 import { menuList } from '../../routes//config/menuList'
 import { XMContext } from '../../store/context';
+import Service from "@/common/js/service";
+import StoreService from "@/domains/store-domain/storeService";
+import User from "@/common/js/user";
 import _ from 'underscore';
 import "./Menu.less";
@@ -14,6 +17,7 @@ function Aside(props: any) {
  const ctx: any = useContext(XMContext);
  const [selectKey, setSelectKey] = useState();
  const [openKeys, setOpenKeys] = useState(['']);
+  const [topLogoUrl, setTopLogoUrl] = useState("")
  const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
  useEffect(() => {
    const link = props.location.pathname;
@@ -31,6 +35,17 @@ function Aside(props: any) {
      return item;
    })
  }, [props.location.pathname])
+  useEffect(()=> {
+    getTopLeftLogo()
+  })
+  function getTopLeftLogo() {
+    if (User.getToken()) {
+      StoreService.getStoreDetail({storeId:User.getStoreId()})
+      .then(res=> {
+        setTopLogoUrl(res.result.logo)
+      })
+    }
+  }
  function toggleMenu(item: any) {
    window.RCHistory.push(item.link)
  }
@@ -54,6 +69,10 @@ function Aside(props: any) {
            : "left-container left-container-vertical"
        }
      >
+        <div className="topLogo">
+          { menuType ? (<img src={topLogoUrl} alt=""></img>) : ("")}
+        </div>
        <div className="menu-type-icon"  onClick={handleMenu}>
          {menuType ? (
            <span