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 433 additions and 7 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/index.js
......@@ -16,6 +16,7 @@ import './index.scss'
import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile"
import Live from './live'
class BlessingPreheat extends Component {
......@@ -147,7 +148,7 @@ class BlessingPreheat extends Component {
return (
<div id={'blessing-preheat'}>
{/* 积福气 */}
<ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing
isSign={isSign}
userInfo={userInfo}
......@@ -158,7 +159,7 @@ class BlessingPreheat extends Component {
/>
{/* 幸运大抽奖--预热 */}
<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 />
......@@ -167,13 +168,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} />
{
......@@ -232,7 +233,7 @@ 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>
......@@ -240,6 +241,8 @@ class BlessingPreheat extends Component {
<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
......
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