Skip to content

M
mr-julyedu
Commit d9ea8732 by zhanghaozhe
Options

增一得一活动页

parent d5d8b805
Showing with 841 additions and 212 deletions
src/components/activity/give-courses/give-courses.scss 0 → 100644
#give-courses {
@mixin px2px($name, $px) {
#{$name}: round($px / 2) * 1px;
}
@function px2rem($px) {
@return #{$px}px
}
background: #3d1aaf;
padding-bottom: px2rem(45);
.banner {
width: 100%;
height: 187.5px;
img {
width: 100%;
height: 100%;
}
}
.give-box {
background-color: #1c008c;
box-shadow: 0 0 4px 0 #1c008c;
margin: px2rem(10);
padding: px2rem(10) px2rem(5) 0 px2rem(5);
.give-course {
width: 100%;
height: px2rem(125);
background-color: #fff;
border-radius: 2px;
margin-bottom: px2rem(10);
padding: px2rem(8) px2rem(5);
display: flex;
justify-content: space-between;
.give-course-img {
width: px2rem(150);
height: px2rem(108);
img {
width: 100%;
height: 100%;
}
}
.give-course-mess {
width: px2rem(178);
height: px2rem(108);
margin-left: px2rem(7);
position: relative;
text-align: left;
.course-title a {
color: #353535;
@include px2px(font-size, 26);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.course-teacher {
@include px2px(font-size, 24);
color: #666;
margin-top: px2rem(12);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.course-time {
@include px2px(font-size, 24);
color: #666;
margin-top: px2rem(7);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tag {
display: inline-block;
color: #555;
background-color: #f2f2f2;
margin-right: px2rem(4);
padding: px2rem(2) px2rem(4);
}
.toreceive {
width: px2rem(93);
height: px2rem(24);
@include px2px(font-size, 24);
color: #fff;
background-color: #09f;
border-radius: 4px;
line-height: px2rem(24);
text-align: center;
position: absolute;
bottom: 0;
}
}
}
.rule-title {
color: #2ff8ff;
@include px2px(font-size, 32);
text-align: left;
padding-left: px2rem(5);
}
.rule-list {
text-align: left;
color: #fff;
@include px2px(font-size, 24);
padding-left: px2rem(5);
}
.marquee_box {
width: px2rem(355);
height: px2rem(30);
overflow: hidden;
background-color: rgba(0, 0, 0, .5);
margin-left: px2rem(-5);
margin-top: px2rem(15);
.marquee_list {
li {
color: #fff;
height: px2rem(30);
line-height: px2rem(30);
@include px2px(font-size, 24);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
img {
width: px2rem(18);
height: px2rem(18);
vertical-align: middle;
border-radius: 50%;
}
span {
color: #0099ff;
display: inline-block;
margin: 0 5px;
}
}
}
.marquee_top {
transition: all .5s;
margin-top: -30px;
}
}
}
.set-prize {
background-color: #FCECB1;
border-radius: px2rem(3);
margin: px2rem(20) px2rem(10) 0 px2rem(10);
padding: px2rem(18) px2rem(15) px2rem(20) px2rem(15);
.set-prize-title {
width: 100%;
text-align: center;
color: #F75E18;
@include px2px(font-size, 28);
img {
width: px2rem(19);
height: px2rem(19);
margin-right: px2rem(10);
vertical-align: sub;
}
}
.set-prize-content {
text-align: left;
color: #6E1517;
@include px2px(font-size, 24);
display: flex;
flex-wrap: wrap;
p {
margin-top: px2rem(12);
}
}
}
.ranking-list {
margin: px2rem(30) px2rem(10) 0 px2rem(10);
.ranking_title {
width: 100%;
text-align: center;
img {
width: px2rem(18);
height: px2rem(20);
vertical-align: text-bottom;
}
span {
color: #fff;
@include px2px(font-size, 28);
display: inline-block;
margin-left: px2rem(10);
}
p {
color: #fee600;
@include px2px(font-size, 24);
margin-top: 10px;
}
}
table {
text-align: center;
margin-top: px2rem(15);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
width: 100%;
border-radius: 6px 6px 0 0;
overflow: hidden;
thead tr {
background-color: #fadc7f;
height: px2rem(30);
@include px2px(font-size, 26);
color: #ad4700;
}
tbody tr:nth-of-type(even) {
background-color: #fadc7f;
height: px2rem(35);
}
tbody tr:nth-of-type(odd) {
background-color: #ffe794;
height: px2rem(35);
}
tbody tr {
color: #333;
@include px2px(font-size, 24);
}
tbody tr td {
width: 30%;
}
tbody tr td:nth-child(2) {
text-align: left;
padding-left: px2rem(15);
}
tbody tr td:nth-child(2) span {
display: inline-block;
width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
top: 5px;
margin-left: px2rem(5);
}
tbody tr td:nth-child(1) img {
vertical-align: middle;
width: px2rem(18);
height: px2rem(22);
}
tbody tr td:nth-child(2) img {
width: px2rem(20);
height: px2rem(20);
vertical-align: middle;
border-radius: 50%;
}
tbody .ismylist td{
background-color: #ad4700;
color: #fff;
}
}
.btm {
width: 100%;
height: px2rem(10);
background-color: #ffe794;
border-radius: 0 0 6px 6px;
}
}
.julynotice {
margin: px2rem(60) auto px2rem(30) auto;
color: #FEE600;
@include px2px(font-size, 13);
text-align: center;
}
.code-mbc {
position: fixed;
left: 0;
width: 100%;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 9;
text-align: center;
.code-box {
width: 80%;
background-color: #fff;
border-radius: px2rem(10);
text-align: center;
margin: px2rem(200) auto 0 auto;
padding-top: px2rem(15);
.code-title {
color: #333;
@include px2px(font-size, 36);
i {
color: #f00;
@include px2px(font-size, 36);
font-style: normal;
}
}
#qrCodeWpay {
width: px2rem(150);
height: px2rem(150);
margin: px2rem(10) auto 0 auto;
}
.btmmess {
color: #666;
padding-bottom: px2rem(15);
margin-top: px2rem(-5);
}
}
.close {
display: inline-block;
@include px2px(font-size, 60);
color: #fff;
margin-top: px2rem(20);
}
}
}
src/components/activity/give-courses/index.js 0 → 100644
import React, { Component } from 'react'
import './give-courses.scss'
import { http } from "@/utils"
import { Toast } from "antd-mobile"
import { Link } from "react-router-dom"
function showToast(text) {
Toast.info(text, 2, null, false)
}
class GiveCourses extends Component {
state = {
banner: '',
courses: [],
rule: '',
awardstext: '',
rankList: {},
isShow: false,
animate: false,
marqueeList: []
}
componentDidMount() {
http.get(`${API["base-api"]}/assistance/detail`)
.then(res => {
const {data, errno, msg} = res.data
if (errno === 200) {
this.setState({
banner: data.active_info.m_banner,
courses: data.course_info,
rule: data.active_info.rule,
awardstext: data.active_info.awards_text.split('\n\n')
})
} else {
showToast(msg)
}
})
this.getRankList()
this.getMarqueeList();
setInterval(this.showMarquee, 5000);
setInterval(this.getMarqueeList, 60000);
}
getRankList = () => {
http.get(`${API["base-api"]}/assistance/ranking_list/50`)
.then(res => {
const {data, errno, msg} = res.data
if (errno === 200) {
this.setState({
rankList: {
list: data.list,
first: data.list[0],
second: data.list[1],
third: data.list[2],
other: data.list.slice(3, 50),
isMyList: data.nickname,
myList: data.nickname && data
}
})
} else {
showToast(msg)
}
})
}
getCourse = id => {
}
getMarqueeList = () => {
http.get(`${API["base-api"]}/assistance/roll_tip`)
.then(res => {
const {errno, msg, data} = res.data
if (errno === 200) {
this.setState({
marqueeList: data
})
} else {
showToast(msg)
}
})
}
showMarquee = () => {
this.setState({
animate: true
}, () => {
setTimeout(() => {
const [first, second] = this.state.marqueeList
this.setState({
animate: false,
marqueeList: [second, first]
})
}, 500)
})
}
render() {
const {
banner,
courses,
rule,
awardstext,
rankList,
isShow,
animate,
marqueeList
} = this.state
return (
<div id={'give-courses'}>
<div className="banner">
<img src={banner} alt=""/>
</div>
<div className='give-box'>
{
courses.map(course => {
return (
<div className='give-course'>
<Link className='give-course-img' to={`/detail?id=${course.course_id}`}>
<img src={course.image_name} alt=""/>
</Link>
<ul className="give-course-mess">
<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='toreceive' onClick={() => {
this.setState({isShow: true})
}}>免费领取课程
</li>
</ul>
</div>
)
})
}
<p className="rule-title">活动规则</p>
<div className="rule-list" dangerouslySetInnerHTML={{__html: rule}}/>
<div className="marquee_box">
<ul className={`marquee_list ${animate ? 'marquee_top' : ''}`}>
{
marqueeList.length ?
marqueeList.map((item, index) => {
return (
<li key={index}>
<img src={item.head_img} alt/>
<span>{item.nickname}</span>
{item.word}
</li>
)
})
: null
}
</ul>
</div>
</div>
<div class="set-prize">
<p class="set-prize-title">
<img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jpsz_icon.png"
alt=""/>奖品设置
</p>
<div class="set-prize-content">
{
awardstext && awardstext.length && awardstext.map((item, index) => <p key={index}>{item}</p>)
}
</div>
</div>
<div class="ranking-list">
<div class="ranking_title">
<img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jbei_icon.png" alt/>
<span>排行榜</span>
<p>数据实时更新 只显示Top50</p>
</div>
<table border="0" cellPadding="0" cellSpacing="0">
<thead>
<tr>
<td>排名</td>
<td>用户</td>
<td>邀请人数</td>
</tr>
</thead>
<tbody>
{
rankList.list && rankList.list.length > 0
?
<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>
</tr>
: null
}
{
rankList.list && rankList.list.length > 1
?
<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>
</tr>
: null
}
{
rankList.list && rankList.list.length > 2
?
<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>
</tr>
: null
}
{
rankList.list && rankList.list.length && rankList.list.length > 3 ? rankList.other.map((item, index) => {
return (
<tr key='index'>
<td>{index + 4}</td>
<td><img src={item.head_img} alt=""/><span>{item.name}</span></td>
<td>{item.num}</td>
</tr>
)
})
: null
}
{
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>
</tr>
}
</tbody>
</table>
<p class="btm"></p>
</div>
<p className="julynotice">*本活动最终解释权归七月在线所有*</p>
{
isShow &&
<div className="code-mbc">
<div className="code-box">
<p className="code-title">进入服务号回复<i>77</i>免费领取课程</p>
<img id="qrCodeWpay" src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg" alt=""/>
<p className="btmmess">长按扫码进入服务号</p>
</div>
<i className="close iconfont iconiconfront-2" onClick={() => {
this.setState({isShow: false})
}}/>
</div>
}
</div>
)
}
}
export default GiveCourses
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