Skip to content

M
mr-julyedu
Commit 8fe7e458 by zhanghaozhe
Options

限时免费首页和落地页

parent f4a1d98f
Showing with 121 additions and 187 deletions
src/components/Index/index.js
import React, {Component} from 'react'
import {Course, CallApp} from '../../common'
import React, { Component } from 'react'
import { Course, CallApp } from '../../common'
import './index.scss'
import {WithTab} from '@/HOCs'
import { WithTab } from '@/HOCs'
// import Swiper from 'react-mobile-swiper'
// import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load'
import {http} from '@/utils'
import { http } from '@/utils'
import LiveRoom from './liveRoom'
import {Link} from "react-router-dom"
import {Toast} from 'antd-mobile'
import {connect} from "react-redux";
import { Link } from "react-router-dom"
import { Toast } from 'antd-mobile'
import { connect } from "react-redux";
import TopSwiper from './TopSwiper'
import ExpandActiveToast from './expandActiveToast'
import CourseBase from '@/common/course-base'
......@@ -57,44 +57,6 @@ class Index extends Component {
'href': 'https://ask.julyedu.com'
}
],
limitFree: [
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 1,
count: 1000,
price: '1000',
price1: '1000',
id: 1,
},
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 2,
count: 1000,
price: '1000',
price1: '1000',
id: 15,
},
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 3,
count: 1000,
price: '1000',
price1: '1000',
id: 13,
},
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 1,
count: 1000,
price: '1000',
price1: '1000',
id: 2,
},
]
}
}
......@@ -154,13 +116,7 @@ class Index extends Component {
return false;
}
handleLimitFreeClick = () => {
}
render() {
//todo 联调
const {limitFree} = this.state
return (
<div className='index-box'>
<div className='header'>
......@@ -222,19 +178,6 @@ class Index extends Component {
}
{
limitFree && limitFree.length &&
<div className="limit-free">
<h2 className="limit-free-title">
限时免费
<span className={'hot'}>hot</span>
</h2>
<LimitFree courses={limitFree}
handleClick={this.handleLimitFreeClick}
/>
</div>
}
{
(this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
return (
<div key={index}>
......@@ -271,45 +214,6 @@ class Index extends Component {
}
// function TopSwiper({bannerList}) {
// return (
// <Swiper
// type={animateTypes.CARD}
// loop={true}
// height={168}
// autoPlay={true}
// typePro
// createStyle={createStyle}
// >
// {bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
// return (
// Number.isNaN(parseInt(item.jump_url)) ?
// <a href={item.jump_url} key={index}>
// {/* <Link to={item.jump_url} key={index}> */}
// <img className="item" src={item.name} alt="" />
// {/* </Link> */}
// </a> :
// <Link
// to={{
// pathname: '/detail',
// search: `?id=${item.jump_url}`
// }}
// key={index}
// >
// <img
// className="item"
// src={item.name}
// alt=""
// />
// </Link>
// )
// })
// }
// </Swiper>
// )
// }
// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
function CourseList({modules, toDetail}) {
......@@ -324,28 +228,32 @@ function CourseList({modules, toDetail}) {
}
return (
<div className='category'>
<h2 className="title">{modules.name}</h2>
<h2 className="title">
{modules.name}
{
modules.name === '限时免费' && <span className={'hot'}>hot</span>
}
</h2>
{
modules.show_more === 1 &&
<Link className="more" to='/classify'>更多 ></Link>
}
{
modules.show_more === 2 &&
<Link className="more" to={modules.more_page}>更多 ></Link>
<Link className="more" to={modules.name === '限时免费' ? '/free' : modules.more_page}>更多 ></Link>
}
<LazyLoad offset={50}>
<ul className='index-course-detail'>
{
!isOdd && modules.list[0].course_img !== modules.list[0].course_img_small &&
<div className="category-vip" onClick={() => toDetail(modules.list[0].course_id)}>
{/* <Link to={`/detail?id=${modules.list[0].course_id}`}> */}
<img src={modules.list[0].course_img} alt=""/>
{/* </Link> */}
</div>
}
{
filterList.map((item, index) => {
const top = (
const top = item.is_limit_free ? null : (
<div>
{item.is_audition === true &&
<span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
......@@ -354,22 +262,26 @@ function CourseList({modules, toDetail}) {
<span className='return_bash'></span>
}
</div>
);
)
const bottom = (
<div>
{!item.isbuy && <p className="course-price">
<span className="new">¥{item.discounts_price}</span>
<span className="old">¥{item.price}</span>
</p>
}
{item.isbuy &&
<a className="isbuy">已购买</a>
{item.is_buy
? <a className="isbuy">已购买</a>
: item.is_limit_free
? <p className={'course-price'}>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{item.price}</span>
</p>
: <p className="course-price">
<span className="new">¥{item.discounts_price}</span>
<span className="old">¥{item.price}</span>
</p>
}
</div>
)
const status = (
const status = item.is_limit_free ? null : (
<div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
......@@ -449,47 +361,4 @@ function ScrollBox(props) {
)
}
//限时免费
function LimitFree({courses, handleClick}) {
return (
<div className="courses">
<ul>
{
courses.map(course => {
let Status
switch (course.status) {
case 1:
Status = <span className={'free'}>免费领取</span>
break
case 2:
Status = <button>已购买</button>
break
default:
Status = <span className={'current-price'}>¥{course.price}</span>
}
const Bottom = (
<div className={'bottom'}>
{Status}
<span className={'origin-price'}>¥{course.price1}</span>
<span className={'count'}>{course.count}人学过</span>
</div>
)
return (
<CourseBase
img={course.img}
title={course.title}
id={course.id}
handleClick={handleClick}
key={course.id}
bottom={Bottom}
/>
)
})
}
</ul>
</div>
)
}
export default WithTab(Index);
src/components/Index/index.scss
......@@ -284,6 +284,20 @@
font-size: 16px;
color: $color_333;
display: inline-block;
.hot {
display: inline-block;
width: 25px;
height: 14px;
margin-left: 5px;
transform: translateY(-5px);
background: rgba(255, 64, 0, 1);
border-radius: 7px 7px 7px 0;
color: #fff;
text-align: center;
line-height: 14px;
font-size: 12px;
}
}
.more {
......@@ -359,6 +373,11 @@
text-align: center;
line-height: 18px;
}
.free{
color: $red;
font-size: 15px;
}
}
/*
......
src/components/limit-free/index.js
......@@ -6,6 +6,9 @@ import { WhiteSpace, Toast } from "antd-mobile";
import VList from '@/common/v-list-base'
import { Popup } from "@common/index"
import WithFullSize from "@/HOCs/WithFullSize"
import { connect } from "react-redux";
import { Link } from "react-router-dom";
function showToast(msg) {
Toast.info(msg, 2, null, false)
......@@ -22,6 +25,10 @@ class LimitFree extends Component {
}
componentDidMount() {
const {user, history} = this.props
if (user.hasError) {
history.push('/passport')
}
this.getData()
}
......@@ -48,8 +55,9 @@ class LimitFree extends Component {
})
}
handleClick = id => {
handleClick = id => {
this.props.history.push(`/detail?id=${id}`)
}
changeTab = (e, index) => {
......@@ -63,25 +71,48 @@ class LimitFree extends Component {
}
getCourse = id => {
//todo 联调
const instance = Popup({
className: 'get-course-popup',
closable: false,
clickMaskClose: false,
title: <div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/check.png" alt=""/>
<div>课程有效期7天，快去学习吧~</div>
</div>,
content: <div className={'btns'}>
<button onClick={() => {
instance.close()
}}>知道了
</button>
<button>立即学习</button>
</div>
http.post(`${API.home}/sys/limitFree/receive`, {
course_id: id
})
.then(res => {
const {code, msg} = res.data
if (code === 200) {
const instance = Popup({
className: 'get-course-popup',
closable: false,
clickMaskClose: false,
title: <div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/check.png" alt=""/>
<div>课程有效期7天，快去学习吧~</div>
</div>,
content: <div className={'btns'}>
<button onClick={() => {
instance.close()
this.getData()
}}>知道了
</button>
<button onClick={this.toPlay.bind(this, id)}>立即学习</button>
</div>
})
} else {
showToast(msg)
}
})
}
toPlay = id => {
this.props.history.push(`/play/video?id=${id}`)
}
formatTime = seconds => ({
d: Math.floor(seconds / 60 / 60 / 24).toString().padStart(2, '0'),
h: Math.floor(seconds / 60 / 60 % 24).toString().padStart(2, '0'),
m: Math.floor(seconds / 60 % 60).toString().padStart(2, '0')
})
render() {
const {tab, courses, navItemStyle, tabActiveIndex} = this.state
return (
......@@ -128,7 +159,6 @@ class LimitFree extends Component {
* course_status:
* 0未领取 1已领取未过期 2 已领取已过期 3 正常已购买
* */
//todo 状态2
let des, bottom
switch (item.course_status) {
case 0:
......@@ -143,14 +173,15 @@ class LimitFree extends Component {
</div>
break
case 1:
const {d, h, m} = this.formatTime(item.course_expire)
des = <div className={'remain-time'}>
<i className={'iconfont iconiconfront-21'}/>
<span>12天55时55分后过期</span>
<span>{d}天{h}时{m}分后过期</span>
</div>
bottom = <div className={'bottom'}>
<span className={'red'}>限时免费</span>
<span className={'origin-price'}>¥{item.price0}</span>
<button>立即学习</button>
<StudyButton id={item.course_id}/>
</div>
break
case 2:
......@@ -161,7 +192,7 @@ class LimitFree extends Component {
bottom = <div className={'bottom'}>
<span className={'red'}>¥{item.price1}</span>
<span className={'origin-price'}>¥{item.price0}</span>
<button>立即购买</button>
<Link to={`/detail?id=${item.course_id}`}>立即购买</Link>
</div>
break
case 3:
......@@ -171,7 +202,7 @@ class LimitFree extends Component {
</div>
bottom = <div className="bottom">
<span>已购买</span>
<button>立即学习</button>
<StudyButton id={item.course_id}/>
</div>
}
......@@ -185,6 +216,7 @@ class LimitFree extends Component {
return (
<VList img={item.image_name}
handleClick={this.handleClick}
id={item.course_id}
info={info}
key={index}
/>
......@@ -207,4 +239,12 @@ class LimitFree extends Component {
}
}
export default WithFullSize(LimitFree)
\ No newline at end of file
function StudyButton({id}) {
return <Link to={`/play/video?id=${id}`}>立即学习</Link>
}
export default connect(
state => ({user: state.user}),
null
)
(WithFullSize(LimitFree))
\ No newline at end of file
src/components/limit-free/index.scss
......@@ -137,18 +137,22 @@
text-decoration: line-through;
}
button {
button, a {
width: 68px;
height: 24px;
float: right;
border-radius: 3px;
background: #09f;
border: none;
outline: 0;
font-size: 13px;
color: #fff;
line-height: 24px;
text-align: center;
}
button {
-webkit-appearance: none;
outline: 0;
}
.bottom {
......@@ -214,7 +218,8 @@
& button:first-child {
border-right: 1px solid #DDD;
}
& button:last-child{
& button:last-child {
color: #09f;
}
}
......
src/components/video/index.js
......@@ -109,6 +109,7 @@ class Video extends Component {
componentDidMount() {
console.log(this.props.location.hash)
if (window.location.protocol === 'https:') {
window.location.replace('http' + window.location.href.slice(5))
return
......
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