增加倒计时功能

client/actions/uploadError.js

+import fetch from 'isomorphic-fetch'
+import actionType from '../actiontype/getIp'
+let domain = ENV.domain;
+
+const uploadError = ()=>{
+    return (dispatch =>{
+        // fetch(domain + '/web/pad_warehouse/getMachineData.action',{
+        //     credentials : 'include',
+        //     method : 'POST',
+        //     mode : 'cors',
+        //     body : {}
+        //
+        // }).then((response)=>response.json())
+        //     .then(json=>{
+        //         console.log(json);
+        //     }).catch(e=>{console.error(e)})
+        console.log("uploadError")
+    })
+};
+export {uploadError}

client/actiontype/uploadError.js

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

client/components/CommonComponent/ClockComponent/ClockComponent.jsx

@@ -74,7 +74,9 @@ export default class ClockComponent extends React.Component{
         let props = this.props;
         return(
             <div className={"clockComponent font32"} style={props.style}>
-                <img className={"clockIcon"} src={UTILPATH.localImg.clockIcon} alt=""/>
+                {
+                    props.text ? <span className={"clockText"}>{props.text}</span> : <img className={"clockIcon"} src={UTILPATH.localImg.clockIcon} alt=""/>
+                }
                 <span className={"clockTime"}>{this.state.count}s</span>
             </div>
         )

client/containers/HomeContainer/HomeContainer.jsx

@@ -20,17 +20,20 @@ export default class HomeContainer extends React.Component{
 
 
     render(){
+        let props = this.props;
         return(
             <div className={"homeContainer"}>
                 <img className={"homeIcon"} src={UTILPATH.localImg.defaultImg} alt=""/>
                 <div className={"homeText font40"}>感谢您辛勤工作，祝您今天顺利！</div>
-                <div className={"closeDoorContent"}>
+                {
+                    props.showClock ? <div className={"closeDoorContent "}>
                         <div className={"closeDoorText font32 colf00"}>
                             <p>关门倒数，请尽快离开店铺</p>
                             <p>请在离开前再次确保没有遗留个人物品在设备内</p>
                         </div>
-                    <Clock />
-                </div>
+                        <Clock totalTime={60}/>
+                    </div> : null
+                }
             </div>
         )
     }

client/containers/PageContainer/PageContainer.jsx

@@ -6,6 +6,7 @@ import {getStoreInfo} from "../../actions/getStore";
 import {getTroubleList} from "../../actions/getTroubles";
 import {initGetOtherProblem,addNewProbem} from "../../actions/otherQuestion"
 import {getRefreshImg} from "../../actions/refreshImg"
+import {uploadError} from '../../actions/uploadError'
 import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
 import TroubleContainer from '../TroubleContainer/TroubleContainer'
 import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr'
@@ -37,12 +38,13 @@ class PageContainer extends React.Component {
         super(props);
         // UTILPATH.socket.getIp();
         this.state = {
-            showPage : showPage[1],
+            showPage : showPage[7],
             lastPage : '',
             page : null,
             popupInfo : defaultPopupInfo,
             pageStyle : {},
             lastPageStyle:{},
+            showClock : false //关门页面显示倒计时
         };
         this.getPages = this.getPages.bind(this);
         this.showPopup = this.showPopup.bind(this);
@@ -54,6 +56,11 @@ class PageContainer extends React.Component {
         this.beginCountBack = this.beginCountBack.bind(this);
         this.endCountBack = this.endCountBack.bind(this);
         this.showAlarm = this.showAlarm.bind(this);
+        this.beginCloseDoor = this.beginCloseDoor.bind(this);
+        this.playAlarmMusic = this.playAlarmMusic.bind(this);
+        this.overTimeSolve = this.overTimeSolve.bind(this);
+        this.failCloseDoor = this.failCloseDoor.bind(this);
+        this.judgeDoorStatus = this.judgeDoorStatus.bind(this);
 
         this.maxCountBackTime = 300;
         this.count = 1000;
@@ -71,6 +78,7 @@ class PageContainer extends React.Component {
         })
     }
     componentDidMount(){
+        // this.beginCountBack()
     }
     componentDidUpdate() {
     }
@@ -96,9 +104,20 @@ class PageContainer extends React.Component {
         this.countbackTimer = null;
     }
 
+    overTimeSolve(){
+        //300s 无人操作，点击确定
+        this.setState({
+            popupInfo : defaultPopupInfo
+        },()=>{
+            this.beginCountBack()
+        })
+    }
+
     countBack(){
+        console.log("countbackTimer ",this.countbackTimer)
         if(!this.countbackTimer && this.countBackTime >= 0){
             this.countBackTime--;
+            console.log(this.countBackTime)
             this.countbackTimer = window.setTimeout(()=>{
                 if(this.countBackTime > 0){
                     clearTimeout(this.countbackTimer);
@@ -108,7 +127,7 @@ class PageContainer extends React.Component {
                     //超过300s未点击，进入异常状态
                     clearTimeout(this.countbackTimer);
                     this.countbackTimer = null;
-                    let btnDom = <Button key={"pagecountBack1"} style={{'width':'260px'}} text={"关闭"} option={this.beginCountBack}/>
+                    let btnDom = <Button key={"pagecountBack1"} style={{'width':'260px'}} text={"确定"} option={this.overTimeSolve}/>
                     let clockDom = <Clock key={"pagecountBack2"} totalTime={60}
                                           style={{'width':'260px','marginLeft':'30px','borderRadius':'10px'}}
                                           callback={this.showAlarm}
@@ -125,9 +144,62 @@ class PageContainer extends React.Component {
     //弹出警告弹窗，并报警
     showAlarm(){
         console.log("showAlarm");
+        let btnDom = <Button key={"pagecountBack1"} style={{'width':'260px'}} text={"确定"} option={this.beginCloseDoor}/>
+        let clockDom = <Clock key={"pagecountBack2"} totalTime={30}
+                              style={{'width':'260px','marginLeft':'30px','borderRadius':'10px'}}
+                              callback={this.beginCloseDoor}
+        />;
+        this.setState({
+            popupInfo : defaultPopupInfo
+        },()=>{
+            this.showPopup({
+                popupText : '检测到店铺反常，请站出店铺，关闭店铺门后重新验证您的身份',
+                popupButtons:[btnDom,clockDom]
+            });
+            this.playAlarmMusic()
+        })
+
     }
 
+    //关门
+    beginCloseDoor(){
+        console.log("beginCloseDoor");
+        this.setState({
+            popupInfo:defaultPopupInfo
+        },()=>{
+            let clockDom = <Clock key={"pagecountBack2"} totalTime={30}
+                                  style={{'width':'260px','marginLeft':'30px','borderRadius':'10px'}}
+                                  text={"关门中"}
+                                  callback={this.judgeDoorStatus}
+            />;
+            this.showPopup({
+                popupText : '关门倒数，请尽快站到设备外关闭设备门',
+                popupButtons:[clockDom]
+            })
+        })
+
+    }
+
+    closeDoor(){
+
+    }
+
+    failCloseDoor(){
+        this.playAlarmMusic();
+        let {dispatch} = this.props;
+        dispatch(uploadError());
+    }
+
+    judgeDoorStatus(){
+        //成功关门
+        //关门失败
+        this.failCloseDoor()
+    }
 
+    playAlarmMusic(){
+        //播放警报音乐
+        console.log("playMusic");
+    }
 
     hidePopup(){
         this.setState({
@@ -211,7 +283,7 @@ class PageContainer extends React.Component {
                         />;
                 break;
             case showPage[7]:
-                pages = <HomeContainer />;
+                pages = <HomeContainer showClock={this.state.showClock}/>;
                 break;
             case showPage[8]:
                 pages = <FinishAskContainer />;
@@ -224,14 +296,17 @@ class PageContainer extends React.Component {
     }
 
     handleTouch(){
+        console.log("handleTouch");
         this.countBackTime = this.maxCountBackTime;
+        this.setState({
+            showClock : true
+        })
     }
 
     render() {
         let {state} = this.props;
         return (
             <div className={"pageContainer "} style={this.state.pageStyle} onTouchStart={()=>this.handleTouch()}>
-
                 <PopupComponent popupInfo={this.state.popupInfo} />
                 {this.getPages()}
             </div>