Skip to content

M
max_android_panel
Commit 71d9abd0 by Zhang Xin
Options

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

parent a3801e6c
Showing with 125 additions and 11 deletions
client/components/CommonComponent/ClockComponent/ClockComponent.jsx
import React from 'react'; import React from 'react';
require('./index.css'); require('./index.css');
const initCount = -1;
export default class ClockComponent extends React.Component{ export default class ClockComponent extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.state = { 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(){ render(){
...@@ -14,7 +75,7 @@ export default class ClockComponent extends React.Component{ ...@@ -14,7 +75,7 @@ export default class ClockComponent extends React.Component{
return( return(
<div className={"clockComponent font32"} style={props.style}> <div className={"clockComponent font32"} style={props.style}>
<img className={"clockIcon"} src={UTILPATH.localImg.clockIcon} alt=""/> <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> </div>
) )
} }
......
client/components/CommonComponent/PopupComponent/PopupComponent.jsx
...@@ -11,10 +11,7 @@ export default class PopupComponent extends React.Component{ ...@@ -11,10 +11,7 @@ export default class PopupComponent extends React.Component{
let {popupInfo} = props; let {popupInfo} = props;
let arrButton = popupInfo.popupButtons ? popupInfo.popupButtons : [] let arrButton = popupInfo.popupButtons ? popupInfo.popupButtons : []
let dom = arrButton.map((a,k)=>{ let dom = arrButton.map((a,k)=>{
return ( return a;
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 ( return (
<div className={"defaultPopup col333"}> <div className={"defaultPopup col333"}>
......
client/containers/PageContainer/PageContainer.jsx
...@@ -15,6 +15,8 @@ import OtherQuestionContainer from '../OtherQuestionContainer/OtherQuestionConta ...@@ -15,6 +15,8 @@ import OtherQuestionContainer from '../OtherQuestionContainer/OtherQuestionConta
import HomeContainer from '../HomeContainer/HomeContainer' import HomeContainer from '../HomeContainer/HomeContainer'
import FinishAskContainer from '../FinishAskContainer/FinishAskContainer' import FinishAskContainer from '../FinishAskContainer/FinishAskContainer'
import ChooseTaskContainer from '../ChooseTaskContainer/ChooseTaskContainer' import ChooseTaskContainer from '../ChooseTaskContainer/ChooseTaskContainer'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent';
import Clock from '../../components/CommonComponent/ClockComponent/ClockComponent'
require('./index.css') require('./index.css')
...@@ -49,11 +51,15 @@ class PageContainer extends React.Component { ...@@ -49,11 +51,15 @@ class PageContainer extends React.Component {
this.showQrCode = this.showQrCode.bind(this); this.showQrCode = this.showQrCode.bind(this);
this.saveLastPage = this.saveLastPage.bind(this); this.saveLastPage = this.saveLastPage.bind(this);
this.goBack = this.goBack.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.maxCountBackTime = 300;
this.count = 1000; this.count = 1000;
this.countbackTimer = null; this.countbackTimer = null;
this.countBackTime = -1;
} }
componentWillMount() { componentWillMount() {
...@@ -74,9 +80,55 @@ class PageContainer extends React.Component { ...@@ -74,9 +80,55 @@ class PageContainer extends React.Component {
componentWillUnmount(){ 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(){ 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(){ hidePopup(){
this.setState({ this.setState({
...@@ -172,13 +224,13 @@ class PageContainer extends React.Component { ...@@ -172,13 +224,13 @@ class PageContainer extends React.Component {
} }
handleTouch(){ handleTouch(){
this.countBackTime = this.maxCountBackTime;
} }
render() { render() {
let {state} = this.props; let {state} = this.props;
return ( return (
<div className={"pageContainer "} style={this.state.pageStyle} onTouch=""> <div className={"pageContainer "} style={this.state.pageStyle} onTouchStart={()=>this.handleTouch()}>
<PopupComponent popupInfo={this.state.popupInfo} /> <PopupComponent popupInfo={this.state.popupInfo} />
{this.getPages()} {this.getPages()}
......
client/containers/TroubleContainer/TroubleContainer.jsx
...@@ -5,6 +5,7 @@ import HeaderComponent from '../../components/CommonComponent/HeaderComponent/He ...@@ -5,6 +5,7 @@ import HeaderComponent from '../../components/CommonComponent/HeaderComponent/He
import TextArea from "../TextAreaContainer/TextAreaContainer"; import TextArea from "../TextAreaContainer/TextAreaContainer";
import Qrcode from '../Qrcode/Qrcode' import Qrcode from '../Qrcode/Qrcode'
import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent' import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css') require('./index.css')
const showDom={ const showDom={
...@@ -33,6 +34,7 @@ export default class TroubleContainer extends React.Component{ ...@@ -33,6 +34,7 @@ export default class TroubleContainer extends React.Component{
this.getTextAreaDom = this.getTextAreaDom.bind(this); this.getTextAreaDom = this.getTextAreaDom.bind(this);
this.getQrcodeDom = this.getQrcodeDom.bind(this); this.getQrcodeDom = this.getQrcodeDom.bind(this);
this.updateImg = this.updateImg.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{ ...@@ -59,6 +61,7 @@ export default class TroubleContainer extends React.Component{
}) })
} }
let refreshImg = nextProps.refreshImg; let refreshImg = nextProps.refreshImg;
let nowRefreshImg = this.state.refreshImg; let nowRefreshImg = this.state.refreshImg;
if(refreshImg && refreshImg.errorId && refreshImg.type && refreshImg.files){ if(refreshImg && refreshImg.errorId && refreshImg.type && refreshImg.files){
...@@ -144,10 +147,11 @@ export default class TroubleContainer extends React.Component{ ...@@ -144,10 +147,11 @@ export default class TroubleContainer extends React.Component{
return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation) return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation)
}); });
let btnDom = <Button key={"dealTrouble1"} style={{'width':'260px'}} text={"关闭"} option={hidePopup}/>
if(arr && arr.length > 0){ if(arr && arr.length > 0){
showPopup({ showPopup({
popupText:'请完成所有需要处理的故障的必填项', popupText:'请完成所有需要处理的故障的必填项',
popupButtons:[{text : '关闭',option:hidePopup}] popupButtons:[btnDom]
}) })
}else{ }else{
details.forEach((d)=>{ details.forEach((d)=>{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment