Skip to content

M
mr-julyedu
Commit fecd65b4 by FE
Options

blessing rule start

parent 07f904b4
Showing with 227 additions and 83 deletions
src/components/blessingPreheat/ReserveCourse/index.scss
.reserve-course-module {
margin: 20px 15px 5px 20px;
margin: 20px 15px 0 20px;
padding-bottom: 5px;
.course-list {
ul {
......
src/components/blessingPreheat/collectBlessing/index.js
......@@ -20,7 +20,7 @@ class CollectBlessing extends Component {
}
render() {
const { handleToShowList } = this.props;
const { handleToShowNotice, handleToShowList, handleToShowInvite } = this.props;
const { rules } = this.state;
return (
<div className="collect-blessing">
......@@ -30,9 +30,44 @@ class CollectBlessing extends Component {
<div className="collect-blessing__item" key={index}>
<i className="collect-blessing__num">{index+1}</i>
<p className="collect-blessing__title">{item}</p>
<a className="collect-blessing__content" onClick={handleToShowList}>
浏览课程<br/>详情页
</a>
{
index === 0 &&
<a className="collect-blessing__content" onClick={handleToShowNotice}>
点击<br/>签到
</a>
}
{
index === 1 &&
<a className="collect-blessing__content" onClick={handleToShowNotice}>
关注<br/>二维码
</a>
}
{
index === 2 &&
<div className="collect-blessing__content" data-layout="column">
<p className="collect-blessing__label">去分享</p>
<div className="collect-blessing__share">
<a className="collect-blessing__share-button" data-type="qq"></a>
<a className="collect-blessing__share-button" data-type="wechat"></a>
</div>
</div>
}
{
index === 3 &&
<a className="collect-blessing__content" onClick={handleToShowList}>
浏览课程<br/>详情页
</a>
}
{
index === 4 &&
<a className="collect-blessing__content" onClick={handleToShowInvite}>
邀请<br/>链接
</a>
}
{
index === 5 &&
<a className="collect-blessing__content">去选课</a>
}
</div>
))
}
......
src/components/blessingPreheat/collectBlessing/index.scss
......@@ -51,4 +51,36 @@
color: #fff;
text-align: center;
background: linear-gradient(-40deg,rgba(255,75,240,1) 0%,rgba(162,0,255,1) 100%);
&[data-layout="column"] {
flex-direction: column;
}
}
.collect-blessing__label {
margin: 0 0 8px;
}
.collect-blessing__share {
display: flex;
align-items: center;
justify-content: center;
}
.collect-blessing__share-button {
display: inline-block;
width: 14px;
height: 11px;
margin: 0 4px;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
&[data-type="qq"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/qq-icon.png');
}
&[data-type="wechat"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/wechat-icon.png');
}
}
\ No newline at end of file
src/components/blessingPreheat/courseList/index.js
......@@ -312,7 +312,7 @@ class CourseList extends Component {
}
{
(!isFormal && item.course_status === 2) &&
(isFormal === 0 && item.course_status === 2) &&
<a className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -322,7 +322,7 @@ class CourseList extends Component {
</a>
}
{
(isFormal && item.course_status === 2) &&
(isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -370,7 +370,7 @@ class CourseList extends Component {
item.course_status === 1 &&
<a
className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
onClick={() => this.toReceiveCoupon(item.course_id, 'basic')}
>
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -381,7 +381,7 @@ class CourseList extends Component {
}
{
(!isFormal && item.course_status === 2) &&
(isFormal === 0 && item.course_status === 2) &&
<a className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -391,7 +391,7 @@ class CourseList extends Component {
</a>
}
{
(isFormal && item.course_status === 2) &&
(isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -452,7 +452,7 @@ class CourseList extends Component {
item.course_status === 1 &&
<a
className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
onClick={() => this.toReceiveCoupon(item.course_id, 'advanced')}
>
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -461,9 +461,8 @@ class CourseList extends Component {
<span className="coupon-course__button-label">立即领券</span>
</a>
}
{
(!isFormal && item.course_status === 2) &&
(isFormal === 0 && item.course_status === 2) &&
<a className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -473,7 +472,7 @@ class CourseList extends Component {
</a>
}
{
(isFormal && item.course_status === 2) &&
(isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -534,7 +533,7 @@ class CourseList extends Component {
item.course_status === 1 &&
<a
className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
onClick={() => this.toReceiveCoupon(item.course_id, 'higher')}
>
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -543,9 +542,8 @@ class CourseList extends Component {
<span className="coupon-course__button-label">立即领券</span>
</a>
}
{
(!isFormal && item.course_status === 2) &&
(isFormal === 0 && item.course_status === 2) &&
<a className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -555,7 +553,7 @@ class CourseList extends Component {
</a>
}
{
(isFormal && item.course_status === 2) &&
(isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -616,7 +614,7 @@ class CourseList extends Component {
item.course_status === 1 &&
<a
className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
onClick={() => this.toReceiveCoupon(item.course_id, 'expand')}
>
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -627,7 +625,7 @@ class CourseList extends Component {
}
{
(!isFormal && item.course_status === 2) &&
(isFormal === 0 && item.course_status === 2) &&
<a className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -637,7 +635,7 @@ class CourseList extends Component {
</a>
}
{
(isFormal && item.course_status === 2) &&
(isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......
src/components/blessingPreheat/index.js
import React, { Component } from 'react';
import QRCode from 'qrcode';
import { http } from '@/utils';
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
......@@ -21,11 +22,14 @@ class BlessingPreheat extends Component {
this.state = {
isRule: false,
isCourse: false,
inviteUrl: '',
inviteVisible: false,
joinLotteryVisible: false,
timelineShareVisible: false,
showRecordList: false,
isFormal: false, // 1正式 0 预热
isServer: false,
serverUrl: '',
}
}
......@@ -46,55 +50,96 @@ class BlessingPreheat extends Component {
handleToHide = (key) => {
let obj = {}
obj[key] = false
obj[key] = false;
this.setState({
...obj
})
}
handleToShowList = () => {
console.log(0);
handleToShow = (key) => {
let obj = {};
obj[key] = true;
this.setState({
isCourse: true
...obj
});
}
onCopy = () => {
Toast.info('复制成功', 2,null,false)
handleToShowInvite = () => {
QRCode.toDataURL('http://m.julyedu.com/invite', {
width: 120,
height: 120,
margin: 1
})
.then(url => {
this.setState({
inviteUrl: url,
inviteVisible: true
});
})
.catch(err => {
console.error(err)
});
}
showRecordList = () => {
this.setState({
showRecordList: true,
handleToShowNotice = () => {
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data} = res.data;
if (errno === 200) {
QRCode.toDataURL(data.url, {
width: 120,
height: 120,
margin: 1
})
.then(url => {
this.setState({
isServer: true,
serverUrl: url,
});
})
.catch(err => {
console.error(err)
});
}else if(errno === 4030 || errno === 4040) {
location.href = `http://passport.julyedu.com/login?redirect=${encodeURI(document.URL)}`;
}
});
}
onCopy = () => {
Toast.info('复制成功', 2,null,false)
}
render() {
const {isRule, isCourse, inviteVisible, isFormal} = this.state
const {isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl} = this.state
return (
<div id={'blessing-preheat'}>
{/* 积福气 */}
<ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing handleToShowList={this.handleToShowList} />
<CollectBlessing
handleToShowList={() => this.handleToShow('isCourse')}
handleToShowInvite={this.handleToShowInvite}
handleToShowNotice={this.handleToShowNotice}
/>
{/* 幸运大抽奖--预热 */}
<ListHeader text="幸运大抽奖" styles={{margin: '0 0 15px'}} />
<ListHeader text="幸运大抽奖" styles={{margin: '30px 0 10px'}} />
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button">活动规则></button>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw />
{/*定金--只在预热期间显示*/}
{
isFormal &&
isFormal === 0 &&
<>
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '0 0 15px'}} />
<ReserveCourse/>
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}} />
<ReserveCourse />
</>
}
{/* 精品课程特惠专区 */}
<ListHeader text="精品课程特惠专区" styles={{margin: '0 0 15px'}} />
<ListHeader text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} />
<CourseList isFormal={isFormal} />
{
isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')}/>
......@@ -103,18 +148,25 @@ class BlessingPreheat extends Component {
isCourse &&
<CoursePopup handleToHide={() => this.handleToHide('isCourse')}/>
}
<Popup visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'}
<Popup
visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'}
>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
<CopyToClipboard
text={'kkk'}
onCopy={this.onCopy}
>
<img src={inviteUrl} alt="barcode" className="qr-code"/>
<CopyToClipboard text="http://m.julyedu.com/invite" onCopy={this.onCopy}>
<button>一键复制网址</button>
</CopyToClipboard>
</Popup>
<Popup
visible={isServer}
title="扫码关注“七月在线”服务号"
className={'invite-popup'}
>
<img src={serverUrl} alt="barcode" className="qr-code"/>
</Popup>
<Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'}
className={'join-lottery'}
......@@ -136,8 +188,8 @@ class BlessingPreheat extends Component {
</Popup>
<ListHeader text="全国AI工程师水平测试" styles={{margin: '0 0 15px'}} />
<div className="test__record" onClick={this.showRecordList}>
<ListHeader text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}} />
<div className="test__record" onClick={() => this.handleToShow('showRecordList')}>
测试记录>
</div>
<LevelTest></LevelTest>
......
src/components/blessingPreheat/index.scss
......@@ -124,6 +124,22 @@
// 幸运大抽奖--预热
.luck-draw__tip {
margin: 0 0 10px;
font-size: 12px;
color: #FFF604;
text-align: center;
}
.luck-draw__button {
display: block;
width: 106px;
height: 26px;
margin: 0 auto 15px;
padding: 0;
border: 1px solid #FFF604;
border-radius: 13px;
box-sizing: border-box;
font-size: 13px;
color: #FFF604;
background-color: transparent;
}
\ No newline at end of file
src/components/blessingPreheat/listHeader/index.scss
......@@ -40,4 +40,5 @@
font-size: 18px;
font-weight: 600;
color: #FFF604;
line-height: 1;
}
\ No newline at end of file
src/components/blessingPreheat/luckDraw/index.scss
.am-tabs {
width: 330px;
margin: 0 auto;
color: #fff;
.luck-draw__container {
.am-tabs {
width: 330px;
margin: 0 auto;
color: #fff;
.am-tabs-tab-bar-wrap {
height: 33px;
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 0 0 6px 6px;
.am-tabs-default-bar {
.am-tabs-tab-bar-wrap {
height: 33px;
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 0 0 6px 6px;
.am-tabs-default-bar {
.am-tabs-default-bar-tab:nth-of-type(3) {
&::after {
display: none;
.am-tabs-default-bar-tab:nth-of-type(3) {
&::after {
display: none;
}
}
}
.am-tabs-default-bar-tab {
height: auto;
line-height: 1;
.am-tabs-default-bar-tab {
height: auto;
line-height: 1;
&::after {
content: '';
display: block;
position: absolute;
right: 0;
left: unset;
top: 50%;
margin-top: -7px;
width: 1px !important;
height: 14px;
background: #FFF604;
transform: none;
&::after {
content: '';
display: block;
position: absolute;
right: 0;
left: unset;
top: 50%;
margin-top: -7px;
width: 1px !important;
height: 14px;
background: #FFF604;
transform: none;
}
}
}
.am-tabs-default-bar-tab-active {
background: #FFF604;
border-radius: 0 0 6px 6px;
.am-tabs-default-bar-tab-active {
background: #FFF604;
border-radius: 0 0 6px 6px;
}
}
}
}
......
src/components/blessingPreheat/rulePopup/index.scss
......@@ -9,6 +9,7 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 999;
.iconfont {
margin: 16px 0 0;
......
src/components/detail/index.js
......@@ -468,6 +468,7 @@ class Detail extends Component {
if (getParam('dist_code')) {
href = '/'
}
let isCent = course_info.pdd_group_info && course_info.pdd_group_info.price != '0.01';
return (
<div>
<div className='detail-box'>
......@@ -641,10 +642,11 @@ class Detail extends Component {
* 拼团
* is_aist: 是否AI特训营
* group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团
* 拼团价格为1分钱时，不允许参团
*/
}
{
!course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
isCent && !course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
<Group
courseInfo={course_info}
history={this.props.history}
......
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