Skip to content

M
max_android_panel
Commit 5bf5f095 by Zhang Xin
Options

add menu

parent 3c9e7a5a
Showing with 200 additions and 27 deletions
client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx
import React from 'react'; import React from 'react';
import AllClassify from '../../../containers/AllClassifyContainer/AllClassifyContainer' import PropTypes from 'prop-types'
require('./index.css') require('./index.css')
const headerStatus = CONFIG.headerStatus; const headerStatus = CONFIG.headerStatus;
export default class HeaderComponent extends React.Component{ export default class HeaderComponent extends React.Component{
...@@ -22,7 +22,9 @@ export default class HeaderComponent extends React.Component{ ...@@ -22,7 +22,9 @@ export default class HeaderComponent extends React.Component{
// this.setState({ // this.setState({
// showClassify : !this.state.showClassify // showClassify : !this.state.showClassify
// }) // })
this.props.showLogoutPopup(); // this.props.showLogoutPopup();
console.log(this.context);
this.context.toggleOrders()
} }
getHeader(){ getHeader(){
...@@ -92,7 +94,6 @@ export default class HeaderComponent extends React.Component{ ...@@ -92,7 +94,6 @@ export default class HeaderComponent extends React.Component{
<div className={"line"} /> <div className={"line"} />
<div className={"classify icon iconfont icon-menu colfff font70"} onClick={()=>this.handleShowClassify()}/> <div className={"classify icon iconfont icon-menu colfff font70"} onClick={()=>this.handleShowClassify()}/>
</div> </div>
<AllClassify showClassify={this.state.showClassify}/>
</div> </div>
) )
...@@ -138,4 +139,8 @@ export default class HeaderComponent extends React.Component{ ...@@ -138,4 +139,8 @@ export default class HeaderComponent extends React.Component{
{pages} {pages}
</div> </div>
} }
} }
\ No newline at end of file
HeaderComponent.contextTypes = {
toggleOrders: PropTypes.func
};
\ No newline at end of file
client/containers/AllClassifyContainer/AllClassifyContainer.jsx
import React from 'react'; import React from 'react';
import PropTypes from "prop-types";
require('./index.css'); require('./index.css');
const initOrderList = [
{
text : '货品报损',
active : false,
page : 5
},
{
text : '货品位置查询',
active : false
},
{
text : '问题反馈',
active : false
},
{
text : '货品信息查询',
active : false
},
{
text : '帮助中心',
active : false
},
];
export default class AllClassifyContainer extends React.Component{ export default class AllClassifyContainer extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.changeOrder = this.changeOrder.bind(this);
this.state = {
orderList : initOrderList.slice(),
timer : null,
time : 500
}
} }
showPage(){
}
changeOrder(key){
let orderList = this.state.orderList.map((t,k)=>{
return {
text : t.text,
active : k===key,
page : t.page ? t.page : 0
}
});
this.setState({
orderList : orderList
},()=>{
this.state.timer = window.setTimeout( ()=> {
window.clearTimeout(this.state.timer);
let page = this.state.orderList[key].page ? this.state.orderList[key].page : 0;
this.context.toggleOrders(page);
},this.state.time);
})
}
componentWillUnmount(){
this.setState({
orderList : initOrderList.slice()
})
}
render(){ render(){
return( return(
<div className={"allClassify " + (this.props.showClassify ? '':'hide')}> <div className={"allClassify " + (this.props.showClassify ? '':'hide')}>
<ul> <ul>
<li>待定</li> {
<li>待定</li> this.state.orderList.map((t,i)=>{
<li>待定</li> return (
<li>待定</li> <li key={"allClassify"+i} className={t.active ? 'active' : ''} onClick={()=>this.changeOrder(i)}>
<li>待定</li> <div>
<li>待定</li> <img src={
t.active ? require(`./images/${i}-.png`) : require(`./images/${i}.png`)
} alt="" className={"img"}/>
<div className={"text"}>{t.text}</div>
</div>
</li>
)
})
}
</ul> </ul>
</div> </div>
) )
} }
} }
\ No newline at end of file
AllClassifyContainer.contextTypes = {
toggleOrders: PropTypes.func
};
\ No newline at end of file
client/containers/AllClassifyContainer/index.css
.allClassify { /*.allClassify {
position: absolute; position: absolute;
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .8);
width: 300px; width: 350px;
right: 0; right: 0;
top: 98px; top: 98px;
z-index: 3; z-index: 3;
height: 856px;
overflow-y: scroll; overflow-y: scroll;
display: inline-block;
text-align: center;
bottom: 0;
}
.allClassify ul{
}
.allClassify ul > li {
height: 158px;
text-align: center;
}
.allClassify ul > li > div{
}
.allClassify ul > li > div > img{
}
.allClassify ul > li > div .text{
color: #ffffff;
}
.allClassify ul > li.active {
background: rgba(0,0,0,.4);
} }
.allClassify ul > li.active > div .text{
color: #ff775c;
}*/
/*---------px rem 分割线-----------*/
.allClassify {
position: absolute;
background: rgba(0, 0, 0, .8);
width: 2.9166666666666665rem;
right: 0;
top: 0.8166666666666667rem;
z-index: 3;
overflow-y: scroll;
display: inline-block;
text-align: center;
bottom: 0;
}
.allClassify ul{
display: flex;
flex-wrap: nowrap;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: space-around;
}
.allClassify ul > li { .allClassify ul > li {
height: 172px; height: 1.3166666666666667rem;
text-align: center;
width: 100%;
}
.allClassify ul > li > div{
line-height: 1.6;
padding-top: 5%;
}
.allClassify ul > li > div > img{
width: 22%;
}
.allClassify ul > li > div .text{
color: #ffffff;
}
.allClassify ul > li.active {
background: rgba(0,0,0,.4);
}
.allClassify ul > li.active > div .text{
color: #ff775c;
} }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLG1CQUFtQjtJQUNuQiw4QkFBOEI7SUFDOUIsYUFBYTtJQUNiLFNBQVM7SUFDVCxVQUFVO0lBQ1YsV0FBVztJQUNYLGNBQWM7SUFDZCxtQkFBbUI7Q0FDdEI7O0FBRUQ7SUFDSSxjQUFjO0NBQ2pCIiwiZmlsZSI6ImluZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5hbGxDbGFzc2lmeSB7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIC41KTtcclxuICAgIHdpZHRoOiAzMDBweDtcclxuICAgIHJpZ2h0OiAwO1xyXG4gICAgdG9wOiA5OHB4O1xyXG4gICAgei1pbmRleDogMztcclxuICAgIGhlaWdodDogODU2cHg7XHJcbiAgICBvdmVyZmxvdy15OiBzY3JvbGw7XHJcbn1cclxuXHJcbi5hbGxDbGFzc2lmeSB1bCA+IGxpIHtcclxuICAgIGhlaWdodDogMTcycHg7XHJcbn0iXX0= */
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
'use strict'; 'use strict';
import React from 'react' import React from 'react'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'
import {getTroubleList,updateTroubleList} from "../../actions/getTroubles"; import {getTroubleList,updateTroubleList} from "../../actions/getTroubles";
...@@ -34,6 +34,7 @@ import {checkProductQuantity} from '../../actions/TokeStokeContainer' ...@@ -34,6 +34,7 @@ import {checkProductQuantity} from '../../actions/TokeStokeContainer'
import {getStoreInfo,saveCommonInfo,getUserinfo,logout,getTaskName} from "../../actions/common"; import {getStoreInfo,saveCommonInfo,getUserinfo,logout,getTaskName} from "../../actions/common";
import {finishBoxRecovery} from "../../actions/recovery"; import {finishBoxRecovery} from "../../actions/recovery";
import replenishAction from "../../actions/replenish"; import replenishAction from "../../actions/replenish";
import AllClassify from '../AllClassifyContainer/AllClassifyContainer'
/*二期引用 end*/ /*二期引用 end*/
import {on,remove} from '../../util/event'; import {on,remove} from '../../util/event';
...@@ -96,7 +97,7 @@ class PageContainer extends React.Component { ...@@ -96,7 +97,7 @@ class PageContainer extends React.Component {
this.uploadErrs = this.uploadErrs.bind(this); // this.uploadErrs = this.uploadErrs.bind(this); //
/*以下是二期方法 start*/ /*以下是二期方法 start*/
this.showHomePage = this.showHomePage.bind(this); //二期显示首页 this.showHomePage = this.showHomePage.bind(this); //二期显示首页
this.triggerAllClassify = this.triggerAllClassify.bind(this); //二期显示菜单栏 this.toggleOrders = this.toggleOrders.bind(this); //二期显示菜单栏
this.showSecondTroubelPage = this.showSecondTroubelPage.bind(this); //根据用户的type判断显示的页面 this.showSecondTroubelPage = this.showSecondTroubelPage.bind(this); //根据用户的type判断显示的页面
/*以下是二期方法 end*/ /*以下是二期方法 end*/
...@@ -502,11 +503,6 @@ class PageContainer extends React.Component { ...@@ -502,11 +503,6 @@ class PageContainer extends React.Component {
showPage : showPage[13] showPage : showPage[13]
}); });
} }
triggerAllClassify(status=false){
this.setState({
showAllClassify : status
})
}
//二期临时退出 //二期临时退出
tempLogout(){ tempLogout(){
...@@ -518,6 +514,29 @@ class PageContainer extends React.Component { ...@@ -518,6 +514,29 @@ class PageContainer extends React.Component {
}); });
} }
/**
* 显示右侧弹出菜单
* @returns {*}
*/
toggleOrders(page=0){
console.log("toggleOrders ",page);
this.setState({
showClassify : !this.state.showClassify
},()=>{
if(page){
this.setState({
showPage : showPage[page]
})
}
})
}
getChildContext() {
return {
toggleOrders: this.toggleOrders
}
}
getPages(){ getPages(){
let pages = null; let pages = null;
let{state,dispatch} = this.props; let{state,dispatch} = this.props;
...@@ -688,6 +707,10 @@ class PageContainer extends React.Component { ...@@ -688,6 +707,10 @@ class PageContainer extends React.Component {
/> : null /> : null
} }
<PopupComponent popupInfo={this.state.popupInfo} /> <PopupComponent popupInfo={this.state.popupInfo} />
{
this.state.showClassify ? <AllClassify showClassify={this.state.showClassify}/> : null
}
{this.getPages()} {this.getPages()}
</div> </div>
) )
...@@ -698,4 +721,8 @@ function select(store) { ...@@ -698,4 +721,8 @@ function select(store) {
return Object.assign({}, {state: store}) return Object.assign({}, {state: store})
} }
PageContainer.childContextTypes = {
toggleOrders: PropTypes.func
};
export default connect(select)(PageContainer) export default connect(select)(PageContainer)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment