Skip to content

M
mr-julyedu
Commit 0e442681 by FE
Options

build

parents b5d55928 fe650fa4
Showing with 986 additions and 134 deletions
build/mrstatic/js/BargainMiddlePage.55155992.chunk.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
build/mrstatic/js/newyear-yearIndex.76419495.chunk.js.map deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
build/mrstatic/js/newyear-yearIndex.9716de94.chunk.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
build/service-worker.js
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js"); importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
importScripts( importScripts(
"/precache-manifest.d1dffbc6a29e70f0c5c70b0c9ba205df.js" "/precache-manifest.4678201a4a245d7097585e7c7155f03d.js"
); );
workbox.clientsClaim(); workbox.clientsClaim();
......
src/App.js
...@@ -157,6 +157,12 @@ class App extends Component { ...@@ -157,6 +157,12 @@ class App extends Component {
if (code && !oid) { if (code && !oid) {
//针对2019双旦活动特殊处理，活动结束后删掉
//treasure_code=3538333139312c31&origin=2&aa=bb&code=0211aiYB1VVOL60rmWWB1367YB11aiY7&state=STATE
if(getParam('treasure_code') == '3538333139312c31' && code == '0211aiYB1VVOL60rmWWB1367YB11aiY7'){
return
}
http.get(`${API['home']}/m/wx_loginInfo/code/${code}?redirect=${encodeURIComponent(window.location.href)}`) http.get(`${API['home']}/m/wx_loginInfo/code/${code}?redirect=${encodeURIComponent(window.location.href)}`)
.then(res => { .then(res => {
let data = res.data let data = res.data
......
src/common/Mask/index.js 0 → 100644
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import './index.scss';
const Root = document.querySelector('body');
const events = ['touchmove', 'mousewheel'];
class Mask extends Component {
constructor(props) {
super(props);
if(!this.el) {
this.el = document.createElement('div');
}
}
componentDidMount() {
events.forEach(item => {
this.el.addEventListener(item, this.preventEvent, {
passive: false
})
})
Root.appendChild(this.el);
}
componentWillUnmount() {
Root.removeChild(this.el);
}
preventEvent = e => {
e.preventDefault();
}
render() {
const { visible, handleToHide, className } = this.props;
if(visible) {
return ReactDOM.createPortal(
(
<div className="mask">
<div className={classnames("mask-content", className)}>
{this.props.children}
</div>
<div className="mask-footer">
<i className="mask-button__close" onClick={handleToHide}></i>
</div>
</div>
),
this.el
);
}else {
return null;
}
}
}
export default Mask;
\ No newline at end of file
src/common/Mask/index.scss 0 → 100644
.mask {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#fff;
background-color: rgba(0, 0, 0, .5);
z-index: 999;
}
.mask-content {
min-width: 200px;
min-height: 100px;
padding: 10px 0;
border-radius: 5px;
box-sizing: border-box;
background-color: #fff;
}
.mask-footer {
margin-top: 33px;
}
.mask-button__close {
display: inline-block;
width: 33px;
height: 33px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png');
}
\ No newline at end of file
src/components/activity/newyear-2019/box-container/box-container.scss
.box-container { .box-container {
position: relative; position: relative;
background: #327443; background: #327443 url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/sd_nr_bj2.png") repeat-y;
background-size: 100% auto;
padding: 14px 0; padding: 14px 0;
.image-box { .image-box {
height: 100%; height: 100%;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/sd_nr_bj2.png") repeat-y;
background-size: 100% auto;
} }
@mixin common-deco($bg) { @mixin common-deco($bg) {
......
src/components/activity/newyear-2019/common/commonContainer/index.scss
...@@ -49,11 +49,13 @@ ...@@ -49,11 +49,13 @@
width: 100%; width: 100%;
height: 22px; height: 22px;
} }
.container_content { .container_content {
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_middle_bj.png"); background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_middle_bj.png");
background-size: contain; background-size: contain;
width: 100%; width: 100%;
min-height: 25px; min-height: 25px;
padding: 5px 20px; margin: -1px 0;
padding: 6px 15px;
} }
} }
src/components/activity/newyear-2019/common/prizes/index.js
...@@ -108,7 +108,7 @@ class Prizes extends Component { ...@@ -108,7 +108,7 @@ class Prizes extends Component {
item.is_captain != 0 && <span className='captain top-tag'>队长专属</span> item.is_captain != 0 && <span className='captain top-tag'>队长专属</span>
} }
{ {
item.mode === 2 && <span className='stage top-tag'>第{item.stage_no}次必中</span> item.mode === 2 && <span className='stage top-tag'>第{item.stage_no}个必中</span>
} }
{ {
item.grant_max item.grant_max
......
src/components/activity/newyear-2019/common/prizes/prizes.scss
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
.common_container { .common_container {
.container_content { .container_content {
.prizes-box { .prizes-box {
margin: 0 -20px; margin: 0 -15px;
} }
} }
} }
......
src/components/activity/newyear-2019/landing/index.js
...@@ -19,6 +19,8 @@ class Landing extends Component { ...@@ -19,6 +19,8 @@ class Landing extends Component {
joinSuccessPopup = null joinSuccessPopup = null
shareTipPopup = null shareTipPopup = null
swiper = null swiper = null
shareTitle = ''
shareDesc = ''
state = { state = {
...@@ -36,6 +38,13 @@ class Landing extends Component { ...@@ -36,6 +38,13 @@ class Landing extends Component {
componentDidMount() { componentDidMount() {
this.fetchPageData() this.fetchPageData()
window.showFollowAlert = this.remind.bind(this, 'create') window.showFollowAlert = this.remind.bind(this, 'create')
document.title = '七月在线年终大回馈，幸运宝箱随你开，100%有奖！'
const landing = document.querySelector('#landing')
const boxContainer = document.querySelector('.box-container')
if(boxContainer.offsetHeight < window.innerHeight){
landing.style.minHeight = `${window.innerHeight}px`
boxContainer.style.minHeight = `${window.innerHeight}px`
}
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
...@@ -65,10 +74,12 @@ class Landing extends Component { ...@@ -65,10 +74,12 @@ class Landing extends Component {
activityEnd: data.status == 5 activityEnd: data.status == 5
}) })
this.setupWxShareConfig(data.member)
if (browser.isWeixin) { if (browser.isWeixin) {
wxShare({ wxShare({
title: `@${data.member[0].user_name} 邀您一起组队拿豪礼！`, title: this.shareTitle,
desc: `加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！`, desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`, link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png' imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
}) })
...@@ -91,6 +102,13 @@ class Landing extends Component { ...@@ -91,6 +102,13 @@ class Landing extends Component {
}) })
} }
setupWxShareConfig = member => {
const len = member.length
let count = 5 - len <= 0 ? 4 : 5 - len
this.shareTitle = `还差${count}人即可开宝箱，100%有奖！`
this.shareDesc = '加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！--七月在线'
}
showSharePromptWithParam = () => { showSharePromptWithParam = () => {
if (sessionStorage.getItem('showShareTip') && !sessionStorage.getItem('closedRemind')) { if (sessionStorage.getItem('showShareTip') && !sessionStorage.getItem('closedRemind')) {
this.showShareTip() this.showShareTip()
...@@ -136,9 +154,9 @@ class Landing extends Component { ...@@ -136,9 +154,9 @@ class Landing extends Component {
const {history} = this.props const {history} = this.props
this.joinSuccessPopup && this.joinSuccessPopup.remove() this.joinSuccessPopup && this.joinSuccessPopup.remove()
if (getParam('version')) { if (getParam('version')) {
history.push(`/year/yearTreasure?id=${id}&version=${getParam('version')}`) window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}&version=${getParam('version')}`)
} else { } else {
history.push(`/year/yearTreasure?id=${id}`) window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}`)
} }
} }
...@@ -187,8 +205,8 @@ class Landing extends Component { ...@@ -187,8 +205,8 @@ class Landing extends Component {
const {history, match, user, location} = this.props const {history, match, user, location} = this.props
if (getParam('version')) { if (getParam('version')) {
let data = { let data = {
title: `@${user.data.username} 邀您一起组队拿豪礼！`, title: this.shareTitle,
desc: `加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！`, desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${treasure_code}&origin=2`, link: `${window.location.origin}${location.pathname}?treasure_code=${treasure_code}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png' imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
} }
...@@ -304,8 +322,8 @@ class Landing extends Component { ...@@ -304,8 +322,8 @@ class Landing extends Component {
if (browser.isAndroidApp || browser.isIOSApp) { if (browser.isAndroidApp || browser.isIOSApp) {
SendMessageToApp('toShare', { SendMessageToApp('toShare', {
title: `@${user.data.username} 邀您一起组队拿豪礼！`, title: this.shareTitle,
desc: `加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！`, desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`, link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png' imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
}) })
...@@ -354,11 +372,10 @@ class Landing extends Component { ...@@ -354,11 +372,10 @@ class Landing extends Component {
} }
requiredLogin = () => { requiredLogin = () => {
const {history, user} = this.props const {history, user, location} = this.props
if (user.hasError) { if (user.hasError) {
if (browser.isWeixin) { if (browser.isWeixin) {
window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(window.location.href + '&aa=bb')}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`) window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(`${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=${getParam('origin')}&aa=bb`)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
} else { } else {
history.push('/passport') history.push('/passport')
} }
...@@ -369,9 +386,9 @@ class Landing extends Component { ...@@ -369,9 +386,9 @@ class Landing extends Component {
toSquare = () => { toSquare = () => {
const {history} = this.props const {history} = this.props
if (!getParam('version')) { if (!getParam('version')) {
history.push('/year/yearindex') window.location.assign('https://m.julyedu.com/year/yearindex')
} else { } else {
history.push('/year/yearindex?version=' + getParam('version')) window.location.assign('https://m.julyedu.com/year/yearindex?version=' + getParam('version'))
} }
} }
...@@ -385,7 +402,8 @@ class Landing extends Component { ...@@ -385,7 +402,8 @@ class Landing extends Component {
lack_member, lack_member,
team_num, team_num,
prize_info, prize_info,
my_team my_team,
standby_plan
}, },
activityEnd, activityEnd,
isCaptain isCaptain
...@@ -397,14 +415,23 @@ class Landing extends Component { ...@@ -397,14 +415,23 @@ class Landing extends Component {
* 3-已加入当前队伍 * 3-已加入当前队伍
* 4-已加入别的队伍 * 4-已加入别的队伍
* */ * */
return ( return (
<div id={'landing'}> <div id={'landing'}>
{
!(standby_plan && browser.isWeixin) &&
<div id="to-square"> <div id="to-square">
<a href='javascript:' onClick={this.toSquare}>前往活动会场，享更多福利！ >></a> <a href='javascript:' onClick={this.toSquare}>前往活动会场，享更多福利！ >></a>
</div> </div>
}
<BoxContainer> <BoxContainer>
<i className="snow-deco"/> <i className={`snow-deco ${standby_plan && browser.isWeixin ? 'standby' : ''}`}/>
{
standby_plan && browser.isWeixin &&
<>
<WhiteSpace className={'standby-space'}/>
<div className={'standby-tip'}>点击右上角，选择“在浏览器打开”</div>
</>
}
<img className='main-avatar' <img className='main-avatar'
src={head_img} alt=""/> src={head_img} alt=""/>
{ {
...@@ -462,9 +489,12 @@ class Landing extends Component { ...@@ -462,9 +489,12 @@ class Landing extends Component {
<div className="group-des"> <div className="group-des">
还差 {lack_member} 名队员即可获得当前宝箱哦~ 还差 {lack_member} 名队员即可获得当前宝箱哦~
</div> </div>
{
!(standby_plan && browser.isWeixin) &&
<button type='button' className={'invite-btn'} onClick={this.showShareTip}> <button type='button' className={'invite-btn'} onClick={this.showShareTip}>
邀请好友加入队伍 邀请好友加入队伍
</button> </button>
}
</> </>
} }
{ {
...@@ -479,14 +509,14 @@ class Landing extends Component { ...@@ -479,14 +509,14 @@ class Landing extends Component {
} }
</div> </div>
{ {
my_team['is_team'] ? !(standby_plan && browser.isWeixin) && (my_team['is_team'] ?
<button type='button' className={'invite-btn'} <button type='button' className={'invite-btn'}
onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}> onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}>
继续组队 继续组队
</button> </button>
: <button type='button' className={'invite-btn'} onClick={this.createMyTeam}> : <button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
创建我的队伍 创建我的队伍
</button> </button>)
} }
</> </>
} }
...@@ -502,25 +532,25 @@ class Landing extends Component { ...@@ -502,25 +532,25 @@ class Landing extends Component {
} }
</div> </div>
{ {
my_team['is_team'] ? !(standby_plan && browser.isWeixin) && (my_team['is_team'] ?
<button type='button' className={'invite-btn'} <button type='button' className={'invite-btn'}
onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}> onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}>
继续组队 继续组队
</button> </button>
: <button type='button' className={'invite-btn'} onClick={this.createMyTeam}> : <button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
创建我的队伍 创建我的队伍
</button> </button>)
} }
</> </>
} }
{ {
status === 2 && !activityEnd && < button type='button' className={'invite-btn'} onClick={this.joinTeam}> !(standby_plan && browser.isWeixin) && status === 2 && !activityEnd && < button type='button' className={'invite-btn'} onClick={this.joinTeam}>
同意加入队伍 同意加入队伍
</button> </button>
} }
{ {
prize_info && prize_info.length !== 0 && !activityEnd && !isCaptain && <div className="certainly-prompt"> prize_info && prize_info.length !== 0 && !activityEnd && !isCaptain && <div className="certainly-prompt">
第{prize_info[0].stage_no}次必中 {prize_info[0].name} 第{prize_info[0].stage_no}个宝箱必中 {prize_info[0].name}
</div> </div>
} }
{ {
......
src/components/activity/newyear-2019/landing/landing.scss
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
#landing { #landing {
background: #BC2A18; background: #BC2A18;
text-align: center; text-align: center;
min-height: 100%;
#to-square { #to-square {
position: fixed; position: fixed;
...@@ -43,6 +44,10 @@ ...@@ -43,6 +44,10 @@
height: 68px; height: 68px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/snow-deco.png") no-repeat; background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/snow-deco.png") no-repeat;
background-size: contain; background-size: contain;
&.standby {
top: 0;
}
} }
.main-avatar { .main-avatar {
...@@ -50,7 +55,7 @@ ...@@ -50,7 +55,7 @@
height: 49px; height: 49px;
border-radius: 50%; border-radius: 50%;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 37.5px; margin-top: 55px;
object-fit: cover; object-fit: cover;
} }
...@@ -69,6 +74,35 @@ ...@@ -69,6 +74,35 @@
} }
} }
.standby-space {
height: 25px;
}
.standby-tip {
position: relative;
width: 270px;
height: 32px;
background: #FFDE00;
border-radius: 5px;
margin: 0 auto -40px;
line-height: 32px;
text-align: center;
color: #202426;
font-size: 15px;
&::after {
content: '';
display: block;
position: absolute;
top: -120%;
right: -6%;
width: 50px;
height: 38px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/standby-share-tip-icon.png");
background-size: contain;
}
}
.group { .group {
ul.member { ul.member {
...@@ -161,7 +195,7 @@ ...@@ -161,7 +195,7 @@
} }
.certainly-prompt { .certainly-prompt {
margin-top: -43px; margin-top: 27px;
padding-bottom: 16px; padding-bottom: 16px;
font-size: 14px; font-size: 14px;
color: #FFE300; color: #FFE300;
......
src/components/activity/newyear-2019/myTreasure/index.js
...@@ -43,6 +43,7 @@ class MyTreasure extends Component { ...@@ -43,6 +43,7 @@ class MyTreasure extends Component {
componentDidMount() { componentDidMount() {
this.fetchMyTreasure() this.fetchMyTreasure()
this.fetchActivityStatus() this.fetchActivityStatus()
document.title = '七月在线年终大回馈，幸运宝箱随你开，100%有奖！人气好课免费学，精品课程1分抢！';
} }
componentWillReceiveProps(nextProp) { componentWillReceiveProps(nextProp) {
...@@ -345,9 +346,9 @@ class MyTreasure extends Component { ...@@ -345,9 +346,9 @@ class MyTreasure extends Component {
handleToInvite = (treasure_code) => { handleToInvite = (treasure_code) => {
const {history} = this.props const {history} = this.props
if (getParam('version')) { if (getParam('version')) {
history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1&version=${getParam('version')}`) window.location.assign(`https://h5.julyedu.com/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1&version=${getParam('version')}`)
} else { } else {
history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`) window.location.assign(`https://h5.julyedu.com/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`)
} }
} }
...@@ -446,6 +447,7 @@ class MyTreasure extends Component { ...@@ -446,6 +447,7 @@ class MyTreasure extends Component {
return ( return (
<div data-skip="treasure"> <div data-skip="treasure">
{(!browser.isAndroidApp && !browser.isIOSApp) && <HeaderBar title="我的宝箱" arrow={true}/>} {(!browser.isAndroidApp && !browser.isIOSApp) && <HeaderBar title="我的宝箱" arrow={true}/>}
<div className="team-empty">
{ {
isEnd && isEnd &&
<p className="activity-end__desc"> <p className="activity-end__desc">
...@@ -462,6 +464,7 @@ class MyTreasure extends Component { ...@@ -462,6 +464,7 @@ class MyTreasure extends Component {
<button className="team-empty__button" onClick={this.toOrganizeTeam}>组队开宝箱</button> <button className="team-empty__button" onClick={this.toOrganizeTeam}>组队开宝箱</button>
</> </>
} }
</div>
{ {
(!isEnd && !isEmpty && userInfo.uid) && (!isEnd && !isEmpty && userInfo.uid) &&
<div className="treasure-content"> <div className="treasure-content">
......
src/components/activity/newyear-2019/myTreasure/index.scss
...@@ -15,18 +15,21 @@ ...@@ -15,18 +15,21 @@
} }
.activity-end__desc { .activity-end__desc {
margin: 118px 0 0;
font-size: 30px; font-size: 30px;
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 42px; line-height: 42px;
} }
.team-empty {
padding-top: 118px;
}
.team-empty__icon { .team-empty__icon {
display: block; display: block;
width: 56px; width: 56px;
height: 49px; height: 49px;
margin: 118px auto 18px; margin: 0 auto 18px;
background-size: cover; background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-empty.png'); background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-empty.png');
} }
......
src/components/activity/newyear-2019/myTreasure/team.js
...@@ -138,8 +138,8 @@ class TreasureTeam extends Component { ...@@ -138,8 +138,8 @@ class TreasureTeam extends Component {
<> <>
{ {
is_captain is_captain
? <Link className="team-button" to={`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`}>继续邀请队友</Link> ? <a className="team-button" href={`https://h5.julyedu.com/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`}>继续邀请队友</a>
: <Link className="team-button" to={`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=2`}>帮好友完成组队</Link> : <a className="team-button" href={`https://h5.julyedu.com/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=2`}>帮好友完成组队</a>
} }
</> </>
} }
......
src/components/activity/newyear-2019/preheat/LiveRoom/index.js
...@@ -166,6 +166,13 @@ class LiveRoom extends Component { ...@@ -166,6 +166,13 @@ class LiveRoom extends Component {
<span onClick={ ()=>this.subscribe(item.live_id)} className="order__btn">立即预约</span> <span onClick={ ()=>this.subscribe(item.live_id)} className="order__btn">立即预约</span>
) )
} }
{
item.is_end == 1 && item.transcribe_url=='' && (
<span className="order__btn live__end">已结束</span>
)
}
{ {
item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 1 && ( item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 1 && (
<span onClick={this.tip} className="order__btn subscribed">已预约</span> <span onClick={this.tip} className="order__btn subscribed">已预约</span>
......
src/components/activity/newyear-2019/preheat/LiveRoom/index.scss
...@@ -91,6 +91,10 @@ ...@@ -91,6 +91,10 @@
.subscribed { .subscribed {
background: rgba(254, 228, 29, 1); background: rgba(254, 228, 29, 1);
} }
.live__end{
background: #999;
color: #fff;
}
.living { .living {
background: rgba(0, 153, 255, 1); background: rgba(0, 153, 255, 1);
color: #fff; color: #fff;
......
src/components/activity/newyear-2019/preheat/YearCourse/index.scss
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
flex-wrap: wrap; flex-wrap: wrap;
.course-container { .course-container {
width: 158px; width: 168px;
margin: 15px 0 0 0; margin: 15px 0 0 0;
text-align: center; text-align: center;
position: relative; position: relative;
...@@ -27,6 +27,20 @@ ...@@ -27,6 +27,20 @@
text-align: center; text-align: center;
} }
.bargain-price {
position: absolute;
left: 4px;
top: 10px;
margin: 0;
height: 18px;
padding: 0 8px;
border-radius: 0 9px 9px 0;
font-size: 12px;
color: #fff;
line-height: 18px;
background-color: #F01D0E;
}
.coupon-course__footer { .coupon-course__footer {
.course-title { .course-title {
padding-left: 10px; padding-left: 10px;
...@@ -137,31 +151,61 @@ ...@@ -137,31 +151,61 @@
transform: skewX(-20deg); transform: skewX(-20deg);
z-index: -1; z-index: -1;
} }
.tag[data-color="green"]:before {
background-color: #357345;
}
} }
.price { .price {
text-align: left;
padding-left: 5px;
margin-top: 3px; margin-top: 3px;
padding-left: 4px;
font-size: 12px;
color: #FF0002; color: #FF0002;
text-align: left;
&.price-group {
font-size: 0;
height: 30px;
}
.price-label {
font-size: 12px; font-size: 12px;
}
.new-price { .new-price {
font-size: 18px; font-size: 16px;
} }
.old-price { .old-price {
margin-left: 2px;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
margin-left: 8px;
} }
} }
.status { .status {
text-align: left;
padding-left: 5px;
position: absolute; position: absolute;
left: 0;
bottom: 10px; bottom: 10px;
right: 0;
padding: 0 5px;
text-align: left;
&[data-layout="row"] {
display: flex;
.to-group {
&:nth-child(1) {
margin-right: 2px;
}
&:nth-child(2) {
margin-left: 2px;
}
}
}
.status-btn { .status-btn {
display: inline-block; display: inline-block;
...@@ -178,6 +222,30 @@ ...@@ -178,6 +222,30 @@
background-color: #FF8080; background-color: #FF8080;
} }
.to-group {
display: block;
width: 100%;
height: 22px;
border-radius: 11px;
box-sizing: border-box;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 22px;
background: linear-gradient(-90deg,rgba(235,22,18,1) 0%,rgba(255,0,2,1) 100%);
&[data-status="study"] {
background: #0099FF;
}
&[data-status="done"] {
border: 1px solid #090F08;
font-size: 12px;
color: #090F08;
background: #FEE41D;
}
}
.add-wish, .add-wish-success { .add-wish, .add-wish-success {
width: 88px; width: 88px;
margin-left: 5px; margin-left: 5px;
...@@ -214,6 +282,41 @@ ...@@ -214,6 +282,41 @@
.groupcourse .course-container { .groupcourse .course-container {
height: 195px; height: 195px;
} }
.groupcourse[data-stage="2"] .course-container {
height: 215px;
}
.progree-and-sale {
display: flex;
align-items: center;
justify-content: center;
padding-left: 5px;
}
.progress {
width: 90px;
height: 8px;
border-radius: 4px;
background-color: #E6E6E6;
}
.progress_bar {
display: block;
width: 10%;
height: 100%;
border-radius: 4px 0 0 4px;
background-color: #FF0002;
}
.sale-sum {
flex: 1;
margin: 0;
font-size: 12px;
color: #333;
text-align: center;
line-height: 1;
}
.ai-course__subtitle { .ai-course__subtitle {
width: 73px; width: 73px;
......
src/components/activity/newyear-2019/preheat/index.js
...@@ -24,7 +24,7 @@ export default class index extends Component { ...@@ -24,7 +24,7 @@ export default class index extends Component {
removable: 0, // 未拆宝箱的数量 removable: 0, // 未拆宝箱的数量
currentOpenId: 0, // 当前要拆的宝箱的队伍的ID currentOpenId: 0, // 当前要拆的宝箱的队伍的ID
treasure_stage: 0, // 宝箱的活动阶段 treasure_stage: 0, // 宝箱的活动阶段
active_stage: 0, // 整个活动的阶段 activity_stage: 0, // 整个活动的阶段
userInfoList: [], userInfoList: [],
userInfo: {}, userInfo: {},
isAppUpdate: false, isAppUpdate: false,
...@@ -39,6 +39,7 @@ export default class index extends Component { ...@@ -39,6 +39,7 @@ export default class index extends Component {
_this.loginInfo(result) _this.loginInfo(result)
} }
_this.getStage() _this.getStage()
document.title = '七月在线年终大回馈，幸运宝箱随你开，100%有奖！人气好课免费学，精品课程1分抢！';
} }
// 获取app登录数据 // 获取app登录数据
...@@ -133,6 +134,7 @@ export default class index extends Component { ...@@ -133,6 +134,7 @@ export default class index extends Component {
if (code === 200) { if (code === 200) {
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内 // treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
this.setState({ this.setState({
activity_stage: data.activity_stage,
treasure_stage: data.treasure_stage treasure_stage: data.treasure_stage
}) })
} else { } else {
...@@ -142,7 +144,11 @@ export default class index extends Component { ...@@ -142,7 +144,11 @@ export default class index extends Component {
} }
render() { render() {
const {banner, removable, treasure_stage, currentOpenId} = this.state const {
banner,
activity_stage,
treasure_stage,
} = this.state
return ( return (
<div className={'year-index'}> <div className={'year-index'}>
<div className="banner-treasure"> <div className="banner-treasure">
...@@ -159,11 +165,12 @@ export default class index extends Component { ...@@ -159,11 +165,12 @@ export default class index extends Component {
{/* 组队开宝箱 */} {/* 组队开宝箱 */}
{ {
treasure_stage === 1 && <TreasureBox isAppUpdate={this.state.isAppUpdate} getRemovable={this.getRemovable}/> treasure_stage === 1 &&
<TreasureBox isAppUpdate={this.state.isAppUpdate} getRemovable={this.getRemovable}/>
} }
{/*课程*/} {/* 课程 */}
<YearCourse currentOpenId={currentOpenId} removable={removable} isAppUpdate={this.state.isAppUpdate} /> <YearCourse stage={activity_stage} isAppUpdate={this.state.isAppUpdate} />
{/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/} {/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
{ {
......
src/components/activity/newyear-2019/treasure-box/index.js
...@@ -13,7 +13,12 @@ class TreasureBox extends Component { ...@@ -13,7 +13,12 @@ class TreasureBox extends Component {
render() { render() {
return ( return (
<CommonContainer id="year-treasure" title={'组队开宝箱'}> <CommonContainer id="year-treasure" title={'组队开宝箱'}>
<div style={{textAlign: 'center', fontSize: '12px', color: '#FFDC1E', marginTop: '10px'}}>邀请好友组队一起开宝箱，满5人后将随机获得以下奖品~</div> <div style={{
textAlign: 'center',
fontSize: '12px',
color: '#FFDC1E',
marginTop: '10px'
}}>邀请好友组队一起开宝箱，满5人后将随机获得以下奖品~</div>
<Prizes showSystemNotices={true}/> <Prizes showSystemNotices={true}/>
<UserBulletScreen/> <UserBulletScreen/>
<TeamInfo isAppUpdate={this.props.isAppUpdate} getRemovable={this.props.getRemovable} /> <TeamInfo isAppUpdate={this.props.isAppUpdate} getRemovable={this.props.getRemovable} />
......
src/components/activity/newyear-2019/treasure-box/team.js
...@@ -102,9 +102,10 @@ class TeamInfo extends Component { ...@@ -102,9 +102,10 @@ class TeamInfo extends Component {
// 直接跳转 // 直接跳转
if (!getParam('version')) { if (!getParam('version')) {
this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code); // this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
} else { } else {
this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code + '&version='+ getParam('version')); window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code + '&version='+ getParam('version'));
} }
}else{ // 没自己的队伍 }else{ // 没自己的队伍
...@@ -114,9 +115,9 @@ class TeamInfo extends Component { ...@@ -114,9 +115,9 @@ class TeamInfo extends Component {
if (code === 200) { if (code === 200) {
const { treasure_code } = data; const { treasure_code } = data;
if (!getParam('version')) { if (!getParam('version')) {
this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code); window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
} else { } else {
this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code + '&version='+ getParam('version')); window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code + '&version='+ getParam('version'));
} }
} else { } else {
Toast.info(msg); Toast.info(msg);
...@@ -231,7 +232,7 @@ class TeamInfo extends Component { ...@@ -231,7 +232,7 @@ class TeamInfo extends Component {
} }
</div> </div>
{ {
stage_no > 0 && name && <p className='stage_prize'>{`第${stage_no}次必中${name}`}</p> stage_no > 0 && name && <p className='stage_prize'>{`第${stage_no}个宝箱必中${name}`}</p>
} }
</div> </div>
) )
......
src/components/activity/newyear-2019/year-wish/index.scss
...@@ -18,7 +18,7 @@ html, body, #root { ...@@ -18,7 +18,7 @@ html, body, #root {
flex-wrap: wrap; flex-wrap: wrap;
.course-container { .course-container {
width: 158px; width: 168px;
margin: 15px 0 0 0; margin: 15px 0 0 0;
text-align: center; text-align: center;
position: relative; position: relative;
...@@ -39,6 +39,20 @@ html, body, #root { ...@@ -39,6 +39,20 @@ html, body, #root {
text-align: center; text-align: center;
} }
.bargain-price {
position: absolute;
left: 4px;
top: 10px;
margin: 0;
height: 18px;
padding: 0 8px;
border-radius: 0 9px 9px 0;
font-size: 12px;
color: #fff;
line-height: 18px;
background-color: #F01D0E;
}
.coupon-course__footer { .coupon-course__footer {
.course-title { .course-title {
padding-left: 10px; padding-left: 10px;
...@@ -148,31 +162,61 @@ html, body, #root { ...@@ -148,31 +162,61 @@ html, body, #root {
transform: skewX(-20deg); transform: skewX(-20deg);
z-index: -1; z-index: -1;
} }
.tag[data-color="green"]:before {
background-color: #357345;
}
} }
.price { .price {
text-align: left;
padding-left: 5px;
margin-top: 3px; margin-top: 3px;
padding-left: 4px;
font-size: 12;
color: #FF0002; color: #FF0002;
text-align: left;
&.price-group {
font-size: 0;
height: 30px;
}
.price-label {
font-size: 12px; font-size: 12px;
}
.new-price { .new-price {
font-size: 18px; font-size: 16px;
} }
.old-price { .old-price {
margin-left: 2px;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
margin-left: 8px;
} }
} }
.status { .status {
text-align: left;
padding-left: 5px;
position: absolute; position: absolute;
left: 0;
bottom: 10px; bottom: 10px;
right: 0;
padding: 0 5px;
text-align: left;
&[data-layout="row"] {
display: flex;
.to-group {
&:nth-child(1) {
margin-right: 2px;
}
&:nth-child(2) {
margin-left: 2px;
}
}
}
.status-btn { .status-btn {
display: inline-block; display: inline-block;
...@@ -189,6 +233,30 @@ html, body, #root { ...@@ -189,6 +233,30 @@ html, body, #root {
background-color: #FF8080; background-color: #FF8080;
} }
.to-group {
display: block;
width: 100%;
height: 22px;
border-radius: 11px;
box-sizing: border-box;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 22px;
background: linear-gradient(-90deg,rgba(235,22,18,1) 0%,rgba(255,0,2,1) 100%);
&[data-status="study"] {
background: #0099FF;
}
&[data-status="done"] {
border: 1px solid #090F08;
font-size: 12px;
color: #090F08;
background: #FEE41D;
}
}
} }
} }
......
src/components/bargainMiddlePage/index.js
...@@ -153,11 +153,15 @@ class BargainMiddlePage extends Component { ...@@ -153,11 +153,15 @@ class BargainMiddlePage extends Component {
// 直接支付 // 直接支付
toCart = () => { toCart = () => {
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => { const { history } = this.props;
if (res.data.errno === 0) { http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) =>{
const { errno, msg } = res.data;
if (errno === 0) {
this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1}); this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
}else if(errno === 4030 || errno === 4040) {
history.push('/passport');
} else { } else {
Toast.info(res.data.msg, 2); Toast.info(msg, 2);
} }
}) })
// let data = { // let data = {
...@@ -204,19 +208,23 @@ class BargainMiddlePage extends Component { ...@@ -204,19 +208,23 @@ class BargainMiddlePage extends Component {
// 领取砍价神器 // 领取砍价神器
toArtifact = () => { toArtifact = () => {
const { history } = this.props;
const { course: { course_id = '' } } = this.state; const { course: { course_id = '' } } = this.state;
let data = { let data = {
courseId: getParam('id')? getParam('id') : course_id courseId: getParam('id')? getParam('id') : course_id
} }
http.post(`${API.home}/m/bargain/receiveLimit`, data).then((res) => { http.post(`${API.home}/m/bargain/receiveLimit`, data).then((res) => {
if (res.data.code === 200) { const { code, msg } = res.data;
if (code === 200) {
this.setState({ this.setState({
isShowOverlay: true, isShowOverlay: true,
status: 5, status: 5,
}); });
this.getBargainInfo(); this.getBargainInfo();
}else if(code === 4030 || code === 4040) {
history.push('/passport');
} else { } else {
Toast.info(res.data.msg, 2) Toast.info(msg, 2)
} }
}) })
} }
...@@ -322,6 +330,8 @@ class BargainMiddlePage extends Component { ...@@ -322,6 +330,8 @@ class BargainMiddlePage extends Component {
// 邀请好友砍价 // 邀请好友砍价
shareFriendBargain = () => { shareFriendBargain = () => {
const { history } = this.props;
history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${getParam('bargaincode')}&is_originator=1`)
this.setState({ this.setState({
isShowOverlay: true, isShowOverlay: true,
status: 7, status: 7,
......
src/components/blessingPreheat/courseItem/index.js
...@@ -2,11 +2,54 @@ import React, { Component } from 'react'; ...@@ -2,11 +2,54 @@ import React, { Component } from 'react';
import './index.scss'; import './index.scss';
class CourseItem extends Component { class CourseItem extends Component {
constructor(props) {
super(props);
this.state = {
countdown: ''
}
}
componentDidMount() {
const { time } = this.props;
this.startCountDown(time);
}
componentWillReceiveProps(nextProps) {
const { time: newTime } = nextProps
const { time: oldTime } = this.props;
if(oldTime != newTime) {
this.startCountDown(newTime);
}
}
startCountDown = (time) => {
if(time) {
let date = time * 1000,
hours = 0,
minutes = 0,
seconds = 0;
setInterval(() => {
date -= 1000
hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
seconds = `${parseInt((date - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0);
this.setState({
countdown: `${hours}时${minutes}分${seconds}秒后结束`
});
}, 1000);
}
}
render() { render() {
const { image,toCourse,id} = this.props; const { image, toCourse, id} = this.props;
const { countdown } = this.state;
return ( return (
<div className="course-container"> <div className="course-container">
<div className="course__cover"> <div className="course__cover">
{
countdown &&
<p className="course__time">{countdown}</p>
}
<img src={image} alt="cover" onClick={() => toCourse(id)}/> <img src={image} alt="cover" onClick={() => toCourse(id)}/>
</div> </div>
{this.props.children} {this.props.children}
......
src/components/blessingPreheat/courseItem/index.scss
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
} }
.course__cover { .course__cover {
position: relative;
height: 108px; height: 108px;
padding: 4px 4px 0; padding: 4px 4px 0;
overflow: hidden; overflow: hidden;
...@@ -18,3 +19,17 @@ ...@@ -18,3 +19,17 @@
height: 100%; height: 100%;
} }
} }
.course__time {
position: absolute;
left: 4px;
top: 10px;
margin: 0;
height: 18px;
padding: 0 8px;
border-radius: 0 9px 9px 0;
font-size: 12px;
color: #fff;
line-height: 18px;
background-color: #F01D0E;
}
\ No newline at end of file
src/components/detail/bargain/bargain.scss
...@@ -372,12 +372,7 @@ ...@@ -372,12 +372,7 @@
} }
.artifact-box, .use-artifact-box { .artifact-box, .use-artifact-box {
padding: 20px 0;
background-color: $bg_fff;
border-radius: 3px;
text-align: center; text-align: center;
margin: 200px auto 20px auto;
position: relative;
.top-img { .top-img {
position: absolute; position: absolute;
......
src/components/detail/bindPhone/confirm.js 0 → 100644
import React, { Component } from 'react';
import { Toast } from 'antd-mobile';
import { http } from '@/utils';
import './confirm.scss';
class BargainConfirmBind extends Component {
farmatKey = (key) => {
let data = null;
switch (key) {
case 1:
data = {
key: 'email',
type: 'email'
};
break;
case 2:
data = {
key: 'wechat_nickname',
type: 'wechat'
};
break;
case 3:
data = {
key: 'qq_nickname',
type: 'qq'
};
break;
case 4:
data = {
key: 'sina_nickname',
type: 'sina'
};
break;
default:
data = null;
break;
}
return data;
}
confirmBindPhone = () => {
const { data, handleToBargain } = this.props;
// is_valid 是否验证 1:验证（默认）,0不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
{
...data,
type: 1,
is_valid: 0
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200) {
handleToBargain();
}else {
Toast.info(msg);
}
});
}
render() {
const { bindInfo, handleToHide } = this.props;
return (
<div className="bargain-bind-confirm">
<h4 className="bargain-bind-confirm__title">绑定确认</h4>
<p className="bargain-bind-confirm__desc">该手机号已绑定到以下账号，继续绑定将解除以下绑定状态</p>
<ul className="bargain-bind-confirm__list">
{
bindInfo && [1,2,3,4].map(item => {
const data = this.farmatKey(item);
if(bindInfo[data.key]) {
return (
<li className="bargain-bind-confirm__account" key={item}>
<i className="bargain-bind-confirm__icon" data-plat={data.type}></i>
<p className="bargain-bind-confirm__name">{bindInfo[data.key]}</p>
</li>
);
}
return null;
})
}
</ul>
<div className="bargain-bind-confirm__footer">
<button
className="bargain-bind-confirm__button"
data-type="cancle"
onClick={handleToHide}
>取消</button>
<button
className="bargain-bind-confirm__button"
data-type="confirm"
onClick={this.confirmBindPhone}
>继续绑定</button>
</div>
</div>
)
}
}
export default BargainConfirmBind;
\ No newline at end of file
src/components/detail/bindPhone/confirm.scss 0 → 100644
.bargain-bind-confirm {
width: 290px;
padding-top: 10px;
padding-bottom: 8px;
}
.bargain-bind-confirm__title {
margin: 0 0 12px;
font-size: 15px;
color: #333;
text-align: center;
line-height: 1;
}
.bargain-bind-confirm__desc {
margin: 0;
padding: 0 20px;
font-size: 12px;
color: #666;
}
.bargain-bind-confirm__list {
padding: 0 0 10px;
}
.bargain-bind-confirm__account {
display: flex;
align-items: center;
height: 30px;
margin: 0 52px;
padding: 0 4px;
text-align: left;
&:nth-child(n+2) {
border-top: 1px solid #E5E5E5;
}
}
.bargain-bind-confirm__icon {
display: inline-block;
width: 22px;
height: 22px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
&[data-plat="email"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-mail.png');
}
&[data-plat="sina"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-sina.png');
}
&[data-plat="qq"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-qq.png');
}
&[data-plat="wechat"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-wechat.png');
}
}
.bargain-bind-confirm__name {
margin: 0;
padding-left: 7px;
font-size: 12px;
color: #999;
}
.bargain-bind-confirm__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
}
.bargain-bind-confirm__button {
width: 105px;
height: 30px;
box-sizing: border-box;
border-radius: 15px;
font-size: 14px;
cursor: pointer;
outline: none;
&[data-type="cancle"] {
border: 1px solid #0099FF;
color: #0099FF;
background-color: transparent;
}
&[data-type="confirm"] {
border-style: none;
color: #fff;
background-color: #0099FF;
}
}
\ No newline at end of file
src/components/detail/bindPhone/index.js 0 → 100644
import React, { Component } from 'react';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import { Formik, Form, Field } from 'formik';
import { Toast } from 'antd-mobile';
import { http, getParam } from '@/utils';
import './index.scss';
class BargainBindPhone extends Component {
constructor(props) {
super(props);
this.state = {
mobile: '',
code: '',
num: '86',
seconds: 60,
isTimer: false, // 是否开始倒计时
};
}
// 获取短信验证码
handleToSendCode = ({ mobile }) => {
const { country: { num = 86 } } = this.props;
let { isTimer, seconds } = this.state;
if(!isTimer) {
if(!/^\d+$/.test(mobile)){
Toast.info('请输入正确的手机号');
return;
}
// 获取验证码
http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`,
{
area_code: `00${num}`,
phone_num: mobile
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200) {
Toast.info('验证码发送成功', 2, null, false);
// 倒计时
this.timer = window.setInterval(() => {
if (seconds <= 0) {
window.clearInterval(this.timer);
this.setState({
isTimer: false,
seconds: 60
});
}else {
this.setState({
isTimer: true,
seconds: --seconds
});
}
}, 1000);
}else {
Toast.info(msg);
}
});
}
}
// 绑定手机号
handleToBindPhone = ({code, mobile}) => {
const { country: { num = 86}, handleToBargain, confirmBindPhone } = this.props;
if (!mobile) {
Toast.info('请填手机号码');
return;
}
if (!code) {
Toast.info('请填写验证码');
return;
}
const params = {
area_code: `00${num}`,
phone_num: mobile,
code: code,
};
// is_valid 是否验证 1:验证（默认）,0不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
{
...params,
type: 1,
is_valid: 1
}
).then(res => {
const { errno, data, msg } = res.data;
if(errno === 200) {
if(data.tip_info) {
confirmBindPhone(params, data.tip_info);
}else {
handleToBargain();
}
}else {
Toast.info(msg);
}
});
}
render() {
const { country: { num = '86' } } = this.props;
const { isTimer, seconds } = this.state;
return (
<Formik
initialValues={{
mobile: '',
code: ''
}}
validate={({mobile, code}) => {
const errors = {};
if(!/^\d+$/.test(mobile)) {
errors.mobile = '请填写正确格式的手机号';
}
if (!/[0-9]{6}/.test(code)) {
errors.code = '请输入验证码';
}
return errors;
}}
onSubmit={(values, { setStatus, setSubmitting }) => {
this.handleToBindPhone(values);
}}
render={({values: {mobile, code}, errors}) => (
<Form className="bargain-bind-phone">
<h2 className="bargain-bind-phone__title">绑定手机，先砍一刀</h2>
<div className="bargain-bind-phone__item">
<Link
className="bargain-bind-phone__button--num"
to={`/country?id=${getParam('id')}&from=bargain`}
>
+{num}
<i className="iconfont iconiconfront-69"></i>
</Link>
<Field
name="mobile"
render={({field}) => (
<input
{...field}
className="bargain-bind-phone__ipt"
type="tel"
placeholder='手机号'
maxLength={11}
/>
)}
/>
</div>
<div className="bargain-bind-phone__item">
<Field
name="code"
render={({field}) => (
<input
{...field}
type="tel"
placeholder='验证码'
maxLength={6}
/>
)}
/>
{errors.mobile}
<button
type="button"
className={classnames(
'bargain-bind-phone__button--send',
{
'active': mobile && errors.mobile === undefined
}
)}
disabled={!(mobile && errors.mobile === undefined)}
onClick={() => this.handleToSendCode({mobile})}
>
{isTimer? `重新发送${seconds}s` : '发送验证码'}
</button>
</div>
<button
type="submit"
className="bargain-bind-phone__button--bargain"
disabled={!(mobile && code && JSON.stringify(errors) === '{}')}
>先砍一刀</button>
</Form>
)}
/>
)
}
}
export default BargainBindPhone;
\ No newline at end of file
src/components/detail/bargain/bargainInfo/bargain-info.scss → src/components/detail/bindPhone/index.scss 100755 → 100644
.bargain-phone-popup { .bargain-bind-phone {
width: 300px; padding: 10px 20px;
height: 195px;
margin: 200px auto 20px;
padding: 20px;
border-radius: 3px;
background-color: $white;
} }
.bargain-phone-popup__title { .bargain-bind-phone__title {
margin: 0 0 12px; margin: 0 0 12px;
font-size: 15px; font-size: 15px;
color: #333;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
} }
.bargain-phone-popup__item { .bargain-bind-phone__item {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
...@@ -24,11 +20,6 @@ ...@@ -24,11 +20,6 @@
border: 1px solid #ddd; border: 1px solid #ddd;
box-sizing: border-box; box-sizing: border-box;
&.active {
border: 1px solid $active;
color: $active;
}
input { input {
width: 100%; width: 100%;
padding-left: 10px; padding-left: 10px;
...@@ -40,7 +31,7 @@ ...@@ -40,7 +31,7 @@
color: $color_999; color: $color_999;
} }
&.bargain-phone-popup__ipt { &.bargain-bind-phone__ipt {
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
} }
} }
...@@ -48,69 +39,44 @@ ...@@ -48,69 +39,44 @@
.bargain-phone-popup__button--num { .bargain-bind-phone__button--num {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 0 5px; padding: 0 5px;
color: $color_999; color: $color_999;
} }
.bargain-phone-popup__button--send { .bargain-bind-phone__button--send {
width: 136px; width: 136px;
border-style: none; border-style: none;
font-size: 13px; font-size: 13px;
color: $color_999; color: $active;
text-align: right; text-align: right;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
&.active { &:disabled {
color: $active; color: $color_999;
} }
} }
.bargain-phone-popup__button--bargain { .bargain-bind-phone__button--bargain {
display: block; display: block;
width: 100%; width: 100%;
height: 30px; height: 30px;
margin-top: 20px; margin-top: 20px;
border-style: none; border-style: none;
font-size: 15px; font-size: 15px;
color: $white; color: #FF4000;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
background-color: $bg_999; background-color: #FADD29;
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
&.active { &:disabled {
color: #FF4000; color: $white;
background-color: #FADD29; background-color: $bg_999;
}
}
.popup-bind--bargain {
.popup-bind__content {
width: 300px;
margin: 200px auto 20px;
padding: 20px;
border-radius: 3px;
}
.popup-bind__title {
margin: 0 0 12px;
font-size: 15px;
font-weight: normal;
}
.popup-bind__desc {
padding: 0;
font-size: 12px;
}
.popup-bind__button {
padding: 0;
} }
} }
\ No newline at end of file
src/components/detail/btnstatus/index.js
...@@ -6,7 +6,9 @@ import { getCourses } from "@/components/detail/actions" ...@@ -6,7 +6,9 @@ import { getCourses } from "@/components/detail/actions"
import { connect } from "react-redux" import { connect } from "react-redux"
import './index.scss' import './index.scss'
import Overlay from '../overlay' import Overlay from '../overlay'
import BindPhone from './../bindPhone/index';
import BargainConfirmBind from './../bindPhone/confirm';
import Mask from '@/common/Mask/index';
class BtnStatus extends Component { class BtnStatus extends Component {
constructor(props) { constructor(props) {
...@@ -17,9 +19,12 @@ class BtnStatus extends Component { ...@@ -17,9 +19,12 @@ class BtnStatus extends Component {
group_status: 3, group_status: 3,
in_cart: false, in_cart: false,
countdown: 0, countdown: 0,
barInfo: {} barInfo: {},
bindPhone: false,
bindConfrm: false,
bindInfo: {}, // 冲突信息
formInfo: {},
} }
} }
componentDidMount() { componentDidMount() {
...@@ -77,6 +82,7 @@ class BtnStatus extends Component { ...@@ -77,6 +82,7 @@ class BtnStatus extends Component {
// } // }
// }) // })
// }; // };
// 返现课程的立即购买 // 返现课程的立即购买
signUpNow = () => { signUpNow = () => {
if(this.props.user.hasError) { if(this.props.user.hasError) {
...@@ -93,6 +99,7 @@ class BtnStatus extends Component { ...@@ -93,6 +99,7 @@ class BtnStatus extends Component {
}) })
} }
}; };
// 普通课程的立即报名 要模拟结算过程 // 普通课程的立即报名 要模拟结算过程
simpleCourse = () => { simpleCourse = () => {
if(this.props.user.hasError) { if(this.props.user.hasError) {
...@@ -108,11 +115,13 @@ class BtnStatus extends Component { ...@@ -108,11 +115,13 @@ class BtnStatus extends Component {
}) })
} }
}; };
// 格式化开课时间 // 格式化开课时间
formatDate = (date) => { formatDate = (date) => {
let ary = date.split('-'); let ary = date.split('-');
return `${ary[1]}月${ary[2]}日开课`; return `${ary[1]}月${ary[2]}日开课`;
}; };
// 直接购买 // 直接购买
tobuy = () => { tobuy = () => {
const {user} = this.props; const {user} = this.props;
...@@ -134,6 +143,7 @@ class BtnStatus extends Component { ...@@ -134,6 +143,7 @@ class BtnStatus extends Component {
} }
} }
}; };
// 一键开团 // 一键开团
keyToGroup = () => { keyToGroup = () => {
if(this.props.user.hasError) { if(this.props.user.hasError) {
...@@ -143,6 +153,7 @@ class BtnStatus extends Component { ...@@ -143,6 +153,7 @@ class BtnStatus extends Component {
} }
this.props.history.push(`/order?id=${getParam('id')}`, {group: 1}) this.props.history.push(`/order?id=${getParam('id')}`, {group: 1})
}; };
// 砍完价去支付 // 砍完价去支付
bargainToOrder = () => { bargainToOrder = () => {
if(this.props.user.hasError) { if(this.props.user.hasError) {
...@@ -184,6 +195,7 @@ class BtnStatus extends Component { ...@@ -184,6 +195,7 @@ class BtnStatus extends Component {
} }
}) })
} }
close = () => { close = () => {
this.setState({ this.setState({
isShowOverlay: false, isShowOverlay: false,
...@@ -206,7 +218,14 @@ class BtnStatus extends Component { ...@@ -206,7 +218,14 @@ class BtnStatus extends Component {
http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => { http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
const {data, code, msg} = res.data; const {data, code, msg} = res.data;
if (code === 200) { if (code === 200) {
// user_status 用户状态 1-关注公众号，2-绑定手机号 3-再砍一刀 （是发起人没有这个字段）
if(data.user_status === 2) {
this.setState({
bindPhone: true
})
}else {
history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`) history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`)
}
} else { } else {
Toast.info(msg, 2) Toast.info(msg, 2)
} }
...@@ -224,7 +243,6 @@ class BtnStatus extends Component { ...@@ -224,7 +243,6 @@ class BtnStatus extends Component {
} }
} }
//获取砍价信息 //获取砍价信息
getBargainInfo = () => { getBargainInfo = () => {
const {user} = this.props const {user} = this.props
...@@ -278,13 +296,58 @@ class BtnStatus extends Component { ...@@ -278,13 +296,58 @@ class BtnStatus extends Component {
} }
} }
// 隐藏弹窗
handleToHide = (key) => {
console.log(key);
this.setState({
[key]: false
});
}
// 绑定手机号 -- 确认
confirmBindPhone = (params, bindInfo) => {
this.setState({
bindPhone: false,
bindConfrm: true,
formInfo: params,
bindInfo
});
}
render() { render() {
// data 课程信息；barInfo 砍价信息 // data 课程信息；barInfo 砍价信息
const { user = {}, toCart } = this.props; const { user = {}, toCart, country } = this.props;
const { countdown ,barInfo, courseInfo: info = {}} = this.state; const {
countdown,
barInfo,
courseInfo: info = {},
bindPhone,
bindConfrm,
bindInfo,
formInfo,
} = this.state;
const uid = user.data && user.data.uid; const uid = user.data && user.data.uid;
return ( return (
<div> <div>
{/* 绑定手机号 */}
<Mask visible={bindPhone} handleToHide={() => this.handleToHide('bindPhone')}>
<BindPhone
country={country}
handleToBargain={this.toKanjia}
confirmBindPhone={this.confirmBindPhone}
/>
</Mask>
{/* 绑定手机号--确认 */}
<Mask visible={bindConfrm} handleToHide={() => this.handleToHide('bindConfrm')}>
<BargainConfirmBind
data={formInfo}
bindInfo={bindInfo}
handleToHide={() => this.handleToHide('bindConfrm')}
handleToBargain={this.toKanjia}
/>
</Mask>
{/*正常购买*/} {/*正常购买*/}
{ {
info.is_baoming === 0 && info.group_status !== 3 && info.is_baoming === 0 && info.group_status !== 3 &&
...@@ -320,8 +383,6 @@ class BtnStatus extends Component { ...@@ -320,8 +383,6 @@ class BtnStatus extends Component {
</div> </div>
} }
{/*已购买*/} {/*已购买*/}
{ {
info.is_baoming === 1 && info.is_baoming === 1 &&
......
src/components/detail/index.js
...@@ -451,7 +451,6 @@ class Detail extends Component { ...@@ -451,7 +451,6 @@ class Detail extends Component {
this.fetchCourseInfo(); this.fetchCourseInfo();
} else { } else {
history.replace('/shopcart'); history.replace('/shopcart');
ß
} }
} else if (res.data.code === 15001) { } else if (res.data.code === 15001) {
history.replace('/shopcart'); history.replace('/shopcart');
...@@ -490,7 +489,6 @@ class Detail extends Component { ...@@ -490,7 +489,6 @@ class Detail extends Component {
singleType: 1 singleType: 1
}) })
this.props.history.push(`/detail?id=${getParam('id')}`); this.props.history.push(`/detail?id=${getParam('id')}`);
} }
render() { render() {
...@@ -740,6 +738,7 @@ class Detail extends Component { ...@@ -740,6 +738,7 @@ class Detail extends Component {
{ {
course_info && course_info &&
<BtnStatus <BtnStatus
country={this.props.country}
countdown={countdown} countdown={countdown}
data={course_info} data={course_info}
user={this.props.user} user={this.props.user}
......
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