countdown

src/components/detail/bargain/bargainInfo/bargain-info.scss

@@ -56,10 +56,11 @@
 }
 
 .bargain-phone-popup__button--send {
-  width: 120px;
+  width: 136px;
   border-style: none;
   font-size: 13px;
   color: $color_999;
+  text-align: right;
   background-color: transparent;
   cursor: pointer;
   outline: none;

src/components/detail/bargain/bargainInfo/index.js

@@ -17,7 +17,9 @@ class BargainInfo extends Component {
         isBargain: true,
         isFocus: false,
         bindInfo: {},
-        isTip: false
+        isTip: false,
+        seconds: 60,
+        isTimer: false, // 是否开始倒计时
     }
 
     handleChange = e => {
@@ -32,28 +34,46 @@ class BargainInfo extends Component {
     // 获取短信验证码
     sendCode = () => {
         const { country } = this.props;
-        const { mobile } = this.state;
-        if(!/^\d+$/.test(mobile)){
-            Toast.info('请输入正确的手机号');
-            return;
-        }
-
-        // 获取验证码
-        http.post(
-            `${API['passport-api']}/m/personal/bindPhoneSendCode`,
-            {
-              area_code: country.padStart(4, '0'),
-              phone_num: mobile
+        let { mobile, isTimer, seconds } = this.state;
+        if(!isTimer) {
+            if(!/^\d+$/.test(mobile)){
+                Toast.info('请输入正确的手机号');
+                return;
             }
-          ).then(res => {
-            const { errno, msg } = res.data;
-            if(errno === 200) {
-                Toast.info('验证码发送成功', 2, null, false);
-            }else {
-                Toast.info(msg);
-            }
-        });
 
+            // 获取验证码
+            http.post(
+                `${API['passport-api']}/m/personal/bindPhoneSendCode`,
+                {
+                area_code: country.padStart(4, '0'),
+                phone_num: mobile
+                }
+            ).then(res => {
+                const { errno, msg } = res.data;
+                if(errno === 200) {
+                    Toast.info('验证码发送成功', 2, null, false);
+                    
+                    // 倒计时
+                    this.timer = window.setInterval(() => {
+                        console.log(seconds);
+                        if (seconds <= 0) {
+                            window.clearInterval(this.timer);
+                            this.setState({
+                                isTimer: false,
+                                seconds: 60
+                            });
+                        }else {
+                            this.setState({
+                                isTimer: true,
+                                seconds: --seconds
+                            });
+                        }
+                    }, 1000);
+                }else {
+                    Toast.info(msg);
+                }
+            });
+        }
 
         // http.post(`${API['base-api']}/sys/bind_send_sms`, {
         //     phone_num: this.state.mobile
@@ -127,7 +147,7 @@ class BargainInfo extends Component {
 
     render() {
         const { country, toClose } = this.props;
-        const { mobile, code, isBargain, isFocus, bindInfo, isTip } = this.state;
+        const { mobile, code, isBargain, isFocus, bindInfo, isTip, isTimer, seconds } = this.state;
         const bool = /^\d+$/.test(mobile);
         return (
             <>
@@ -243,7 +263,9 @@ class BargainInfo extends Component {
                                     }
                                 )}
                                 onClick={this.sendCode}
-                            >发送验证码</button>
+                            >
+                                {isTimer? `重新发送${seconds}s` : '发送验证码'}
+                            </button>
                         </div>
                         {
                             isBargain

src/components/search/search-result.js

@@ -78,18 +78,15 @@ class SearchResult extends PureComponent {
     handleScroll = throttle(() => {
         let y = window.scrollY, 
             headY = this.searchHead.current.offsetTop;
-            // console.log(y);
         if (y < this.prevScrollY && y > 0) {
-
             if (this.state.swipeDirection === this.swipeDown) {
-
-                y <= headY && this.state.searchHeadStyle.position !== 'fixed' && this.setState({
+                y <= headY && this.state.searchHeadStyle.position !== 'fixed' && 
+                this.setState({
                     searchHeadStyle: {
                         top: `0`,
                         position: 'fixed'
                     }
                 })
-
             } else {
                 this.setState({
                     swipeDirection: this.swipeDown
@@ -97,15 +94,12 @@ class SearchResult extends PureComponent {
                     if (this.state.swipeDirection === this.swipeDown) {
                         this.setState({
                             searchHeadStyle: {
-                                // top: `${y > headY ? y - 44 : y}px`
-                                top: `${y}px`
+                                top: `${y > headY ? y - 44 : y}px`
                             }
                         })
                     }
                 })
             }
-
-
         } else {
             this.state.swipeDirection !== this.swipeUp &&
             this.setState({
@@ -115,7 +109,6 @@ class SearchResult extends PureComponent {
                     top: `${y}px`
                 }
             })
-
         }
         this.prevScrollY = y;
     }, 0)