Skip to content

M
mr-julyedu
Commit 11675ee6 by FE
Options

pull and solve

parents 0172b673 5e2f0377
Showing with 1146 additions and 55 deletions
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>
......
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}</>;
......
src/components/activity/newyear-2019/common/commonContainer/index.scss
.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;
}
}
src/components/activity/newyear-2019/common/commonPopup/index.js 0 → 100644
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>
)
}
}
src/components/activity/newyear-2019/common/commonPopup/index.scss 0 → 100644
.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
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>
......
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;
}
}
src/components/activity/newyear-2019/preheat/LiveRoom/index.js
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>
)
......
src/components/activity/newyear-2019/preheat/LiveRoom/index.scss
.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.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 './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>
)
......
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/treasure-box/index.js
......@@ -6,7 +6,6 @@ class TreasureBox extends Component {
render() {
return (
<div>
1111122222
<CommonContainer>
<TreasureRank />
</CommonContainer>
......
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
......@@ -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'))
}
]
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