Skip to content

M
mr-julyedu
Commit 3f1f6723 by zhanghaozhe
Options

拆分首页模块，改宝箱分享页

parent 86d1239a
Showing with 503 additions and 410 deletions
src/App.js
......@@ -317,9 +317,10 @@ class App extends Component {
render() {
return <>
<Routes/>
{/*<Link className={'year19-index'} to="/year/yearindex">*/}
<Link className={'year19-index'} to="/year/yearindex">
{/*<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/pc-yearindex.png" alt=""/>*/}
{/*</Link>*/}
<span>这是浮标</span>
</Link>
</>
}
}
......
src/assets/css/index.scss
......@@ -515,13 +515,13 @@ input[type="radio"]:checked:before {
.year19-index {
display: block;
width: 58px;
height: 70px;
position: fixed;
top: 50%;
right: 0;
margin-top: -35px;
z-index: 9;
z-index: 99;
font-size: 12px;
background: greenyellow;
img {
width: 100%;
height: 100%;
......
src/components/Index/all-course/index.js 0 → 100644
import React from 'react'
import { Link } from "react-router-dom";
import './index.scss'
const AllCourseNavigation = React.memo(() => {
return <div className="all-course">
<Link to='/classify'>
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</Link>
</div>
})
export default AllCourseNavigation
\ No newline at end of file
src/components/Index/all-course/index.scss 0 → 100644
/*
底部查看所有课程
*/
.all-course {
width: 100%;
padding: 20px 15px 30px 15px;
text-align: center;
margin-bottom: 50px;
background: #fff;
p {
color: $color_555;
font-size: 16px;
margin-bottom: 10px;
}
span {
color: $color_999;
font-size: 12px;
}
}
\ No newline at end of file
src/components/Index/course-list/index.js 0 → 100644
import React from 'react'
import LazyLoad from 'react-lazy-load'
import { Link, withRouter } from "react-router-dom";
import { Course } from "@common/index"
import './index.scss'
// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
const HomeCourseList = function ({modules, history}) {
const toDetail = id => {
history.push(`/detail?id=${id}`)
}
return modules.length > 0 && modules.map((module, i) => {
return <div key={i}>
<Module module={module}
toDetail={toDetail}
/>
<p className="borderTop"/>
</div>
})
}
const Module = function CourseList({module, toDetail}) {
let filterList = []
let isOdd = module.list.length % 2 === 0
if (module.name === '限时免费') {
filterList = module.list
} else {
// 数量为奇数时，第一个课程显示大图（如后台未上传，前台显示小图），课程数量为偶数时，均显示小图
if (isOdd) {
filterList = module.list
} else {
filterList = module.list[0].course_img === module.list[0].course_img_small ? module.list : module.list.slice(1)
}
}
return <div className='category home-course-list'>
<h2 className="title">
{module.name}
{
module.name === '限时免费' && <span className={'hot'}>hot</span>
}
</h2>
{
module.show_more === 1 &&
<Link className="more" to='/classify'>更多 ></Link>
}
{
module.show_more === 2 ?
module.name === '限时免费'
? <Link className="more" to={'/free'}>更多 ></Link>
: <Link className="more" to={module.more_page}>更多 ></Link>
: null
}
<LazyLoad offset={50}>
<ul className='index-course-detail'>
{
module.name !== '限时免费' && !isOdd && module.list[0].course_img !== module.list[0].course_img_small &&
<div className="category-vip" onClick={() => toDetail(module.list[0].course_id)}>
<img src={module.list[0].course_img} alt=""/>
</div>
}
{
filterList.map((item, index) => {
const top = item.is_limit_free ? null : (
<div>
{item.is_audition === true &&
<span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
}
{item.is_aist &&
<span className='return_bash'></span>
}
</div>
)
const bottom = <Bottom course={item}/>
const status = item.is_limit_free ? null : <div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
{item.is_groupon &&
<p className='course-status'>拼团价{item.groupon_price}元</p>
}
</div>
return (
<Course
key={index}
top={top}
data={item}
bottom={bottom}
status={status}
img={item.course_img_small}
title={item.course_title}
id={item.course_id}
toDetail={toDetail}
className='text-overflow-2'
/>
)
})
}
</ul>
</LazyLoad>
</div>
}
//限时免费
function LimitFree({course}) {
/*
*
* limit_free_status: 0-未领取 1-已领取 2-已过期
*
* */
switch (course.limit_free_status) {
case 0:
return <Link to={`/detail?id=${course.course_id}`}>
<p className={'course-price'}>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{course.price}</span>
</p>
</Link>
case 1:
return <div className={'isbuy'}>已领取</div>
default:
return <p className="course-price">
<span className="new">¥{course.discounts_price}</span>
<span className="old">¥{course.price}</span>
</p>
}
}
//课程底部
function Bottom({course}) {
if (course.is_buy) {
if (course.is_limit_free && course.limit_free_status === 1) {
return <div class={'isbuy'}>已领取</div>
} else {
return <div className={'isbuy'}>已购买</div>
}
} else {
return course.is_limit_free
? <LimitFree course={course}/>
: <p className="course-price">
<span className="new">¥{course.discounts_price}</span>
<span className="old">¥{course.price}</span>
</p>
}
}
export default withRouter(HomeCourseList)
\ No newline at end of file
src/components/Index/course-list/index.scss 0 → 100644
/*课程公共样式*/
.home-course-list {
&.category {
width: 100%;
padding: 20px 15px 15px 15px;
text-align: left;
background: #fff;
.title {
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 {
color: $active;
font-size: 12px;
float: right;
}
}
.index-course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: $bg_fff;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: $bg_active;
font-size: 12px;
color: $white;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
.return_bash {
position: absolute;
top: 0;
right: 0;
width: 31px;
height: 18px;
background: url("./return.icon.png") no-repeat;
background-size: 100% 100%;
}
.course-price {
margin-top: 15px;
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
margin-top: 15px;
color: $active;
font-size: 15px;
text-align: center;
line-height: 18px;
font-family: PingFang SC;
font-weight: 400;
}
.free {
color: $red;
font-size: 15px;
}
}
.category-vip {
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 5px;
img {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
.limit-free {
padding: 0 15px;
color: #333;
h2 {
display: flex;
align-items: center;
margin: 15px 0;
font-size: 15px;
}
.hot {
display: inline-block;
width: 25px;
height: 14px;
margin-left: 5px;
background: rgba(255, 64, 0, 1);
border-radius: 7px 7px 7px 0;
color: #fff;
text-align: center;
line-height: 14px;
font-size: 12px;
}
ul {
display: flex;
flex-wrap: wrap;
li {
margin-right: 15px;
margin-top: 0;
margin-bottom: 20px;
}
& li:nth-child(2n) {
margin-right: 0;
}
}
.origin-price {
color: #999;
font-size: 12px;
text-decoration: line-through;
}
.bottom {
margin-top: 5px;
span {
margin-right: 5px;
}
span:nth-child(3) {
margin-right: 0;
}
}
$red: #FF2121;
.bottom span:nth-child(1), .bottom button:nth-child(1) {
margin-right: 6px;
}
.current-price, .free {
color: $red;
font-size: 15px;
}
button {
width: 61px;
height: 18px;
background: rgba(0, 153, 255, 1);
border-radius: 9px;
text-align: center;
color: #fff;
font-size: 12px;
-webkit-appearance: none;
outline: 0;
border: 0;
}
}
}
.borderTop {
width: 100%;
height: 8px;
background-color: #F3F4F8;
}
src/components/Index/index.js
import React, { Component } from 'react'
import { Course, CallApp } from '../../common'
import { CallApp } from '../../common'
import './index.scss'
import { WithTab } from '@/HOCs'
// import Swiper from 'react-mobile-swiper'
// import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load'
import HomeCourseList from './course-list'
import { http } from '@/utils'
import LiveRoom from './liveRoom'
import { Link } from "react-router-dom"
......@@ -12,9 +12,7 @@ import { Toast } from 'antd-mobile'
import { connect } from "react-redux";
import TopSwiper from './TopSwiper'
import ExpandActiveToast from './expandActiveToast'
import CourseBase from '@/common/course-base'
import { switchTab } from "@components/study/myCourses/actions"
import AllCourseNavigation from "./all-course"
// const animateTypes = Swiper.animateTypes
......@@ -179,26 +177,11 @@ class Index extends Component {
</div> : null
}
{
(this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
return (
<div key={index}>
<CourseList
modules={item}
toDetail={this.toCourseDetail}
/>
<p className="borderTop"/>
</div>
)
}) : null
}
<HomeCourseList
modules={this.state.modules}
/>
<div className="category all-course">
<Link to='/classify'>
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</Link>
</div>
<AllCourseNavigation/>
{/* 直播间预约 */}
{
......@@ -216,142 +199,6 @@ class Index extends Component {
}
// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
function CourseList({modules, toDetail}) {
let filterList = []
let isOdd = modules.list.length % 2 === 0
if (modules.name === '限时免费') {
filterList = modules.list
} else {
// 数量为奇数时，第一个课程显示大图（如后台未上传，前台显示小图），课程数量为偶数时，均显示小图
if (isOdd) {
filterList = modules.list
} else {
filterList = modules.list[0].course_img === modules.list[0].course_img_small ? modules.list : modules.list.slice(1)
}
}
return (
<div className='category'>
<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 ?
modules.name === '限时免费'
? <Link className="more" to={'/free'}>更多 ></Link>
: <Link className="more" to={modules.more_page}>更多 ></Link>
: null
}
<LazyLoad offset={50}>
<ul className='index-course-detail'>
{
modules.name !== '限时免费' && !isOdd && modules.list[0].course_img !== modules.list[0].course_img_small &&
<div className="category-vip" onClick={() => toDetail(modules.list[0].course_id)}>
<img src={modules.list[0].course_img} alt=""/>
</div>
}
{
filterList.map((item, index) => {
const top = item.is_limit_free ? null : (
<div>
{item.is_audition === true &&
<span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
}
{item.is_aist &&
<span className='return_bash'></span>
}
</div>
)
const bottom = <Bottom course={item}/>
const status = item.is_limit_free ? null : <div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
{item.is_groupon &&
<p className='course-status'>拼团价{item.groupon_price}元</p>
}
</div>
return (
<Course
key={index}
top={top}
data={item}
bottom={bottom}
status={status}
img={item.course_img_small}
title={item.course_title}
id={item.course_id}
toDetail={toDetail}
className='text-overflow-2'
/>
)
})
}
</ul>
</LazyLoad>
</div>
)
}
//限时免费
function LimitFree({course}) {
/*
*
* limit_free_status: 0-未领取 1-已领取 2-已过期
*
* */
switch (course.limit_free_status) {
case 0:
return <Link to={`/detail?id=${course.course_id}`}>
<p className={'course-price'}>
<span className={'free'}>免费领取</span>
<span className={'old'}>¥{course.price}</span>
</p>
</Link>
case 1:
return <div className={'isbuy'}>已领取</div>
default:
return <p className="course-price">
<span className="new">¥{course.discounts_price}</span>
<span className="old">¥{course.price}</span>
</p>
}
}
//课程底部
function Bottom({course}) {
if (course.is_buy) {
if (course.is_limit_free && course.limit_free_status === 1) {
return <div class={'isbuy'}>已领取</div>
} else {
return <div className={'isbuy'}>已购买</div>
}
} else {
return course.is_limit_free
? <LimitFree course={course}/>
: <p className="course-price">
<span className="new">¥{course.discounts_price}</span>
<span className="old">¥{course.price}</span>
</p>
}
}
//近期直播
function ScrollBox(props) {
......
src/components/Index/index.scss
......@@ -86,6 +86,8 @@
/*热门推荐轮播*/
.category {
width: 100%;
padding: 20px 15px 15px 15px;
.swiper-container {
height: 106px !important;
margin-top: 15px;
......@@ -261,122 +263,6 @@
}
.category-vip {
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 5px;
img {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
/*课程公共样式*/
.category {
width: 100%;
padding: 20px 15px 15px 15px;
.title {
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 {
color: $active;
font-size: 12px;
float: right;
}
}
.index-course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: $bg_fff;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: $bg_active;
font-size: 12px;
color: $white;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
.return_bash {
position: absolute;
top: 0;
right: 0;
width: 31px;
height: 18px;
background: url("./image/return.icon.png") no-repeat;
background-size: 100% 100%;
}
.course-price {
margin-top: 15px;
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
margin-top: 15px;
color: $active;
font-size: 15px;
text-align: center;
line-height: 18px;
font-family: PingFang SC;
font-weight: 400;
}
.free {
color: $red;
font-size: 15px;
}
}
/*
横向滚动
......@@ -387,26 +273,6 @@
/*
底部查看所有课程
*/
.all-course {
text-align: center;
padding-bottom: 30px;
margin-bottom: 50px;
p {
color: $color_555;
font-size: 16px;
margin-bottom: 10px;
}
span {
color: $color_999;
font-size: 12px;
}
}
/*
直播间预约
*/
.live-room-box {
......@@ -760,91 +626,6 @@
// // background-image: none;
// //}
.limit-free {
padding: 0 15px;
color: #333;
h2 {
display: flex;
align-items: center;
margin: 15px 0;
font-size: 15px;
}
.hot {
display: inline-block;
width: 25px;
height: 14px;
margin-left: 5px;
background: rgba(255, 64, 0, 1);
border-radius: 7px 7px 7px 0;
color: #fff;
text-align: center;
line-height: 14px;
font-size: 12px;
}
ul {
display: flex;
flex-wrap: wrap;
li {
margin-right: 15px;
margin-top: 0;
margin-bottom: 20px;
}
& li:nth-child(2n) {
margin-right: 0;
}
}
.origin-price {
color: #999;
font-size: 12px;
text-decoration: line-through;
}
.bottom {
margin-top: 5px;
span {
margin-right: 5px;
}
span:nth-child(3) {
margin-right: 0;
}
}
$red: #FF2121;
.bottom span:nth-child(1), .bottom button:nth-child(1) {
margin-right: 6px;
}
.current-price, .free {
color: $red;
font-size: 15px;
}
button {
width: 61px;
height: 18px;
background: rgba(0, 153, 255, 1);
border-radius: 9px;
text-align: center;
color: #fff;
font-size: 12px;
-webkit-appearance: none;
outline: 0;
border: 0;
}
}
}
.index-box + .nav-bar + .year19-index {
display: none;
}
.borderTop {
......
src/components/activity/treasure-box/landing/index.js
......@@ -8,9 +8,9 @@ import BulletScreen from "@components/activity/newyear-2019/common/user-bullet-s
import './landing.scss'
import { browser, getParam, http, wxShare, SendMessageToApp } from "@/utils"
import QRCode from "qrcode"
import YearCourse from '../preheat/YearCourse'
import { FadeLoader } from "react-spinners"
import HomeCourseList from "@components/Index/course-list"
import AllCourseNavigation from "@components/Index/all-course"
class Landing extends Component {
......@@ -34,12 +34,14 @@ class Landing extends Component {
notices: [],
rule: '',
isCaptain: getParam('origin') == 1,
isLoading: this.props.user.isFetching
isLoading: this.props.user.isFetching,
modules: []
}
componentDidMount() {
this.getStage();
this.fetchPageData()
this.getIndexData()
window.showFollowAlert = this.remind.bind(this, 'create')
document.title = '七月在线新春献礼，幸运宝箱随你开，100%有奖！“薪”年好课免费学，精品课程1分秒！'
const landing = document.querySelector('#landing')
......@@ -54,7 +56,7 @@ class Landing extends Component {
if (prevProps.user.hasError !== this.props.user.hasError && !this.props.user.hasError) {
this.fetchPageData()
}
if(prevProps.user.isFetching !== this.props.user.isFetching && !this.props.user.isFetching){
if (prevProps.user.isFetching !== this.props.user.isFetching && !this.props.user.isFetching) {
this.setState({
isLoading: this.props.user.isFetching
})
......@@ -65,22 +67,39 @@ class Landing extends Component {
this.shareTipPopup && this.shareTipPopup.remove()
}
// 首页课程
getIndexData = () => {
http.get(`${API.home}/m/home`).then((res) => {
if (res.data.code === 200) {
const {data} = res.data || {}
const modules = Array.isArray(data.modules) ? data.modules : []
this.setState({
modules
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取活动以及宝箱的阶段
getStage = () => {
http.get(`${API.home}/activity/stage`).then(res => {
const {code, data, msg} = res.data
if (code === 200) {
if(Number(data.activity_stage) === 0) {
this.props.history.push('/');
return;
}
} else {
Toast.info(msg, 2)
const {code, data, msg} = res.data
if (code === 200) {
if (Number(data.activity_stage) === 0) {
this.props.history.push('/');
return;
}
} else {
Toast.info(msg, 2)
}
})
}
createMeta = (title,dec,imgname) => {
createMeta = (title, dec, imgname) => {
let meta = document.createElement('meta');
meta.setAttribute('name', 'description')
meta.setAttribute('itemprop', 'description')
......@@ -333,7 +352,8 @@ class Landing extends Component {
const {data} = res.data
return data.url
}).then(text => {
QRCode.toDataURL(text)
QRCode.toDataURL('aaa')
// QRCode.toDataURL(text)
.then(url => {
Popup({
title: '提醒服务',
......@@ -450,7 +470,8 @@ class Landing extends Component {
},
activityEnd,
isCaptain,
isLoading
isLoading,
modules
} = this.state
/*
* status
......@@ -464,7 +485,7 @@ class Landing extends Component {
{
!(standby_plan && browser.isWeixin) &&
<div id="to-square">
<a href='javascript:' onClick={this.toSquare}>前往活动会场，享更多福利！ >></a>
<a href='javascript:' onClick={this.toSquare}>前往七月在线官网，学人工智能精品课程！ >></a>
</div>
}
<BoxContainer>
......@@ -611,14 +632,16 @@ class Landing extends Component {
</BoxContainer>
{
!isCaptain &&
<>
<WhiteSpace size={'xl'}/>
<YearCourse getSum={() => {
}}/>
</>
<div className={'course-module'}>
<HomeCourseList
modules={modules}
/>
<AllCourseNavigation/>
</div>
}
{
isLoading && <div className="loading" style={{width: window.innerWidth + 'px', height: window.innerHeight + 'px'}}>
isLoading &&
<div className="loading" style={{width: window.innerWidth + 'px', height: window.innerHeight + 'px'}}>
<FadeLoader
color={'#fff'}
loading={isLoading}
......
src/components/activity/treasure-box/landing/landing.scss
......@@ -233,7 +233,15 @@
.am-whitespace.am-whitespace-xl {
height: 35px;
}
.course-module{
background: #fff;
}
.all-course{
margin-bottom: 0;
}
.loading{
transform: scale(1);
position: fixed;
......
src/components/activity/treasure-box/treasure-box/team.js
......@@ -102,8 +102,8 @@ class TeamInfo extends Component {
// 直接跳转
if (!getParam('version')) {
// this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
// window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
} else {
window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code + '&version='+ getParam('version'));
}
......
src/router/router-config.js
......@@ -304,5 +304,31 @@ export default [
path:'/free',
exact: true,
component: loadable(() => import(/*limit-free*/'@/components/limit-free'))
},
//拆宝箱
{
path: '/activity/treasure/landing',
component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/treasure-box/landing/index'))
},
// 双旦活动预热页面
{
path: '/treasureIndex',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/treasure-box/preheat/index'))
},
// 我的宝箱
{
path: '/year/yearTreasure',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/treasure-box/myTreasure/index'))
}
,
// 双旦心愿单
{
path: '/year/yearWish',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/treasure-box/year-wish/index'))
},
]
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