添修改弹窗组建，增加倒计时操作

client/components/CommonComponent/ClockComponent/ClockComponent.jsx

 import React from 'react';
 require('./index.css');
-
+const initCount = -1;
 export default class ClockComponent extends React.Component{
     constructor(props){
         super(props);
         this.state = {
-            time : 60
+            count : initCount,
+            timer : null
+        };
+        this.time = 1000;
+        this.beginCountBack = this.beginCountBack.bind(this)
+    }
+
+    componentWillMount(){
+        console.log("componentWillMount")
+        let {totalTime} = this.props;
+        if(totalTime && totalTime > 0){
+            this.setState({
+                count : totalTime
+            },()=>{
+                this.beginCountBack()
+            })
+        }
+
+    }
+
+    componentWillReceiveProps(){
+        console.log("componentWillReceiveProps")
     }
+
+    componentWillUnmount(){
+        console.log("componentWillUnmount")
+        window.clearTimeout(this.state.timer);
+        this.setState({
+            timer : null,
+            count : initCount
+        })
+    }
+
+    beginCountBack(){
+        let {callback} = this.props;
+        let that = this;
+        console.log("timer ",this.state.timer);
+        if(!this.state.timer && this.state.count >= 0){
+            let count = this.state.count - 1;
+            console.log("count ",count," ",this.state.count);
+            this.state.timer = window.setTimeout(()=>{
+                if(count >= 0){
+                    window.clearTimeout(that.state.timer);
+                    that.setState({
+                        timer : null,
+                        count : count
+                    },()=>{
+                        that.beginCountBack();
+                    })
+                }else{
+                    //倒计时结束
+                    window.clearTimeout(that.state.timer);
+                    that.setState({
+                        timer : null
+                    },()=>{
+                        console.log("倒计时结束");
+                        callback();
+                    })
+
+                }
+            },this.time)
+        }
+
     }
 
     render(){
@@ -14,7 +75,7 @@ export default class ClockComponent extends React.Component{
         return(
             <div className={"clockComponent font32"} style={props.style}>
                 <img className={"clockIcon"} src={UTILPATH.localImg.clockIcon} alt=""/>
-                <span className={"clockTime"}>{this.state.time}s</span>
+                <span className={"clockTime"}>{this.state.count}s</span>
             </div>
         )
     }

client/components/CommonComponent/PopupComponent/PopupComponent.jsx

@@ -11,10 +11,7 @@ export default class PopupComponent extends React.Component{
         let {popupInfo} = props;
         let arrButton = popupInfo.popupButtons ? popupInfo.popupButtons : []
         let dom = arrButton.map((a,k)=>{
-            return (
-                a.option && a.option instanceof Function ? <div key={"popuoButton"+k} className={"defaultPopupButton"} onClick={()=>a.option()}>{a.text}</div> :
-                    <div key={"popuoButton"+k} className={"defaultPopupButton"}>{a.text}</div>
-            )
+            return a;
         });
         return (
             <div className={"defaultPopup col333"}>

client/containers/PageContainer/PageContainer.jsx

@@ -15,6 +15,8 @@ import OtherQuestionContainer from '../OtherQuestionContainer/OtherQuestionConta
 import HomeContainer from '../HomeContainer/HomeContainer'
 import FinishAskContainer from '../FinishAskContainer/FinishAskContainer'
 import ChooseTaskContainer from '../ChooseTaskContainer/ChooseTaskContainer'
+import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent';
+import Clock from '../../components/CommonComponent/ClockComponent/ClockComponent'
 
 require('./index.css')
 
@@ -49,11 +51,15 @@ class PageContainer extends React.Component {
         this.showQrCode = this.showQrCode.bind(this);
         this.saveLastPage = this.saveLastPage.bind(this);
         this.goBack = this.goBack.bind(this);
+        this.handleTouch = this.handleTouch.bind(this);
+        this.beginCountBack = this.beginCountBack.bind(this);
+        this.endCountBack = this.endCountBack.bind(this);
+        this.showAlarm = this.showAlarm.bind(this);
 
         this.maxCountBackTime = 300;
         this.count = 1000;
         this.countbackTimer = null;
-
+        this.countBackTime = -1;
 
     }
     componentWillMount() {
@@ -74,9 +80,55 @@ class PageContainer extends React.Component {
     componentWillUnmount(){
     }
 
+
+
+    //开始倒计时,看有没有操作，只是在整个开门过程中才监听
+
+    beginCountBack(){
+        this.countBackTime = this.maxCountBackTime;
+        clearTimeout(this.countbackTimer);
+        this.countbackTimer = null;
+        this.countBack.bind(this)();
+    }
+
+    endCountBack(){
+        this.countbackTimer = -1;
+        clearTimeout(this.countbackTimer);
+        this.countbackTimer = null;
+    }
+
     countBack(){
+        if(!this.countbackTimer && this.countBackTime >= 0){
+            this.countBackTime--;
+            this.countbackTimer = window.setTimeout(()=>{
+                if(this.countBackTime > 0){
+                    clearTimeout(this.countbackTimer);
+                    this.countbackTimer = null;
+                    this.countBack();
+                }else{
+                    //超过300s未点击，进入异常状态
+                    clearTimeout(this.countbackTimer);
+                    this.countbackTimer = null;
+                    let btnDom = <Button key={"pagecountBack1"} style={{'width':'260px'}} text={"关闭"} option={this.beginCountBack}/>
+                    let clockDom = <Clock key={"pagecountBack2"} totalTime={60}
+                                          style={{'width':'260px','marginLeft':'30px','borderRadius':'10px'}}
+                                          callback={this.showAlarm}
+                    />
+                    this.showPopup({
+                        popupText : '您是否还在店铺准备执行您的任务',
+                        popupButtons:[btnDom,clockDom]
+                    })
+                }
+            },this.count);
+        }
 
     }
+    //弹出警告弹窗，并报警
+    showAlarm(){
+        console.log("showAlarm");
+    }
+
+
 
     hidePopup(){
         this.setState({
@@ -172,13 +224,13 @@ class PageContainer extends React.Component {
     }
 
     handleTouch(){
-
+        this.countBackTime = this.maxCountBackTime;
     }
 
     render() {
         let {state} = this.props;
         return (
-            <div className={"pageContainer "} style={this.state.pageStyle} onTouch="">
+            <div className={"pageContainer "} style={this.state.pageStyle} onTouchStart={()=>this.handleTouch()}>
 
                 <PopupComponent popupInfo={this.state.popupInfo} />
                 {this.getPages()}

client/containers/TroubleContainer/TroubleContainer.jsx

@@ -5,6 +5,7 @@ import HeaderComponent from '../../components/CommonComponent/HeaderComponent/He
 import TextArea from "../TextAreaContainer/TextAreaContainer";
 import Qrcode from '../Qrcode/Qrcode'
 import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent'
+import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
 require('./index.css')
 
 const showDom={
@@ -33,6 +34,7 @@ export default class TroubleContainer extends React.Component{
         this.getTextAreaDom = this.getTextAreaDom.bind(this);
         this.getQrcodeDom = this.getQrcodeDom.bind(this);
         this.updateImg = this.updateImg.bind(this);
+        this.dealTrouble = this.dealTrouble.bind(this);
     }
 
 
@@ -59,6 +61,7 @@ export default class TroubleContainer extends React.Component{
             })
         }
 
+
         let refreshImg = nextProps.refreshImg;
         let nowRefreshImg = this.state.refreshImg;
         if(refreshImg && refreshImg.errorId && refreshImg.type && refreshImg.files){
@@ -144,10 +147,11 @@ export default class TroubleContainer extends React.Component{
             return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation)
         });
 
+        let btnDom = <Button key={"dealTrouble1"} style={{'width':'260px'}} text={"关闭"} option={hidePopup}/>
         if(arr && arr.length > 0){
             showPopup({
                 popupText:'请完成所有需要处理的故障的必填项',
-                popupButtons:[{text : '关闭',option:hidePopup}]
+                popupButtons:[btnDom]
             })
         }else{
             details.forEach((d)=>{