Skip to content

M
mr-julyedu
Commit 7a230890 by wangshuo
Options

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

parents c3e62f2b 8ce0059e
Showing with 1582 additions and 43 deletions
src/common/closable-popup/index.js
...@@ -12,9 +12,11 @@ function ClosablePopup({ ...@@ -12,9 +12,11 @@ function ClosablePopup({
closable = true, closable = true,
close = function () { close = function () {
}, },
clickMaskClose = true,
closeIcon = 'iconiconfront-2' closeIcon = 'iconiconfront-2'
} = {}) { } = {}) {
function unmountComponent() { function unmountComponent() {
ReactDOM.unmountComponentAtNode(div) ReactDOM.unmountComponentAtNode(div)
if (div && div.parentNode) { if (div && div.parentNode) {
...@@ -33,9 +35,18 @@ function ClosablePopup({ ...@@ -33,9 +35,18 @@ function ClosablePopup({
} }
} }
function clickMask() {
if(closable){
return
}
if(!clickMaskClose){
return
}
_close()
}
const closablePopup = ( const closablePopup = (
<div className={'closable-popup-mask'}> <div className={'closable-popup-mask'} onClick={clickMask}>
<div className={classnames(['popup-container', className])}> <div className={classnames(['popup-container', className])}>
<div className="title">{title}</div> <div className="title">{title}</div>
<div className="content"> <div className="content">
...@@ -43,9 +54,9 @@ function ClosablePopup({ ...@@ -43,9 +54,9 @@ function ClosablePopup({
</div> </div>
{ {
closable && closable &&
re.test(closeIcon) (re.test(closeIcon)
? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/> ? <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>
</div> </div>
......
src/components/activity/newyear-2019/common/commonContainer/index.js
...@@ -10,11 +10,14 @@ export default class CommonContainer extends Component { ...@@ -10,11 +10,14 @@ export default class CommonContainer extends Component {
<div className='common_container'> <div className='common_container'>
<div className='container_top'></div> <div className='container_top'></div>
<div className='container_content'> <div className='container_content'>
{
this.props.title &&
<div className='title_container'> <div className='title_container'>
<i></i> <i></i>
<p>{this.props.title}</p> <p>{this.props.title}</p>
<i></i> <i></i>
</div> </div>
}
{ {
React.Children.map(this.props.children, function (child) { React.Children.map(this.props.children, function (child) {
return <>{child}</>; return <>{child}</>;
......
src/components/activity/newyear-2019/common/commonContainer/index.scss
.common_container { .common_container {
margin-bottom: 35px;
.title_container { .title_container {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -8,6 +9,7 @@ ...@@ -8,6 +9,7 @@
i { i {
width: 230px; width: 230px;
height: 2px; height: 2px;
margin: auto;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(254, 228, 29, 0) 0%, rgba(254, 228, 29, 0) 0%,
...@@ -48,10 +50,10 @@ ...@@ -48,10 +50,10 @@
height: 22px; height: 22px;
} }
.container_content { .container_content {
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_middle_bj.png") background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_middle_bj.png");
center center repeat; background-size: contain;
background-size: 100% 25px;
width: 100%; width: 100%;
min-height: 25px; min-height: 25px;
padding: 5px 20px;
} }
} }
src/components/activity/newyear-2019/landing/index.js
...@@ -2,9 +2,10 @@ import React, { Component } from 'react' ...@@ -2,9 +2,10 @@ import React, { Component } from 'react'
import BoxContainer from '../box-container/container' import BoxContainer from '../box-container/container'
import { Toast } from "antd-mobile" import { Toast } from "antd-mobile"
import { Popup } from "@common/index" import { Popup } from "@common/index"
import cls from 'classnames'
import './landing.scss' import './landing.scss'
import { http } from "@/utils" import { browser, getParam, http } from "@/utils"
class Landing extends Component { class Landing extends Component {
...@@ -121,9 +122,13 @@ class Landing extends Component { ...@@ -121,9 +122,13 @@ class Landing extends Component {
] ]
}, },
origin: getParam('origin'),
treasure_code: getParam('treasure_code'),
activityEnd: false
} }
componentDidMount() { componentDidMount() {
const {origin, treasure_code} = this.state
http.get(`${API.home}/sys/prize_data`) http.get(`${API.home}/sys/prize_data`)
.then(res => { .then(res => {
const {data, code, msg} = res.data const {data, code, msg} = res.data
...@@ -133,8 +138,9 @@ class Landing extends Component { ...@@ -133,8 +138,9 @@ class Landing extends Component {
Toast.info(msg, 2, null, false) 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 => { .then(res => {
const {data, code, msg} = res.data const {data, code, msg} = res.data
...@@ -143,13 +149,49 @@ class Landing extends Component { ...@@ -143,13 +149,49 @@ class Landing extends Component {
this.setState({ this.setState({
teamData: data 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 { } else {
Toast.info(msg, 2, null, false) 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 = () => { showRules = () => {
...@@ -189,7 +231,7 @@ class Landing extends Component { ...@@ -189,7 +231,7 @@ class Landing extends Component {
} }
joinSuccess = (isFull = false) => { joinSuccess = ({status, team_num, lack_member, is_team}) => {
Popup({ Popup({
title: <div className={'join-success'}> title: <div className={'join-success'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
...@@ -199,28 +241,30 @@ class Landing extends Component { ...@@ -199,28 +241,30 @@ class Landing extends Component {
content: <div> content: <div>
<div className={'tip'}> <div className={'tip'}>
{ {
isFull status === 2
? '组队成功，恭喜你获得一个宝箱！' ? '组队成功，恭喜你获得一个宝箱！'
: is_team
? `您的${<span>{team_num}</span>}号队伍还差${<span>{lack_member}</span>}人即可获得宝箱`
: '自己当队长，宝箱内有专属奖品哦~' : '自己当队长，宝箱内有专属奖品哦~'
} }
</div> </div>
{ {
isFull status === 2
? <img style={{width: '150px', marginTop: '23px'}} ? <img style={{width: '150px', marginTop: '23px'}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/> 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>, </div>,
closeIcon: this.closeIcon closeIcon: this.closeIcon
}) })
} }
createTeamSuccess = () => { createTeamSuccess = ({head_img, team_num, lack_member, treasure_code}) => {
Popup({ Popup({
title: '创建成功', title: '创建成功',
className: 'landing-create-success', className: 'landing-create-success',
content: <div> content: <div>
<div className="tip">*号队伍 还差*名队员即可获得宝箱哦~</div> <div className="tip">{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~</div>
<img className={'treasure-box'} <img className={'treasure-box'}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/> src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
<ul className='members'> <ul className='members'>
...@@ -287,9 +331,49 @@ class Landing extends Component { ...@@ -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() { render() {
const {teamData} = this.state const {
teamData: {
head_img,
member,
status,
lack_member,
team_num,
prize_info,
is_team
}
} = this.state
return ( return (
<div id={'landing'}> <div id={'landing'}>
<div id="to-square"> <div id="to-square">
...@@ -298,8 +382,13 @@ class Landing extends Component { ...@@ -298,8 +382,13 @@ class Landing extends Component {
<BoxContainer> <BoxContainer>
<i className="snow-deco"/> <i className="snow-deco"/>
<img className='main-avatar' <img className='main-avatar'
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/robot.png" alt=""/> src={head_img} alt=""/>
<div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div> {
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}> <div className={'prizes-box'} ref={el => this.prizeBox = el}>
<a href="javascript:;" className='rule-btn' onClick={this.showRules}>活动规则 > </a> <a href="javascript:;" className='rule-btn' onClick={this.showRules}>活动规则 > </a>
<div className={`bg`} ref={el => this.bg = el}/> <div className={`bg`} ref={el => this.bg = el}/>
...@@ -329,22 +418,22 @@ class Landing extends Component { ...@@ -329,22 +418,22 @@ class Landing extends Component {
</div> </div>
} }
</div> </div>
<div className="fake"></div>
</div> </div>
<div className="group"> <div className="group">
<ul className={'member'}> <ul className={'member'}>
{ {
member && member.length &&
new Array(5).fill('a').map((item, index) => { new Array(5).fill('a').map((item, index) => {
const member = teamData.member[index] const _member = member[index]
return ( return (
member _member
? <li key={index}> ? <li key={index}>
<div className='avatar-wrapper'> <div className='avatar-wrapper'>
{ {
member.is_captain ? <sup>队长</sup> : null _member.is_captain ? <sup>队长</sup> : null
} }
<img <img
src={member.head_img} src={_member.head_img}
alt="" alt=""
className="avatar"/> className="avatar"/>
</div> </div>
...@@ -364,19 +453,51 @@ class Landing extends Component { ...@@ -364,19 +453,51 @@ class Landing extends Component {
</ul> </ul>
<ul className={'bars'}> <ul className={'bars'}>
{ {
member && member.length &&
new Array(5).fill('a').map((item, index) => { new Array(5).fill('a').map((item, index) => {
return ( return (
<li key={index} className={`${index + 1 < teamData.member.length ? 'active' : ''}`}/> <li key={index} className={`${index < member.length ? 'active' : ''}`}/>
) )
}) })
} }
</ul> </ul>
<div className="group-des"> {
还差 {'*'} 名队员即可获得当前宝箱哦~ status === 1 && <div className="group-des">
还差 {lack_member} 名队员即可获得当前宝箱哦~
</div> </div>
<button type='button' className={'invite-btn'}> }
{
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> </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> </div>
</BoxContainer> </BoxContainer>
</div> </div>
......
src/components/activity/newyear-2019/landing/landing.scss
...@@ -46,14 +46,25 @@ ...@@ -46,14 +46,25 @@
.main-avatar { .main-avatar {
width: 49px; width: 49px;
height: 49px;
border-radius: 50%; border-radius: 50%;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 37.5px; margin-top: 37.5px;
object-fit: cover;
} }
.des { .des {
font-size: 14px; font-size: 14px;
color: #FFDC1E; color: #FFDC1E;
span{
display: inline-block;
width: 15px;
height: 15px;
line-height: 16px;
color: #327443;
border-radius: 50%;
background: #FFDC1E;
}
} }
.trans-height { .trans-height {
...@@ -163,16 +174,6 @@ ...@@ -163,16 +174,6 @@
} }
} }
} }
/*.fake{
position: absolute;
bottom: 8px;
left: 10%;
width: 20px;
height: 54px;
background: red;
z-index: 200;
}*/
} }
.group { .group {
...@@ -263,6 +264,13 @@ ...@@ -263,6 +264,13 @@
border-radius: 3px; border-radius: 3px;
font-family: "HiraginoSansGB-W6", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; 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 @@ ...@@ -273,6 +281,10 @@
line-height: 37px; line-height: 37px;
color: #666; color: #666;
text-align: center; text-align: center;
span{
color: #FF2121;
}
} }
} }
...@@ -434,7 +446,7 @@ ...@@ -434,7 +446,7 @@
} }
} }
.prize-name{ .prize-name {
font-size: 15px; font-size: 15px;
color: #FF232D; color: #FF232D;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -446,7 +458,7 @@ ...@@ -446,7 +458,7 @@
padding: 12px; padding: 12px;
margin-top: 12px; margin-top: 12px;
li:nth-last-child(1){ li:nth-last-child(1) {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -493,3 +505,41 @@ ...@@ -493,3 +505,41 @@
@extend .popup-button; @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;
}
}
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
import React, { Component } from 'react' import React, { Component } from 'react'
import './index.scss' import './index.scss'
import LiveRoom from './LiveRoom/index'; import LiveRoom from './LiveRoom/index';
import YearCourse from './YearCourse/index';
import TreasureBox from './../treasure-box/index'; import TreasureBox from './../treasure-box/index';
export default class index extends Component { export default class index extends Component {
render() { render() {
return ( return (
<div> <div className={'year-index'}>
<LiveRoom /> <LiveRoom />
<YearCourse />
<TreasureBox></TreasureBox> <TreasureBox></TreasureBox>
</div> </div>
) )
......
src/components/activity/newyear-2019/preheat/index.scss
.year-index {
padding-bottom: 30px;
background-color: #BC2A18;
}
\ No newline at end of file
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
...@@ -238,4 +238,10 @@ export default [ ...@@ -238,4 +238,10 @@ export default [
path: '/year/yearIndex', path: '/year/yearIndex',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/preheat/index')) 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