Skip to content

M
mr-julyedu
Commit 1060de5f by FE
Options

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

parents 1fbed084 ea2ad88d
Showing with 1091 additions and 21 deletions
src/common/closable-popup/index.scss
......@@ -5,6 +5,7 @@
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
.popup-container {
position: absolute;
......
src/components/blessingPreheat/banner/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import { throttle } from 'lodash'
class Banner extends Component {
navTop = 183
prevY = 0
state = {
navs: [
{
text: '积福气',
id: 'lucky-value'
},
{
text: '幸运大抽奖',
id: 'lucky-draw'
},
{
text: '预付定金',
id: 'deposit'
},
{
text: '精品特惠',
id: 'best-courses'
},
{
text: 'AI测试',
id: 'ai-test'
},
{
text: '大咖直播',
id: 'live'
},
],
index: 0,
}
componentDidMount() {
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
}
componentWillUnmount() {
}
calcNavActive = () => {
const {navs, index} = this.state
const y = window.scrollY
let swipeDirection = y > this.prevY ? 'up' : 'down'
let _index
if (swipeDirection === 'up') {
_index = (index + 1) >= navs.length ? index : index + 1
} else {
_index = (index - 1) <= 0 ? 0 : index - 1
}
let el = document.querySelector(`#${navs[_index].id}`)
let nav = document.querySelector('#main-nav')
let top = el.offsetTop
if (y <= this.navTop) {
nav.classList.remove('fixed')
} else {
!nav.classList.contains('fixed') && nav.classList.add('fixed')
}
if (swipeDirection === 'up') {
if (y + 30 + 30 >= top) {
this.setState({
index: _index
})
}
} else {
if (y + 30 + 20 <= top) {
this.setState({
index: _index
})
}
}
this.prevY = y
}
toSection = (i, e) => {
e.preventDefault()
let top = document.querySelector(`#${this.state.navs[i].id}`).offsetTop
this.setState({
index: i
})
window.scrollTo({
top: top - 60,
left: 0
})
}
render() {
const {navs, index} = this.state
return (
<div id={'main-banner'}>
<div className="banner"></div>
<nav id={'main-nav'}>
<ul>
{
navs.map((item, i) => {
return (
<li key={i} className={index === i ? 'active' : ''}>
<a href={`#${item.id}`} onClick={(e) => {
this.toSection(i, e)
}}>{item.text}</a>
</li>
)
})
}
</ul>
</nav>
</div>
)
}
}
export default Banner
src/components/blessingPreheat/banner/index.scss 0 → 100644
#main-banner{
overflow: auto;
.banner{
width: 375px;
height: 183px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/banner.png") no-repeat;
background-size: contain;
}
#main-nav{
position: absolute;
top: 183px;
margin-bottom:30px;
&.fixed{
position: fixed;
top: 0;
z-index: 100;
}
ul{
background: #3900C9;
display: flex;
}
li{
width: 63px;
height: 30px;
font-size: 11px;
color: #fff;
text-align: center;
line-height: 30px;
&.active{
background: #FF42F9;
}
}
}
}
src/components/blessingPreheat/collectBlessing/index.js
......@@ -55,7 +55,8 @@ class CollectBlessing extends Component {
userInfo: { isLogin = false, blessingVal = 0 },
handleToShowNotice,
handleToShowList,
handleToShowInvite
handleToShowInvite,
handleToShow
} = this.props;
const { rules, welfareRuleList } = this.state;
return (
......@@ -124,7 +125,7 @@ class CollectBlessing extends Component {
}
{
index === 2 &&
<div className="collect-blessing__content" data-layout="column">
<div className="collect-blessing__content" data-layout="column" onClick={()=>{handleToShow('shareMark')}}>
<p className="collect-blessing__label">去分享</p>
<div className="collect-blessing__share">
<a className="collect-blessing__share-button" data-type="qq"></a>
......
src/components/blessingPreheat/coursePopup/index.js
......@@ -48,7 +48,7 @@ class CoursePopup extends Component {
{
courseList.map(item => (
<Link
to={`/detail?id=${item.course_id}`}
to={`/detail?id=${item.course_id}&ac=11`}
className="course-popup__item"
key={item.course_id}
>
......
src/components/blessingPreheat/index.js
......@@ -3,7 +3,9 @@ import QRCode from 'qrcode';
import { http } from '@/utils';
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index'
import CourseList from './courseList/index';
import SharePopup from './sharePopup/index';
import LuckDraw from './luckDraw/index';
import CollectBlessing from './collectBlessing/index';
import ReserveCourse from './ReserveCourse/index';
......@@ -14,6 +16,8 @@ import './index.scss'
import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile"
import Live from './live'
import Banner from './banner'
class BlessingPreheat extends Component {
......@@ -30,6 +34,7 @@ class BlessingPreheat extends Component {
isFormal: false, // 1正式 0 预热
isServer: false,
serverUrl: '',
shareMark: false,
userInfo: {},
isSign: false,
}
......@@ -141,21 +146,23 @@ class BlessingPreheat extends Component {
}
render() {
const { userInfo, isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, isSign } = this.state
const { userInfo, isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, isSign, showRecordList, shareMark} = this.state
return (
<div id={'blessing-preheat'}>
<Banner/>
{/* 积福气 */}
<ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing
isSign={isSign}
userInfo={userInfo}
handleToShowList={() => this.handleToShow('isCourse')}
handleToShowList={() => this.handleToShow('isCourse')}
handleToShowInvite={this.handleToShowInvite}
handleToShowNotice={this.handleToShowNotice}
handleToShow={this.handleToShow}
/>
{/* 幸运大抽奖--预热 */}
<ListHeader text="幸运大抽奖" styles={{margin: '30px 0 10px'}} />
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}} />
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw />
......@@ -164,13 +171,13 @@ class BlessingPreheat extends Component {
{
isFormal === 0 &&
<>
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}} />
<ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}} />
<ReserveCourse />
</>
}
{/* 精品课程特惠专区 */}
<ListHeader text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} />
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} />
<CourseList isFormal={isFormal} />
{
......@@ -181,7 +188,15 @@ class BlessingPreheat extends Component {
isCourse &&
<CoursePopup handleToHide={() => this.handleToHide('isCourse')}/>
}
<Popup
{
showRecordList &&
<RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
}
{
shareMark &&
<SharePopup handleToHide={() => this.handleToHide('shareMark')}/>
}
<Popup
visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'}
......@@ -191,14 +206,14 @@ class BlessingPreheat extends Component {
<button>一键复制网址</button>
</CopyToClipboard>
</Popup>
<Popup
<Popup
visible={isServer}
title="扫码关注“七月在线”服务号"
className={'invite-popup'}
>
<img src={serverUrl} alt="barcode" className="qr-code"/>
</Popup>
......@@ -223,14 +238,16 @@ class BlessingPreheat extends Component {
</Popup>
<ListHeader text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}} />
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}} />
<div className="test__record" onClick={() => this.handleToShow('showRecordList')}>
测试记录>
</div>
<LevelTest></LevelTest>
<RankList></RankList>
<Live></Live>
</div>
)
}
......
src/components/blessingPreheat/listHeader/index.js
......@@ -4,10 +4,10 @@ import './index.scss';
class ListHeader extends Component {
render() {
const { text, size, styles } = this.props;
const { text, size, styles, id } = this.props;
const cls = size? `list-header--${size}` : '';
return (
<div className={classnames("list-header", cls)} style={styles}>
<div id={id} className={classnames("list-header", cls)} style={styles}>
<i className="list-header__decorate" data-position="left"></i>
{
text
......@@ -20,4 +20,4 @@ class ListHeader extends Component {
}
}
export default ListHeader;
\ No newline at end of file
export default ListHeader;
src/components/blessingPreheat/live/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import { Tabs, Toast } from "antd-mobile"
import { http } from "@/utils"
import { Popup } from "@common/index"
import QRCode from 'qrcode'
import { uniqBy } from 'lodash'
const isFormal = false
class Live extends Component {
state = {
tabs: [],
lives: {},
preheatLives: [],
visible: false,
qrcode: '',
today: ''
}
componentDidMount() {
http.get(`${API.home}/sys/get_live_info`)
.then(res => {
const {data} = res
if (data.code == 200) {
const lives = data.data['data_active'].reduce((accu, current) => {
if (!(current.date in accu)) {
accu[current.date] = [current]
} else {
accu[current.date].push(current)
}
return accu
}, {})
let tabs, today
if (isFormal) {
tabs = Object.keys(lives).map(item => ({title: item}))
today = uniqBy(data.data['data_active'], value => value.date).findIndex(item => item['is_today'])
} else {
tabs = data.data['data_hot'].map(item => ({title: item.date}))
today = data.data['data_hot'].findIndex(item => item['is_today'])
}
this.setState({
tabs,
lives,
today,
preheatLives: data.data['data_hot']
})
} else {
Toast.info(data.msg, 2, null, false)
}
})
}
makeSubscribe = id => {
http.get(`${API.home}/sys/createLiveQrcode/${id}`)
.then(res => {
const {data} = res
if (data.code == 200) {
QRCode.toDataURL(data.data.url, (err, url) => {
this.setState({
qrcode: url,
visible: true
})
})
} else {
Toast.info(data.msg, 2, null, false)
}
})
}
render() {
const {tabs, lives, visible, qrcode, preheatLives, today} = this.state
return (
<div id={'live'}>
<Popup title={'扫码关注“七月在线”服务号即可预约'}
visible={visible}
>
<img id={'live-qr-code'} src={qrcode} alt=""/>
</Popup>
<div className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
<span>大咖直播</span>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-right.png" alt=""/>
</div>
<div className="live-container">
{
today !== '' &&
<Tabs
tabs={tabs}
tabBarBackgroundColor={'transparent'}
tabBarActiveTextColor={'#5600DF'}
tabBarInactiveTextColor={'#FFF604'}
tabBarUnderlineStyle={{display: 'none'}}
initialPage={today}
>
{
isFormal
? tabs.map((item, index) => {
const todayLives = lives[item.title]
return (
<div key={index}>
{
todayLives.map((item, index) => {
return (
<LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe}/>
)
})
}
</div>
)
})
: preheatLives.map((item, index) => {
return (
<div key={index}>
{
preheatLives.map((item, index) => {
return <LiveContent key={index} item={item} makeSubscribe={this.makeSubscribe}/>
})
}
</div>
)
})
}
</Tabs>
}
</div>
</div>
)
}
}
function LiveContent({item, makeSubscribe}) {
return (
<div className="content">
{
item['is_teacher']
? <div className="tag teacher">讲师分享</div>
: <div className="tag student">学员分享</div>
}
<div className="person-info">
<div className="left">
<img
src={item.avatar}
alt="头像"
className="avatar"/>
</div>
<div className="right">
<div className="name">讲师：{item['teacher']}</div>
<div className="profession">{item['teacher_desc']}</div>
</div>
</div>
<div className="title">{item.title}</div>
<div className="time">直播时间：{item.time}</div>
<div className="outline">
<div className="outline-title">内容大纲：</div>
<ul>
{
item['content'].map((content, index) => {
return <li key={index}>{content}</li>
})
}
</ul>
</div>
{
item['on_live']
? <button className={'on-living'}>正在直播</button>
:
item['is_subscribe']
? <button className={'subscribed'}>已预约</button>
: <button className={'subscribe'}
onClick={makeSubscribe.bind(this, item['live_id'])}>立即预约</button>
}
</div>
)
}
export default Live
src/components/blessingPreheat/live/index.scss 0 → 100644
#live {
margin-top: 30px;
.title {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #FFF604;
text-align: center;
margin-bottom: 20px;
span {
margin: 0 15px;
}
img {
width: 37px;
height: 18px;
}
}
.live-container {
width: 355px;
margin: 0 auto;
background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1);
border-radius: 5px;
padding-bottom: 30px;
.content {
position: relative;
width: 325px;
height: 312px;
padding: 26px 30px 0;
margin-top: 50px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/live-bg.png") no-repeat;
background-size: contain;
color: #333;
text-align: center;
overflow: hidden;
}
.tag {
position: absolute;
right: -75px;
top: 10px;
width: 200px;
height: 36px;
font-size: 11px;
color: #fff;
line-height: 36px;
text-align: center;
transform: rotate(45deg);
&.teacher {
background: linear-gradient(rgba(178, 47, 175, 1) 0%, rgba(246, 64, 152, 1) 100%);
}
&.student {
background: linear-gradient(rgba(10, 72, 245, 1) 0%, rgba(0, 153, 255, 1) 100%);
}
}
.person-info {
display: flex;
}
.name {
color: #3900C9;
font-size: 20px;
text-align: left;
}
.avatar {
width: 55px;
height: 55px;
margin-right: 20px;
border-radius: 50%;
border: 1px solid #5970FF;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.profession {
color: #666;
font-size: 12px;
}
.title {
font-size: 15px;
color: #333;
text-align: left;
margin-bottom: 10px;
display: block;
}
.time {
margin-bottom: 10px;
color: #666;
font-size: 12px;
text-align: left;
}
.outline {
text-align: left;
margin-bottom: 10px;
&-title {
font-size: 14px;
margin-bottom: 6px;
}
li {
font-size: 11px;
color: #666;
}
}
button {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -67px;
width: 134px;
height: 33px;
border: none;
border-radius: 17px;
outline: none;
font-size: 15px;
color: #fff;
&.subscribe {
padding-left: 25px;
background: linear-gradient(90deg, rgba(255, 140, 27, 1) 0%, rgba(255, 59, 5, 1) 100%);
&::before {
content: '';
display: block;
position: absolute;
left: 25px;
top: 9px;
width: 15px;
height: 15px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/subscribe-icon.png") no-repeat;
background-size: contain;
}
}
&.subscribed {
background: #CBCED0;
}
&.on-living {
padding-left: 25px;
background: linear-gradient(-90deg, rgba(7, 240, 255, 1) 0%, rgba(0, 153, 255, 1) 100%);
&::before {
content: '';
display: block;
position: absolute;
top: 10px;
left: 25px;
width: 11px;
height: 12px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/live-play-icon.png") no-repeat;
background-size: contain;
}
}
}
}
.popup-container {
.title {
color: #525C65;
}
.content {
display: flex;
justify-content: center;
img {
width: 120px;
height: 120px;
}
}
}
.am-tabs {
width: 330px;
margin: 0 auto;
color: #fff;
& .am-tabs-default-bar-tab:nth-last-of-type(2) {
&::after {
display: none;
}
}
.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-tab {
height: auto;
line-height: 1;
&::after {
content: '';
display: block;
position: absolute;
right: 0;
left: unset;
top: 50%;
margin-top: -7px;
width: 1px;
height: 14px;
background: #FFF604;
transform: none;
}
}
.am-tabs-default-bar-tab-active {
background: #FFF604;
border-radius: 0 0 6px 6px;
}
}
}
src/components/blessingPreheat/recordPopup/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import { http } from '@/utils';
export default class RecordPopup extends Component {
constructor(props) {
super(props);
this.state = {
recordList: [],
}
}
componentDidMount () {
http.get(`${API.home}/sys/ai_test/get_user_testinfo`).then(res => {
let {code, data: {user_test_record}} = res.data;
if(code === 200) {
this.setState({
recordList: user_test_record
})
}
});
}
render() {
let {recordList} = this.state;
const { handleToHide } = this.props;
return (
<div className='record__mark'>
<div className="gift__record">
<div className="close__button" onClick={handleToHide}>
<i className="icon iconfont iconiconfront-77"></i>
</div>
<p className="mark__title">测试记录</p>
<p className="mark__tip">多次测试保留最高分，可查看最近一次答题记录</p>
<div>
<div className="table__head">
<span className="tr">测试时间</span>
<span className="tr">分数</span>
<span className="tr">操作</span>
</div>
<div className="table__body">
{
recordList.map((item, index) => {
return (<div className="tr__container" key={index}>
<span className="tr">{item.submit_time}</span>
<span className="tr">{item.score}</span>
<span className="tr">
{
index === 0 ? (
<a href={`/levelTest/report?id=${item.id}`}>测试记录</a>
) : (null)
}
</span>
</div>
)
})
}
</div>
</div>
</div>
</div>
)
}
}
src/components/blessingPreheat/recordPopup/index.scss 0 → 100644
.record__mark {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
display: flex;
justify-content: center;
align-items: center;
}
.gift__record {
width: 300px;
height: 250px;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
padding: 18px 24px 0 24px;
position: relative;
span.tr {
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
&:first-child {
width: 120px;
padding-left: 12px;
text-align: start;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:nth-child(2n) {
width: 55px;
}
&:last-child {
width: 75px;
padding-right: 12px;
text-align: right;
a {
font-size: 12px;
color: #0099ff;
text-decoration: underline;
}
}
}
.table__head {
width: 250px;
height: 34px;
background: rgba(82, 92, 101, 0.1);
border-radius: 1px 1px 0px 0px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 400;
color: rgba(82, 92, 101, 1);
}
.table__body {
width: 250px;
height: 102px;
border: 1px solid rgba(207, 219, 229, 0.4);
border-radius: 0px 0px 1px 1px;
box-sizing: border-box;
overflow: auto;
.tr__container {
display: flex;
justify-content: center;
align-items: center;
height: 34px;
border-bottom: 1px solid rgba(207, 219, 229, 0.4);
&:last-child {
border-bottom: none;
}
}
}
.close__button {
width: 32px;
height: 32px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -56px;
border: 1px solid #fff;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 32px;
color: #fff;
}
}
.mark__title {
width: 100%;
font-size: 16px;
line-height: 16px;
font-weight: 500;
color: rgba(82, 92, 101, 1);
margin-bottom: 16px;
text-align: center;
text-align-last: center;
}
.mark__tip {
font-size: 12px;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 18px;
text-align: start;
text-align-last: start;
margin-bottom: 16px;
}
}
\ No newline at end of file
src/components/blessingPreheat/sharePopup/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class SharePopup extends Component {
render() {
return (
<div className="share__container" onClick={this.props.handleToHide}>
<div className="share__row">
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/throw_icon.png' />
</div>
<div className="share__content">
<p className="share__text">分享活动页到朋友圈、qq分别</p>
<div className='share__rule'>
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/add2.png' />
<span>（每个平台每天一次）</span>
</div>
</div>
</div>
)
}
}
src/components/blessingPreheat/sharePopup/index.scss 0 → 100644
.share__container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
.share__row {
width: 60px;
height: 44px;
position: absolute;
right: 16px;
top: 10px;
}
.share__content {
width:290px;
height:71px;
background:rgba(255,255,255,1);
border-radius:10px;
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.share__text {
font-size:16px;
font-weight:400;
color:rgba(82,92,101,1);
}
.share__rule {
height: 18px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 12px;
color: #525C65;
}
}
}
\ No newline at end of file
src/components/blessingPreheat/toAppDemo.js 0 → 100644
import React, {Component} from 'react'
import {SendMessageToApp} from '@/utils'
import {Button, Toast, WhiteSpace} from 'antd-mobile'
import cookie from 'js-cookie'
import {addDays} from "date-fns"
class ToAppDemo extends Component {
state = {
userInfoList: [],
}
componentDidMount() {
this.getData()
// 获取App登录信息
window['loginInfo'] = result => {
this.loginInfo(result)
}
}
getData = () => {
Toast.info('获取福气值', 2)
}
// 获取app登录数据
loginInfo = (result) => {
this.setState({
userInfoList: result
})
if (this.state.userInfoList.length !== 0) {
this.appLogin()
}
}
// 保存cookie
appLogin = () => {
let expires = addDays(new Date(), 90)
this.state.userInfoList.map((item, index) => {
Toast.info(item.version, 3)
cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'});
});
}
// 跳转App登录
toLogin = () => {
SendMessageToApp("toLogin");
}
// 立即付定金
earnestMoney = (courseId) => {
SendMessageToApp("earnestMoney", courseId);
}
// 去课程详情页
toCourse = (courseId, type) => {
let data = {
courseId: courseId,
type: type // 正常跳课程详情页type:0,积福气浏览课程详情页-没有浏览过type:1 已浏览过type:2
}
SendMessageToApp("toCourse", data);
}
// 人工咨询
toQQ = () => {
SendMessageToApp("toQQ", 'https://q.url.cn/AB8aue?_type=wpa&qidian=true')
}
// 直播间
toLiveRoom = (toLiveRoom) => {
SendMessageToApp("toLiveRoom", toLiveRoom)
}
// QQ分享
QQshare = () => {
// 内容需要和产品确认
let data = {
title: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 标题
desc: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 描述
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/shareimg.png', // 图片地址
link: 'https://m.julyedu.com/blessingPreheat' // url
}
SendMessageToApp("QQshare", data)
}
// 微信分享
WXshare = () => {
// 内容需要和产品确认
let data = {
title: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 标题
desc: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 描述
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/shareimg.png', // 图片地址
link: 'https://m.julyedu.com/blessingPreheat' // url
}
SendMessageToApp("WXshare", data)
}
// 邀请好友注册
toShare = () => {
let data = {
title: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 标题
desc: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 描述
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/shareimg.png', // 图片地址
link: 'https://m.julyedu.com/blessingPreheat' // url
}
SendMessageToApp("toShare", data)
}
render() {
return (
<div>
<p>登录</p>
<Button type={'primary'} onClick={() => this.toLogin()}>跳App登录</Button><WhiteSpace/>
<p>去课程详情页</p>
<Button type={'primary'} onClick={() => this.toCourse(165, 0)}>课程详情页</Button><WhiteSpace/>
<p>积福气</p>
<Button type={'primary'} onClick={() => this.toCourse(165, 1)}>浏览课程详情页</Button><WhiteSpace/>
<Button type={'primary'} onClick={() => this.QQshare()}>分享（QQ）</Button><WhiteSpace/>
<Button type={'primary'} onClick={() => this.WXshare()}>分享（微信）</Button><WhiteSpace/>
<Button type={'primary'} onClick={() => this.toShare()}>邀请好友注册</Button><WhiteSpace/>
<p>定金相关</p>
<Button type={'primary'} onClick={() => this.earnestMoney(165)}>立即付定金</Button><WhiteSpace/>
<Button type={'primary'} onClick={() => this.toCourse(165, 0)}>去学习（跳课程详情页）</Button><WhiteSpace/>
<p>精品特惠</p>
<Button type={'primary'} onClick={() => this.toQQ()}>立抢超低团购价(跳人工咨询)</Button><WhiteSpace/>
<Button type={'primary'} onClick={() => this.toCourse(165, 0)}>开始使用（跳课程详情页）</Button><WhiteSpace/>
<Button type={'primary'} onClick={() => this.toCourse(165, 0)}>一分钱开团（跳课程详情页）</Button><WhiteSpace/>
<p>大咖直播</p>
<Button type={'primary'} onClick={() => this.toLiveRoom(100)}>正在直播</Button><WhiteSpace/>
</div>
)
}
}
export default ToAppDemo
src/components/detail/index.js
......@@ -48,7 +48,9 @@ class Detail extends Component {
nowPrice: 0,
laterPrice: 0,
isPdd: 0, // 是否是拼团课程 控制首次单集购买后的 全集购买 接口： 拼团课程走拼团接口，否则直接走购买接口
isRedPacket: true
isRedPacket: true,
countDownTime: '20s',
}
}
......@@ -73,6 +75,51 @@ class Detail extends Component {
isRedPacket: true
});
}
if(getParam('ac') && Number(getParam('ac')) === 11) {
this.getBorwerCourse();
}
}
getBorwerCourse = () => {
http.get(`${API.home}/sys/user/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
let {code, data: {today_browsed_courses}} = res.data;
if(code === 200) {
let currentCourseId = getParam('id');
if(today_browsed_courses.includes(Number(currentCourseId))) {
this.setState({
countDownTime: '任务完成'
});
}else{
this.startActivity();
}
}
})
}
startActivity = () => {
let _this = this;
let countDownInterval = setInterval(function() {
let countDown = parseInt(_this.state.countDownTime);
countDown--;
if(countDown > 0) {
_this.setState({
countDownTime: countDown + 's'
});
} else if(countDown === 0) {
clearInterval(countDownInterval);
countDownInterval = null;
http.post(`${API.home}/sys/add/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
let {code} = res.data;
if(code === 200) {
_this.setState({
countDownTime: '任务完成'
});
}
})
}
}, 1000)
}
// 判断时候未红包课程
......@@ -443,7 +490,7 @@ class Detail extends Component {
}
render() {
const {course: {course_info = {}}, barInfo, singleBox, singleType, isRedPacket} = this.state;
const {course: {course_info = {}}, barInfo, singleBox, singleType, isRedPacket, countDownTime} = this.state;
let courseInfo = '',
service = '',
......@@ -471,6 +518,14 @@ class Detail extends Component {
let isCent = course_info.pdd_group_info && course_info.pdd_group_info.price != '0.01';
return (
<div>
{
Number(getParam('ac')) === 11 ? (
<div className='activity__blessing'>
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/count_donw.png' />
<span className='count__down__time'>{`${countDownTime}`}</span>
</div>
) : (null)
}
<div className='detail-box'>
<HeaderBar
title='课程详情'
......
src/components/detail/index.scss
......@@ -229,4 +229,27 @@
font-weight: 500;
width: 215px;
}
}
.activity__blessing {
position: fixed;
bottom: 170px;
right: 4px;
width: 76px;
height: 64px;
z-index: 999;
.count__down__time {
width: 62px;
height: 20px;
font-size: 12px;
font-weight: 600;
color:rgba(36,0,119,1);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 4px;
left: 8px;
}
}
\ No newline at end of file
src/router/router-config.js
......@@ -208,4 +208,8 @@ export default [
path: '/expand/index',
component: ExpandShare
},
{
path: '/toAppDemo',
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/blessingPreheat/toAppDemo'))
}
]
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