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 393 additions and 240 deletions
src/components/activity/newyear-2019/preheat/YearCourse/index.js
......@@ -3,12 +3,14 @@ import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../../common/commonContainer/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) {
super(props)
this.state = {
tofreeStudy: false,
basic: {
course: [],
courseList: [],
......@@ -197,9 +199,19 @@ class YarnCourse extends Component {
}
}
// 免费学习
freeStudy = () => {
this.setState({
tofreeStudy: true,
})
}
// 关闭弹框
closePopup = () => {
this.setState({
tofreeStudy: false,
})
}
// 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
addWishList = (id) => {
......@@ -209,8 +221,8 @@ class YarnCourse extends Component {
const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state
return (
<>
<CommonContainer title='重磅好课' id="year-course">
<div className={'year-index-course'}>
<CommonContainer title='重磅好课'>
<div>
{
(bigcourse.course && bigcourse.course.length > 0) &&
......@@ -246,7 +258,7 @@ class YarnCourse extends Component {
}
</div>
</CommonContainer>
<CommonContainer title='人气好课免费学' id="year-free">
<CommonContainer title='人气好课免费学'>
<div>
{
(freecourse.course && freecourse.course.length > 0) &&
......@@ -284,7 +296,7 @@ class YarnCourse extends Component {
}
</div>
</CommonContainer>
<CommonContainer title='精品好课1分开抢' id="year-group">
<CommonContainer title='精品好课1分开抢'>
<div>
{
(groupcourse.course && groupcourse.course.length > 0) &&
......@@ -355,7 +367,7 @@ class YarnCourse extends Component {
}
</div>
</CommonContainer>
<CommonContainer title='好课价到，等你抄底' id="year-discount">
<CommonContainer title='好课价到，等你抄底'>
<div>
<h4 className="ai-course__subtitle">基础</h4>
{
......@@ -722,9 +734,22 @@ class YarnCourse extends Component {
}
</div>
</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 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.course-container {
width: 158px;
margin: 15px 0 0 0;
text-align: center;
position: relative;
}
.year-index-course {
.group-num {
width: 66px;
height: 16px;
position: absolute;
left: 10px;
top: 10px;
line-height: 16px;
background: #CA161C;
opacity: 0.8;
border-radius: 1px;
font-size: 12px;
color: #fff;
text-align: center;
}
.course-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.coupon-course__footer {
.course-title {
padding-left: 10px;
font-size: 15px;
color: #333;
font-weight: 500;
margin-top: 7px;
}
.btn {
display: inline-block;
width: 138px;
height: 24px;
.course-container {
width: 158px;
margin: 15px 0 0 0;
text-align: center;
line-height: 24px;
border-radius: 2px;
font-size: 12px;
outline: none;
border: none;
letter-spacing: 1px;
}
.big-course {
background-color: #FEE41D;
border: 1px solid #090F08;
color: #090F08;
margin-top: 10px;
position: relative;
}
.to-study {
background-color: #09f;
color: #fff;
.group-num {
width: 66px;
height: 16px;
position: absolute;
left: 10px;
bottom: 10px;
}
.free-study {
background: linear-gradient(-90deg, #EB1612 0%, #F92927 100%);
top: 10px;
line-height: 16px;
background: #CA161C;
opacity: 0.8;
border-radius: 1px;
font-size: 12px;
color: #fff;
margin-top: 10px;
text-align: center;
}
.free-course-num {
font-size: 12px;
color: #070F08;
margin-top: 7px;
letter-spacing: 1px;
.coupon-course__footer {
.course-title {
padding-left: 10px;
font-size: 15px;
color: #333;
font-weight: 500;
margin-top: 7px;
}
span {
font-size: 14px;
color: #FF0002;
.btn {
display: inline-block;
width: 138px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 2px;
font-size: 12px;
outline: none;
border: none;
letter-spacing: 1px;
}
.big-course {
background-color: #FEE41D;
border: 1px solid #090F08;
color: #090F08;
margin-top: 10px;
}
.to-study {
background-color: #09f;
color: #fff;
position: absolute;
left: 10px;
bottom: 10px;
}
.free-study {
background: linear-gradient(-90deg, #EB1612 0%, #F92927 100%);
color: #fff;
margin-top: 10px;
}
.free-course-num {
font-size: 12px;
color: #070F08;
margin-top: 7px;
letter-spacing: 1px;
span {
font-size: 14px;
color: #FF0002;
}
}
}
}
.type {
text-align: left;
padding-left: 7px;
margin-top: 3px;
.type {
text-align: left;
padding-left: 7px;
margin-top: 3px;
.tag {
display: inline-block;
padding: 0 6px;
height: 14px;
line-height: 15px;
text-align: center;
font-size: 12px;
color: #FFF;
position: relative;
z-index: 0;
.tag {
display: inline-block;
padding: 0 6px;
height: 14px;
line-height: 15px;
text-align: center;
font-size: 12px;
color: #FFF;
position: relative;
z-index: 0;
}
.time {
display: inline-block;
height: 15px;
line-height: 15px;
padding: 0 6px;
margin-left: 5px;
position: relative;
font-size: 12px;
color: #555;
text-align: center;
z-index: 0;
}
.time:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #E6E6E6;
transform: skewX(-20deg);
z-index: -1;
}
.tag:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #FF0002;
transform: skewX(-20deg);
z-index: -1;
}
}
.time {
display: inline-block;
height: 15px;
line-height: 15px;
padding: 0 6px;
margin-left: 5px;
position: relative;
.price {
text-align: left;
padding-left: 5px;
margin-top: 3px;
color: #FF0002;
font-size: 12px;
color: #555;
text-align: center;
z-index: 0;
}
.time:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #E6E6E6;
transform: skewX(-20deg);
z-index: -1;
.new-price {
font-size: 18px;
}
.old-price {
font-size: 12px;
color: #666;
margin-left: 8px;
}
}
.tag:before {
content: '';
.status {
text-align: left;
padding-left: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #FF0002;
transform: skewX(-20deg);
z-index: -1;
}
}
bottom: 10px;
.price {
text-align: left;
padding-left: 5px;
margin-top: 3px;
color: #FF0002;
font-size: 12px;
.status-btn {
display: inline-block;
height: 22px;
line-height: 22px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #fff;
}
.new-price {
font-size: 18px;
}
.to-buy {
width: 55px;
background-color: #FF8080;
}
.old-price {
font-size: 12px;
color: #666;
margin-left: 8px;
.add-wish, .add-wish-success {
width: 88px;
margin-left: 5px;
outline: none;
color: #FF0002;
background-color: #fff;
border: 1px solid #FF0002;
img {
width: 12px;
height: 11px;
margin-right: 2px;
position: relative;
top: 1px;
}
}
.add-wish-success {
color: #fff;
background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%);
}
}
}
.status {
text-align: left;
padding-left: 5px;
position: absolute;
bottom: 10px;
.status-btn {
display: inline-block;
height: 22px;
line-height: 22px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #fff;
}
.bigcourse .course-container {
height: 156px;
}
.to-buy {
width: 55px;
background-color: #FF8080;
}
.freecourse .course-container {
height: 177px;
}
.add-wish, .add-wish-success {
width: 88px;
margin-left: 5px;
outline: none;
color: #FF0002;
background-color: #fff;
border: 1px solid #FF0002;
.groupcourse .course-container {
height: 195px;
}
img {
width: 12px;
height: 11px;
margin-right: 2px;
position: relative;
top: 1px;
}
.ai-course__subtitle {
width: 73px;
height: 24px;
margin: 15px auto 0;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
color: #070F08;
text-align: center;
line-height: 22px;
letter-spacing: 2px;
background-color: #FFE300;
border: 1px solid #070F08;
}
}
.more-button {
display: block;
width: 75px;
height: 26px;
margin: 15px auto 5px;
padding: 0;
border-radius: 12px;
font-size: 12px;
font-weight: 400;
color: #fff;
line-height: 26px;
cursor: pointer;
outline: none;
background-color: #0F6237;
border: none;
letter-spacing: 1px;
}
.add-wish-success {
color: #fff;
background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%);
}
.sub__code_container {
padding: 20px;
}
}
.bigcourse .course-container {
height: 156px;
}
.freecourse .course-container {
height: 177px;
}
.groupcourse .course-container {
height: 195px;
}
.ai-course__subtitle {
width: 73px;
height: 24px;
margin: 15px auto 0;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
color: #070F08;
text-align: center;
line-height: 22px;
letter-spacing: 2px;
background-color: #FFE300;
border: 1px solid #070F08;
}
.more-button {
display: block;
width: 75px;
height: 26px;
margin: 15px auto 5px;
padding: 0;
border-radius: 12px;
font-size: 12px;
font-weight: 400;
color: #fff;
line-height: 26px;
cursor: pointer;
outline: none;
background-color: #0F6237;
border: none;
letter-spacing: 1px;
}
}
\ No newline at end of file
src/components/activity/newyear-2019/preheat/index.scss
......@@ -41,6 +41,12 @@
font-size: 14px;
color: #666;
margin: 13px 0;
letter-spacing: 1px;
i {
font-style: normal;
color: #FF0000;
font-size: 16px;
}
}
.sub__rule {
......
src/components/activity/newyear-2019/treasure-box/team.js
import React, { Component } from 'react';
import './team.scss'
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) {
super(props);
this.state = {
......@@ -17,6 +18,7 @@ export default class TeamInfo extends Component {
total: 0
},
member: [],
removable_data: [],
}
}
......@@ -28,13 +30,13 @@ export default class TeamInfo extends Component {
http.get(`${API.home}/sys/treasure/teamInfo`).then(res => {
const { code, data, msg } = res.data;
if (code === 200) {
console.log(data);
const { prize_info, is_my_team, info, member } = data;
const { prize_info, is_my_team, info, member, removable_data } = data;
this.setState({
prize_info,
is_my_team,
info,
member,
member: this.format(member),
removable_data
})
} else {
Toast.info(msg);
......@@ -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() {
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 {
member && member.length > 0 && (
member.map((item, index) => {
return <li key={index} className='member__item'>
<img className='head__image' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" alt=""/>
<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={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>
})
)
......@@ -70,11 +110,16 @@ export default class TeamInfo extends Component {
</ul>
<div className='box__number'>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt="" />
<p className='box__text'>
<img onClick={() => this.toYearTreasure(true)} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt="" />
<p onClick={() => this.toYearTreasure(false)} className='box__text'>
{Text}
</p>
<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 className='invite__btn'>
......@@ -82,8 +127,11 @@ export default class TeamInfo extends Component {
is_my_team ? ('继续组队') : ('组队开宝箱')
}
</div>
<p className='stage_prize'>{`第${stage_no}次必中${name}`}</p>
{
stage_no && name && <p className='stage_prize'>{`第${stage_no}次必中${name}`}</p>
}
</div>
)
}
}
export default withRouter(TeamInfo)
src/components/activity/newyear-2019/treasure-box/team.scss
......@@ -15,20 +15,67 @@
.member__list {
height: 50px;
width: 224px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 12px;
.member__item {
width: 44px;
height: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.head__image {
border: 1px solid #FFF;
border-radius: 50%;
margin-left: 1px;
&:first-child {
margin-left: 0;
.member__join {
border-radius: 2px 0 0 2px;
}
}
&:last-child {
.member__join {
border-radius: 0 2px 2px 0;
}
}
.avatar__container {
width: 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 @@
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
position: relative;
img {
......@@ -46,11 +93,14 @@
height: 50px;
}
.box__text {
width: 100%;
line-height: 12px;
font-size: 12px;
width: 1000px;
font-size: 100px;
transform: scale(0.1);
text-decoration: underline;
color: rgba(255, 227, 0, 1);
position: absolute;
bottom: -72px;
text-align: center;
}
.position__arrow {
width: 18px;
......@@ -59,6 +109,22 @@
left: -7px;
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 {
......
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