Skip to content

M
mr-julyedu
Commit e3f562e0 by xuzhenghua
Options

首页轮播

parent d65e40c9
Showing with 193 additions and 134 deletions
package.json
......@@ -48,6 +48,7 @@
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6",
"react-mobile-swiper": "^1.1.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
......
src/components/Index/animateTypes.js 0 → 100644
Object.defineProperty(exports, "__esModule", {
value: true
});
var DEFAULT = exports.DEFAULT = 'DEFAULT';
var ROLL = exports.ROLL = 'ROLL';
var CARD = exports.CARD = 'CARD';
console.log(DEFAULT,ROLL,CARD)
\ No newline at end of file
src/components/Index/createStyle.js 0 → 100644
Object.defineProperty(exports, "__esModule", {
value: true
});
var _animateTypes = require('./animateTypes');
var animateTypess = _interopRequireWildcard(_animateTypes);
var clientWidth = exports.clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
exports.default = function (animateTypes, stage, progress, duration) {
switch (animateTypes) {
case animateTypess.CARD:
switch (stage) {
case 'pre':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + -(clientWidth * 0.92 + progress) + 'px) scaleY(' + (0.92 + Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + 's',
zIndex: 2
};
case 'active':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + -progress + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.85) * 0.2)) + ')',
transitionDuration: duration + 's',
zIndex: 3
};
case 'next':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (clientWidth * 0.92 - progress) + 'px) scaleY(' + (0.92 + Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
case 'prePro':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (-(clientWidth * 1.7) - progress) + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
case 'nextPro':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (clientWidth * 1.7 - progress) + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
default: break;
}
break;
default: break;
}
};
\ No newline at end of file
src/components/Index/index.js
import React, {Component} from 'react';
import {Course} from '../../common'
import Scroll from './scroll'
import Topscroll from './topscroll'
import './index.scss';
import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle'
const animateTypes = Swiper.animateTypes
class Index extends Component {
liveColse(){
liveColse() {
this.setState(status => ({
isshow: !status.isshow,
}));
}
toSubscribe(){
toSubscribe() {
this.setState(status => ({
isshow: !status.isshow,
toSubscribe: !status.toSubscribe
}));
}
subscribeColse(){
subscribeColse() {
this.setState(status => ({
toSubscribe: !status.toSubscribe
}));
}
iphoneStep(){
iphoneStep() {
this.setState(status => ({
step: 1
}));
}
serverStep(){
serverStep() {
this.setState(status => ({
step: 2
}));
}
submit(){
submit() {
this.setState(status => ({
success: true,
toSubscribe: !status.toSubscribe
}));
}
state = {
issubscribe: 0,
toSubscribe: false,
isfollow: true,
isshow: true,
isfollow: false,
isshow: false,
step: 0,
success: false,
dataList: [
......@@ -106,19 +114,33 @@ class Index extends Component {
}
]
}
toSearch() {
window.location.href ='/search'
window.location.href = '/search'
}
render() {
return (
<div className='index-box'>
<div className='header'>
<img className="logo" src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" alt="" />
<img className="logo"
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" alt=""/>
<button className='to-app'>在APP打开</button>
<i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i>
</div>
<Topscroll data={this.state.dataList} height='155px' actheight='168px'></Topscroll>
<div className='index-swiper'>
<Swiper type={animateTypes.CARD} loop={true} height={168} autoPlay={true} typePro createStyle={createStyle}>
{this.state.dataList.map((item, index) => {
return (
<div key={index}>
<img className="item" src={item.src} alt=""/>
</div>
)
})
}
</Swiper>
</div>
<div className="tabbox">
<ul>
......@@ -199,7 +221,16 @@ class Index extends Component {
<div className='category'>
<h2 className="title">热门推荐</h2>
<a className="more" href="/#">更多 ></a>
<Scroll data={this.state.dataList} height='106px'></Scroll>
<Swiper className='scroll' loop={true} type={animateTypes.DEFAULT} autoPlay>
{this.state.dataList.map((item, index) => {
return (
<div key={index}>
<img className="item" src={item.src} alt=""/>
</div>
)
})
}
</Swiper>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
......@@ -303,7 +334,9 @@ class Index extends Component {
<div className='live-room-content'>
<div className='course-banner'>
<div className='left'><span></span></div>
<div className='center'><img src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" alt=""/></div>
<div className='center'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/></div>
<div className='right'><span></span></div>
</div>
<div className='course-dec'>
......@@ -341,22 +374,26 @@ class Index extends Component {
{
this.state.toSubscribe === true &&
<div className='subscribe-box'>
{ this.state.step === 0 &&
{this.state.step === 0 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='subscribe-content'>
<span className='title'>请选择即将直播时通知您的方式</span>
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.serverStep.bind(this)}>微信服务号通知</button>
<button className={this.state.isfollow ? 'follow' : 'nofollow'}
onClick={this.serverStep.bind(this)}>微信服务号通知
</button>
{
this.state.isfollow === true &&
<span className='tips'>关注服务号即代表预约成功</span>
}
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.iphoneStep.bind(this)}>手机短信通知</button>
<button className={this.state.isfollow ? 'follow' : 'nofollow'}
onClick={this.iphoneStep.bind(this)}>手机短信通知
</button>
</div>
</div>
}
{ this.state.step === 1 &&
{this.state.step === 1 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content'>
......@@ -367,11 +404,12 @@ class Index extends Component {
</div>
</div>
}
{ this.state.step === 2 &&
{this.state.step === 2 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content server-content'>
<p className='title'><i className={'iconfont icondanseshixintubiao-5'}></i><span>预约成功</span></p>
<p className='title'><i
className={'iconfont icondanseshixintubiao-5'}></i><span>预约成功</span></p>
<p className='dec'>直播开始前会通过微信“服务通知”提醒您。 推荐预留手机号，届时可通过手机号登录直播 间直接学习：</p>
<input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>提交</button>
......
src/components/Index/index.scss
......@@ -31,42 +31,69 @@
margin-top: -6px;
}
}
.top-scroll {
touch-action: pan-y;
.index-swiper {
margin-top: 7px;
height: 168px;
position: relative;
.am-wingblank.am-wingblank-lg {
margin: 0;
}
.swiper-container {
height: 100%!important;
.swiper-slide {
img {
width: 100%;
height: 168px;
border-radius: 6px;
}
.slider-decorator-0 {
position: absolute;
top: 125px;
.am-carousel-wrap {
}
}
.swiper-pagination {
width: 100%;
left: 188px !important;
text-align: right;
padding-right: 50px;
padding-right: 55px;
.pagination-item{
width: 8px !important;
height: 8px !important;
background-color: $bg_fff !important;
opacity: 0.5;
}
.active {
width: 18px!important;
height: 7px!important;
border-radius: 4px!important;
background-color: $bg_fff !important;
opacity: 1;
}
}
}
/*热门推荐轮播*/
.scroll {
width: 100%;
margin-left: 0 !important;
margin-top: 12px;
/*热门推荐轮播*/
.category {
.swiper-container {
height: 106px !important;
margin-top: 15px;
margin-bottom: 5px;
touch-action: pan-y;
border-radius: 3px;
.swiper-pagination {
bottom: 5px !important;
.pagination-item {
width: 8px !important;
height: 8px !important;
background-color: $bg_fff !important;
opacity: 0.5;
}
.active {
background-color: $bg_fff !important;
opacity: 1;
}
}
}
}
/*
页面tab
*/
......@@ -296,6 +323,7 @@
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: rgba(0, 0, 0, .6);
.live-room-content {
......@@ -565,23 +593,28 @@
margin-top: 20px;
}
}
.server-content {
height: 226px;
padding: 20px;
.title {
font-size: 18px;
color: $active;
height: 24px;
line-height: 24px;
i{
i {
font-size: 24px;
margin-right: 10px;
}
span {
position: relative;
top: -3px;
}
}
.dec {
height: 53px;
}
......
src/components/Index/scroll.js deleted 100644 → 0
import React, {Component} from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
export default class Scroll extends Component {
render() {
return (
<WingBlank className='scroll'>
<Carousel
autoplay={true}
infinite
>
{this.props.data.map(val => (
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: this.props.height}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
src/components/Index/topscroll.js deleted 100644 → 0
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
export default class Topscroll extends Component {
state = {
slideIndex:0
}
render() {
return (
<div className='top-scroll'>
<WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={10}
slideWidth={0.8}
autoplay
infinite
dotActiveStyle={{
width: '18px',
height: '8px',
background: '#fff',
borderRadius: '4px',
}}
afterChange={index => this.setState({ slideIndex: index })}
>
{this.props.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -6 : 0,
height: this.state.slideIndex === index ? this.props.actheight : this.props.height,
}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top', height: '100%' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
// this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
</div>
);
}
}
yarn.lock
......@@ -8593,6 +8593,13 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-mobile-swiper@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/react-mobile-swiper/-/react-mobile-swiper-1.1.4.tgz#8b27359736254e54a663b1db79af622488195400"
integrity sha512-I4CZIh5muXaKInhsS/CcGYLZt9AZIb4CSgvIVnDUDrfzJSsZBh6AMPf3hQmHQFcAjDNxReCmOcrXzvwAlRDrVA==
dependencies:
prop-types "^15.7.2"
react-native-swipeout@^2.2.2:
version "2.3.6"
resolved "https://registry.yarnpkg.com/react-native-swipeout/-/react-native-swipeout-2.3.6.tgz#47dac8a835825cf3f2eef9e495574a3d9ab6d3fa"
......
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