移动端layoput页面

import React, { Component } from 'react'

import { Switch, Route, Redirect, withRouter } from 'react-router-dom'

import { LayoutContainer } from './LayoutStyledComp'

import Mask from './mask'

import Head from '../common/Head'
import TabBar from '../common/TabBar'
import Home from '../../pages/home'
import CateGroy from '../../pages/category'
import Channel from '../../pages/channel'
import Detail from '../../pages/detail'
import List from '../../pages/list'
import Mine from "../../pages/mine"
import OrderItem from "../../pages/orderItem"
import Personally from "../../pages/personally"
import Shopcar from '../../pages/shopcar'
import Error from '../../pages/error'
import ModifyInfo from '../../pages/modify_info'
import ModifyPassword from '../../pages/modify_password';
import ModifySuccess from '../../pages/modify-success';

import TabBarDetail from '../common/TabBarDetail'



class Layout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabBarDetailFlag: false,
            backflag: true,
            titleObj: {
                '/home': "首页",
                '/category': "分类",
                "/channel": "频道",
                "/shopcar": "购物车",
                '/orderItem': "全部订单",
                "/mine": "我的",
                "/detail": "商品详情",
                "/mine/login": "登录",
                "/mine/register": "注册",
                '/personally': "个人中心",
                "/modify_info": "修改个人信息",
                "/modify_pass": "密码修改",
                "/modify_success": "密码修改成功",
                "/list": "商品列表"
            },
            title: '首页',
            tabBarflag: true,
            maskflag: false,
            TABBARFLAG: true
        }
    }

    changeMaskflag = () => {
        // 显示遮罩层
        this.setState({
            maskflag: true
        })
    }

    hideMaskflag = () => {
        // 隐藏遮罩层
        this.setState({
            maskflag: false
        })
    }

    componentDidMount() {
        // 页面刷新 也就是第一次挂载的时候要执行 back 箭头出现
        this.changebackflag()
        this.changeTitle()
        this.changeTabBarFlag()
        this.changeHeadflag()
        this.checkTabBar()
    }

    getlocalstorage=()=>{
       
        let arr=JSON.parse(localStorage.getItem('shop')) 
        console.log(arr)
        if (  arr && arr.length!==0){
            console.log(1111111111111)
            return true
        }
    } 


    componentWillReceiveProps(nextProps) {
        // 在接收到改变 也就是 props 一开始发生数据改变的时候出发 使路由跳转时触发的事件
        this.changebackflag(nextProps)
        this.changeTitle(nextProps)
        this.changeTabBarFlag(nextProps)
        this.changeHeadflag(nextProps)
        this.checkTabBar(nextProps)
    }

    changeTabBarFlag = (nextProps) => {
        const { TABBARFLAG } = this.state
        const pathname = nextProps && nextProps.location.pathname || this.props.location.pathname
        if ((pathname == '/shopcar') && this.getlocalstorage()) {
           
            this.setState({
                TABBARFLAG: false
            })
            // let arr = JSON.parse(localStorage.getItem('shop'))
            // // console.log(arr)
            // // let len = arr.length
            // if (!arr || (arr && arr.length == 0)) {
            //     this.setState({
            //         TABBARFLAG: true
            //     })
            // } else {
            //     this.setState({
            //         TABBARFLAG: false
            //     })
            // }

            // console.log(this.state.tabBarflag)
        } else {
            this.setState({
                TABBARFLAG: true
            })
        }
        // this.changeHeadflag(nextProps)
        // this.checkTabBar(nextProps)
    }

    changeTitle = (nextProps) => {
        // 所有和路由跳转前后发生的页面改变 都属于监听路由的范畴
        const { titleObj } = this.state
        const { pathname } = nextProps && nextProps.location || this.props.location
        // 不用更新 title ,直接更新视图
        this.setState({
            title: titleObj[pathname]
        })
    }



    changeHeadflag = (nextProps) => {
        const { Headflag } = this.state
        const pathname = nextProps && nextProps.location.pathname || this.props.location.pathname
        switch (pathname) {
            case "/home":
                this.setState({
                    Headflag: false
                })
                break;

            default:
                this.setState({
                    Headflag: true
                })
                break;
        }
    }

    changebackflag = (nextProps) => {

        const { backflag } = this.state
        const pathname = nextProps && nextProps.location.pathname || this.props.location.pathname
        switch (pathname) {
            case "/channel":
                this.setState({
                    backflag: true
                })
                break;
            case "/mine/login":
                this.setState({
                    backflag: true
                })
                break;
            case "/modify_info":
                this.setState({
                    backflag: true
                })
                break;
            case "/mine/register":
                this.setState({
                    backflag: true
                })
            case "/modify_pass":
                this.setState({
                    backflag: true
                })
                break;
            case "/shopcar":
                this.setState({
                    backflag: true
                })
                break;
            case "/orderItem":
                this.setState({
                    backflag: true
                })
                break;
            case "/personally":
                this.setState({
                    backflag: true
                })
            case "/detail":
                this.setState({
                    backflag: true
                })
                break;
            case "/modify_success":
                this.setState({
                    backflag: true
                })
                break;
            case "/category":
                this.setState({
                    backflag: true
                })
                break;
            case "/list":
                this.setState({
                    backflag: true
                })
                break;
            default:
                this.setState({
                    backflag: false
                })
                break;
        }
    }


    checkTabBar = (nextProps) => {
        const { pathname } = nextProps ? nextProps.location : this.props.location
        switch (pathname) {
            case '/detail':
                this.setState({
                    backflag: true
                })
                break;
        }

        // console.log(pathname)
    }
    checkTabBar = (nextProps) => {
        const { pathname } = nextProps ? nextProps.location : this.props.location
        switch (pathname) {
            case '/detail':
                this.setState({
                    tabBarflag: false,
                    tabBarDetailFlag: true
                })

                break;

            default:
                this.setState({
                    tabBarflag: true,
                    tabBarDetailFlag: false
                })

                break;

        }
    }
    backHome = () => {
        const { pathname } = this.props.location
        if (pathname == "/list" || pathname == "/detail") {
            this.props.history.push("/category")
        } else {
            // 点击 head 组件中的按钮 跳转页面到 /home 改变的是layout中的状态 所以事件处理程序写在 layout 组件中
            this.props.history.push("/home")
        }

    }

    render() {
        const { backflag, tabBarflag, title, Headflag, tabBarDetailFlag, TABBARFLAG } = this.state
        return (
            <LayoutContainer>
                <Head Headflag={Headflag} backflag={backflag} backHome={this.backHome} title={title} changeMaskflag={this.changeMaskflag} />
                <Switch>
                    <Redirect from='/' to='/home' exact /> {/* 重定向 */}
                    <Route path="/home" component={Home} />
                    <Route path="/channel" component={Channel} />
                    <Route path="/detail" component={Detail} />
                    <Route path="/category" component={CateGroy} />
                    <Route path="/list" component={List} />
                    {/* 登录注册是二级路由，自己相应的写入需要实现的页面 */}
                    {/* <Route path="/login" component={Login} />
                    <Route path="/register" component={Register} /> */}
                    <Route path="/mine" component={Mine} />
                    <Route path="/orderItem" component={OrderItem} />
                    <Route path="/personally" component={Personally} />
                    <Route path='/shopcar' component={Shopcar} />
                    <Route path="/modify_info" component={ModifyInfo} />
                    <Route path="/modify_pass" component={ModifyPassword} />
                    <Route path="/modify_success" component={ModifySuccess} />
                    <Route component={Error} />
                </Switch>

                {/* 修改 */}
                {!tabBarDetailFlag ? (TABBARFLAG && <TabBar></TabBar>) : <TabBarDetail />}
                {/* 修改 */}

                {/* 遮罩层 */}
                {this.state.maskflag && <Mask hideMaskflag={this.hideMaskflag}></Mask>}
            </LayoutContainer >
        );
    }
}

export default withRouter(Layout);