完成回收部分页面

client/actions/common.js

@@ -19,12 +19,13 @@ const getTaskInfo = (data)=>{
             headers: { 'Content-Type': 'application/json' },
             headers: { 'Content-Type': 'application/json' },
         }).then((response)=>response.json())
         }).then((response)=>response.json())
             .then(json=>{
             .then(json=>{
-                let taskInfo=Object.assign({})
+                let taskInfo=Object.assign({});
                 if(json.meta.success && json.data){
                 if(json.meta.success && json.data){
                     taskInfo = Object.assign({},json.data)
                     taskInfo = Object.assign({},json.data)
                 }
                 }
                 console.log(taskInfo)
                 console.log(taskInfo)
                 dispatch(startalljob(Object.assign({},taskInfo)))
                 dispatch(startalljob(Object.assign({},taskInfo)))
+                dispatch(saveCommonInfo(Object.assign({},taskInfo)))
             }).catch(e=>{console.error(e)})
             }).catch(e=>{console.error(e)})
 
 
     }
     }

client/actions/recovery.js

+import fetch from 'isomorphic-fetch';
+import actionType from '../actiontype/recovery'
+const domain = ENV.domain;
+
+const initRecoveryInfo = (data)=>{
+    return{
+        type : actionType.INITRECOVERYINFO,
+        data
+    }
+};
+
+const finishBoxRecovery = ()=>{
+    //将
+};
+
+
+export {initRecoveryInfo}

client/actiontype/recovery.js

+const actionTypes = {
+    INITRECOVERYINFO : 'INITRECOVERYINFO',
+}
+export default actionTypes
\ No newline at end of file

client/components/RecoveryComponent/RecoveryFirstPage/RecoveryFirstPage.jsx

@@ -7,6 +7,7 @@ export default class RecoveryFirstPage extends React.Component{
     }
     }
 
 
     render(){
     render(){
+        let props = this.props;
         let style = {'width':"410px","background":"#ff7860","display": "inline-block"}
         let style = {'width':"410px","background":"#ff7860","display": "inline-block"}
         let classInfo = {
         let classInfo = {
             colorInfo : "colfff",
             colorInfo : "colfff",
@@ -15,7 +16,7 @@ export default class RecoveryFirstPage extends React.Component{
         return(
         return(
             <div className={"recoveryFirstPage"}>
             <div className={"recoveryFirstPage"}>
                 <div className={"text font40 col333"}>任务目标：请将A区回收箱进行整体更换</div>
                 <div className={"text font40 col333"}>任务目标：请将A区回收箱进行整体更换</div>
-                <Button key={"RecoveryFirstPageBtn"} classInfo={classInfo} style={style} text={'已替换完成'} option={this.hideError}/>
+                <Button key={"RecoveryFirstPageBtn"} classInfo={classInfo} style={style} text={'已替换完成'} option={props.finishBoxRecovery}/>
                 <div className={"tips font24"}>查看回收箱位置</div>
                 <div className={"tips font24"}>查看回收箱位置</div>
             </div>
             </div>
         )
         )

client/components/RecoveryComponent/RecoverySecondPage/RecoverySecondPage.jsx

+import React from 'react';
+import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
+require('./index.css')
+export default class RecoverySecondPage extends React.Component{
+    constructor(props){
+        super(props);
+        this.scanQrcode = this.scanQrcode.bind(this);
+        this.state={
+            style : {
+                width:"100%",
+                height : "auto"
+            }
+        }
+    }
+
+    scanQrcode(){
+        console.log("scan")
+    }
+
+    handleErrorImg(ref){
+        let nowRef = this.refs[ref];
+        let newSrc = UTILPATH.handleImgError(nowRef);
+        nowRef.src = newSrc;
+    }
+
+    handleLoadImg(ref){
+        let nowRef = this.refs[ref];
+        let style = UTILPATH.handleImgLoad(nowRef);
+        this.setState({
+            style:style
+        })
+    }
+
+    render(){
+        let props = this.props;
+        let style = {'width':"410px","background":"#ff7860","display": "inline-block"}
+        let classInfo = {
+            colorInfo : "colfff",
+            className : ''
+        }
+        return(
+            <div className={"RecoverySecondPage"}>
+                <div className={"title font40 col333"}>任务目标：请将该货道货品进行扫码回收</div>
+                <div className={"box"}>
+                    <div className={"skuInfo clearfix"}>
+                        <div className={"fl"}>
+                            <div className={"img"}>
+                                <img style={this.state.style} ref={"secondPageImg"} onLoad={()=>this.handleLoadImg.bind(this)("secondPageImg")} onError={()=>this.handleErrorImg.bind(this)("secondPageImg")} src={UTILPATH.localImg.defaultImg} alt=""/>
+                            </div>
+                            <ul className={"shelfInfo font30 col333"}>
+                                <li className={""}>货品名称：雪碧</li>
+                                <li className={""}>所在区域：A区1号柜 <span className={"areaBtn colff775c"}>区域照片</span></li>
+                                <li className={""}>货到信息：第6行 第3活到 13-6-6-6</li>
+                            </ul>
+                        </div>
+                        <div className={"fr font28 col333"}>
+                            <div className={"totalNum"}>需回收数量：<span className={"font30 colff775c"}>5</span></div>
+                            <div className={"currentNum"}>已回收数量：<span className={"font30 colff775c"}>5</span></div>
+                        </div>
+                    </div>
+                    <div className={"btn"}>
+                        <Button key={"RecoverySecondPageBtn"} classInfo={classInfo} style={style} text={'扫码回收'} option={this.scanQrcode}/>
+                        <div className={"text colff775c font28"}>货品不符？</div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

client/components/RecoveryComponent/RecoverySecondPage/index.css

+.RecoverySecondPage{
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    overflow: hidden;
+}
+.RecoverySecondPage .title{
+    margin: 60px 0;
+}
+.RecoverySecondPage .box{
+    width: 90%;
+    height: 60.7%;
+    background: #f2f2f2;
+    border:2px solid #e5e5e5;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+}
+.RecoverySecondPage .box .skuInfo{
+    text-align: left;
+    padding: 0 60px;
+    margin-top: 60px;
+}
+.RecoverySecondPage .box .skuInfo .fl{
+    display: flex;
+}
+.RecoverySecondPage .box .skuInfo .img{
+    width: 200px;
+    height: 200px;
+    background: #fff;
+    text-align: center;
+    margin-right: 40px;
+}
\ No newline at end of file

client/containers/PageContainer/PageContainer.jsx

@@ -59,7 +59,7 @@ class PageContainer extends React.Component {
     constructor(props) {
     constructor(props) {
         super(props);
         super(props);
         this.state = {
         this.state = {
-            showPage : showPage[13],
+            showPage : showPage[10],
             lastPage : '',
             lastPage : '',
             page : null,
             page : null,
             popupInfo : defaultPopupInfo,
             popupInfo : defaultPopupInfo,
@@ -103,7 +103,7 @@ class PageContainer extends React.Component {
 
 
 
 
         this.taskTypeOption = {
         this.taskTypeOption = {
-            'ER': this.showTroublePage
+            'ER': this.showTroublePage,
         };
         };
     }
     }
 
 

client/containers/RecoveryContainer/RecoveryContainer.jsx

@@ -3,21 +3,56 @@ import Header from '../../components/CommonComponent/HeaderComponent/HeaderCompo
 import LeftContainer from '../LeftContainer/LeftContainer';
 import LeftContainer from '../LeftContainer/LeftContainer';
 import RightContainer from '../RightContainer/RightContainer';
 import RightContainer from '../RightContainer/RightContainer';
 import RecovertyFirstPage from '../../components/RecoveryComponent/RecoveryFirstPage/RecoveryFirstPage'
 import RecovertyFirstPage from '../../components/RecoveryComponent/RecoveryFirstPage/RecoveryFirstPage'
+import RecoverySecondPage from '../../components/RecoveryComponent/RecoverySecondPage/RecoverySecondPage'
 import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
 import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
-require('./index.css')
+require('./index.css');
+
+const recoveryPageIndex = {
+    1 : "boxRecovery",
+    2 : "shelfRecovery"
+}
+
 export default class RecoveryContainer extends React.Component{
 export default class RecoveryContainer extends React.Component{
     constructor(props){
     constructor(props){
         super(props);
         super(props);
+        this.state = {
+            showPage : recoveryPageIndex[1] //展示回收箱页面
+        };
         this.getFirstPage = this.getFirstPage.bind(this);
         this.getFirstPage = this.getFirstPage.bind(this);
         this.wrongQrcode = this.wrongQrcode.bind(this); //扫描错误商品
         this.wrongQrcode = this.wrongQrcode.bind(this); //扫描错误商品
         this.correctQrcode = this.correctQrcode.bind(this); //扫描正确商品
         this.correctQrcode = this.correctQrcode.bind(this); //扫描正确商品
         this.putSkuToBox = this.putSkuToBox.bind(this); //将商品放入回收箱
         this.putSkuToBox = this.putSkuToBox.bind(this); //将商品放入回收箱
+        this.getSecondPage = this.getSecondPage.bind(this); //展示第二页
+        this.finishBoxRecovery = this.finishBoxRecovery.bind(this); //完成回收箱商品回收
+        this.getPage = this.getPage.bind(this); //获取要展示的页面
+
+    }
+
+    componentWillMount() {
+        let props = this.props;
+        console.log("props ",this.props)
+        if(!props.whetherType){
+            console.log("没有回收箱物品")
+            //没有回收箱物品
+            this.setState({
+                showPage : recoveryPageIndex[2]
+            })
+
+        }
+    }
+
+    componentWillReceiveProps(nextProps){
 
 
     }
     }
 
 
-    componentWillMount(){
+    finishBoxRecovery(){
+        //完成回收箱物品回收
+        this.setState({
+            showPage : recoveryPageIndex[2]
+        })
     }
     }
 
 
+
     getPopInfo(){
     getPopInfo(){
         let btnWidth = "410px";
         let btnWidth = "410px";
         let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':btnWidth,'display':'inline-block'}} text={"我已放入回收箱"} option={this.putSkuToBox}/>
         let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':btnWidth,'display':'inline-block'}} text={"我已放入回收箱"} option={this.putSkuToBox}/>
@@ -65,12 +100,27 @@ export default class RecoveryContainer extends React.Component{
 
 
     getFirstPage(){
     getFirstPage(){
         return (
         return (
-            <RecovertyFirstPage />
+            <RecovertyFirstPage finishBoxRecovery={()=>this.finishBoxRecovery()}/>
         )
         )
     }
     }
+    getSecondPage(){
+        return (
+            <RecoverySecondPage />
+        )
+    }
+
+    getPage(){
+        console.log("getPage ",this.state.showPage)
+        switch (this.state.showPage){
+            case recoveryPageIndex[1]:
+                return this.getFirstPage();
+            case recoveryPageIndex[2]:
+                return this.getSecondPage();
+        }
+    }
 
 
     render(){
     render(){
-        let dom = this.getFirstPage();
+        let dom = this.getPage();
         let props = this.props;
         let props = this.props;
         return(
         return(
             <div className={"recoveryContainer page"}>
             <div className={"recoveryContainer page"}>

client/css/font.css

@@ -105,6 +105,17 @@ body{
 [data-dpr="3"] .font26 {
 [data-dpr="3"] .font26 {
     font-size: calc(var(--font3) * font26 * var(--base)) !important;
     font-size: calc(var(--font3) * font26 * var(--base)) !important;
 }
 }
+.font28 {
+    font-size:  calc(font28 * var(--base)) !important;
+}
+
+[data-dpr="2"] .font28 {
+    font-size: calc(var(--font2) * font28 * var(--base)) !important;
+}
+
+[data-dpr="3"] .font28 {
+    font-size: calc(var(--font3) * font28 * var(--base)) !important;
+}
 .font30 {
 .font30 {
     font-size: calc(font30 * var(--base)) !important;
     font-size: calc(font30 * var(--base)) !important;
 }
 }

client/reducers/recovery.js

+import actionTypes from '../actiontype/recovery';
+
+
+const initRecoveryInfo = (state,data)=>{
+    return Object.assign({},state,data);
+};
+
+
+export default function(state={}, action) {
+    switch (action.type) {
+        case actionTypes.INITRECOVERYINFO:
+            return initRecoveryInfo(state,action.data);
+        default:
+            return state;
+    }
+}
\ No newline at end of file

client/util/image.js

@@ -55,12 +55,7 @@ const getPic = (path,format)=>{
 
 
 const handleImgError = (ref)=>{
 const handleImgError = (ref)=>{
     let src = ref.src;
     let src = ref.src;
-    if(src.indexOf(localHost) > -1){
-        let len = src.indexOf(localHost) + localHost.length;
-        src = devHost + src.substring(len);
-    }else{
     src = defaultImg
     src = defaultImg
-    }
     return src;
     return src;
 }
 }