增加倒计时功能

8805f661 · Zhang Xin · 77528d08 · 8805f661 · 8805f661 · 8805f661
Commit 8805f661 authored Jul 18, 2018 by Zhang Xin
5 changed files
--- a/client/actions/uploadError.js
+++ b/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}
--- a/client/actiontype/uploadError.js
+++ b/client/actiontype/uploadError.js
+const actionTypes = {
+    UPLOADERROR : 'UPLOADERROR'
+}
+export default actionTypes;
\ No newline at end of file
--- a/client/components/CommonComponent/ClockComponent/ClockComponent.jsx
+++ b/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>
        )

--- a/client/containers/HomeContainer/HomeContainer.jsx
+++ b/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 />
+                        <Clock totalTime={60}/>
-                </div>
+                    </div> : null
+                }
            </div>
        )
    }

--- a/client/containers/PageContainer/PageContainer.jsx
+++ b/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>