yh

config/webpack.common.config.js

@@ -91,6 +91,7 @@ module.exports = function (isProd) {
                     use: styleLoader(),
                     include: sparkConfig.SOURCE_DIR,
                 },
+                { test: /\.css$/, use: ['style-loader', 'css-loader']},
                 {
                     test: /\.(js|jsx)$/,
                     loader: require.resolve("babel-loader"),

package.json

@@ -30,11 +30,13 @@
         "mobx-react": "^7.1.0",
         "postcss-loader": "^3.0.0",
         "prettier": "^2.0.5",
+        "pubsub-js": "^1.9.4",
         "qs": "^6.9.4",
         "react": "^16.4.1",
         "react-dom": "^16.4.1",
         "react-redux": "^5.0.7",
         "react-router-dom": "^5.2.0",
+        "react-simple-verify": "^1.0.11",
         "redux": "^4.0.0",
         "redux-thunk": "^2.3.0",
         "spark-utils": "^0.0.12",

project.settings.json

-{"proSetting":{"projectxIDs":{"devId":"p33cf3c31","testId":"p447087ad","prodId":""},"skinVariables":[]},"envSetting":{}}
+{"proSetting":{"projectxIDs":{"devId":"p33cf3c31","testId":"p447087ad","prodId":"p8b8fe7fa"},"skinVariables":[]},"envSetting":{}}

src/components/sharePopup/sharePopup.jsx

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import store from '../../store/index';
 import modalStore from '@src/store/modal';
 import API from '../../api';
-import { dateFormatter } from '../../utils/utils';
+import { dateFormatter } from '../../utils/utils'; // 引入日期格式化
 import './sharePopup.less';
 
 @observer

src/components/slideVerify/SlideVerify.jsx

+'use strict';
+
+import React from 'react';
+import { RES_PATH } from '../../../sparkrc.js';
+import { observer } from 'mobx-react';
+import store from '../../store/index';
+import modalStore from '@src/store/modal';
+import API from '../../api';
+import { Toast } from '@spark/ui'; // 引入Toast
+import ReactSimpleVerify from 'react-simple-verify'; // 引入react滑块验证
+import PubSub from 'pubsub-js'; // 引入pubsub-js
+import 'react-simple-verify/dist/react-simple-verify.css'; // 引入react滑块验证的css
+import './SlideVerify.less';
+
+@observer
+class SlideVerify extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    // 开启倒计时
+    startCountDown = () => {
+        // 发布消息-消息名：“isClick”
+        PubSub.publish('isClick');
+    }
+
+    // 验证成功之后进行的操作
+    success = () => {
+        modalStore.closePop('SlideVerify'); // 关闭滑块验证组件
+        // didClose是Toast的回调函数
+        Toast('验证成功', 1500, {
+            didClose: this.startCountDown
+        });
+    }
+
+    render() {
+        return (
+            <div className='slideVerify'>
+                {/* react滑块组件 */}
+                <ReactSimpleVerify ref="verify" success={this.success.bind(this)} />
+            </div>);
+    }
+}
+
+export default SlideVerify;

src/components/slideVerify/SlideVerify.less

+@import "../../res.less";
+.slideVerify {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+}
\ No newline at end of file

src/modal/modal.jsx

@@ -4,8 +4,10 @@ import { observer } from 'mobx-react';
 import modalStore from '../store/modal';
 import { toJS } from 'mobx';
 import SharePopUp from '../components/sharePopup/sharePopup';
+import SlideVerify from "@src/components/slideVerify/SlideVerify";
 export const cfg = {
-  SharePopUp
+  SharePopUp,
+  SlideVerify,
 };
 
 @observer

src/pages/homePage/homePage.jsx

@@ -9,8 +9,10 @@ import API from '../../api';
 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 Swiper from 'swiper'; // 引入swiper
+import { Toast } from '@spark/ui'; // 引入Toast
+import { _throttle } from '../../utils/utils'; // 引入节流
+import PubSub from 'pubsub-js'; // 引入pubsub-js
 import './homePage.less';
 
 @observer
@@ -19,7 +21,18 @@ class HomePage extends React.Component {
     super(props);
   }
 
+  initValue = 60 // 定义倒计时秒数
+
+  state = {
+    timer: this.initValue, // 倒计时数
+  }
+
   componentDidMount() {
+    // 订阅消息-消息名：“isClick”
+    this.token = PubSub.subscribe('isClick',(msg,data) => {
+      this.countDown();
+    });
+
     // 获取轮播数据
     const carouselApi = getCarouselApi('Yh');
     carouselApi.query()
@@ -42,20 +55,17 @@ class HomePage extends React.Component {
         loop: true,
       });
     }, 500)
-
-    // 定义倒计时
-    this.setState({
-      count: 60, // 60s
-    })
   }
 
-  
+  componentWillUnmount() {
+    PubSub.unSubscribe(this.token); // 取消订阅
+  }
 
   // 分享
   onShare = () => {
     const shareApi = getShareApi("Yh");
 
-    let obj = shareApi.doShare();
+    // let obj = shareApi.doShare();
     // console.log(obj); // 是个Promise对象-分享
 
     shareApi.doShare()
@@ -66,7 +76,7 @@ class HomePage extends React.Component {
         console.log(err);
       });
 
-    let obj1 = shareApi.queryCount();
+    // let obj1 = shareApi.queryCount();
     // console.log(obj1); // 是个Promise对象-查询次数
 
     shareApi.doShare()
@@ -79,30 +89,49 @@ class HomePage extends React.Component {
   }
 
   // 点击“获取验证码”
-  getCode = () => {
+  getCode = _throttle(() => {
     const { username } = this;
     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 {
+    // if (phoneNumber == '') {
+    //   Toast('请输入手机号');
+    //   return;
+    // } else if (!reg_tel.test(phoneNumber)) {
+    //   Toast('请输入正确的手机号格式');
+    //   return;
+    // } else {
+      modalStore.pushPop('SlideVerify'); // 打开滑块验证组件
+    // }
+  })
+
+  // 倒计时
+  countDown = () => {
     this.setState({
       isClick: true, // true->开始倒计时
     })
-      setTimeout(() => {
-        const new_count = this.state.count--;
+    let auth_timer = setInterval(() => {
+      // 定时器设置每秒递减
+      const new_timer = this.state.timer - 1; // 递减时间
+      this.setState({
+        timer: new_timer,
+      })
+      if (this.state.timer <= 0) {
         this.setState({
-          count: new_count,
+          isClick: false, // true->开始倒计时
         })
-      },500)
-      console.log(this.state.count);
+        clearInterval(auth_timer);
+        this.setState({
+          timer: this.initValue,
+        })
+      }
+    }, 1000)
+    // 发送验证码
     const bindPhoneApi = getBindPhoneApi('Yh');
     bindPhoneApi.sendSmsCode();
   }
+
+  clickSlide = () => {
+    console.log('点击观看视频');
   }
 
   render() {
@@ -113,8 +142,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>:
+              this?.state?.isClick ?
+                <span className="btn">{this.state.timer}s</span> :
                 <span className="btn" onClick={this.getCode}>获取验证码</span>
             }
           </div>
@@ -126,9 +155,11 @@ class HomePage extends React.Component {
               this?.state?.imgData?.map((item, index) => {
                 return (
                   <div className="swiper-slide swiper-slide1" key={index}>
-                    <div className="banner_img">
+                    <div className="banner_img" onClick={this.clickSlide}>
                       <img src={item} alt="" />
+                      <span className='tip'>点击观看视频</span>
                     </div>
+
                   </div>
                 )
               })

src/pages/homePage/homePage.less

@@ -111,3 +111,24 @@
 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
   bottom: 8px;
 }
+
+.image-code {
+  width: 100%!important;
+  padding: 0!important;
+  margin-top: 0.1rem;
+}
+
+.tip {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  background-color: rgba(0,0,0,.5);
+  color: #fff;
+  width: 2rem;
+  height: .6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.1rem;
+}
\ No newline at end of file