From 70228f96fba8953f5d59d9ce4e5b2d4cbfceaa12 Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Wed, 17 Aug 2022 15:48:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B7=AF=E7=94=B1=E6=87=92?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 70 +++-- src/pages/home/home.js | 581 +++++++++++++---------------------------- src/router/index.js | 266 ++++++++++++++++++- 3 files changed, 481 insertions(+), 436 deletions(-) diff --git a/src/App.js b/src/App.js index 59b2541a..e9a95038 100644 --- a/src/App.js +++ b/src/App.js @@ -1,37 +1,51 @@ -import ReactDOM from 'react-dom'; -import React, { Component } from 'react'; -import { HashRouter as Router, Route, Link } from "react-router-dom"; -import "./App.css" -import "./assets/comm.css" -import {Redirect} from "react-router-dom"; - -import login from './pages/login/login'; -import home from './pages/home/home'; -import edittemplate from './pages/exchangepage/edittemplate/main.js' -import errpage from "./pages/errpage/errpage" +/* + * @Author: Wind + * @Date: 2022-07-15 16:37:51 + * @LastEditors: Wind + * @LastEditTime: 2022-08-17 15:28:37 + * @Description: + * @FilePath: \frontend\src\App.js + */ +import React, { Component } from 'react' +import { HashRouter as Router, Route } from 'react-router-dom' +import './App.css' +import './assets/comm.css' +import { Redirect } from 'react-router-dom' +import { lazy, Suspense } from 'react' +import { FullScreenLoading } from 'zent' +const Home = lazy(() => import('./pages/home/home')) +const Login = lazy(() => import('./pages/login/login')) +const ErrPage = lazy(() => import('./pages/errpage/errpage')) +const EdittemPlate = lazy(() => + import('./pages/exchangepage/edittemplate/main.js') +) export default class App extends Component { state = { - pathname:'', - }; - componentWillMount(){ - const pathname=window.location.href.lastIndexOf('\/'); - const pathnamestr=window.location.href.substr(pathname); - this.setState({pathname:`${pathnamestr}`}); + pathname: '' + } + componentWillMount() { + const pathname = window.location.href.lastIndexOf('/') + const pathnamestr = window.location.href.substr(pathname) + this.setState({ pathname: `${pathnamestr}` }) } render() { return ( - - - - - ( - )}> - - + + + }> + + + + }> + + - ); + ) } } - diff --git a/src/pages/home/home.js b/src/pages/home/home.js index 93104034..20a33499 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -1,324 +1,271 @@ -import ReactDOM from "react-dom"; -import React, { Component } from "react"; - -import { HashRouter as Router, Route, Link, Redirect } from "react-router-dom"; -import "./home.less"; -import "../../assets/comm.css"; -import Bus from "../../assets/eventBus.js"; -// import Topnav from "../../components/topNav/main" -import Subnav from "../../components/subnav/main"; -import { Avatar, Pop, Sweetalert, Dialog, Icon, Notify, Button } from "zent"; -import ModifySelfpwd from "./ModifySelfpwd"; -import extension from "../extension/main/main"; -import overview from "../overview/main/main"; - -import distributor from "../distributor/main/main"; -import exchangecodelist from "../exchangecode/list/list"; -import exchangecodeadd from "../exchangecode/add/add"; -import exchangecodeedit from "../exchangecode/edit/edit"; -import exchangecommodity from "../exchangecode/commodity/commodity"; -import productedit from "../exchangecode/commodity/goodedit.js"; -import Errpage from "../errpage/errpage.js"; - -import exchangepage from "../exchangepage/main/main"; -import order from "../order/main/main"; -import orderList from "../order/list/list"; -import orderdetails from "../order/more/more"; -import orderadd from "../order/add/add"; -import plan from "../plan/main/main"; -import planlist from "../plan/list/list"; -import planadd from "../plan/add/add"; -import planedit from "../plan/add/edit"; -// import plancopy from "../plan/copy/index"; -import planeditcopy from "../plan/add/plan-copy"; - -import keylist from "../plan/key/list"; -import keysList from "../plan/keyList"; -import keyorderlist from "../plan/keyorder/keyorder"; -import keyedit from "../plan/key/edit.js"; -import keydetail from "../plan/key/detail/list.js"; -import keylog from "../plan/key/detail/log.js"; - -import accountlist from "../system/account/list/list"; -import accountadd from "../system/account/add/add"; -import subaccountlist from "../system/subAccount/list/list"; -import subaccountadd from "../system/subAccount/add/add"; -import rolelist from "../system/role/list/list"; -import roleadd from "../system/role/add/add"; -import station from "../system/station/main"; -import customize from "../system/customize/main.js"; -import myMould from "../system/systemMould/main.js"; - -import menu from "../system/menu/main/main"; - -import distributorlist from "../distributor/list/list"; -import distributoradd from "../distributor/add/add"; -import distributorEdit from "../distributor/add/add"; -import mytempMouldadd from "../exchangepage/template/main.js"; -// import edittemplate from '../exchangepage/edittemplate/main.js' -import myexchangetemplate from "../exchangepage/mytemplate/main.js"; -import copyCode from "../exchangecode/copyCode/index"; +import React, { Component, lazy } from 'react' +import { HashRouter as Router, Route } from 'react-router-dom' +import './home.less' +import '@/assets/comm.css' +import Bus from '@/assets/eventBus.js' +import Subnav from '@/components/subnav/main' +import { Avatar, Pop, Sweetalert, Dialog, Icon, Notify } from 'zent' +import ModifySelfpwd from './ModifySelfpwd' +import router from '@/router/index' import { getUserinfo, handelResponse, postLogOut, - getProductInfoSelect, -} from "../../assets/api.js"; -let timerstop = null; + getProductInfoSelect +} from '@/assets/api.js' export default class App extends Component { constructor(props) { - super(props); + super(props) } state = { visible: false, mouseMenuMask: false, setrender: 1, - linkshow: "系统管理", + linkshow: '系统管理', isShowSub: true, noShowSubMenu: [ - "/home/extension", - "/home/overview", - "/home/plan-create", - "/home/mytempMould", - "/home/edittemplate", + '/home/extension', + '/home/overview', + '/home/plan-create', + '/home/mytempMould', + '/home/edittemplate' ], - pathname: "", + pathname: '', userInfo: {}, navlist: [ { - name: "系统管理", + name: '系统管理', childmenu: [ { - group: "账号管理", + group: '账号管理', items: [ - { path: "/home/system/account-list", name: "账号管理" }, - { path: "/home/system/role-list", name: "角色管理" }, - { path: "/home/system/station", name: "岗位管理" }, - { path: "/home/system/menu", name: "菜单管理" }, - { path: "/home/system/customize", name: "定制化模板" }, - { path: "/home/system/systemModel", name: "系统模板" }, - ], - }, + { path: '/home/system/account-list', name: '账号管理' }, + { path: '/home/system/role-list', name: '角色管理' }, + { path: '/home/system/station', name: '岗位管理' }, + { path: '/home/system/menu', name: '菜单管理' }, + { path: '/home/system/customize', name: '定制化模板' }, + { path: '/home/system/systemModel', name: '系统模板' } + ] + } ], - path: "/system", + path: '/system' }, { - name: "分销商管理", + name: '分销商管理', childmenu: [ { - group: "分销商管理", - items: [{ path: "/home/distributor-list", name: "分销商管理" }], - }, + group: '分销商管理', + items: [{ path: '/home/distributor-list', name: '分销商管理' }] + } ], - path: "/home/distributor-list", + path: '/home/distributor-list' }, { - name: "营销计划管理", + name: '营销计划管理', childmenu: [ { - group: "营销计划管理", + group: '营销计划管理', items: [ - { path: "/home/plan-list", name: "营销计划管理" }, - { path: "/home/plan-keyList", name: "KEY列表管理" }, - ], - }, + { path: '/home/plan-list', name: '营销计划管理' }, + { path: '/home/plan-keyList', name: 'KEY列表管理' } + ] + } ], - path: "/home/plan-list", + path: '/home/plan-list' }, { - name: "兑换码管理", + name: '兑换码管理', childmenu: [ { - group: "兑换码列表", - items: [{ path: "/home/exchangecode-list", name: "兑换码列表" }], - }, + group: '兑换码列表', + items: [{ path: '/home/exchangecode-list', name: '兑换码列表' }] + } ], - path: "/home/exchangecode-list", + path: '/home/exchangecode-list' }, { - name: "落地页管理", + name: '落地页管理', childmenu: [ { - group: "落地页列表", + group: '落地页列表', items: [ - { path: "/home/exchangepage", name: "落地页列表" }, - { path: "/home/myexchangetemplate", name: "我的模板" }, - ], - }, + { path: '/home/exchangepage', name: '落地页列表' }, + { path: '/home/myexchangetemplate', name: '我的模板' } + ] + } ], - path: "/home/exchangepage", + path: '/home/exchangepage' }, { - name: "订单管理", + name: '订单管理', childmenu: [ { - group: "订单管理", - items: [{ path: "/home/order-list", name: "订单列表" }], - }, + group: '订单管理', + items: [{ path: '/home/order-list', name: '订单列表' }] + } ], - path: "/home/order-list", - }, - ], - }; + path: '/home/order-list' + } + ] + } //打开菜单移入遮罩 openMouseMask() { - this.setState({ mouseMenuMask: true }); + this.setState({ mouseMenuMask: true }) } + componentDidMount(e) { - Bus.addListener("closeMask", (prop) => { - this.setState({ mouseMenuMask: prop }); - }); + Bus.addListener('closeMask', (prop) => { + this.setState({ mouseMenuMask: prop }) + }) if (this.state.noShowSubMenu.indexOf(this.props.location.pathname) > -1) { - this.setState({ isShowSub: false }); + this.setState({ isShowSub: false }) } else { - this.setState({ isShowSub: true }); + this.setState({ isShowSub: true }) } } componentWillUnmount() {} //获取用户信息 getUserInfuFn() { - let self = this; + let self = this getUserinfo() .then((res) => { handelResponse( res, (response, msg) => { - self.setState({ userInfo: response }); - sessionStorage.setItem("userInfo", JSON.stringify(response)); + self.setState({ userInfo: response }) + sessionStorage.setItem('userInfo', JSON.stringify(response)) }, (err) => {} - ); + ) }) - .catch((err) => {}); + .catch((err) => {}) } //修改密码 modifyFn() { - this.setState({ visible: true }); + this.setState({ visible: true }) } //修改密码 modifyPwdFn() {} //退出登录 exitFn() { - let self = this; + let self = this Sweetalert.confirm({ - type: "warning", + type: 'warning', closeBtn: true, - title: "确认操作", + title: '确认操作', content:

是否退出登录？

, onConfirm: () => { postLogOut() .then((res) => { if (res.code == 200) { setTimeout(() => { - self.props.history.replace("/login"); - Notify.clear(); - Notify.success("退出成功！"); - sessionStorage.clear(); - }, 1000); + self.props.history.replace('/login') + Notify.clear() + Notify.success('退出成功！') + sessionStorage.clear() + }, 1000) } }) - .catch((err) => {}); + .catch((err) => {}) }, onCancel: this.onCancel, - className: "questModal", - parentComponent: this, - }); + className: 'questModal', + parentComponent: this + }) } setVisible = (visible) => { - this.setState({ visible }); - }; + this.setState({ visible }) + } componentWillMount(e) { - let activeMenuList = JSON.parse(sessionStorage.getItem("activeMenu")); - this.setState({ navlist: activeMenuList }); - const pathname = window.location.href.lastIndexOf("/"); + console.log(1) + let activeMenuList = JSON.parse(sessionStorage.getItem('activeMenu')) + this.setState({ navlist: activeMenuList }) + const pathname = window.location.href.lastIndexOf('/') - const pathnamestr = window.location.href.substr(pathname); - this.getUserInfuFn(); - this.setState({ pathname: `${pathnamestr}` }); - sessionStorage.setItem("showflag", true); + const pathnamestr = window.location.href.substr(pathname) + this.getUserInfuFn() + this.setState({ pathname: `${pathnamestr}` }) + sessionStorage.setItem('showflag', true) } componentWillReceiveProps(nextProps) { //5分钟更新一次商品数据 - let datetime = sessionStorage.getItem("updatetime"); + let datetime = sessionStorage.getItem('updatetime') if (datetime) { if (Date.now() - datetime > 300000) { getProductInfoSelect().then((res) => { handelResponse( res, (req, msg) => { - sessionStorage.setItem("updatetime", Date.now()); - sessionStorage.setItem("productsList", JSON.stringify(req.data)); + sessionStorage.setItem('updatetime', Date.now()) + sessionStorage.setItem('productsList', JSON.stringify(req.data)) }, (err) => {} - ); - }); + ) + }) } } if (this.state.noShowSubMenu.indexOf(nextProps.location.pathname) > -1) { - this.setState({ isShowSub: false }); + this.setState({ isShowSub: false }) } else { - this.setState({ isShowSub: true }); + this.setState({ isShowSub: true }) } } /* 定时器 间隔1秒检测是否长时间未操作页面 */ UNSAFE_componentWillReceiveProps(nextProps) { - let activeMenuList = JSON.parse(sessionStorage.getItem("activeMenu")); + let activeMenuList = JSON.parse(sessionStorage.getItem('activeMenu')) // 判断跳转路由不等于当前路由 if (nextProps.location.pathname !== this.props.location.pathname) { - let pathnameNow = nextProps.location.pathname; - let item = null; - if (pathnameNow.includes("system")) { - item = activeMenuList.filter((item) => item.id == 14); - this.setState({ setrender: 1 }); + let pathnameNow = nextProps.location.pathname + let item = null + if (pathnameNow.includes('system')) { + item = activeMenuList.filter((item) => item.id == 14) + this.setState({ setrender: 1 }) } - if (pathnameNow.includes("distributor")) { - item = activeMenuList.filter((item) => item.id == 15); - this.setState({ setrender: 2 }); + if (pathnameNow.includes('distributor')) { + item = activeMenuList.filter((item) => item.id == 15) + this.setState({ setrender: 2 }) } - if (pathnameNow.includes("plan") || pathnameNow.includes("key")) { - item = activeMenuList.filter((item) => item.id == 16); - this.setState({ setrender: 3 }); + if (pathnameNow.includes('plan') || pathnameNow.includes('key')) { + item = activeMenuList.filter((item) => item.id == 16) + this.setState({ setrender: 3 }) } if ( - pathnameNow.includes("exchangecode") && - !pathnameNow.includes("exchangecode-add") + pathnameNow.includes('exchangecode') && + !pathnameNow.includes('exchangecode-add') ) { - item = activeMenuList.filter((item) => item.id == 17); - this.setState({ setrender: 4 }); + item = activeMenuList.filter((item) => item.id == 17) + this.setState({ setrender: 4 }) } if ( - pathnameNow.includes("exchangepage") || - pathnameNow.includes("edittemplate") || - pathnameNow.includes("myexchangetemplate") + pathnameNow.includes('exchangepage') || + pathnameNow.includes('edittemplate') || + pathnameNow.includes('myexchangetemplate') ) { - item = activeMenuList.filter((item) => item.id == 18); - this.setState({ setrender: 5 }); + item = activeMenuList.filter((item) => item.id == 18) + this.setState({ setrender: 5 }) } - if (pathnameNow.includes("order-list")) { - item = activeMenuList.filter((item) => item.id == 19); - this.setState({ setrender: 6 }); + if (pathnameNow.includes('order-list')) { + item = activeMenuList.filter((item) => item.id == 19) + this.setState({ setrender: 6 }) } if (item) { try { item[0].children.forEach((it) => { if (it.level === 5) { - sessionStorage.setItem("pathname2", it.router); - throw "终止循环"; + sessionStorage.setItem('pathname2', it.router) + throw '终止循环' } - }); + }) } catch (e) {} - sessionStorage.setItem( - "menulinklist", - JSON.stringify(item[0].children) - ); - sessionStorage.setItem("showflag", true); - sessionStorage.setItem("linkshowname", item[0].title); + sessionStorage.setItem('menulinklist', JSON.stringify(item[0].children)) + sessionStorage.setItem('showflag', true) + sessionStorage.setItem('linkshowname', item[0].title) } } } @@ -326,19 +273,19 @@ export default class App extends Component { render() { return ( -
- {this.state.mouseMenuMask ?
: null} -
+
+ {this.state.mouseMenuMask ?
: null} +
{/* logo */} -
+
营销系统管理平台
{/* 顶部导航 */} -
+
{/* this.setState({pathname:'/overview'})}>概览 this.setState({pathname:'/extension'})}>推广 */}
-
-
+
+ -
+ -
-

+

+

{this.state.userInfo.head ? ( - + ) : ( )} -

+

姓名:{this.state.userInfo.real_name} 账号:{this.state.userInfo.user_name}

-

+

{ - this.exitFn(); + this.exitFn() }} - className="exit-btn" - > + className='exit-btn'> 退出 { - this.modifyFn(); + this.modifyFn() }} - className="modify-btn" - > + className='modify-btn'> 修改密码

- } - > + }> {/* */} -
+
{this.state.userInfo.real_name}  - +
this.setVisible(false)} - title="修改密码" - > + title='修改密码'> this.setVisible(visible)} />
-