Skip to content

M
mr-julyedu
Commit dece6848 by FE
Options

Merge branch '00' of gitlab.julyedu.com:baiguangyao/mr-julyedu into 00

parents cb976119 85f93209
Showing with 191 additions and 38 deletions
src/components/activity/newyear-2019/preheat/YearCourse/index.js
...@@ -3,12 +3,14 @@ import './index.scss' ...@@ -3,12 +3,14 @@ import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils' import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../../common/commonContainer/index' import CommonContainer from './../../common/commonContainer/index'
import CourseItem from '../../../../blessingPreheat/courseItem/index' import CourseItem from '../../../../blessingPreheat/courseItem/index'
import {Link, withRouter} from "react-router-dom" import {withRouter} from "react-router-dom"
import CommonPopup from './../../common/commonPopup/index'
class YarnCourse extends Component { class YearCourse extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
tofreeStudy: false,
basic: { basic: {
course: [], course: [],
courseList: [], courseList: [],
...@@ -197,9 +199,19 @@ class YarnCourse extends Component { ...@@ -197,9 +199,19 @@ class YarnCourse extends Component {
} }
} }
// 免费学习
freeStudy = () => { freeStudy = () => {
this.setState({
tofreeStudy: true,
})
} }
// 关闭弹框
closePopup = () => {
this.setState({
tofreeStudy: false,
})
}
// 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单 // 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
addWishList = (id) => { addWishList = (id) => {
...@@ -209,8 +221,8 @@ class YarnCourse extends Component { ...@@ -209,8 +221,8 @@ class YarnCourse extends Component {
const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state
return ( return (
<> <div className={'year-index-course'}>
<CommonContainer title='重磅好课' id="year-course"> <CommonContainer title='重磅好课'>
<div> <div>
{ {
(bigcourse.course && bigcourse.course.length > 0) && (bigcourse.course && bigcourse.course.length > 0) &&
...@@ -246,7 +258,7 @@ class YarnCourse extends Component { ...@@ -246,7 +258,7 @@ class YarnCourse extends Component {
} }
</div> </div>
</CommonContainer> </CommonContainer>
<CommonContainer title='人气好课免费学' id="year-free"> <CommonContainer title='人气好课免费学'>
<div> <div>
{ {
(freecourse.course && freecourse.course.length > 0) && (freecourse.course && freecourse.course.length > 0) &&
...@@ -284,7 +296,7 @@ class YarnCourse extends Component { ...@@ -284,7 +296,7 @@ class YarnCourse extends Component {
} }
</div> </div>
</CommonContainer> </CommonContainer>
<CommonContainer title='精品好课1分开抢' id="year-group"> <CommonContainer title='精品好课1分开抢'>
<div> <div>
{ {
(groupcourse.course && groupcourse.course.length > 0) && (groupcourse.course && groupcourse.course.length > 0) &&
...@@ -355,7 +367,7 @@ class YarnCourse extends Component { ...@@ -355,7 +367,7 @@ class YarnCourse extends Component {
} }
</div> </div>
</CommonContainer> </CommonContainer>
<CommonContainer title='好课价到，等你抄底' id="year-discount"> <CommonContainer title='好课价到，等你抄底'>
<div> <div>
<h4 className="ai-course__subtitle">基础</h4> <h4 className="ai-course__subtitle">基础</h4>
{ {
...@@ -722,9 +734,22 @@ class YarnCourse extends Component { ...@@ -722,9 +734,22 @@ class YarnCourse extends Component {
} }
</div> </div>
</CommonContainer> </CommonContainer>
</>
{
this.state.tofreeStudy &&
<CommonPopup top={100} closePopup={this.closePopup} mark={true}>
<div className='sub__code_container'>
<p className='sub__title'>提醒服务</p>
<p className='sub__tip'>进入服务号回复<i>77</i>免费领取课程</p>
<img className='sub__qr_code' id={'live-qr-code'}
src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
<p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p>
</div>
</CommonPopup>
}
</div>
) )
} }
} }
export default withRouter(YarnCourse) export default withRouter(YearCourse)
src/components/activity/newyear-2019/preheat/YearCourse/index.scss
.course-box { .year-index-course {
.course-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -199,21 +201,21 @@ ...@@ -199,21 +201,21 @@
background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%); background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%);
} }
} }
} }
.bigcourse .course-container { .bigcourse .course-container {
height: 156px; height: 156px;
} }
.freecourse .course-container { .freecourse .course-container {
height: 177px; height: 177px;
} }
.groupcourse .course-container { .groupcourse .course-container {
height: 195px; height: 195px;
} }
.ai-course__subtitle { .ai-course__subtitle {
width: 73px; width: 73px;
height: 24px; height: 24px;
margin: 15px auto 0; margin: 15px auto 0;
...@@ -226,9 +228,9 @@ ...@@ -226,9 +228,9 @@
letter-spacing: 2px; letter-spacing: 2px;
background-color: #FFE300; background-color: #FFE300;
border: 1px solid #070F08; border: 1px solid #070F08;
} }
.more-button { .more-button {
display: block; display: block;
width: 75px; width: 75px;
height: 26px; height: 26px;
...@@ -244,4 +246,9 @@ ...@@ -244,4 +246,9 @@
background-color: #0F6237; background-color: #0F6237;
border: none; border: none;
letter-spacing: 1px; letter-spacing: 1px;
}
.sub__code_container {
padding: 20px;
}
} }
\ No newline at end of file
src/components/activity/newyear-2019/preheat/index.scss
...@@ -41,6 +41,12 @@ ...@@ -41,6 +41,12 @@
font-size: 14px; font-size: 14px;
color: #666; color: #666;
margin: 13px 0; margin: 13px 0;
letter-spacing: 1px;
i {
font-style: normal;
color: #FF0000;
font-size: 16px;
}
} }
.sub__rule { .sub__rule {
......
src/components/activity/newyear-2019/treasure-box/team.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import './team.scss' import './team.scss'
import { getParam, http, SendMessageToApp, browser } from "@/utils" import { getParam, http, SendMessageToApp, browser } from "@/utils"
import { Toast } from 'antd-mobile' import { Toast } from 'antd-mobile';
import {withRouter} from 'react-router-dom';
export default class TeamInfo extends Component { class TeamInfo extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -17,6 +18,7 @@ export default class TeamInfo extends Component { ...@@ -17,6 +18,7 @@ export default class TeamInfo extends Component {
total: 0 total: 0
}, },
member: [], member: [],
removable_data: [],
} }
} }
...@@ -28,13 +30,13 @@ export default class TeamInfo extends Component { ...@@ -28,13 +30,13 @@ export default class TeamInfo extends Component {
http.get(`${API.home}/sys/treasure/teamInfo`).then(res => { http.get(`${API.home}/sys/treasure/teamInfo`).then(res => {
const { code, data, msg } = res.data; const { code, data, msg } = res.data;
if (code === 200) { if (code === 200) {
console.log(data); const { prize_info, is_my_team, info, member, removable_data } = data;
const { prize_info, is_my_team, info, member } = data;
this.setState({ this.setState({
prize_info, prize_info,
is_my_team, is_my_team,
info, info,
member, member: this.format(member),
removable_data
}) })
} else { } else {
Toast.info(msg); Toast.info(msg);
...@@ -42,6 +44,29 @@ export default class TeamInfo extends Component { ...@@ -42,6 +44,29 @@ export default class TeamInfo extends Component {
}) })
} }
// 跳转到我的宝箱页
toYearTreasure = (close) => {
let search = '';
if(close) {
const {removable_data} = this.state;
let current = removable_data[0];
search = `?team_num=${current.team_num}&owner_uid=${current.captain_uid}`;
}
this.props.history.push(`/year/yearTreasure${search}`);
}
format = (list) => {
let len = list.length;
for(let i=0;i<5-len;i++) {
list.push({
head_img: '',
user_name: '',
nobody: true,
})
}
return list;
}
render() { render() {
const { prize_info: { name, stage_no }, is_my_team, info: {removable, total}, member } = this.state; const { prize_info: { name, stage_no }, is_my_team, info: {removable, total}, member } = this.state;
// 显示文案控制 // 显示文案控制
...@@ -62,7 +87,22 @@ export default class TeamInfo extends Component { ...@@ -62,7 +87,22 @@ export default class TeamInfo extends Component {
member && member.length > 0 && ( member && member.length > 0 && (
member.map((item, index) => { member.map((item, index) => {
return <li key={index} className='member__item'> return <li key={index} className='member__item'>
<div className='avatar__container'>
{
item.nobody ? (
<img className='head__image' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" alt=""/> <img className='head__image' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" alt=""/>
) : (
<img className='head__image' src={item.head_img} alt=""/>
)
}
{
index === 0 ? (
<img className='caption__flag' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/caption.png" alt=""/>
) : (null)
}
<div className='shadow'></div>
</div>
<div className={`member__join ${item.nobody ? '' : 'join'}`}></div>
</li> </li>
}) })
) )
...@@ -70,11 +110,16 @@ export default class TeamInfo extends Component { ...@@ -70,11 +110,16 @@ export default class TeamInfo extends Component {
</ul> </ul>
<div className='box__number'> <div className='box__number'>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt="" /> <img onClick={() => this.toYearTreasure(true)} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt="" />
<p className='box__text'> <p onClick={() => this.toYearTreasure(false)} className='box__text'>
{Text} {Text}
</p> </p>
<img className='position__arrow' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/arrow_jinzhan.png" alt=""/> <img className='position__arrow' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/arrow_jinzhan.png" alt=""/>
{
removable > 0 && (
<div className='position__number'>{removable}</div>
)
}
</div> </div>
</div> </div>
<div className='invite__btn'> <div className='invite__btn'>
...@@ -82,8 +127,11 @@ export default class TeamInfo extends Component { ...@@ -82,8 +127,11 @@ export default class TeamInfo extends Component {
is_my_team ? ('继续组队') : ('组队开宝箱') is_my_team ? ('继续组队') : ('组队开宝箱')
} }
</div> </div>
<p className='stage_prize'>{`第${stage_no}次必中${name}`}</p> {
stage_no && name && <p className='stage_prize'>{`第${stage_no}次必中${name}`}</p>
}
</div> </div>
) )
} }
} }
export default withRouter(TeamInfo)
src/components/activity/newyear-2019/treasure-box/team.scss
...@@ -15,20 +15,67 @@ ...@@ -15,20 +15,67 @@
.member__list { .member__list {
height: 50px; height: 50px;
width: 224px; width: 224px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 12px;
.member__item { .member__item {
width: 44px; width: 44px;
height: 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 1px;
.head__image { &:first-child {
border: 1px solid #FFF; margin-left: 0;
border-radius: 50%; .member__join {
border-radius: 2px 0 0 2px;
}
}
&:last-child {
.member__join {
border-radius: 0 2px 2px 0;
}
}
.avatar__container {
width: 27px; width: 27px;
height: 27px; height: 27px;
position: relative;
border: 1px solid #fff;
border-radius: 50%;
.head__image {
border-radius: 50%;
width: 100%;
height: 100%;
}
.shadow {
width: 24px;
height: 3px;
background: #1a3528;
border-radius: 50%;
position: absolute;
bottom: -6px;
}
.caption__flag {
position: absolute;
width: 18px;
height: 10px;
left: 50%;
top: 0;
}
}
.member__join {
width: 40px;
height: 5px;
background: rgba(0, 88, 51, 1);
box-shadow: 1px 1px 2px 0px rgba(3, 52, 91, 0.35);
}
.join {
background: rgba(255, 221, 29, 1);
box-shadow: 1px 2px 2px 0px rgba(253, 253, 253, 0.46) inset,
1px 2px 2px 0px rgba(253, 253, 253, 0.46) inset;
} }
} }
} }
...@@ -38,7 +85,7 @@ ...@@ -38,7 +85,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: flex-start;
align-items: center; align-items: center;
position: relative; position: relative;
img { img {
...@@ -46,11 +93,14 @@ ...@@ -46,11 +93,14 @@
height: 50px; height: 50px;
} }
.box__text { .box__text {
width: 100%; width: 1000px;
line-height: 12px; font-size: 100px;
font-size: 12px; transform: scale(0.1);
text-decoration: underline; text-decoration: underline;
color: rgba(255, 227, 0, 1); color: rgba(255, 227, 0, 1);
position: absolute;
bottom: -72px;
text-align: center;
} }
.position__arrow { .position__arrow {
width: 18px; width: 18px;
...@@ -59,6 +109,22 @@ ...@@ -59,6 +109,22 @@
left: -7px; left: -7px;
top: 18px; top: 18px;
} }
.position__number {
min-width: 22px;
height: 18px;
font-size: 12px;
background: rgba(255, 60, 22, 1);
border: 1px solid rgba(255, 227, 0, 1);
border-radius: 9px 9px 9px 0px;
color: rgba(255, 227, 0, 1);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 0 5px;
right: -4px;
top: -4px;
}
} }
} }
.invite__btn { .invite__btn {
......
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