Skip to content

M
mr-julyedu
Commit 217f0976 by xuzhenghua
Options

pull

parent 043f3d73
Showing with 286 additions and 97 deletions
src/components/blessingGetPrize/index.js
......@@ -135,8 +135,9 @@ class BlessingGetPrize extends Component {
{
(!prize_data || prize_data.length === 0) && (
<div className="active_over_container">
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/acitve__over.png' alt=''/>
<p>七月在线双十一抽奖活动已结束， 感谢你的参与！</p>
<p>AI充电节返场已开启</p>
<p>狂欢不能停~</p>
<a href='/blessingPreheat' className='to_active'>立即查看</a>
</div>
)
}
......
src/components/blessingGetPrize/index.scss
......@@ -199,22 +199,30 @@
.active_over_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: center;
align-items: center;
margin-top: 70px;
img {
width: 170px;
height: 134px;
}
width: 340px;
height: 156px;
margin: 4px auto;
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/active_over.png') center center no-repeat;
background-size: 100% 100%;
p {
width:238px;
height:39px;
font-size:16px;
font-weight:400;
font-size:18px;
font-weight:500;
color:rgba(76,33,239,1);
line-height:27px;
}
.to_active {
width:298px;
height:44px;
background:linear-gradient(90deg,rgba(255,105,5,1) 0%,rgba(255,180,5,1) 100%);
border-radius:5px;
font-size:18px;
font-weight:500;
color:rgba(255,255,255,1);
line-height:24px;
text-align: center;
text-align-last: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
}
......
src/components/blessingPreheat/banner/index.js
......@@ -64,7 +64,7 @@ class Banner extends Component {
// } else {
// !nav.classList.contains('fixed') && nav.classList.add('fixed')
// }
// if (swipeDirection === 'up') {
// if (y + 30 + 30 >= top) {
// this.setState({
......@@ -80,7 +80,7 @@ class Banner extends Component {
// }
// this.prevY = y
// }
// }
// toSection = (i, e) => {
......@@ -97,10 +97,10 @@ class Banner extends Component {
render() {
const { toSection, navs, index, isFormal } = this.props;
const { toSection, navs, index, isFormal, onlyShow } = this.props;
return (
<div id={'main-banner'}>
<div className={`banner ${isFormal ? 'formal_banner' : ''}`}></div>
<div className={`banner ${isFormal ? 'formal_banner' : ''} ${onlyShow ? 'fc_banner' : ''}`}></div>
<nav id={'main-nav'}>
<ul>
{
......
src/components/blessingPreheat/banner/index.scss
#main-banner{
overflow: auto;
margin-bottom: 70px;
.banner{
width: 375px;
height: 183px;
......@@ -11,6 +10,10 @@
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/formal_banner.png") no-repeat;
background-size: contain;
}
.fc_banner {
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/fc_banner.png') center center no-repeat;
background-size: 100% 100%;
}
#main-nav{
position: absolute;
top: 183px;
......
src/components/blessingPreheat/collectBlessing/index.js
......@@ -28,7 +28,7 @@ class CollectBlessing extends Component {
range: '50~100',
rules: [
{id: 1, text: '1.每天一次抽奖机会；'},
{id: 2, text: '2.中奖概率翻2倍', des: '（热力值越高，中奖概率越大）；'},
{id: 2, text: '2.中奖概率翻2倍', des: '（福气值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减11、满1111减111。'},
]
},
......@@ -36,7 +36,7 @@ class CollectBlessing extends Component {
range: '101~190',
rules: [
{id: 1, text: '1.每天两次抽奖机会；'},
{id: 2, text: '2.中奖概率翻3倍', des: '（热力值越高，中奖概率越大）；'},
{id: 2, text: '2.中奖概率翻3倍', des: '（福气值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减31、满1111减211；'},
{id: 4, text: '4.AI水平测试增加1次。'},
]
......@@ -45,7 +45,7 @@ class CollectBlessing extends Component {
range: '>190',
rules: [
{id: 1, text: '1.每天三次抽奖机会；'},
{id: 2, text: '2.中奖概率翻4倍', des: '（热力值越高，中奖概率越大）；'},
{id: 2, text: '2.中奖概率翻4倍', des: '（福气值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减51、满1111减411；'},
{id: 4, text: '4.AI水平测试增加2次。'},
]
......@@ -138,7 +138,7 @@ class CollectBlessing extends Component {
if(code === 200) {
if(data.today_shared_platforms.some(item => item === key)) {
handleToShowShare();
Toast.info('今日已分享，记得明天来~', 2, null, false);
Toast.info('今日已+2点福气值”~', 2, null, false);
}else {
handleToShowShare();
this.shareTimer && clearInterval(this.shareTimer);
......
src/components/blessingPreheat/formal-draw/index.js
......@@ -34,35 +34,35 @@ class FormalDraw extends Component {
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
if(this.props.isApp !== nextProps.isApp) {
if (this.props.isApp !== nextProps.isApp) {
this.getPrizeData()
return false;
return false
}
return true;
return true
}
getPrizeData = () => {
http.get(`${API.home}/sys/activity/prize_data`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
const {today} = data.value
const oneDay = data.list.filter(item => item.date === data.value.today)
const activeIndex = oneDay[0]['son'].findIndex(item => item.status == 3)
this.setState({
tabs: data.list.map(item => ({title: item.date})),
today,
initialPageIndex: data.list.findIndex(item => item.date == today) || 0,
list: data.list,
userValue: data.value,
activeTimeRangeIndex: activeIndex < 0 ? 0 : activeIndex
}, () => {
this.initializeSwiper()
})
} else {
Toast.info(msg, 2, null, false)
}
})
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
let oneDay = data.list.find(item => item.date === data.value.today) || data.list[0]
const today = oneDay.date
const activeIndex = oneDay['son'].findIndex(item => item.status == 3)
this.setState({
tabs: data.list.map(item => ({title: item.date})),
today,
initialPageIndex: data.list.findIndex(item => item.date == today) || 0,
list: data.list,
userValue: data.value,
activeTimeRangeIndex: activeIndex < 0 ? 0 : activeIndex
}, () => {
this.initializeSwiper()
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
initializeSwiper = () => {
......@@ -161,25 +161,40 @@ class FormalDraw extends Component {
if (this.subscribePopupInstance) {
return
}
http.get(`${API["base-api"]}/sys/activity/create_pre_qrcode`,{params:{id}})
.then(res => {
const {code, data, msg} = res.data
if (code == 200) {
this.subscribePopupInstance = QRCode.toDataURL(data.url, (err, url) => {
Popup({
title: '微信扫码“七月在线”服务号即可预约',
className: 'subscribe',
content: <img src={url} alt="" className="qr-code"/>,
close: () => new Promise(resolve => {
this.subscribePopupInstance = null
resolve()
if (!this.state.userValue['is_pre']) {
http.get(`${API["base-api"]}/sys/activity/create_pre_qrcode`, {params: {id}})
.then(res => {
const {code, data, msg} = res.data
if (code == 200) {
this.subscribePopupInstance = QRCode.toDataURL(data.url, (err, url) => {
Popup({
title: '微信扫码“七月在线”服务号即可预约',
className: 'subscribe',
content: <img src={url} alt="" className="qr-code"/>,
close: () => new Promise(resolve => {
this.subscribePopupInstance = null
resolve()
})
})
})
})
} else {
Toast.info(msg, 2, null, false)
}
})
} else {
Toast.info(msg, 2, null, false)
}
})
} else {
http.get(`${API["base-api"]}/activity_pre/${id}`)
.then(res => {
const {code} = res.data
if (code == 200) {
Toast.info('预约成功', 2, null, false)
}
})
.catch(err => {
console.log(err)
})
}
}
render() {
......
src/components/blessingPreheat/formal-draw/index.scss
#formal-draw {
position: relative;
width: 355px;
min-height: 147px;
background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1);
border-radius: 5px;
margin: 0 auto;
.am-tabs-content-wrap {
min-height: 423px;
}
&::before {
content: '';
display: block;
......
src/components/blessingPreheat/index.js
......@@ -51,6 +51,7 @@ class BlessingPreheat extends Component {
timelineShareVisible: false,
showRecordList: false,
isFormal: false, // 1正式 0 预热
onlyShow: false, // 14号返场
isServer: false,
serverUrl: '',
shareMark: false,
......@@ -104,6 +105,28 @@ class BlessingPreheat extends Component {
id: 'live'
},
],
encoreNavs: [
{
text: '精品特惠',
id: 'best-courses'
},
{
text: '大咖直播',
id: 'live'
},
{
text: '幸运大抽奖',
id: 'lucky-draw'
},
{
text: '积福气',
id: 'lucky-value'
},
{
text: 'AI测试',
id: 'ai-test'
},
],
index: 0,
userHasError: props.user.hasError,
isApp: false,
......@@ -119,9 +142,13 @@ class BlessingPreheat extends Component {
}
componentDidMount() {
const _this = this;
this.fetchUserBlessing()
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
// setTimeout(function(){
// // 这里有获取ID的步骤，由于运营过多的调整，导致顺序不定，所以包含ID的title必须要放到判断中（防止出现多个title），设置定时器是因为如果返回较慢 获取不到ID导致报错
// _this.setInitialNavActiveStatus()
// }, 50);
// window.addEventListener('scroll', throttle(this.calcNavActive, 100))
if (is_weixin()) {
wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
......@@ -155,9 +182,12 @@ class BlessingPreheat extends Component {
}
componentWillUpdate() {
const {isFormal} = this.state;
const {isFormal,onlyShow} = this.state;
if(isFormal === 1) {
document.title = `11.11-11.13 AI充电节，为AI出击！重磅好课1折秒，海量奖品来就送-七月在线`
if(onlyShow) {
document.title = `11.14 AI充电节 返场钜惠！200本纸质书送完即止！`
}
}else{
document.title = `11.11-11.13 AI充电节，预热来袭！积福气享1折秒课，海量奖品来就送-七月在线`
}
......@@ -237,6 +267,9 @@ class BlessingPreheat extends Component {
return findIndex(navs, item => item.id === str)
}
componentWillUnmount () {
window.removeEventListener('scroll', this.calcNavActive);
}
setInitialNavActiveStatus = () => {
const observer = new MutationObserver(debounce((list, observer) => {
......@@ -254,11 +287,26 @@ class BlessingPreheat extends Component {
}
initNav = (isFormal) => {
const {formalNavs} = this.state
const {formalNavs, onlyShow, encoreNavs} = this.state
if (isFormal) {
this.setState({
navs: formalNavs
})
if(onlyShow) {
this.setState({
navs: encoreNavs
}, () => {
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
})
} else {
this.setState({
navs: formalNavs
}, () => {
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
})
}
}
}
......@@ -269,12 +317,21 @@ class BlessingPreheat extends Component {
fetchUserBlessing = () => {
const {userInfo} = this.state
const {history} = this.props;
http.get(`${API.home}/sys/user/blessing`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.setState({
if(data.is_over) {
if(!getParam('version')) {
history.push('/');
} else {
SendMessageToApp("toQualityCourse");
}
}
this.setState(()=>({
isSign: !!data.today_signed,
isFormal: data.is_activity,
onlyShow: data.onlyShow,
testSum: parseInt(data.user_test_total, 10) || 0,
userInfo: Object.assign({}, userInfo, {
isFollow: data.subscribed,
......@@ -282,7 +339,7 @@ class BlessingPreheat extends Component {
buyBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.buy_course) ? data.types_total_blessing_value.buy_course : 0,
inviteBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.invite) ? data.types_total_blessing_value.invite : 0,
})
})
}));
if (data.is_login === 1) {
this.handleToSign()
}
......@@ -411,14 +468,23 @@ class BlessingPreheat extends Component {
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
if(Number.isInteger(index)){
_index = (index + 1) >= navs.length ? index : index + 1
}else {
_index = 0
}
} else {
_index = (index - 1) <= 0 ? 0 : index - 1
if(Number.isInteger(index)){
_index = (index - 1) <= 0 ? 0 : index - 1
}else {
_index = 0
}
}
let el = document.querySelector(`#${navs[_index].id}`)
let nav = document.querySelector('#main-nav')
......@@ -565,6 +631,7 @@ class BlessingPreheat extends Component {
testSum,
address,
addressPopupVisible,
onlyShow,
} = this.state
const {history} = this.props
const isLogin = !this.props.user.hasError
......@@ -575,13 +642,40 @@ class BlessingPreheat extends Component {
navs={navs}
toSection={this.toSection}
index={index}
onlyShow={onlyShow}
/>
{/* 精品课程特惠专区--返场 */}
{
onlyShow && (
<>
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '60px 0 15px'}}/>
<CourseList
isApp={isApp}
isFormal={isFormal}
isLogin={isLogin}
history={this.props.history}
toLogin={this.toLogin}
/>
</>
)
}
{/* 大咖直播--返场 */}
{
onlyShow && <Live isFormal={isFormal} isLogin={isLogin}/>
}
{/* 抽奖--正式 */}
{
isFormal === 1 &&
<>
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: onlyShow ? '30px 0 10px' : '60px 0 10px'}}/>
{
onlyShow ? (
<p className='active_over'>活动已结束</p>
) : null
}
<div className="formal-draw-btns">
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<button className='prize-record' onClick={this.getMyPrizeRecord}>中奖记录></button>
......@@ -593,7 +687,12 @@ class BlessingPreheat extends Component {
{/* 积福气 */}
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '30px 0 15px'}}/>
<Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
{
onlyShow ? (
<p className='active_over'>活动已结束</p>
) : null
}
<Link className="blessing__sort" to="/blessingRank"></Link>
<CollectBlessing
......@@ -630,14 +729,20 @@ class BlessingPreheat extends Component {
}
{/* 精品课程特惠专区 */}
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
<CourseList
isApp={isApp}
isFormal={isFormal}
isLogin={isLogin}
history={this.props.history}
toLogin={this.toLogin}
/>
{
!onlyShow && (
<>
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
<CourseList
isApp={isApp}
isFormal={isFormal}
isLogin={isLogin}
history={this.props.history}
toLogin={this.toLogin}
/>
</>
)
}
{
isRule &&
......@@ -660,7 +765,11 @@ class BlessingPreheat extends Component {
<SharePopup isClose={isClose} toClose={() => this.handleToHide('shareMark')}/>
}
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
{
onlyShow ? (
<p className='active_over'>活动已结束</p>
) : null
}
<div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
测试记录>
</div>
......@@ -674,7 +783,11 @@ class BlessingPreheat extends Component {
<RankList></RankList>
<Live isFormal={isFormal} isLogin={isLogin}/>
{/* 大咖直播 -- 正式活动 */}
{
!onlyShow && <Live isFormal={isFormal} isLogin={isLogin}/>
}
{
addressPopupVisible &&
<div className="address-mask">
......@@ -692,7 +805,7 @@ class BlessingPreheat extends Component {
/>
<input type="tel"
placeholder={'联系方式'}
name={'tel'}
name={'phone'}
onChange={e => {
this.setAddressState(e)
}}
......
src/components/blessingPreheat/index.scss
#blessing-preheat {
background: #5327FA;
padding-bottom: 30px;
.active_over {
font-size: 20px;
color: #fff604;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
}
.test__record {
......@@ -76,6 +87,14 @@
cursor: pointer;
outline: none;
}
.blessing__sort {
display: block;
margin: 0 auto 15px;
width: 120px;
height: 28px;
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/m11_enter_icon.png') center center no-repeat;
background-size: 100% 100%;
}
.formal-draw-btns {
display: flex;
......
src/components/blessingPreheat/levelTest/index.js
......@@ -29,6 +29,10 @@ class LevelTest extends Component {
{
url:
"https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top8-10.png"
},
{
url:
"https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top11-20.png"
}
],
}
......
src/components/blessingPreheat/listFrame/index.scss
.list-frame {
margin: 0 10px;
min-height: 147px;
border: 1px solid #5970FF;
border-radius: 5px;
background-color: #3900C9;
......
src/components/blessingPreheat/live/index.js
......@@ -30,8 +30,8 @@ class Live extends Component {
const {data, code, msg} = res.data
if (code == 200) {
let tabs = uniqBy(data, item => item.date)
let todayIndex = tabs.findIndex(item => item['is_today'])
tabs = tabs.map(item => ({title: item.date}))
let todayIndex = data.findIndex(item => item['is_today'])
this.setState({
tabs,
......@@ -87,6 +87,21 @@ class Live extends Component {
}
}
checkVideo = (url) => {
let version = getParam('version');
const {history, user} = this.props;
if(!version) {
if (user.hasError) {
this.toLogin()
}else{
const vCourseId = url.split('/')[0];
history.push(`/play/video?id=${vCourseId}`)
}
}else{
Toast.info('当前版本不支持此功能，请前往h5/pc查看回放该直播', 2, null, false);
}
}
makeSubscribe = id => {
const {user} = this.props
if (user.hasError) {
......@@ -161,7 +176,7 @@ class Live extends Component {
todayLives && todayLives.map((item, index) => {
return (
<LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe}
toLiveRoom={this.toLiveRoom}/>
toLiveRoom={this.toLiveRoom} checkVideo={this.checkVideo}/>
)
})
}
......@@ -178,7 +193,7 @@ class Live extends Component {
}
}
function LiveContent({item, makeSubscribe, toLiveRoom}) {
function LiveContent({item, makeSubscribe, toLiveRoom, checkVideo}) {
return (
<div className="content">
{
......@@ -217,7 +232,7 @@ function LiveContent({item, makeSubscribe, toLiveRoom}) {
}}>正在直播</button>
:
item['is_end']
? <button className={'subscribed'}>已结束</button>
? item.transcribe_url === '' ? <button className={'subscribed'}>已结束</button> : <button className={'on-living'} onClick={() => checkVideo(item.transcribe_url)}>查看回放</button>
: item['is_subscribe']
? <button className={'subscribed'}>已预约</button>
: <button className={'subscribe'}
......
src/components/blessingPreheat/live/index.scss
......@@ -176,6 +176,10 @@
}
.am-tabs-content-wrap {
min-height: 423px;
}
.am-tabs {
width: 330px;
margin: 0 auto;
......
src/components/blessingPreheat/rankList/index.js
......@@ -12,7 +12,7 @@ export default class RankList extends Component {
}
componentDidMount() {
http.get(`${API.home}/sys/ai_test/ranking/10`).then(res => {
http.get(`${API.home}/sys/ai_test/ranking/50`).then(res => {
let data = res.data.data;
let code = res.data.code;
if(code === 200) {
......@@ -42,7 +42,7 @@ export default class RankList extends Component {
<>
<ListHeader text="测试排行榜" styles={{margin: '20px 0 10px'}} size='middle' />
<div className="sort__rules">
仅显示前10名
仅显示前50名
</div>
<div className="rank__list_module">
<div className="rank__table_head">
......
src/components/blessingPreheat/rankList/index.scss
......@@ -23,7 +23,8 @@
}
.rank__table_body {
height: 504px;
overflow: auto;
.table__tr {
height: 48px;
display: flex;
......
src/components/blessingPreheat/recordPopup/index.js
......@@ -24,8 +24,8 @@ export default class RecordPopup extends Component {
handleToTestRecord = (e, id) => {
e.preventDefault();
const { history } = this.props;
if(getParam('version')) {
location.href = `${API.m}/levelTest/report?id=${id}&version=${getParam('version')}`;
if(!getParam('version')) {
location.href = `${API.m}/levelTest/report?id=${id}`;
} else {
location.href = `${API.m}/levelTest/report?id=${id}&version=${getParam('version')}`;
}
......
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