diff --git a/src/common/closable-popup/index.js b/src/common/closable-popup/index.js
index eb59c5a..ea5e737 100644
--- a/src/common/closable-popup/index.js
+++ b/src/common/closable-popup/index.js
@@ -12,9 +12,11 @@ function ClosablePopup({
closable = true,
close = function () {
},
+ clickMaskClose = true,
closeIcon = 'iconiconfront-2'
} = {}) {
+
function unmountComponent() {
ReactDOM.unmountComponentAtNode(div)
if (div && div.parentNode) {
@@ -33,9 +35,18 @@ function ClosablePopup({
}
}
+ function clickMask() {
+ if(closable){
+ return
+ }
+ if(!clickMaskClose){
+ return
+ }
+ _close()
+ }
const closablePopup = (
- <div className={'closable-popup-mask'}>
+ <div className={'closable-popup-mask'} onClick={clickMask}>
<div className={classnames(['popup-container', className])}>
<div className="title">{title}</div>
<div className="content">
@@ -43,9 +54,9 @@ function ClosablePopup({
</div>
{
closable &&
- re.test(closeIcon)
+ (re.test(closeIcon)
? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/>
- : <i className={`close iconfont ${closeIcon}`} onClick={_close}/>
+ : <i className={`close iconfont ${closeIcon}`} onClick={_close}/>)
}
</div>
</div>
diff --git a/src/components/activity/newyear-2019/common/commonContainer/index.js b/src/components/activity/newyear-2019/common/commonContainer/index.js
index 005b724..6029dca 100644
--- a/src/components/activity/newyear-2019/common/commonContainer/index.js
+++ b/src/components/activity/newyear-2019/common/commonContainer/index.js
@@ -10,11 +10,14 @@ export default class CommonContainer extends Component {
<div className='common_container'>
<div className='container_top'></div>
<div className='container_content'>
- <div className='title_container'>
- <i></i>
- <p>{this.props.title}</p>
- <i></i>
- </div>
+ {
+ 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}</>;
diff --git a/src/components/activity/newyear-2019/common/commonContainer/index.scss b/src/components/activity/newyear-2019/common/commonContainer/index.scss
index c5aac4f..537bb4d 100644
--- a/src/components/activity/newyear-2019/common/commonContainer/index.scss
+++ b/src/components/activity/newyear-2019/common/commonContainer/index.scss
@@ -1,4 +1,5 @@
.common_container {
+ margin-bottom: 35px;
.title_container {
width: 100%;
display: flex;
@@ -8,12 +9,14 @@
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;
@@ -47,10 +50,10 @@
height: 22px;
}
.container_content {
- background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_middle_bj.png")
- center center no-repeat;
- background-size: 100% 100%;
+ 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;
}
}
diff --git a/src/components/activity/newyear-2019/common/commonPopup/index.js b/src/components/activity/newyear-2019/common/commonPopup/index.js
new file mode 100644
index 0000000..b48c404
--- /dev/null
+++ b/src/components/activity/newyear-2019/common/commonPopup/index.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import './index.scss';
+
+export default class index extends Component {
+ constructor(props) {
+ super(props);
+ }
+ computedStyle = () => {
+ return {
+ 'top': `${this.props.top}px`,
+ 'width': `${this.props.width}px`
+ }
+ }
+
+ // 控制点击空白处是否关闭弹窗 需要传递一个boolean属性 mark
+ closePopup = () => {
+ if(this.props.mark) {
+ this.props.closePopup();
+ }
+ }
+
+ render() {
+ return (
+ <div className='popup__container' onClick={this.closePopup}>
+ <div className='content__container' style={this.computedStyle()}>
+ <img className="close__btn" onClick={this.props.closePopup} src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png' alt="" />
+ {
+ React.Children.map(this.props.children, function (child) {
+ return <>{child}</>;
+ })
+ }
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/src/components/activity/newyear-2019/common/commonPopup/index.scss b/src/components/activity/newyear-2019/common/commonPopup/index.scss
new file mode 100644
index 0000000..a0581a7
--- /dev/null
+++ b/src/components/activity/newyear-2019/common/commonPopup/index.scss
@@ -0,0 +1,29 @@
+.popup__container {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.6);
+ z-index: 99;
+
+ .content__container {
+ width: 320px;
+ min-height: 240px;
+ border-radius: 5px;
+ background: rgba(255,255,255,1);
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 160px;
+
+ .close__btn {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 33px;
+ height: 33px;
+ bottom: -57px
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/activity/newyear-2019/landing/index.js b/src/components/activity/newyear-2019/landing/index.js
index 6815d9a..21c2199 100644
--- a/src/components/activity/newyear-2019/landing/index.js
+++ b/src/components/activity/newyear-2019/landing/index.js
@@ -2,9 +2,10 @@ import React, { Component } from 'react'
import BoxContainer from '../box-container/container'
import { Toast } from "antd-mobile"
import { Popup } from "@common/index"
+import cls from 'classnames'
import './landing.scss'
-import { http } from "@/utils"
+import { browser, getParam, http } from "@/utils"
class Landing extends Component {
@@ -121,9 +122,13 @@ class Landing extends Component {
]
},
+ origin: getParam('origin'),
+ treasure_code: getParam('treasure_code'),
+ activityEnd: false
}
componentDidMount() {
+ const {origin, treasure_code} = this.state
http.get(`${API.home}/sys/prize_data`)
.then(res => {
const {data, code, msg} = res.data
@@ -133,8 +138,9 @@ class Landing extends Component {
Toast.info(msg, 2, null, false)
}
})
- /*http.post(`${API.home}/sys/treasure/team`, {
-
+ http.post(`${API.home}/sys/treasure/team`, {
+ treasure_code,
+ origin
})
.then(res => {
const {data, code, msg} = res.data
@@ -143,13 +149,49 @@ class Landing extends Component {
this.setState({
teamData: data
})
- // console.log(data)
+
+ let searchParams = new URLSearchParams(window.location.search)
+ if (searchParams.get('origin') === '1') {
+ searchParams.set('origin', '2')
+ window.history.replaceState(null, '', `landing?${searchParams.toString()}`)
+ }
+
+ } else if (code === 12005) {
+
+ this.setState({
+ activityEnd: true
+ })
} else {
Toast.info(msg, 2, null, false)
}
- })*/
- this.joinSuccess()
+ })
+
+
+ }
+
+ joinTeam = () => {
+ const {treasure_code} = this.state
+ http.post(`${API.home}/sys/treasure/joinTeam`, {
+ treasure_code
+ })
+ .then(res => {
+ const {data, code, msg} = res.data
+ if (code === 200) {
+
+ switch (data.status) {
+ case 1:
+ case 2:
+ this.joinSuccess(data)
+ break
+ default:
+ alert('aaa')
+ }
+
+ } else {
+ Toast.info(msg, 2, null, false)
+ }
+ })
}
showRules = () => {
@@ -189,7 +231,7 @@ class Landing extends Component {
}
- joinSuccess = (isFull = false) => {
+ joinSuccess = ({status, team_num, lack_member, is_team}) => {
Popup({
title: <div className={'join-success'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
@@ -199,28 +241,30 @@ class Landing extends Component {
content: <div>
<div className={'tip'}>
{
- isFull
+ status === 2
? '组队成功，恭喜你获得一个宝箱！'
+ : is_team
+ ? `您的${<span>{team_num}</span>}号队伍还差${<span>{lack_member}</span>}人即可获得宝箱`
: '自己当队长，宝箱内有专属奖品哦~'
}
</div>
{
- isFull
+ status === 2
? <img style={{width: '150px', marginTop: '23px'}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
- : <button type="button">创建我的队伍</button>
+ : <button type="button">{is_team ? '继续组队' : '创建我的队伍'}</button>
}
</div>,
closeIcon: this.closeIcon
})
}
- createTeamSuccess = () => {
+ createTeamSuccess = ({head_img, team_num, lack_member, treasure_code}) => {
Popup({
title: '创建成功',
className: 'landing-create-success',
content: <div>
- <div className="tip">*号队伍 还差*名队员即可获得宝箱哦~</div>
+ <div className="tip">{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~</div>
<img className={'treasure-box'}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
<ul className='members'>
@@ -287,9 +331,49 @@ class Landing extends Component {
})
}
+ showShareTip = () => {
+ Popup({
+ title: <div>还差<span>{this.state.teamData.lack_member}</span>名队友即可获得宝箱 快分享给好友吧~</div>,
+ className: `landing-share-tip ${browser.isWeixin ? 'wechat' : ''}`,
+ closable: false,
+ })
+ }
+
+ showOpenInBrowserTip = () => {
+ Popup({
+ title: <div>点击右上角，选择“在浏览器打开”</div>,
+ className: 'landing-open-in-browser-tip',
+ closable: false,
+ })
+ }
+
+ createMyTeam = () => {
+ http.get(`${API.home}/sys/treasure/createMyTeam`)
+ .then(res => {
+ const {data, code, msg} = res.data
+ if (code == 200) {
+
+ this.createTeamSuccess(data)
+
+ } else {
+ Toast.info(msg, 2, null, false)
+ }
+ })
+ }
+
render() {
- const {teamData} = this.state
+ const {
+ teamData: {
+ head_img,
+ member,
+ status,
+ lack_member,
+ team_num,
+ prize_info,
+ is_team
+ }
+ } = this.state
return (
<div id={'landing'}>
<div id="to-square">
@@ -298,8 +382,13 @@ class Landing extends Component {
<BoxContainer>
<i className="snow-deco"/>
<img className='main-avatar'
- src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/robot.png" alt=""/>
- <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
+ src={head_img} alt=""/>
+ {
+ status === 1 && <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
+ }
+ {
+ status === 2 || status === 3 && <div className="des">加入我的<span>{team_num}</span>号队伍，一起开宝箱领取丰厚奖品~</div>
+ }
<div className={'prizes-box'} ref={el => this.prizeBox = el}>
<a href="javascript:;" className='rule-btn' onClick={this.showRules}>活动规则 > </a>
<div className={`bg`} ref={el => this.bg = el}/>
@@ -329,22 +418,22 @@ class Landing extends Component {
</div>
}
</div>
- <div className="fake"></div>
</div>
<div className="group">
<ul className={'member'}>
{
+ member && member.length &&
new Array(5).fill('a').map((item, index) => {
- const member = teamData.member[index]
+ const _member = member[index]
return (
- member
+ _member
? <li key={index}>
<div className='avatar-wrapper'>
{
- member.is_captain ? <sup>队长</sup> : null
+ _member.is_captain ? <sup>队长</sup> : null
}
<img
- src={member.head_img}
+ src={_member.head_img}
alt=""
className="avatar"/>
</div>
@@ -364,19 +453,51 @@ class Landing extends Component {
</ul>
<ul className={'bars'}>
{
+ member && member.length &&
new Array(5).fill('a').map((item, index) => {
return (
- <li key={index} className={`${index + 1 < teamData.member.length ? 'active' : ''}`}/>
+ <li key={index} className={`${index < member.length ? 'active' : ''}`}/>
)
})
}
</ul>
- <div className="group-des">
- 还差 {'*'} 名队员即可获得当前宝箱哦~
- </div>
- <button type='button' className={'invite-btn'}>
- 邀请好友加入队伍
- </button>
+ {
+ status === 1 && <div className="group-des">
+ 还差 {lack_member} 名队员即可获得当前宝箱哦~
+ </div>
+ }
+ {
+ status === 3 && <div className="group-des">
+ <p>已加入当前队伍</p>
+ {
+ is_team
+ ? <p>您的{team_num}号队伍还差{lack_member}人即可获得宝箱~</p>
+ : <p>自己当队长，宝箱内有专属奖品哦~</p>
+ }
+
+ </div>
+ }
+ {
+ status === 1 &&
+ <button type='button' className={'invite-btn'} onClick={this.showShareTip}>
+ 邀请好友加入队伍
+ </button>
+ }
+ {
+ status === 2 && < button type='button' className={'invite-btn'} onClick={this.joinTeam}>
+ 同意加入队伍
+ </button>
+ }
+ {
+ status === 3 && < button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
+ 创建我的队伍
+ </button>
+ }
+ {
+ status === 2 && prize_info && <div className="certainly-prompt">
+ 第{prize_info.stage_no}次必中 {prize_info.name}
+ </div>
+ }
</div>
</BoxContainer>
</div>
diff --git a/src/components/activity/newyear-2019/landing/landing.scss b/src/components/activity/newyear-2019/landing/landing.scss
index 8365c6a..d627c3e 100644
--- a/src/components/activity/newyear-2019/landing/landing.scss
+++ b/src/components/activity/newyear-2019/landing/landing.scss
@@ -46,14 +46,25 @@
.main-avatar {
width: 49px;
+ height: 49px;
border-radius: 50%;
margin-bottom: 5px;
margin-top: 37.5px;
+ object-fit: cover;
}
.des {
font-size: 14px;
color: #FFDC1E;
+ span{
+ display: inline-block;
+ width: 15px;
+ height: 15px;
+ line-height: 16px;
+ color: #327443;
+ border-radius: 50%;
+ background: #FFDC1E;
+ }
}
.trans-height {
@@ -163,16 +174,6 @@
}
}
}
-
- /*.fake{
- position: absolute;
- bottom: 8px;
- left: 10%;
- width: 20px;
- height: 54px;
- background: red;
- z-index: 200;
- }*/
}
.group {
@@ -263,6 +264,13 @@
border-radius: 3px;
font-family: "HiraginoSansGB-W6", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
+
+ .certainly-prompt{
+ margin-top: -43px;
+ padding-bottom: 16px;
+ font-size: 14px;
+ color: #FFE300;
+ }
}
}
@@ -273,6 +281,10 @@
line-height: 37px;
color: #666;
text-align: center;
+
+ span{
+ color: #FF2121;
+ }
}
}
@@ -434,7 +446,7 @@
}
}
- .prize-name{
+ .prize-name {
font-size: 15px;
color: #FF232D;
margin-bottom: 5px;
@@ -446,7 +458,7 @@
padding: 12px;
margin-top: 12px;
- li:nth-last-child(1){
+ li:nth-last-child(1) {
margin-bottom: 0;
}
@@ -493,3 +505,41 @@
@extend .popup-button;
}
}
+
+.landing-open-in-browser-tip, .landing-share-tip {
+ font-size: 17px;
+ color: #111;
+
+ &.popup-container {
+ width: 270px;
+ text-align: center;
+ top: 114px;
+ padding: 20px 33px;
+ }
+
+ span {
+ color: #FF2121;
+ }
+}
+
+.landing-open-in-browser-tip.wechat, .landing-share-tip.wechat{
+ &.popup-container{
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: -50px;
+ right: -18px;
+ width: 50px;
+ height: 38px;
+ background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/share-indicator.png") no-repeat;
+ background-size: contain;
+ }
+ }
+}
+
+.landing-open-in-browser-tip{
+ &.popup-container{
+ width: 312px;
+ }
+}
diff --git a/src/components/activity/newyear-2019/preheat/LiveRoom/index.js b/src/components/activity/newyear-2019/preheat/LiveRoom/index.js
index 1aacbfa..1336f0c 100644
--- a/src/components/activity/newyear-2019/preheat/LiveRoom/index.js
+++ b/src/components/activity/newyear-2019/preheat/LiveRoom/index.js
@@ -1,15 +1,131 @@
import React, { Component } from 'react';
import './index.scss';
+import { Toast } from 'antd-mobile';
+import { http } from '@/utils';
import CommonContainer from './../../common/commonContainer/index'
+import CommonPopup from './../../common/commonPopup/index';
export default class index extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ list: [],
+ showMark: true,
+ }
+ }
+
+ componentDidMount() {
+ http.get(`${API.home}/activity/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}`)
+ }
+ // 关闭弹框
+ closePopup = () => {
+ this.setState({
+ showMark: false,
+ })
+ }
+
render() {
+ const { list,showMark } = this.state;
return (
- <div>
+ <div className='live__container'>
+ {
+ showMark && (
+ <CommonPopup top={50} closePopup={this.closePopup} mark={true}>
+ <div>1</div>
+ <div>2</div>
+ </CommonPopup>
+ )
+ }
+
<CommonContainer title='大咖直播'>
- <div>
+ <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>
+ </div>
+ </li>
+ })
+ )
+ }
+ </ul>
</CommonContainer>
</div>
)
diff --git a/src/components/activity/newyear-2019/preheat/LiveRoom/index.scss b/src/components/activity/newyear-2019/preheat/LiveRoom/index.scss
index e69de29..5b96217 100644
--- a/src/components/activity/newyear-2019/preheat/LiveRoom/index.scss
+++ b/src/components/activity/newyear-2019/preheat/LiveRoom/index.scss
@@ -0,0 +1,100 @@
+.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;
+ }
+ }
+ }
+}
diff --git a/src/components/activity/newyear-2019/preheat/YearCourse/index.js b/src/components/activity/newyear-2019/preheat/YearCourse/index.js
new file mode 100644
index 0000000..8b58dc2
--- /dev/null
+++ b/src/components/activity/newyear-2019/preheat/YearCourse/index.js
@@ -0,0 +1,730 @@
+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)
diff --git a/src/components/activity/newyear-2019/preheat/YearCourse/index.scss b/src/components/activity/newyear-2019/preheat/YearCourse/index.scss
new file mode 100644
index 0000000..9ff7fa7
--- /dev/null
+++ b/src/components/activity/newyear-2019/preheat/YearCourse/index.scss
@@ -0,0 +1,247 @@
+.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;
+}
diff --git a/src/components/activity/newyear-2019/preheat/index.js b/src/components/activity/newyear-2019/preheat/index.js
index c7801c4..b362311 100644
--- a/src/components/activity/newyear-2019/preheat/index.js
+++ b/src/components/activity/newyear-2019/preheat/index.js
@@ -1,15 +1,17 @@
import React, { Component } from 'react'
import './index.scss'
import LiveRoom from './LiveRoom/index';
+import YearCourse from './YearCourse/index';
import TreasureBox from './../treasure-box/index';
import TreasureNav from './nav';
export default class index extends Component {
render() {
return (
- <div>
+ <div className={'year-index'}>
<TreasureNav></TreasureNav>
<LiveRoom />
+ <YearCourse />
<TreasureBox></TreasureBox>
</div>
)
diff --git a/src/components/activity/newyear-2019/preheat/index.scss b/src/components/activity/newyear-2019/preheat/index.scss
index e69de29..22ecbc8 100644
--- a/src/components/activity/newyear-2019/preheat/index.scss
+++ b/src/components/activity/newyear-2019/preheat/index.scss
@@ -0,0 +1,4 @@
+.year-index {
+ padding-bottom: 30px;
+ background-color: #BC2A18;
+}
\ No newline at end of file
diff --git a/src/components/activity/newyear-2019/treasure-box/index.js b/src/components/activity/newyear-2019/treasure-box/index.js
index 9f94625..6e62eb5 100644
--- a/src/components/activity/newyear-2019/treasure-box/index.js
+++ b/src/components/activity/newyear-2019/treasure-box/index.js
@@ -6,7 +6,6 @@ class TreasureBox extends Component {
render() {
return (
<div>
- 1111122222
<CommonContainer>
<TreasureRank />
</CommonContainer>
diff --git a/src/components/activity/newyear-2019/year-wish/index.js b/src/components/activity/newyear-2019/year-wish/index.js
new file mode 100644
index 0000000..4472614
--- /dev/null
+++ b/src/components/activity/newyear-2019/year-wish/index.js
@@ -0,0 +1,146 @@
+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)
diff --git a/src/components/activity/newyear-2019/year-wish/index.scss b/src/components/activity/newyear-2019/year-wish/index.scss
new file mode 100644
index 0000000..70b0b36
--- /dev/null
+++ b/src/components/activity/newyear-2019/year-wish/index.scss
@@ -0,0 +1,216 @@
+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;
+ }
+ }
+}
+
diff --git a/src/router/router-config.js b/src/router/router-config.js
index 78d171c..6226ec5 100644
--- a/src/router/router-config.js
+++ b/src/router/router-config.js
@@ -245,4 +245,10 @@ export default [
path: '/year/yearTreasure',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/myTreasure/index'))
}
+ ,
+ // 双旦心愿单
+ {
+ path: '/year/yearWish',
+ component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/year-wish/index'))
+ }
]