Skip to content

M
mr-julyedu
Commit b7a878ef by zhanghaozhe
Options

领取页

parent 2dba5b4d
Showing with 290 additions and 47 deletions
src/components/activity/give-courses/assistance/assistance.scss
...@@ -125,6 +125,9 @@ ...@@ -125,6 +125,9 @@
z-index: 999; z-index: 999;
color: #15006A; color: #15006A;
@include px2px(font-size, 20); @include px2px(font-size, 20);
-webkit-appearance: none;
outline: 0;
border: none;
} }
} }
...@@ -261,8 +264,11 @@ ...@@ -261,8 +264,11 @@
} }
.course-wrap { .course-wrap {
padding: 0 10px;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: space-between;
flex-flow: wrap;
li { li {
display: inline-block; display: inline-block;
width: px2rem(160); width: px2rem(160);
...@@ -355,10 +361,9 @@ ...@@ -355,10 +361,9 @@
.text1 { .text1 {
color: $color_333; color: $color_333;
@include px2px(font-size, 36); @include px2px(font-size, 36);
margin: 0 auto;
text-align: center; text-align: center;
margin-bottom: 20px; margin: 15px auto 20px;
margin-top: 15px; padding: 0 10px;
} }
.text2 { .text2 {
...@@ -457,4 +462,8 @@ ...@@ -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' ...@@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom'
import './assistance.scss' import './assistance.scss'
import { Base64 } from "js-base64" import { Base64 } from "js-base64"
import { connect } from 'react-redux' import { connect } from 'react-redux'
import Swiper from 'swiper'
function showToast(text) { function showToast(text) {
Toast.info(text, 2, null, false) Toast.info(text, 2, null, false)
...@@ -16,6 +16,10 @@ function showToast(text) { ...@@ -16,6 +16,10 @@ function showToast(text) {
})) }))
class GiveCourseAssistance extends Component { class GiveCourseAssistance extends Component {
scrollContainer = null
cloned = false
animationId = 0
state = { state = {
allCourse: [], allCourse: [],
activeName: '', activeName: '',
...@@ -29,18 +33,32 @@ class GiveCourseAssistance extends Component { ...@@ -29,18 +33,32 @@ class GiveCourseAssistance extends Component {
getBtnStatus: '1', getBtnStatus: '1',
disabled: false, disabled: false,
successOneStatus: 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() { componentDidMount() {
this.giveDetail() this.giveDetail()
this.assistantScroll() this.assistantScroll()
this.requestHeadItems()
let baseCode = decodeURIComponent(Base64.decode(this.state.code)).split(',') let baseCode = decodeURIComponent(Base64.decode(this.state.code)).split(',')
this.setState({ this.setState({
getBtnStatus: this.props.user.data.uid === baseCode[0] ? '2' : '1' getBtnStatus: this.props.user.data.uid === baseCode[0] ? '2' : '1'
}) })
} }
componentWillUnmount() {
window.cancelAnimationFrame(this.animationId)
}
giveDetail = () => { giveDetail = () => {
http.get(`${API["base-api"]}/assistance/detail`) http.get(`${API["base-api"]}/assistance/detail`)
...@@ -69,7 +87,7 @@ class GiveCourseAssistance extends Component { ...@@ -69,7 +87,7 @@ class GiveCourseAssistance extends Component {
assistItems: data.assistants, assistItems: data.assistants,
name: data.invitation_user_nickname, name: data.invitation_user_nickname,
courseImg: data.course_image_name courseImg: data.course_image_name
}) }, this.displayScrollArea)
} else { } else {
showToast(msg) showToast(msg)
...@@ -107,6 +125,59 @@ class GiveCourseAssistance extends Component { ...@@ -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() { render() {
const { const {
isAwards, isAwards,
...@@ -114,28 +185,40 @@ class GiveCourseAssistance extends Component { ...@@ -114,28 +185,40 @@ class GiveCourseAssistance extends Component {
activeName, activeName,
name, name,
getBtnStatus, getBtnStatus,
disabled disabled,
count,
allCourse,
successOneStatus,
errorStatus,
activeStatus,
friendStatus,
assistItems,
scrollStyle,
headItems
} = this.state } = this.state
const {history} = this.props const {history} = this.props
return ( return (
<div id='assistance'> <div id='assistance'>
{/*<div className="barrage-wrapper"> {<div className="barrage-wrapper">
<!--headItems--> <ul className="barrage-list swiper-wrapper">
<ul className="barrage-list"> {
<vue-seamless data="headItems" class-option="classOption" class="warp"> 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>
</div>
<div className="title">{item["word"]}</div>
</li>
)
})
}
<li v-for="(item, index) in headItems"> </ul>
<div className="person-left">
<img className="avatar" src="item.head_img" alt=""/>
<span className="name">{item.nickname}</span>
</div>
<div className="title">{item.word}</div>
</li>
</vue-seamless>
</ul>
</div>*/} </div>}
<div className="bg-image" style={{backgroundImage: `url(${courseImg})`}}> <div className="bg-image" style={{backgroundImage: `url(${courseImg})`}}>
{ {
...@@ -168,8 +251,159 @@ class GiveCourseAssistance extends Component { ...@@ -168,8 +251,159 @@ class GiveCourseAssistance extends Component {
} }
</div> </div>
<p className="person-tolearn">领取的课程可前往七月在线APP或官网学习</p> <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> </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> </div>
) )
} }
......
src/components/activity/give-courses/index.js
...@@ -29,14 +29,14 @@ class GiveCourses extends Component { ...@@ -29,14 +29,14 @@ class GiveCourses extends Component {
if (errno === 200) { if (errno === 200) {
this.setState({ this.setState({
banner: data.active_info.m_banner, banner: data["active_info"]["m_banner"],
courses: data.course_info, courses: data.course_info,
rule: data.active_info.rule, rule: data["active_info"]["rule"],
awardstext: data.active_info.awards_text.split('\n\n'), awardstext: data["active_info"]["awards_text"].split('\n\n'),
query: data.active_info.activity_name query: data["active_info"]["activity_name"]
}) })
this.isRouter(data.active_info.activity_name) this.isRouter(data["active_info"]["activity_name"])
} else { } else {
showToast(msg) showToast(msg)
...@@ -44,9 +44,9 @@ class GiveCourses extends Component { ...@@ -44,9 +44,9 @@ class GiveCourses extends Component {
}) })
this.getRankList() this.getRankList()
this.getMarqueeList(); this.getMarqueeList()
setInterval(this.showMarquee, 5000); setInterval(this.showMarquee, 5000)
setInterval(this.getMarqueeList, 60000); setInterval(this.getMarqueeList, 60000)
} }
getRankList = () => { getRankList = () => {
...@@ -61,8 +61,8 @@ class GiveCourses extends Component { ...@@ -61,8 +61,8 @@ class GiveCourses extends Component {
second: data.list[1], second: data.list[1],
third: data.list[2], third: data.list[2],
other: data.list.slice(3, 50), other: data.list.slice(3, 50),
isMyList: data.nickname, isMyList: data["nickname"],
myList: data.nickname && data myList: data["nickname"] && data
} }
}) })
} else { } else {
...@@ -102,7 +102,7 @@ class GiveCourses extends Component { ...@@ -102,7 +102,7 @@ class GiveCourses extends Component {
} }
isRouter = param => { isRouter = param => {
if(decodeURIComponent(getParam('activename')) != param){ if (decodeURIComponent(getParam('activename')) != param) {
this.props.history.push('/') this.props.history.push('/')
} }
} }
...@@ -136,8 +136,8 @@ class GiveCourses extends Component { ...@@ -136,8 +136,8 @@ class GiveCourses extends Component {
<li className='course-title'> <li className='course-title'>
<a href="javascript:">{course.course_title}</a> <a href="javascript:">{course.course_title}</a>
</li> </li>
<li className='course-teacher'><span className='tag'>讲师</span>{course.teachers}</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-time'><span className='tag'>开课时间</span>{course["start_time"]}</li>
<li className='toreceive' onClick={() => { <li className='toreceive' onClick={() => {
this.setState({isShow: true}) this.setState({isShow: true})
}}>免费领取课程 }}>免费领取课程
...@@ -158,8 +158,8 @@ class GiveCourses extends Component { ...@@ -158,8 +158,8 @@ class GiveCourses extends Component {
return ( return (
<li key={index}> <li key={index}>
<img src={item.head_img} alt=""/> <img src={item.head_img} alt=""/>
<span>{item.nickname}</span> <span>{item["nickname"]}</span>
{item.word} {item["word"]}
</li> </li>
) )
}) })
...@@ -201,8 +201,8 @@ class GiveCourses extends Component { ...@@ -201,8 +201,8 @@ class GiveCourses extends Component {
? ?
<tr> <tr>
<td><img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jin1_icon.png" alt=""/></td> <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><img src={rankList.first.head_img} alt=""/><span>{rankList.first.name}</span></td>
<td>{ranklist.first.num}</td> <td>{rankList.first.num}</td>
</tr> </tr>
: null : null
} }
...@@ -212,8 +212,8 @@ class GiveCourses extends Component { ...@@ -212,8 +212,8 @@ class GiveCourses extends Component {
? ?
<tr> <tr>
<td><img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/yin2_icon.png" alt=""/></td> <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><img src={rankList.second.head_img} alt=""/><span>{rankList.second.name}</span></td>
<td>{ranklist.second.num}</td> <td>{rankList.second.num}</td>
</tr> </tr>
: null : null
} }
...@@ -223,8 +223,8 @@ class GiveCourses extends Component { ...@@ -223,8 +223,8 @@ class GiveCourses extends Component {
? ?
<tr> <tr>
<td><img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/tong_icon.png" alt=""/></td> <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><img src={rankList.third.head_img} alt=""/><span>{rankList.third.name}</span></td>
<td>{ranklist.third.num}</td> <td>{rankList.third.num}</td>
</tr> </tr>
: null : null
} }
...@@ -245,15 +245,15 @@ class GiveCourses extends Component { ...@@ -245,15 +245,15 @@ class GiveCourses extends Component {
{ {
rankList.isMyList && rankList.isMyList &&
<tr className="ismylist"> <tr className="ismylist">
<td>{rankList.myList.ranking}</td> <td>{rankList.myList["ranking"]}</td>
<td><img src={rankList.myList.head_img} alt=""/><span>{rankList.myList.nickname}</span></td> <td><img src={rankList.myList.head_img} alt=""/><span>{rankList.myList["nickname"]}</span></td>
<td>{rankList.myList.inviter_num}</td> <td>{rankList.myList["inviter_num"]}</td>
</tr> </tr>
} }
</tbody> </tbody>
</table> </table>
<p className="btm"></p> <p className="btm"/>
</div> </div>
<p className="julynotice">*本活动最终解释权归七月在线所有*</p> <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