add tokeStokecontainer

client/components/CommonComponent/PopupComponent/PopupComponent.jsx

@@ -9,6 +9,7 @@ export default class PopupComponent extends React.Component{
     render(){
         let {popupInfo} = this.props;
         let {showPopup=false,popupChild=null} = popupInfo;
+        console.log(popupInfo,'这是从tokeStoke传过来的')
         return (
             <div className={"popupComponent " + (showPopup ? ' ' : 'hide ')}>
                 {popupChild}

client/containers/PageContainer/PageContainer.jsx

@@ -584,7 +584,10 @@ class PageContainer extends React.Component {
                                    />;
                 break;
             case showPage[6]:
-                pages = <TakeStokeContainer headerInfo = {state.commonInfo}/>;
+                pages = <TakeStokeContainer headerInfo = {state.commonInfo}
+                                            showPopup={(info)=>this.showPopup(info)}
+                                            hidePopup={()=>this.hidePopup()}
+                />;
                 break;
             case showPage[5]:
                 pages = <BreakageContainer

client/containers/TakeStokeContainer/TakeStokeContainer.jsx

@@ -3,17 +3,21 @@ import HeaderComponent from '../../components/CommonComponent/HeaderComponent/He
 import LeftContainer from '../LeftContainer/LeftContainer'
 import RightContainer from '../RightContainer/RightContainer'
 import {headerStatus} from '../../config/showPage'
+import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
+import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
 require('./index.css')
 class TakeStokeContaniner extends React.Component {
     constructor(props){
          super(props);
          this.state={
+             showButton:true,
+             number:2,
              initNum:0
          }
     }
 
     render(){
-       let {initNum}=this.state;
+       let {showButton,number,initNum}=this.state;
        let props = this.props;
        return (
                 <div className={'TokeStokeContainer'}>
@@ -21,12 +25,69 @@ class TakeStokeContaniner extends React.Component {
                          <LeftContainer leftInfo={props.headerInfo}/>
                          <RightContainer>
                              <div className={"TokeStokeContent"}>
-                               
+                                  <div className={'commonPage'}>
+                                        {
+                                            showButton?<div className={'pageTitle clo333 font40'}>
+                                              <span>任务目标:</span>
+                                              <span>请<span className={number===1?'col333':'colff775c'}>{number===1?'输入':'再次输入'}</span>以下货道中货品的数量</span>
+                                           </div>:
+                                           <div className={'pageTitle clo333 font40'}>
+                                              <span>任务目标:</span>
+                                              <span>请从货道上拿下<span className={'colff775c'}>X</span>个货品放入回收箱</span>
+                                           </div>
+                                        }
+                                      <div className={'pagebox'}>
+                                            <div className={'productImg'}>
+                                                  <img style={{width:'100%',height:'100%'}} src={UTILPATH.localImg.defaultImg} alt=""/>
+                                            </div>
+                                            <div className={'productDetail clo333 font30'}>
+                                                <p><span>货品名称:</span>雪碧 250ml</p>
+                                                <p><span>所在区域:</span>A区1号柜<span className={'colff775c'} onClick={this.showImg.bind(this)}>位置照片</span></p>
+                                                <p><span>货道信息:</span>第六行<span>第三货道</span><span>13-2-6-3</span></p>
+                                            </div>
+                                      </div>
+                                      {
+                                             showButton?<div className={'productHandle'}>
+                                             <div className={'productNum'}>
+                                                     <p className={'font30 clo333'}>
+                                                         <span>货品数量:</span>
+                                                         <span className={'disNum'} onClick={this.productNum.bind(this,'dis')}>－</span>
+                                                         <span className={'baseNum font50 colff775c'}>{initNum}</span>
+                                                         <span className={'addNum'} onClick={this.productNum.bind(this,'add')}>＋</span>
+                                                     </p>
+                                             </div>
+                                          <Button text={'提交'} btnContainer={'backff775c font32 colfff'} style={{marginTop:'80px'}} />
+                                          </div>:<Button text={'已放入'} btnContainer={'backff775c font32 colfff'} style={{marginTop:'280px'}} />
+                                      }
+                                  </div>
                              </div>
                          </RightContainer>
+                         <PopupComponent 
+                          popupInfo={{}}
+                          />
                     </div>
             )
     }
+    showImg(){
+        let popupInfo={showPopup:true,popupChild:<img onClick={this.props.hidePopup} className={'defaultPopup'} src={UTILPATH.localImg.defaultImg} alt=""/>}
+        this.props.showPopup(popupInfo)
+    }
+    productNum(str){
+        let {initNum}=this.state;
+        if(str==='add'){
+            initNum++;
+            this.setState({
+                initNum
+            })
+        }else if(str==='dis'){
+            if(initNum>0){
+               initNum--; 
+            }
+            this.setState({
+                initNum
+            })
+        }
+    }
    
 }
 export default TakeStokeContaniner
\ No newline at end of file

client/containers/TakeStokeContainer/index.css

@@ -3,3 +3,68 @@
     height:100%;
     background:#fff;
 }
+/* .rightContainer .TokeStokeContent{
+    width:100%;
+    height:100%;
+    position: relative;
+} */
+.commonPage .pageTitle span:nth-of-type(2){
+    margin-left:10px;
+}
+.pagebox{
+    display: flex;
+    padding-left:300px;
+    box-sizing: border-box;
+}
+.pagebox .productImg{
+    width:200px;
+    height:200px;
+    border:2px solid #e5e5e5;
+}
+.pagebox .productDetail{
+    margin-left:40px;
+}
+.pagebox .productDetail p{
+    text-align: left;
+    margin-top:36px;
+}
+.pagebox .productDetail p:nth-of-type(1){
+    margin-top:14px;
+}
+.pagebox .productDetail p:nth-of-type(2) span:nth-of-type(2){
+    margin-left:15px;
+}
+.pagebox .productDetail p span:nth-of-type(1){
+    margin-right:15px;
+}
+.commonPage .productNum{
+    width:auto;
+    margin-top:100px;
+}
+.commonPage .productNum p{
+    text-align: left;
+    padding-left:540px;
+    box-sizing: border-box;
+}
+.commonPage .productNum p span:nth-of-type(2),.commonPage .productNum p span:nth-of-type(4){
+   width:80px;
+   height:80px;
+   border:2px solid #e5e5e5;
+   border-radius: 10px;
+   display: inline-block;
+   line-height: 80px;
+   text-align: center;
+   font-weight: 800;
+}
+.commonPage .productNum p span:nth-of-type(2){
+    margin-left:10px;
+}
+.commonPage .productNum p span:nth-of-type(3){
+   font-weight: 600;
+   padding:20px 33px;
+}
+.commonPage .buttonComponent{
+    /* position: absolute; */
+    margin-left:600px;
+    /* bottom:100px; */
+}
\ No newline at end of file