yh

package-lock.json

@@ -15,7 +15,7 @@
                 "@spark/api-task": "^1.0.38",
                 "@spark/projectx": "^2.0.5",
                 "@spark/svgaplayer": "^2.0.3",
-                "@spark/ui": "^2.0.8",
+                "@spark/ui": "^2.1.6",
                 "@spark/utils": "^2.0.17",
                 "axios": "^0.19.2",
                 "css-loader": "^3.6.0",
@@ -3025,19 +3025,6 @@
                 "react-ticker": "^1.2.2"
             }
         },
-        "node_modules/@spark/ui/node_modules/@spark/utils": {
-            "version": "2.0.74",
-            "resolved": "http://npm.dui88.com:80/@spark%2futils/-/utils-2.0.74.tgz",
-            "integrity": "sha512-9TPetTb7eVumjOv7+NtfIFM33NNObpyw/na8s+LrFwH/WX8rMzc952kqkwWFxUsOplzQL/Y6a+1mXPhoXwwMyw==",
-            "license": "MIT",
-            "dependencies": {
-                "@spark/api-base": "^2.0.30",
-                "crypto-js": "^4.0.0",
-                "howler": "^2.2.1",
-                "html-observer": "^1.0.4",
-                "html-shot": "^1.0.13"
-            }
-        },
         "node_modules/@spark/utils": {
             "version": "2.0.81",
             "resolved": "http://npm.dui88.com:80/@spark%2futils/-/utils-2.0.81.tgz",
@@ -22188,20 +22175,6 @@
                 "db-react-helper": "^1.0.5",
                 "hammerjs": "^2.0.8",
                 "react-ticker": "^1.2.2"
-            },
-            "dependencies": {
-                "@spark/utils": {
-                    "version": "2.0.74",
-                    "resolved": "http://npm.dui88.com:80/@spark%2futils/-/utils-2.0.74.tgz",
-                    "integrity": "sha512-9TPetTb7eVumjOv7+NtfIFM33NNObpyw/na8s+LrFwH/WX8rMzc952kqkwWFxUsOplzQL/Y6a+1mXPhoXwwMyw==",
-                    "requires": {
-                        "@spark/api-base": "^2.0.30",
-                        "crypto-js": "^4.0.0",
-                        "howler": "^2.2.1",
-                        "html-observer": "^1.0.4",
-                        "html-shot": "^1.0.13"
-                    }
-                }
             }
         },
         "@spark/utils": {

package.json

@@ -20,7 +20,7 @@
         "@spark/api-task": "^1.0.38",
         "@spark/projectx": "^2.0.5",
         "@spark/svgaplayer": "^2.0.3",
-        "@spark/ui": "^2.0.8",
+        "@spark/ui": "^2.1.6",
         "@spark/utils": "^2.0.17",
         "axios": "^0.19.2",
         "css-loader": "^3.6.0",

src/pages/homePage/homePage.jsx

@@ -10,6 +10,7 @@ import getShareApi from '@spark/api-share'; // 分享玩法组件包
 import getBindPhoneApi from '@spark/api-bindPhone'; // 绑定手机号玩法组件包
 import getCarouselApi from '@spark/api-carousel'; // 轮播玩法组件包
 import Swiper from 'swiper';
+import { Toast } from '@spark/ui';
 import './homePage.less';
 
 @observer
@@ -41,9 +42,14 @@ class HomePage extends React.Component {
         loop: true,
       });
     }, 500)
+
+    // 定义倒计时
+    this.setState({
+      count: 60, // 60s
+    })
   }
 
-  isClick = false; // 判断是否点击了“获取验证码”
+  
 
   // 分享
   onShare = () => {
@@ -72,14 +78,32 @@ class HomePage extends React.Component {
       });
   }
 
-  // 获取验证码
+  // 点击“获取验证码”
   getCode = () => {
-    this.isClick = true;
     const { username } = this;
-    let phoneNumber = username.value; // 获取到手机号
+    let phoneNumber = username.value; // 获取到输入的手机号
+    const reg_tel = /^1[3|4|5|7|8]\d{9}$/; // 手机号的正则表达式
+    if (phoneNumber == '') {
+      Toast('请输入手机号');
+      return;
+    }else if (!reg_tel.test(phoneNumber)) {
+      Toast('请输入正确的手机号格式');
+      return;
+    } else {
+      this.setState({
+        isClick: true, // true->开始倒计时
+      })
+      setTimeout(() => {
+        const new_count = this.state.count--;
+        this.setState({
+          count: new_count,
+        })
+      },500)
+      console.log(this.state.count);
       const bindPhoneApi = getBindPhoneApi('Yh');
       bindPhoneApi.sendSmsCode();
     }
+  }
 
   render() {
     return (
@@ -89,6 +113,8 @@ class HomePage extends React.Component {
           <div className='marginBottom'>手机号：<input ref={(e) => { this.username = e }} type="text" name="phone" /></div>
           <div>验证码：<input ref={(e) => { this.code = e }} type="text" name="verifyCode" />
             {
+              this?.state?.isClick?
+              <span className="btn">{this.state.count}</span>:
               <span className="btn" onClick={this.getCode}>获取验证码</span>
             }
           </div>