heshouzhi倒计时

src/models/login.js

@@ -33,6 +33,7 @@ export default {
     YanZhengMa:null,
     errormsg: null,
     showToptips: false,
+    MyTimes:null
   },
 
   subscriptions: {
@@ -71,6 +72,9 @@ export default {
     },
     setYanZhengMa(state,{payload}){
       return {...state,YanZhengMa:payload.YanZhengMa};
+    },
+    setTime(state,{payload}){
+      return {...state,MyTimes:payload.MyTimes}
     }
   },
 

src/router.js

@@ -21,7 +21,6 @@ function RouterConfig({ history, app }) {
   return (
     <Router history={history}>
       <Switch>
-        <IndexRoute component={HomePage}/>
         <Route path="/" exact component={MiddleSelectPage} />
         <Route path="/Home" component={HomePage} />
         <Route path="/Login" component={IndexPage} />

src/routes/Home/HomePage.js

@@ -15,7 +15,7 @@ class HomePage extends React.Component{
   componentWillMount() {
     const { dispatch } = this.props;
     dispatch({ type: 'home/getSummaryData',payload: { pNumber:'浦东新区' }});
-   // dispatch({ type: 'home/getSummary',payload: { pNumber:'浦东新区' }});
+    dispatch({ type: 'home/getSummary',payload: { pNumber:'浦东新区' }});
   }
   onChange=(value)=>{
     console.info("改变了");

src/routes/IndexPage.js

@@ -21,7 +21,13 @@ import {
 import 'weui';
 import 'react-weui/build/packages/react-weui.css';
 import styles from './IndexPage.css';
+
+
 class IndexPage extends React.Component{
+  constructor(props) {
+    super(props);
+    this.ti = this.ti.bind(this);
+  }
   //手机号判断
   telCheck=(event)=>{
     const tel=event.target.value;
@@ -44,18 +50,38 @@ class IndexPage extends React.Component{
       this.props.dispatch({ type: 'login/setYanZhengMa', payload: { YanZhengMa:tel } });
     }
   };
+
+  //一秒减一
+  ti = function(number){
+    let t = setInterval(function () {
+      number--;
+      if(number<1){
+        clearInterval(t);
+      }
+      this.props.dispatch({type:'login/setTime',payload:{MyTimes:number}});
+    }.bind(this),1000);
+  }
   //发送验证码
   sendCheckNum = () => {
+    this.ti(10);
     // 1.检验改手机号是否存在系统中，如果不存在，无法注册
-      this.props.dispatch({type:'login/checkNumber',payload:{}})
+    this.props.dispatch({type:'login/checkNumber',payload:{}})
   };
   // 注册
   registerClick=()=>{
     this.props.dispatch({ type: 'login/checkYanZhengMa', payload: {} });
   };
   render(){
+    let time = this.props.login.MyTimes;
+    let button = (<CellFooter>
+                  <Button type="vcode" onClick={this.sendCheckNum} style={{height:"25px",lineHeight:"25px"}}>发送</Button>
+                </CellFooter>);
+    if(time>0 && time<10){
+      button = (<CellFooter>
+        <Button type="vcode" style={{height:"25px",lineHeight:"25px"}}>{time}</Button>
+      </CellFooter>);
+    }
   return (
-
     <Page className={styles.bodyBackground}>
       <h1 className={styles.myTitle}>上海征地房屋补偿</h1>
       <Form className={styles.formWrapStyle}>
@@ -75,9 +101,7 @@ class IndexPage extends React.Component{
           <CellBody>
             <Input type="tel" placeholder="验证码"  onBlur={(event)=>this.telYanZhengMa(event)} style={{color:"#fff"}}/>
           </CellBody>
-          <CellFooter>
-            <Button type="vcode" onClick={this.sendCheckNum} style={{height:"25px",lineHeight:"25px"}}>发送</Button>
-          </CellFooter>
+          {button}
         </FormCell>
       </Form>
       <ButtonArea className={styles.buttonWrapStyle}>