Skip to content

S
study_projects
Commit 439dda01 authored by yanghui1's avatar yanghui1
Browse files
Options

yh

parent cf032fa2
Hide whitespace changes
Inline Side-by-side
Showing with 37648 additions and 17037 deletions
config/webpack.common.config.js
View file @ 439dda01
......@@ -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-lock.json
View file @ 439dda01
This source diff could not be displayed because it is too large. You can view the blob instead.
project.settings.json
View file @ 439dda01
{"proSetting":{"projectxIDs":{"devId":"p33cf3c31","testId":"p447087ad","prodId":""},"skinVariables":[]},"envSetting":{}}
{"proSetting":{"projectxIDs":{"devId":"p33cf3c31","testId":"p447087ad","prodId":"p8b8fe7fa"},"skinVariables":[]},"envSetting":{}}
src/components/sharePopup/sharePopup.jsx
View file @ 439dda01
......@@ -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 0 → 100644
View file @ 439dda01
'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 0 → 100644
View file @ 439dda01
@import "../../res.less";
.slideVerify {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
\ No newline at end of file
src/modal/modal.jsx
View file @ 439dda01
......@@ -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
View file @ 439dda01
......@@ -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->开始倒计时
})
let auth_timer = setInterval(() => {
// 定时器设置每秒递减
const new_timer = this.state.timer - 1; // 递减时间
this.setState({
isClick: true, // true->开始倒计时
timer: new_timer,
})
setTimeout(() => {
const new_count = this.state.count--;
if (this.state.timer <= 0) {
this.setState({
isClick: false, // true->开始倒计时
})
clearInterval(auth_timer);
this.setState({
count: new_count,
timer: this.initValue,
})
},500)
console.log(this.state.count);
const bindPhoneApi = getBindPhoneApi('Yh');
bindPhoneApi.sendSmsCode();
}
}
}, 1000)
// 发送验证码
const bindPhoneApi = getBindPhoneApi('Yh');
bindPhoneApi.sendSmsCode();
}
clickSlide = () => {
console.log('点击观看视频');
}
render() {
......@@ -113,9 +142,9 @@ 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>
this?.state?.isClick ?
<span className="btn">{this.state.timer}s</span> :
<span className="btn" onClick={this.getCode}>获取验证码</span>
}
</div>
</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
View file @ 439dda01
......@@ -110,4 +110,25 @@
}
.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
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