Skip to content

M
mr-julyedu
Commit 8ce0059e by zhanghaozhe
Options

Merge branch '00' of gitlab.julyedu.com:baiguangyao/mr-julyedu into 00

parents 55bcc051 d0492a13
Showing with 1972 additions and 23 deletions
build/manifest.json deleted 100644 → 0
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
build/mrstatic/media/iconfont.b9b072e1.svg deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/activity/index.scss → src/components/activity/1111/index.scss
......@@ -6,13 +6,13 @@
.banner__con {
width: 100%;
height: 170px;
background: url('./images/formal-banner.png') center center no-repeat;
background: url('images/formal-banner.png') center center no-repeat;
background-size: 100% 100%;
}
.content__con {
width: 100%;
height: 454px;
background: url('./images/dalibao_bj.png') center center no-repeat;
background: url('images/dalibao_bj.png') center center no-repeat;
background-size: 100% 100%;
position: relative;
......@@ -55,7 +55,7 @@
.img__con {
width: 88px;
height: 16px;
background: url('./images/value.png') center center no-repeat;
background: url('images/value.png') center center no-repeat;
background-size: 100% 100%;
margin-left: 4px;
}
......@@ -186,7 +186,7 @@
font-weight:400;
color:rgba(255,255,255,1);
width: 240px;
background: url('./images/yaoqh_bj.png') center center no-repeat;
background: url('images/yaoqh_bj.png') center center no-repeat;
background-size: 100% 50%;
text-align: center;
text-align-last: center;
......@@ -292,7 +292,7 @@
.share__row {
width: 60px;
height: 44px;
background: url('./images/throw_icon.png') center center no-repeat;
background: url('images/throw_icon.png') center center no-repeat;
background-size: 100% 100%;
position: absolute;
right: 15px;
......
src/components/activity/newyear-2019/common/commonContainer/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class CommonContainer extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className='common_container'>
<div className='container_top'></div>
<div className='container_content'>
{
this.props.title &&
<div className='title_container'>
<i></i>
<p>{this.props.title}</p>
<i></i>
</div>
}
{
React.Children.map(this.props.children, function (child) {
return <>{child}</>;
})
}
</div>
<div className='container_bottom'></div>
</div>
)
}
}
src/components/activity/newyear-2019/common/commonContainer/index.scss 0 → 100644
.common_container {
margin-bottom: 35px;
.title_container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
i {
width: 230px;
height: 2px;
margin: auto;
background: linear-gradient(
90deg,
rgba(254, 228, 29, 0) 0%,
rgba(254, 228, 29, 0.98) 48%,
rgba(254, 228, 29, 0) 100%
);
margin: 0 auto;
}
p {
font-size: 18px;
line-height: 18px;
font-weight: 500;
color: rgba(254, 228, 29, 1);
margin: 8px auto;
background: linear-gradient(
0deg,
rgba(254, 228, 29, 1) 23.9013671875%,
rgba(255, 204, 0, 1) 50.146484375%,
rgba(254, 228, 29, 1) 75%
);
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.container_top {
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_top_bj.png")
center center no-repeat;
background-size: 100% 100%;
width: 100%;
height: 18px;
}
.container_bottom {
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_bottom_bj.png")
center center no-repeat;
background-size: 100% 100%;
width: 100%;
height: 22px;
}
.container_content {
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_middle_bj.png");
background-size: contain;
width: 100%;
min-height: 25px;
padding: 5px 20px;
}
}
src/components/activity/newyear-2019/preheat/LiveRoom/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss';
import { Toast } from 'antd-mobile';
import { http } from '@/utils';
import CommonContainer from './../../common/commonContainer/index'
export default class index extends Component {
constructor(props) {
super(props);
this.state = {
list: []
}
}
componentDidMount() {
http.get(`${API.home}/sys/get_live_info`).then(res => {
const { code, data, msg } = res.data;
if (code === 200) {
this.setState({
list: data
})
} else {
Toast.info(msg);
}
});
}
// 预约直播
subscribe = (id) => {
// TODO 检查是否已登录
// this.checkLogin();
http.get(`${API['base-api']}/sys/createLiveQrcode/${id}`).then(res => {
let { errno, data, msg } = res.data;
if (errno === 200) {
// this.livingUrl = data.url;
// this.isSubscribe = true;
// TODO 显示二维码地址 并且传递给二维码的图片/地址
} else {
Toast.info(msg);
}
});
}
// 已预约 给提示
tip = () => {
Toast.info('你已预约该直播');
}
// 去直播间
toLivingRoom = (id) => {
// TODO 检查是否已登录
// this.checkLogin();
window.location.href = `${window.location.protocol}//www.julyedu.com/live/m_room/${id}`
}
// 查看回放
checkVideo = (url) => {
// TODO 检查是否已登录
// this.checkLogin();
// TODO 这里需要课程ID
const vCourseId = url.split('/')[0];
history.push(`/play/video?id=${vCourseId}`)
}
render() {
const { list } = this.state;
return (
<div className='live__container'>
<CommonContainer title='大咖直播'>
<ul className='live__list'>
{
list.length && (
list.map((item, index) => {
return <li key={index} className='live_room_item'>
<img className='user__avatar' src={item.avatar} alt="" />
<div className='live__info'>
<div className="theme">
<span>主题：</span>
<p>{item.title}</p>
</div>
<div className="info__item">
<span>时间：</span>
<p>{item.date}</p>
</div>
<div className="info__item">
<span>讲师：</span>
<p>{item.teacher}</p>
</div>
{
item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 0 && (
<span onClick={this.subscribe(item.live_id)} className="order__btn">立即预约</span>
)
}
{
item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 1 && (
<span onClick={this.tip} className="order__btn subscribed">已预约</span>
)
}
{
item.on_live == 1 && item.is_end == 0 && (
<span onClick={this.toLivingRoom(item.room_url)} className="order__btn living">正在直播</span>
)
}
{
item.is_end == 1 && item.transcribe_url != '' && (
<span onClick={this.checkVideo(item.transcribe_url)} className="order__btn check__video">查看回放</span>
)
}
</div>
</li>
})
)
}
</ul>
</CommonContainer>
</div>
)
}
}
src/components/activity/newyear-2019/preheat/LiveRoom/index.scss 0 → 100644
.live__container {
.live_room_item {
width: 330px;
height: 100px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 15px;
margin-top: 15px;
&:first-child {
border-bottom: 1px solid rgba(13, 77, 43, 1);
}
.user__avatar {
width: 73px;
height: 85px;
flex: 0 0 auto;
margin-right: 12px;
background: #ddd;
border-radius: 4px;
}
.live__info {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
color: #fff;
font-size: 14px;
width: 246px;
height: 85px;
position: relative;
.info__item {
display: flex;
justify-content: flex-start;
align-content: center;
&:nth-child(2) {
margin: 9px 0;
}
span {
width: 46px;
flex: 0 0 auto;
color: #eaf787;
line-height: 16px;
}
p {
line-height: 16px;
}
}
.theme {
span {
display: block;
width: 46px;
float: left;
color: #eaf787;
line-height: 16px;
}
p {
width: 198px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
float: left;
line-height: 16px;
color: #fff;
/* autoprefixer: off */
-webkit-box-orient: vertical;
}
}
.order__btn {
position: absolute;
right: 0;
bottom: 0;
width: 89px;
height: 28px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
color: #070F08;
background:linear-gradient(90deg,rgba(255,227,0,1) 0%,rgba(255,202,0,1) 100%);
}
.subscribed {
background:rgba(254,228,29,1);
}
.living {
background:rgba(0,153,255,1);
color: #FFF;
}
.check__video {
background:rgba(114,220,141,1);
color: #FFF;
}
}
}
}
src/components/activity/newyear-2019/preheat/YearCourse/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../../common/commonContainer/index'
import CourseItem from '../../../../blessingPreheat/courseItem/index'
import {Link, withRouter} from "react-router-dom"
class YarnCourse extends Component {
constructor(props) {
super(props)
this.state = {
basic: {
course: [],
courseList: [],
isMore: false,
},
advanced: {
course: [],
courseList: [],
isMore: false,
},
higher: {
course: [],
courseList: [],
isMore: false,
},
expand: {
course: [],
courseList: [],
isMore: false,
},
bigcourse: {
course: [],
courseList: [],
isMore: false,
},
freecourse: {
course: [],
courseList: [],
isMore: false,
},
groupcourse: {
course: [],
courseList: [],
isMore: false,
},
}
}
componentDidMount() {
this.fetchBigCourse()
this.fetchFreeCourse()
this.fetchGroupCourse()
// AI之路-基础
this.fetchAICourse('one')
// AI之路-进阶
this.fetchAICourse('two')
// AI之路-高阶
this.fetchAICourse('three')
// AI之路-拓展
this.fetchAICourse('four')
}
fetchBigCourse = () => {
const {bigcourse} = this.state
http.get(`${API.home}/activity/preheat_data`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.setState({
bigcourse: Object.assign({}, bigcourse, {
isMore: data.length > 4 ? true : false,
course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
courseList: data,
})
})
}
})
}
fetchFreeCourse = () => {
const {freecourse} = this.state
http.get(`${API['base-api']}/assistance/detail`).then(res => {
const {errno, data} = res.data
if (errno === 200) {
this.setState({
freecourse: Object.assign({}, freecourse, {
isMore: data.course_info.length > 4 ? true : false,
course: data.course_info.length > 4 ? data.course_info.filter((item, index) => index < 4) : data.course_info,
courseList: data.course_info,
})
})
}
})
}
fetchGroupCourse = () => {
const {groupcourse} = this.state
http.get(`${API.home}/activity/excellent_course`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.setState({
groupcourse: Object.assign({}, groupcourse, {
isMore: data.length > 4 ? true : false,
course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
courseList: data,
})
})
}
})
}
fetchAICourse = (key) => {
http.get(`${API.home}/activity/four_stage/${key}`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.getList(key, data)
}
})
}
getList = (key, data) => {
const {basic, advanced, higher, expand} = this.state
if (key === 'one') {
this.setState({
basic: Object.assign({}, basic, {
isMore: data.length > 4 ? true : false,
course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
courseList: data,
})
})
}
if (key === 'two') {
this.setState({
advanced: Object.assign({}, advanced, {
isMore: data.length > 4 ? true : false,
course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
courseList: data,
})
})
}
if (key === 'three') {
this.setState({
higher: Object.assign({}, higher, {
isMore: data.length > 4 ? true : false,
course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
courseList: data,
})
})
}
if (key === 'four') {
this.setState({
expand: Object.assign({}, expand, {
isMore: data.length > 4 ? true : false,
course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
courseList: data,
})
})
}
}
toQQque = () => {
if (!getParam('version')) {
location.href = 'https://q.url.cn/AB8aue?_type=wpa&qidian=true'
} else {
SendMessageToApp("toQQ", 'https://q.url.cn/AB8aue?_type=wpa&qidian=true')
}
}
// 去课程详情页
toCourse = (courseId) => {
const {history} = this.props
if (!getParam('version')) {
history.push(`/detail?id=${courseId}`)
} else {
SendMessageToApp("toCourse", courseId)
}
}
handleToMore = (key) => {
let data = {}
if (this.state[key]['isMore']) {
data[key] = {
isMore: !this.state[key]['isMore'],
course: this.state[key]['courseList'],
courseList: this.state[key]['courseList']
}
this.setState({
...data
})
} else {
data[key] = {
isMore: !this.state[key]['isMore'],
course: this.state[key]['courseList'].filter((item, index) => index < 4),
courseList: this.state[key]['courseList']
}
this.setState({
...data
})
}
}
freeStudy = () => {
}
// 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
addWishList = (id) => {
}
render() {
const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state
return (
<div>
<CommonContainer title='重磅好课'>
<div>
{
(bigcourse.course && bigcourse.course.length > 0) &&
<>
<div className='bigcourse course-box'>
{
bigcourse.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<a toCourse={this.toCourse} className="btn to-study">开始学习</a>
}
{
item.is_buy == 0 &&
<a onClick={() => this.toQQque()}
className="btn big-course">速抢拼团名额</a>
}
</div>
</CourseItem>
))
}
</div>
{
(bigcourse.courseList && bigcourse.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('bigcourse')}>
{group.isMore ? '查看更多' : '收起'}
</button>
}
</>
}
</div>
</CommonContainer>
<CommonContainer title='人气好课免费学'>
<div>
{
(freecourse.course && freecourse.course.length > 0) &&
<>
<div className='freecourse course-box'>
{
freecourse.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<a toCourse={this.toCourse} className="btn to-study">开始学习</a>
}
{
item.is_buy == 0 &&
<a onClick={() => this.freeStudy()}
className="btn free-study">点击免费学</a>
}
<p className="free-course-num">已送出<span>{item.act_num}</span>个课程</p>
</div>
</CourseItem>
))
}
</div>
{
(freecourse.courseList && freecourse.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('freecourse')}>
{group.isMore ? '查看更多' : '收起'}
</button>
}
</>
}
</div>
</CommonContainer>
<CommonContainer title='精品好课1分开抢'>
<div>
{
(groupcourse.course && groupcourse.course.length > 0) &&
<>
<div className='groupcourse course-box'>
{
groupcourse.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
<div className="group-num">限量300个</div>
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<>
<p className={'course-title text-overflow-1'}>{item.course_title}</p>
<a onClick={() => this.toCourse(item.course_id)}
className="btn to-study">开始学习</a>
</>
}
{
item.is_buy == 0 &&
<>
<div className="type">
<span className="tag">拼团价</span>
<span className="time">12月23日开团</span>
</div>
<div className="price">¥
<span className="new-price">0.01</span>
<span
className="old-price">现价：<s>¥{item.price1}</s></span>
</div>
<div className="status">
<a onClick={() => this.toCourse(item.course_id)}
className="status-btn to-buy">直接购买</a>
{
item.is_join == 1 &&
<a className="status-btn add-wish"><img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
alt=""/>已加心愿单</a>
}
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
alt=""/>加入心愿单
</a>
}
</div>
</>
}
</div>
</CourseItem>
))
}
</div>
{
(groupcourse.courseList && groupcourse.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('groupcourse')}>
{group.isMore ? '查看更多' : '收起'}
</button>
}
</>
}
</div>
</CommonContainer>
<CommonContainer title='好课价到，等你抄底'>
<div>
<h4 className="ai-course__subtitle">基础</h4>
{
(basic.course && basic.course.length > 0) &&
<>
<div className='groupcourse course-box'>
{
basic.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<>
<p className={'course-title text-overflow-1'}>{item.course_title}</p>
<a onClick={() => this.toCourse(item.course_id)}
className="btn to-study">开始学习</a>
</>
}
{
item.is_buy == 0 &&
<>
<div className="type">
{
item.type == 0 &&
<>
<span className="tag">活动价</span>
<span className="time">12.23开始</span>
</>
}
{
item.type == 1 &&
<>
<span className="tag">拼团价</span>
<span className="time">12.23开团</span>
</>
}
{
item.type == 2 &&
<>
<span className="tag">好友帮帮砍</span>
<span className="time">12.23开砍</span>
</>
}
</div>
<div className="price">
{item.type == 2 ? '到手价最低:¥' : '¥'}
<span className="new-price">{item.price1}</span>
<span
className="old-price">
{item.type == 2 ? '' : '现价：'}
<s>¥{item.price0}</s></span>
</div>
<div className="status">
<a onClick={() => this.toCourse(item.course_id)}
className="status-btn to-buy">直接购买</a>
{
item.is_join == 1 &&
<a className="status-btn add-wish"><img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
alt=""/>已加心愿单</a>
}
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
alt=""/>加入心愿单
</a>
}
</div>
</>
}
</div>
</CourseItem>
))
}
</div>
{
(basic.courseList && basic.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('basic')}>
{basic.isMore ? '查看更多' : '收起'}
</button>
}
</>
}
<h4 className="ai-course__subtitle">进阶</h4>
{
(advanced.course && advanced.course.length > 0) &&
<>
<div className='groupcourse course-box'>
{
advanced.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<>
<p className={'course-title text-overflow-1'}>{item.course_title}</p>
<a onClick={() => this.toCourse(item.course_id)}
className="btn to-study">开始学习</a>
</>
}
{
item.is_buy == 0 &&
<>
<div className="type">
{
item.type == 0 &&
<>
<span className="tag">活动价</span>
<span className="time">12.23开始</span>
</>
}
{
item.type == 1 &&
<>
<span className="tag">拼团价</span>
<span className="time">12.23开团</span>
</>
}
{
item.type == 2 &&
<>
<span className="tag">好友帮帮砍</span>
<span className="time">12.23开砍</span>
</>
}
</div>
<div className="price">
{item.type == 2 ? '到手价最低:¥' : '¥'}
<span className="new-price">{item.price1}</span>
<span
className="old-price">
{item.type == 2 ? '' : '现价：'}
<s>¥{item.price0}</s></span>
</div>
<div className="status">
<a onClick={() => this.toCourse(item.course_id)}
className="status-btn to-buy">直接购买</a>
{
item.is_join == 1 &&
<a className="status-btn add-wish"><img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
alt=""/>已加心愿单</a>
}
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
alt=""/>加入心愿单
</a>
}
</div>
</>
}
</div>
</CourseItem>
))
}
</div>
{
(advanced.courseList && advanced.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('advanced')}>
{advanced.isMore ? '查看更多' : '收起'}
</button>
}
</>
}
<h4 className="ai-course__subtitle">高阶</h4>
{
(higher.course && higher.course.length > 0) &&
<>
<div className='groupcourse course-box'>
{
higher.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<>
<p className={'course-title text-overflow-1'}>{item.course_title}</p>
<a onClick={() => this.toCourse(item.course_id)}
className="btn to-study">开始学习</a>
</>
}
{
item.is_buy == 0 &&
<>
<div className="type">
{
item.type == 0 &&
<>
<span className="tag">活动价</span>
<span className="time">12.23开始</span>
</>
}
{
item.type == 1 &&
<>
<span className="tag">拼团价</span>
<span className="time">12.23开团</span>
</>
}
{
item.type == 2 &&
<>
<span className="tag">好友帮帮砍</span>
<span className="time">12.23开砍</span>
</>
}
</div>
<div className="price">
{item.type == 2 ? '到手价最低:¥' : '¥'}
<span className="new-price">{item.price1}</span>
<span
className="old-price">
{item.type == 2 ? '' : '现价：'}
<s>¥{item.price0}</s></span>
</div>
<div className="status">
<a onClick={() => this.toCourse(item.course_id)}
className="status-btn to-buy">直接购买</a>
{
item.is_join == 1 &&
<a className="status-btn add-wish"><img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
alt=""/>已加心愿单</a>
}
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
alt=""/>加入心愿单
</a>
}
</div>
</>
}
</div>
</CourseItem>
))
}
</div>
{
(higher.courseList && higher.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('higher')}>
{higher.isMore ? '查看更多' : '收起'}
</button>
}
</>
}
<h4 className="ai-course__subtitle">扩展</h4>
{
(expand.course && expand.course.length > 0) &&
<>
<div className='groupcourse course-box'>
{
expand.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<>
<p className={'course-title text-overflow-1'}>{item.course_title}</p>
<a onClick={() => this.toCourse(item.course_id)}
className="btn to-study">开始学习</a>
</>
}
{
item.is_buy == 0 &&
<>
<div className="type">
{
item.type == 0 &&
<>
<span className="tag">活动价</span>
<span className="time">12.23开始</span>
</>
}
{
item.type == 1 &&
<>
<span className="tag">拼团价</span>
<span className="time">12.23开团</span>
</>
}
{
item.type == 2 &&
<>
<span className="tag">好友帮帮砍</span>
<span className="time">12.23开砍</span>
</>
}
</div>
<div className="price">
{item.type == 2 ? '到手价最低:¥' : '¥'}
<span className="new-price">{item.price1}</span>
<span
className="old-price">
{item.type == 2 ? '' : '现价：'}
<s>¥{item.price0}</s></span>
</div>
<div className="status">
<a onClick={() => this.toCourse(item.course_id)}
className="status-btn to-buy">直接购买</a>
{
item.is_join == 1 &&
<a className="status-btn add-wish"><img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
alt=""/>已加心愿单</a>
}
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
alt=""/>加入心愿单
</a>
}
</div>
</>
}
</div>
</CourseItem>
))
}
</div>
{
(expand.courseList && expand.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('expand')}>
{expand.isMore ? '查看更多' : '收起'}
</button>
}
</>
}
</div>
</CommonContainer>
</div>
)
}
}
export default withRouter(YarnCourse)
src/components/activity/newyear-2019/preheat/YearCourse/index.scss 0 → 100644
.course-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.course-container {
width: 158px;
margin: 15px 0 0 0;
text-align: center;
position: relative;
}
.group-num {
width: 66px;
height: 16px;
position: absolute;
left: 10px;
top: 10px;
line-height: 16px;
background: #CA161C;
opacity: 0.8;
border-radius: 1px;
font-size: 12px;
color: #fff;
text-align: center;
}
.coupon-course__footer {
.course-title {
padding-left: 10px;
font-size: 15px;
color: #333;
font-weight: 500;
margin-top: 7px;
}
.btn {
display: inline-block;
width: 138px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 2px;
font-size: 12px;
outline: none;
border: none;
letter-spacing: 1px;
}
.big-course {
background-color: #FEE41D;
border: 1px solid #090F08;
color: #090F08;
margin-top: 10px;
}
.to-study {
background-color: #09f;
color: #fff;
position: absolute;
left: 10px;
bottom: 10px;
}
.free-study {
background: linear-gradient(-90deg, #EB1612 0%, #F92927 100%);
color: #fff;
margin-top: 10px;
}
.free-course-num {
font-size: 12px;
color: #070F08;
margin-top: 7px;
letter-spacing: 1px;
span {
font-size: 14px;
color: #FF0002;
}
}
}
.type {
text-align: left;
padding-left: 7px;
margin-top: 3px;
.tag {
display: inline-block;
padding: 0 6px;
height: 14px;
line-height: 15px;
text-align: center;
font-size: 12px;
color: #FFF;
position: relative;
z-index: 0;
}
.time {
display: inline-block;
height: 15px;
line-height: 15px;
padding: 0 6px;
margin-left: 5px;
position: relative;
font-size: 12px;
color: #555;
text-align: center;
z-index: 0;
}
.time:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #E6E6E6;
transform: skewX(-20deg);
z-index: -1;
}
.tag:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #FF0002;
transform: skewX(-20deg);
z-index: -1;
}
}
.price {
text-align: left;
padding-left: 5px;
margin-top: 3px;
color: #FF0002;
font-size: 12px;
.new-price {
font-size: 18px;
}
.old-price {
font-size: 12px;
color: #666;
margin-left: 8px;
}
}
.status {
text-align: left;
padding-left: 5px;
position: absolute;
bottom: 10px;
.status-btn {
display: inline-block;
height: 22px;
line-height: 22px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #fff;
}
.to-buy {
width: 55px;
background-color: #FF8080;
}
.add-wish, .add-wish-success {
width: 88px;
margin-left: 5px;
outline: none;
color: #FF0002;
background-color: #fff;
border: 1px solid #FF0002;
img {
width: 12px;
height: 11px;
margin-right: 2px;
position: relative;
top: 1px;
}
}
.add-wish-success {
color: #fff;
background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%);
}
}
}
.bigcourse .course-container {
height: 156px;
}
.freecourse .course-container {
height: 177px;
}
.groupcourse .course-container {
height: 195px;
}
.ai-course__subtitle {
width: 73px;
height: 24px;
margin: 15px auto 0;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
color: #070F08;
text-align: center;
line-height: 22px;
letter-spacing: 2px;
background-color: #FFE300;
border: 1px solid #070F08;
}
.more-button {
display: block;
width: 75px;
height: 26px;
margin: 15px auto 5px;
padding: 0;
border-radius: 12px;
font-size: 12px;
font-weight: 400;
color: #fff;
line-height: 26px;
cursor: pointer;
outline: none;
background-color: #0F6237;
border: none;
letter-spacing: 1px;
}
src/components/activity/newyear-2019/preheat/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import LiveRoom from './LiveRoom/index';
import YearCourse from './YearCourse/index';
import TreasureBox from './../treasure-box/index';
export default class index extends Component {
render() {
return (
<div className={'year-index'}>
<LiveRoom />
<YearCourse />
<TreasureBox></TreasureBox>
</div>
)
}
}
src/components/activity/newyear-2019/preheat/index.scss 0 → 100644
.year-index {
padding-bottom: 30px;
background-color: #BC2A18;
}
\ No newline at end of file
src/components/activity/newyear-2019/treasure-box/index.js 0 → 100644
import React, { Component } from 'react';
import CommonContainer from './../common/commonContainer/index';
import TreasureRank from './rank';
class TreasureBox extends Component {
render() {
return (
<div>
<CommonContainer>
<TreasureRank />
</CommonContainer>
</div>
)
}
}
export default TreasureBox;
\ No newline at end of file
src/components/activity/newyear-2019/treasure-box/rank.js 0 → 100644
import React, { Component } from 'react';
import { http } from '@/utils';
import './rank.scss'
class TreasureRank extends Component {
constructor(props) {
super(props);
this.state = {
rank: [],
rankList: [],
isMore: false,
}
}
componentDidMount() {
this.fetchRankInfo();
}
fetchRankInfo = () => {
http.get(`${API.home}/sys/treasure/ranking`).then(res => {
const { code, data } = res.data;
if(code === 200) {
if(data.length > 5) {
this.setState({
rank: data.filter((item, index) => index < 5),
rankList: data,
isMore: true,
});
}else {
this.setState({
rank: data,
rankList: data,
isMore: false,
});
}
}
});
}
switchMoreRank = () => {
const { rankList, isMore } = this.state;
if(isMore) {
this.setState({
rank: rankList,
isMore: false,
})
}else {
this.setState({
rank: rankList.filter((item, index) => index < 5),
isMore: true,
})
}
}
render() {
const { rank, isMore } = this.state;
return (
<div data-skip="rank">
<div className="rank-title">
<i className="rank-title__decorate"></i>
<h2 className="rank-title__txt">宝箱达人榜</h2>
<i className="rank-title__decorate"></i>
</div>
<p className="rank-desc">宝箱数量前50名可额外获得一份奖品，数量相同的用时短者排名在前</p>
<dl className="rank-header">
<dd className="rank-column">排名</dd>
<dd className="rank-column">用户</dd>
<dd className="rank-column">宝箱数量</dd>
<dd className="rank-column">奖品</dd>
</dl>
<div className="rank-body">
{
rank.map((item, index) => (
<dl className="rank-item" key={index}>
<dd className="rank-column">
{
index <= 2
? <span className="rank-column__number" data-num={index}></span>
: <span>{index+1}</span>
}
</dd>
<dd className="rank-column">
<span>{item.user_name}</span>
</dd>
<dd className="rank-column">
<span>{item.num}</span>
</dd>
<dd className="rank-column">
{
item.url
? <a className="rank-column__txt" href={item.url}>{item.prize_name}</a>
: <span className="rank-column__txt">{item.prize_name}</span>
}
</dd>
</dl>
))
}
<div className="rank-more" onClick={this.switchMoreRank}>
<span className="rank-more__txt">展开</span>
<i className="rank-more__icon" data-more={isMore}></i>
</div>
</div>
</div>
)
}
}
export default TreasureRank;
\ No newline at end of file
src/components/activity/newyear-2019/treasure-box/rank.scss 0 → 100644
[data-skip="rank"] {
.rank-title {
display: flex;
align-items: center;
justify-content: center;
}
.rank-title__decorate {
display: inline-block;
width: 11px;
height: 12px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-decorate-0.png');
}
.rank-title__txt {
position: relative;
margin: 0 8px;
font-size: 18px;
font-weight: normal;
color: #FFE300;
text-align: center;
line-height: 1;
&::after {
content: '';
position: absolute;
top: -8px;
right: -8px;
width: 14px;
height: 11px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-decorate-1.png');
}
}
.rank-desc {
margin: 7px 0 0;
padding: 0 48px;
font-size: 12px;
color: #FFE300;
text-align: center;
line-height: 16px;
}
.rank-header {
margin: 12px 10px 0;
border-radius: 5px 5px 0 0;
font-size: 0;
overflow: hidden;
.rank-column {
color: #1D5432;
font-size: 12px;
line-height: 30px;
background-color: #FFE300;
}
}
.rank-body {
margin: 0 10px;
border-left: 1px solid #81F3AF;
border-bottom: 1px solid #81F3AF;
border-right: 1px solid #81F3AF;
border-radius: 0 0 5px 5px;
background-color: #1D5432;
}
.rank-item {
border-bottom: 1px solid #0E7442;
.rank-column {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
font-size: 12px;
color: #fff;
}
}
.rank-column {
display: inline-block;
text-align: center;
vertical-align: middle;
&:nth-child(1) {
width: 10%;
}
&:nth-child(2) {
width: 25%;
}
&:nth-child(3) {
width: 20%;
}
&:nth-child(4) {
width: 45%;
}
}
.rank-column__number {
display: inline-block;
width: 11px;
height: 12px;
background-size: cover;
&[data-num="0"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-diyiming.png');
}
&[data-num="1"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-dierming.png');
}
&[data-num="2"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-disanming.png');
}
}
.rank-column__txt {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 0 5px;
text-align: left;
}
a.rank-column__txt {
text-decoration: underline;
}
.rank-more {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
}
.rank-more__txt {
font-size: 14px;
color: #fff;
}
.rank-more__icon {
width: 11px;
height: 12px;
margin-left: 5px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-arrow-double.png');
&[data-more="false"] {
transform: rotate(180deg);
}
}
}
src/components/activity/newyear-2019/year-wish/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../common/commonContainer/index'
import CourseItem from '../../../blessingPreheat/courseItem/index'
import {Link, withRouter} from "react-router-dom"
class YarnWish extends Component {
state = {
list: []
}
componentDidMount() {
this.fetchCourse()
}
fetchCourse = () => {
http.get(`${API.home}/activity/wish_course`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.setState({
list: JSON.stringify(data) === '{}' ? [] : data
})
}
})
}
// 去课程详情页
toCourse = (courseId) => {
const {history} = this.props
if (!getParam('version')) {
history.push(`/detail?id=${courseId}`)
} else {
SendMessageToApp("toCourse", courseId)
}
}
render() {
const {list} = this.state
return (
<div className='yarn-wish'>
<div className="banner"><img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/xy_banner_bj.png" alt=""/></div>
{
list.length > 0 ? <CommonContainer>
<div className='groupcourse course-box'>
{
list && list.length > 0 && list.map(item => (
<CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
toCourse={this.toCourse}>
{
item.type == 4 &&
<div className="group-num">限量300个</div>
}
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<>
<p className={'course-title text-overflow-1'}>{item.course_title}</p>
<a onClick={() => this.toCourse(item.course_id)}
className="btn to-study">开始学习</a>
</>
}
{
item.is_buy == 0 &&
<>
<div className="type">
{
item.type == 0 &&
<>
<span className="tag">活动价</span>
<span className="time">12.23开始</span>
</>
}
{
item.type == 1 &&
<>
<span className="tag">拼团价</span>
<span className="time">12.23开团</span>
</>
}
{
item.type == 2 &&
<>
<span className="tag">好友帮帮砍</span>
<span className="time">12.23开砍</span>
</>
}
</div>
<div className="price">
{item.type == 2 ? '到手价最低:¥' : '¥'}
<span className="new-price">{item.price1}</span>
<span
className="old-price">
{item.type == 2 ? '' : '现价：'}
<s>¥{item.price0}</s></span>
</div>
<div className="status">
<a onClick={() => this.toCourse(item.course_id)}
className="status-btn to-buy">直接购买</a>
{
item.is_join == 1 &&
<a className="status-btn add-wish"><img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
alt=""/>已加心愿单</a>
}
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
alt=""/>加入心愿单
</a>
}
</div>
</>
}
</div>
</CourseItem>
))
}
</div>
</CommonContainer>
: <div className="notData">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-empty.png" alt=""/>
<p>你的心愿单目前空空如也，<br/>快去挑选更多优惠课程吧～</p>
{/*活动期间文案*/}
{/*<p>你的心愿单没有课程哦，感兴趣的课程可在双旦主会场直接购买！</p>*/}
</div>
}
</div>
)
}
}
export default withRouter(YarnWish)
src/components/activity/newyear-2019/year-wish/index.scss 0 → 100644
html, body, #root {
height: 100%;
}
.yarn-wish {
height: 100%;
background-color: #BA2C21;
padding-bottom: 35px;
.banner {
width: 100%;
margin-bottom: 30px;
}
.course-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.course-container {
width: 158px;
margin: 15px 0 0 0;
text-align: center;
position: relative;
}
.group-num {
width: 66px;
height: 16px;
position: absolute;
left: 10px;
top: 10px;
line-height: 16px;
background: #CA161C;
opacity: 0.8;
border-radius: 1px;
font-size: 12px;
color: #fff;
text-align: center;
}
.coupon-course__footer {
.course-title {
padding-left: 10px;
font-size: 15px;
color: #333;
font-weight: 500;
margin-top: 7px;
}
.btn {
display: inline-block;
width: 138px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 2px;
font-size: 12px;
outline: none;
border: none;
letter-spacing: 1px;
}
.big-course {
background-color: #FEE41D;
border: 1px solid #090F08;
color: #090F08;
margin-top: 10px;
}
.to-study {
background-color: #09f;
color: #fff;
position: absolute;
left: 10px;
bottom: 10px;
}
.free-study {
background: linear-gradient(-90deg, #EB1612 0%, #F92927 100%);
color: #fff;
margin-top: 10px;
}
.free-course-num {
font-size: 12px;
color: #070F08;
margin-top: 7px;
letter-spacing: 1px;
span {
font-size: 14px;
color: #FF0002;
}
}
}
.type {
text-align: left;
padding-left: 7px;
margin-top: 3px;
.tag {
display: inline-block;
padding: 0 6px;
height: 14px;
line-height: 15px;
text-align: center;
font-size: 12px;
color: #FFF;
position: relative;
z-index: 0;
}
.time {
display: inline-block;
height: 15px;
line-height: 15px;
padding: 0 6px;
margin-left: 5px;
position: relative;
font-size: 12px;
color: #555;
text-align: center;
z-index: 0;
}
.time:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #E6E6E6;
transform: skewX(-20deg);
z-index: -1;
}
.tag:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #FF0002;
transform: skewX(-20deg);
z-index: -1;
}
}
.price {
text-align: left;
padding-left: 5px;
margin-top: 3px;
color: #FF0002;
font-size: 12px;
.new-price {
font-size: 18px;
}
.old-price {
font-size: 12px;
color: #666;
margin-left: 8px;
}
}
.status {
text-align: left;
padding-left: 5px;
position: absolute;
bottom: 10px;
.status-btn {
display: inline-block;
height: 22px;
line-height: 22px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #fff;
}
.to-buy {
width: 148px;
background-color: #FF8080;
}
}
}
.groupcourse .course-container {
height: 195px;
}
.notData {
margin: 100px auto 0;
text-align: center;
img {
width: 56px;
height: 49px;
}
p{
font-size: 16px;
color: #fff;
margin-top: 20px;
}
}
}
src/router/router-config.js
......@@ -33,8 +33,8 @@ const ShareCourse = loadable(() => import(/* webpackChunkName: 'ShareCourse'*/'@
const Country = loadable(() => import(/* webpackChunkName: 'Country' */'@/components/country/index'))
const ExpandCallback = loadable(() => import('@/components/expand/callback'))
const ExpandShare = loadable(() => import('@/components/expand/share'))
const Activity = loadable(() => import(/* webpackChunkName: 'Activity' */'@/components/activity/index'))
const Invite = loadable(() => import(/* webpackChunkName: 'Invite' */'@/components/activity/invite'))
const Activity = loadable(() => import(/* webpackChunkName: 'Activity' */'@/components/activity/1111/index'))
const Invite = loadable(() => import(/* webpackChunkName: 'Invite' */'@/components/activity/1111/invite'))
export default [
{
path: '/',
......@@ -187,7 +187,7 @@ export default [
},
{
path: '/prize-winner-list',
component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/prize-winner-list'))
component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/1111/prize-winner-list'))
},
//定金订单页面
{
......@@ -233,4 +233,15 @@ export default [
path: '/activity/newyear-2019/landing',
component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/newyear-2019/landing/index'))
},
// 双旦活动预热页面
{
path: '/year/yearIndex',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/preheat/index'))
}
,
// 双旦心愿单
{
path: '/year/yearWish',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/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