Skip to content

M
mr-julyedu
Commit b7a878ef by zhanghaozhe
Options

领取页

parent 2dba5b4d
Showing with 287 additions and 44 deletions
src/components/activity/give-courses/assistance/assistance.scss
......@@ -125,6 +125,9 @@
z-index: 999;
color: #15006A;
@include px2px(font-size, 20);
-webkit-appearance: none;
outline: 0;
border: none;
}
}
......@@ -261,8 +264,11 @@
}
.course-wrap {
padding: 0 10px;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-flow: wrap;
li {
display: inline-block;
width: px2rem(160);
......@@ -355,10 +361,9 @@
.text1 {
color: $color_333;
@include px2px(font-size, 36);
margin: 0 auto;
text-align: center;
margin-bottom: 20px;
margin-top: 15px;
margin: 15px auto 20px;
padding: 0 10px;
}
.text2 {
......@@ -457,4 +462,8 @@
}
.iconfont{
font-size: 30px;
}
}
src/components/activity/give-courses/assistance/index.js
......@@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom'
import './assistance.scss'
import { Base64 } from "js-base64"
import { connect } from 'react-redux'
import Swiper from 'swiper'
function showToast(text) {
Toast.info(text, 2, null, false)
......@@ -16,6 +16,10 @@ function showToast(text) {
}))
class GiveCourseAssistance extends Component {
scrollContainer = null
cloned = false
animationId = 0
state = {
allCourse: [],
activeName: '',
......@@ -29,18 +33,32 @@ class GiveCourseAssistance extends Component {
getBtnStatus: '1',
disabled: false,
successOneStatus: false,
errorStatus: false
errorStatus: false,
activeStatus: false,
friendStatus: false,
posY: 0,
scrollStyle: {
transform: `translateY(${0}px)`,
transition: 'all linear 0ms',
overflow: 'hidden'
},
headItems: []
}
componentDidMount() {
this.giveDetail()
this.assistantScroll()
this.requestHeadItems()
let baseCode = decodeURIComponent(Base64.decode(this.state.code)).split(',')
this.setState({
getBtnStatus: this.props.user.data.uid === baseCode[0] ? '2' : '1'
})
}
componentWillUnmount() {
window.cancelAnimationFrame(this.animationId)
}
giveDetail = () => {
http.get(`${API["base-api"]}/assistance/detail`)
......@@ -69,7 +87,7 @@ class GiveCourseAssistance extends Component {
assistItems: data.assistants,
name: data.invitation_user_nickname,
courseImg: data.course_image_name
})
}, this.displayScrollArea)
} else {
showToast(msg)
......@@ -107,6 +125,59 @@ class GiveCourseAssistance extends Component {
}
}
toGetDetail = courseId => {
}
displayScrollArea = () => {
let {
assistItems: list,
posY
} = this.state
if (list.length < 3) return
if (!this.cloned) {
const cloneNode = this.scrollContainer.firstChild.firstChild.cloneNode(true)
this.scrollContainer.firstChild.appendChild(cloneNode)
this.cloned = true
}
const h = this.scrollContainer.firstChild.offsetHeight / 2
if (Math.abs(posY) >= h) posY = 0
posY -= 0.5
this.setState({
posY,
scrollStyle: {
transform: `translateY(${posY}px)`,
transition: 'all linear 0ms',
overflow: 'hidden'
}
})
this.animationId = window.requestAnimationFrame(this.displayScrollArea)
}
requestHeadItems = () => {
http.get(`${API["base-api"]}/assistance/roll_tip`)
.then(res => {
const {errno, data, msg} = res.data
if (errno === 200) {
this.setState({
headItems: data
}, this.setupHeadItemsSwiper)
} else {
showToast(msg)
}
})
}
setupHeadItemsSwiper = () => {
new Swiper('.barrage-wrapper', {
autoplay: {
reverseDirection: true
},
direction: 'vertical',
loop: true
})
}
render() {
const {
isAwards,
......@@ -114,28 +185,40 @@ class GiveCourseAssistance extends Component {
activeName,
name,
getBtnStatus,
disabled
disabled,
count,
allCourse,
successOneStatus,
errorStatus,
activeStatus,
friendStatus,
assistItems,
scrollStyle,
headItems
} = this.state
const {history} = this.props
return (
<div id='assistance'>
{/*<div className="barrage-wrapper">
<!--headItems-->
<ul className="barrage-list">
<vue-seamless data="headItems" class-option="classOption" class="warp">
<li v-for="(item, index) in headItems">
{<div className="barrage-wrapper">
<ul className="barrage-list swiper-wrapper">
{
headItems.map((item, index) => {
return (
<li key={index} className={'swiper-slide'}>
<div className="person-left">
<img className="avatar" src="item.head_img" alt=""/>
<span className="name">{item.nickname}</span>
<img className="avatar" src={item.head_img} alt=""/>
<span className="name">{item["nickname"]}</span>
</div>
<div className="title">{item.word}</div>
<div className="title">{item["word"]}</div>
</li>
</vue-seamless>
)
})
}
</ul>
</div>*/}
</div>}
<div className="bg-image" style={{backgroundImage: `url(${courseImg})`}}>
{
......@@ -168,8 +251,159 @@ class GiveCourseAssistance extends Component {
}
</div>
<p className="person-tolearn">领取的课程可前往七月在线APP或官网学习</p>
<div className="person-getwarp">
<div className="person-get">
已有
<span>{count}</span>
人通过助力领取课程
</div>
{
assistItems.length ?
<div className='scroll-container person-list' ref={el => this.scrollContainer = el}>
<div className="wrapper" style={scrollStyle}>
<ul>
{
assistItems.map(item => {
return (
<li key={item["assistant_uid"]}>
<div className="person-left">
<img className="avatar" src={item["avatar_file"]} alt=""/>
<span className="name">{item.user_name}</span>
</div>
<div className="person-right">
<span className="time">{item["add_time"]}前领取成功</span>
</div>
</li>
)
})
}
</ul>
</div>
</div>
:
<p className="person-null">目前暂无邀请</p>
}
<div className="btn-morewap">
<button type="button" className="btn-more" onClick={() => {
this.setState({activeStatus: true})
}}>参与活动领更多课时
</button>
</div>
<p className="more-title">参与活动可免费领取以下课程</p>
<ul className="course-wrap">
{
allCourse.map((item) => {
return (
<li key={item.course_id} onClick={this.toGetDetail.bind(this, item.course_id)}>
<img src={item.image_name} alt=""/>
</li>
)
})
}
</ul>
</div>
</div>
{
successOneStatus &&
<div className="module-dialog">
<div className="box-mask">
<div className="box-container">
<div className="box-content">
<div className="box-title">
<i className="iconfont icon-chenggong icon-right"/>
领取成功
</div>
<div className="box-text">
<p className="text1">恭喜您获得第一课的免费学习权限</p>
</div>
</div>
<div className="box-bottom">
<button type="button" className="activeallcourse" onClick={() => {
this.setState({activeStatus: true, successOneStatus: false})
}}>进入服务号领取全部课时
</button>
</div>
</div>
</div>
</div>
}
{
errorStatus &&
<div className="module-dialog">
<div className="box-mask">
<div className="box-container">
<div className="box-content">
<div className="box-title" style={{color: `#f00`}}>
领取失败
</div>
<div className="box-text">
<p className="text1">只能免费领取1次，想获得更多课时快去参与活动吧！</p>
</div>
</div>
<div className="box-bottom">
<button type="button" className="activeallcourse" onClick={() => {
this.setState({errorStatus: false, friendStatus: true})
}}>确定
</button>
</div>
</div>
</div>
</div>
}
{
activeStatus &&
<div className="module-dialog">
<div className="box-mask">
<div className="box-container">
<div className="box-content">
<div className="box-title">
<p className="text1">进入服务号回复<i>77</i>免费领取课程</p>
</div>
<div className="box-bottom1">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg" alt=""/>
<p>长按扫码进入服务号</p>
</div>
</div>
<div className="box-close" onClick={() => {
this.setState({activeStatus: false})
}}>
<i className="iconfont iconiconfront-2"/>
</div>
</div>
</div>
</div>
}
{
friendStatus &&
<div className="module-dialog">
<div className="box-mask">
<div className="box-container">
<div className="box-content">
<div className="box-title">
<p className="text1">进入服务号回复<i>77</i>免费领取课程</p>
</div>
<div className="box-bottom1">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg" alt=""/>
<p>长按扫码进入服务号</p>
</div>
</div>
<div className="box-close" onClick={() => {
this.setState({friendStatus: false})
}}>
<i className="iconfont iconiconfront-2"/>
</div>
</div>
</div>
</div>
}
</div>
)
}
......
src/components/activity/give-courses/index.js
......@@ -29,14 +29,14 @@ class GiveCourses extends Component {
if (errno === 200) {
this.setState({
banner: data.active_info.m_banner,
banner: data["active_info"]["m_banner"],
courses: data.course_info,
rule: data.active_info.rule,
awardstext: data.active_info.awards_text.split('\n\n'),
query: data.active_info.activity_name
rule: data["active_info"]["rule"],
awardstext: data["active_info"]["awards_text"].split('\n\n'),
query: data["active_info"]["activity_name"]
})
this.isRouter(data.active_info.activity_name)
this.isRouter(data["active_info"]["activity_name"])
} else {
showToast(msg)
......@@ -44,9 +44,9 @@ class GiveCourses extends Component {
})
this.getRankList()
this.getMarqueeList();
setInterval(this.showMarquee, 5000);
setInterval(this.getMarqueeList, 60000);
this.getMarqueeList()
setInterval(this.showMarquee, 5000)
setInterval(this.getMarqueeList, 60000)
}
getRankList = () => {
......@@ -61,8 +61,8 @@ class GiveCourses extends Component {
second: data.list[1],
third: data.list[2],
other: data.list.slice(3, 50),
isMyList: data.nickname,
myList: data.nickname && data
isMyList: data["nickname"],
myList: data["nickname"] && data
}
})
} else {
......@@ -102,7 +102,7 @@ class GiveCourses extends Component {
}
isRouter = param => {
if(decodeURIComponent(getParam('activename')) != param){
if (decodeURIComponent(getParam('activename')) != param) {
this.props.history.push('/')
}
}
......@@ -136,8 +136,8 @@ class GiveCourses extends Component {
<li className='course-title'>
<a href="javascript:">{course.course_title}</a>
</li>
<li className='course-teacher'><span className='tag'>讲师</span>{course.teachers}</li>
<li className='course-time'><span className='tag'>开课时间</span>{course.start_time}</li>
<li className='course-teacher'><span className='tag'>讲师</span>{course["teachers"]}</li>
<li className='course-time'><span className='tag'>开课时间</span>{course["start_time"]}</li>
<li className='toreceive' onClick={() => {
this.setState({isShow: true})
}}>免费领取课程
......@@ -158,8 +158,8 @@ class GiveCourses extends Component {
return (
<li key={index}>
<img src={item.head_img} alt=""/>
<span>{item.nickname}</span>
{item.word}
<span>{item["nickname"]}</span>
{item["word"]}
</li>
)
})
......@@ -201,8 +201,8 @@ class GiveCourses extends Component {
?
<tr>
<td><img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jin1_icon.png" alt=""/></td>
<td><img src={ranklist.first.head_img} alt=""/><span>{ranklist.first.name}</span></td>
<td>{ranklist.first.num}</td>
<td><img src={rankList.first.head_img} alt=""/><span>{rankList.first.name}</span></td>
<td>{rankList.first.num}</td>
</tr>
: null
}
......@@ -212,8 +212,8 @@ class GiveCourses extends Component {
?
<tr>
<td><img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/yin2_icon.png" alt=""/></td>
<td><img src={ranklist.second.head_img} alt=""/><span>{ranklist.second.name}</span></td>
<td>{ranklist.second.num}</td>
<td><img src={rankList.second.head_img} alt=""/><span>{rankList.second.name}</span></td>
<td>{rankList.second.num}</td>
</tr>
: null
}
......@@ -223,8 +223,8 @@ class GiveCourses extends Component {
?
<tr>
<td><img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/tong_icon.png" alt=""/></td>
<td><img src={ranklist.third.head_img} alt=""/><span>{ranklist.third.name}</span></td>
<td>{ranklist.third.num}</td>
<td><img src={rankList.third.head_img} alt=""/><span>{rankList.third.name}</span></td>
<td>{rankList.third.num}</td>
</tr>
: null
}
......@@ -245,15 +245,15 @@ class GiveCourses extends Component {
{
rankList.isMyList &&
<tr className="ismylist">
<td>{rankList.myList.ranking}</td>
<td><img src={rankList.myList.head_img} alt=""/><span>{rankList.myList.nickname}</span></td>
<td>{rankList.myList.inviter_num}</td>
<td>{rankList.myList["ranking"]}</td>
<td><img src={rankList.myList.head_img} alt=""/><span>{rankList.myList["nickname"]}</span></td>
<td>{rankList.myList["inviter_num"]}</td>
</tr>
}
</tbody>
</table>
<p className="btm"></p>
<p className="btm"/>
</div>
<p className="julynotice">*本活动最终解释权归七月在线所有*</p>
......
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