Skip to content

M
mr-julyedu
Commit 517626f0 by FE
Options

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

parents 86605974 5fe4b21d
Showing with 180 additions and 34 deletions
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 {Link, withRouter} from "react-router-dom"
import { getParam, http, SendMessageToApp, browser } from "@/utils"
import CommonContainer from './../../common/commonContainer/index'
import CommonPopup from './../../common/commonPopup/index';
export default class index extends Component {
import { connect } from 'react-redux';
import { Popup } from "@common/index"
import QRCode from 'qrcode'
@connect(state => ({
user: state.user
}))
class LiveRoom extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
showMark: true,
showMark: false,
subUrl: '',
}
}
componentDidMount() {
this.getLiveInfo();
}
getLiveInfo = () => {
http.get(`${API.home}/activity/get_live_info`).then(res => {
const { code, data, msg } = res.data;
if (code === 200) {
......@@ -28,14 +38,19 @@ export default class index extends Component {
}
// 预约直播
subscribe = (id) => {
// TODO 检查是否已登录
// this.checkLogin();
// 检查是否已登录
this.checkLogin();
http.get(`${API['base-api']}/sys/createLiveQrcode/${id}`).then(res => {
let { errno, data, msg } = res.data;
console.log(res);
if (errno === 200) {
// this.livingUrl = data.url;
// this.isSubscribe = true;
// TODO 显示二维码地址 并且传递给二维码的图片/地址
QRCode.toDataURL(data.url, (err, url) => {
this.setState({
showMark: true,
subUrl: url,
})
})
} else {
Toast.info(msg);
}
......@@ -47,15 +62,13 @@ export default class index extends Component {
}
// 去直播间
toLivingRoom = (id) => {
// TODO 检查是否已登录
// this.checkLogin();
this.checkLogin();
window.location.href = `${window.location.protocol}//www.julyedu.com/live/m_room/${id}`
}
// 查看回放
checkVideo = (url) => {
// TODO 检查是否已登录
// this.checkLogin();
// TODO 这里需要课程ID
this.checkLogin();
// TODO 这里需要课程ID 如何获取？
const vCourseId = url.split('/')[0];
history.push(`/play/video?id=${vCourseId}`)
}
......@@ -64,17 +77,45 @@ export default class index extends Component {
this.setState({
showMark: false,
})
// 关闭弹框的时候再次查询接口 查询预约状态
this.getLiveInfo();
}
// 检查是否登录
checkLogin = () => {
const {hasError, data = {}} = this.props.user;
if(hasError) { // 未登录
return;
}
}
// TODO APP内需要保存图片 是否还是这样做 需要确认
saveImage = () => {
let version = getParam('version')
version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
const {QRCodeUrl} = this.state
if (version && parseInt(version) < 451) {
Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 2, null, false)
} else {
SendMessageToApp('generateQRCode', QRCodeUrl)
}
}
render() {
const { list,showMark } = this.state;
const { list,showMark,subUrl } = this.state;
return (
<div className='live__container'>
{
showMark && (
<CommonPopup top={50} closePopup={this.closePopup} mark={true}>
<div>1</div>
<div>2</div>
<div className='sub__code_container'>
<p className='sub__title'>扫码关注“七月在线”服务号即可预约</p>
<img className='sub__qr_code' id={'live-qr-code'} src={subUrl} alt=""/>
{
browser.isAndroidApp ? (
<button className={'save-image'} onClick={this.saveImage}>保存二维码</button>
) : null
}
</div>
</CommonPopup>
)
}
......@@ -101,7 +142,7 @@ export default class index extends Component {
</div>
{
item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 0 && (
<span onClick={this.subscribe(item.live_id)} className="order__btn">立即预约</span>
<span onClick={ ()=>this.subscribe(item.live_id)} className="order__btn">立即预约</span>
)
}
{
......@@ -111,12 +152,12 @@ export default class index extends Component {
}
{
item.on_live == 1 && item.is_end == 0 && (
<span onClick={this.toLivingRoom(item.room_url)} className="order__btn living">正在直播</span>
<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>
<span onClick={() => this.checkVideo(item.transcribe_url)} className="order__btn check__video">查看回放</span>
)
}
......@@ -131,3 +172,4 @@ export default class index extends Component {
)
}
}
export default withRouter(LiveRoom)
src/components/activity/newyear-2019/preheat/LiveRoom/index.scss
......@@ -97,4 +97,33 @@
}
}
}
.sub__code_container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.sub__title {
color: #525C65;
font-size: 16px;
line-height: 16px;
font-weight: 500;
text-align: center;
margin: 20px 0;
}
}
.save-image {
width: 133px;
height: 30px;
margin-top: 16px;
background: rgba(83, 39, 250, 1);
border-radius: 15px;
font-size: 14px;
color: #fff;
-webkit-appearance: none;
outline: 0;
border: none;
}
}
src/components/activity/newyear-2019/preheat/index.js
import React, { Component } from 'react'
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';
import LiveRoom from './LiveRoom/index'
import YearCourse from './YearCourse/index'
import TreasureBox from './../treasure-box/index'
import TreasureNav from './nav'
import CommonPopup from './../common/commonPopup/index'
export default class index extends Component {
render() {
return (
<div className={'year-index'}>
<TreasureNav></TreasureNav>
<LiveRoom />
<YearCourse />
<TreasureBox></TreasureBox>
</div>
)
}
state = {
showMark: false
}
// 关闭弹框
closePopup = () => {
this.setState({
showMark: false,
})
}
render() {
return (
<div className={'year-index'}>
<TreasureNav></TreasureNav>
<LiveRoom/>
<YearCourse/>
<TreasureBox></TreasureBox>
{/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
{
this.state.showMark &&
<CommonPopup top={50} closePopup={this.closePopup} mark={true}>
<div className='sub__code_container'>
<p className='sub__title'>提醒服务</p>
<p className='sub__tip'>有好友加入队伍后第一时间通知我~</p>
<img className='sub__qr_code' id={'live-qr-code'} src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
<p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号即可预约</p>
</div>
</CommonPopup>
}
{/*规则弹窗*/}
{
this.state.showMark &&
<CommonPopup top={50} closePopup={this.closePopup} mark={true}>
<div className='sub__code_container'>
<p className='sub__title'>组队开宝箱活动规则</p>
<p className='sub__rule'>
1. 活动期间（12月18日-12月31日）可随时参与开宝箱；<br/>
2. 当前队伍满员后可继续创建新队伍；<br/>
3. 每人有一次机会加入好友的队伍；<br/>
4. 队伍满员后所有成员均可随机获得宝箱内奖品，队长奖励更丰厚哦~<br/>
5. 代金券、课程等虚拟奖品将直接发放至账户，实物奖品活动结束后统一邮寄；<br/>
6. 现金可提现：我的 → 赚奖学金 → 提现。
</p>
</div>
</CommonPopup>
}
</div>
)
}
}
src/components/activity/newyear-2019/preheat/index.scss
.year-index {
padding-bottom: 30px;
background-color: #BC2A18;
.sub__code_container {
padding: 20px 30px;
text-align: center;
.sub__title {
font-size: 18px;
color: #111;
font-weight: normal;
}
.sub__qr_code {
width: 137px;
height: 137px;
}
.sub__tip {
font-size: 14px;
color: #666;
margin: 13px 0;
}
.sub__rule {
font-size: 14px;
color: #666;
text-align: left;
margin-top: 20px;
margin-bottom: 5px;
}
}
}
\ No newline at end of file
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