Skip to content

M
mr-julyedu
Commit ee8b13fb by wangshuo
Options

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

parents b35786a0 c7e2d2be
Showing with 441 additions and 16 deletions
src/common/closable-popup/index.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 999;
.popup-container { .popup-container {
position: absolute; position: absolute;
......
src/components/blessingPreheat/index.js
...@@ -16,6 +16,7 @@ import './index.scss' ...@@ -16,6 +16,7 @@ import './index.scss'
import { Popup } from '@/common' import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard' import {CopyToClipboard} from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile" import { Toast } from "antd-mobile"
import Live from './live'
class BlessingPreheat extends Component { class BlessingPreheat extends Component {
...@@ -147,18 +148,18 @@ class BlessingPreheat extends Component { ...@@ -147,18 +148,18 @@ class BlessingPreheat extends Component {
return ( return (
<div id={'blessing-preheat'}> <div id={'blessing-preheat'}>
{/* 积福气 */} {/* 积福气 */}
<ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} /> <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing <CollectBlessing
isSign={isSign} isSign={isSign}
userInfo={userInfo} userInfo={userInfo}
handleToShowList={() => this.handleToShow('isCourse')} handleToShowList={() => this.handleToShow('isCourse')}
handleToShowInvite={this.handleToShowInvite} handleToShowInvite={this.handleToShowInvite}
handleToShowNotice={this.handleToShowNotice} handleToShowNotice={this.handleToShowNotice}
handleToShow={this.handleToShow} 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> <p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button> <button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw /> <LuckDraw />
...@@ -167,13 +168,13 @@ class BlessingPreheat extends Component { ...@@ -167,13 +168,13 @@ class BlessingPreheat extends Component {
{ {
isFormal === 0 && isFormal === 0 &&
<> <>
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}} /> <ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}} />
<ReserveCourse /> <ReserveCourse />
</> </>
} }
{/* 精品课程特惠专区 */} {/* 精品课程特惠专区 */}
<ListHeader text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} /> <ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} />
<CourseList isFormal={isFormal} /> <CourseList isFormal={isFormal} />
{ {
...@@ -189,10 +190,10 @@ class BlessingPreheat extends Component { ...@@ -189,10 +190,10 @@ class BlessingPreheat extends Component {
<RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/> <RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
} }
{ {
shareMark && shareMark &&
<SharePopup handleToHide={() => this.handleToHide('shareMark')}/> <SharePopup handleToHide={() => this.handleToHide('shareMark')}/>
} }
<Popup <Popup
visible={inviteVisible} visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'} title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'} className={'invite-popup'}
...@@ -202,14 +203,14 @@ class BlessingPreheat extends Component { ...@@ -202,14 +203,14 @@ class BlessingPreheat extends Component {
<button>一键复制网址</button> <button>一键复制网址</button>
</CopyToClipboard> </CopyToClipboard>
</Popup> </Popup>
<Popup <Popup
visible={isServer} visible={isServer}
title="扫码关注“七月在线”服务号" title="扫码关注“七月在线”服务号"
className={'invite-popup'} className={'invite-popup'}
> >
<img src={serverUrl} alt="barcode" className="qr-code"/> <img src={serverUrl} alt="barcode" className="qr-code"/>
</Popup> </Popup>
<Popup visible={this.state.joinLotteryVisible} <Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'} title={'你已成功参与本时段抽奖'}
...@@ -232,14 +233,16 @@ class BlessingPreheat extends Component { ...@@ -232,14 +233,16 @@ class BlessingPreheat extends Component {
</Popup> </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 className="test__record" onClick={() => this.handleToShow('showRecordList')}>
测试记录> 测试记录>
</div> </div>
<LevelTest></LevelTest> <LevelTest></LevelTest>
<RankList></RankList> <RankList></RankList>
<Live></Live>
</div> </div>
) )
} }
......
src/components/blessingPreheat/listHeader/index.js
...@@ -4,10 +4,10 @@ import './index.scss'; ...@@ -4,10 +4,10 @@ import './index.scss';
class ListHeader extends Component { class ListHeader extends Component {
render() { render() {
const { text, size, styles } = this.props; const { text, size, styles, id } = this.props;
const cls = size? `list-header--${size}` : ''; const cls = size? `list-header--${size}` : '';
return ( 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> <i className="list-header__decorate" data-position="left"></i>
{ {
text text
...@@ -20,4 +20,4 @@ class ListHeader extends Component { ...@@ -20,4 +20,4 @@ class ListHeader extends Component {
} }
} }
export default ListHeader; export default ListHeader;
\ No newline at end of file
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;
}
}
}
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