Skip to content

M
mr-julyedu
Commit 0172b673 by FE
Options

my treasure

parent caa08ed6
Showing with 710 additions and 1 deletions
src/components/activity/newyear-2019/myTreasure/index.js 0 → 100644
import React, { Component } from 'react';
import { HeaderBar } from '@common';
import TreasureTeam from './team';
import { http } from '@/utils';
import './index.scss';
class MyTreasure extends Component {
constructor(props) {
super(props);
this.state = {
isEnd: false,
isEmpty: false,
seconds: 3,
teams: [],
};
}
componentDidMount() {
const { isEnd } = this.state;
if(isEnd) {
this.startCountDown();
}
this.fetchMyTreasure();
this.fetchActivityStatus();
}
fetchMyTreasure = () => {
http.get(`${API.home}/sys/treasure/my`).then(res => {
const { code, data } = res.data;
if(code === 200) {
this.rule = data.rule;
if(Array.isArray(data.team) && data.team.length > 0) {
const teams = data.team.map(item => {
console.log(item);
if(item) {
return Object.assign({}, item, {
members: item.member
});
}
return {};
});
console.log(teams);
this.setState({
isEmpty: false,
teams,
});
}
}
});
}
fetchActivityStatus = () => {
http.get(`${API.home}/activity/stage`).then(res => {
const { code, data } = res.data;
if(code === 200) {
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
this.setState({
isEnd: data.treasure_stage === 0
});
}
});
}
startCountDown = () => {
const { history } = this.props;
let { seconds } = this.state;
if(this.timer) {
clearInterval(this.timer);
}
this.setState({
seconds: seconds--
});
this.timer = setInterval(() => {
this.setState({
seconds: seconds--
});
if(seconds === 0) {
this.setState({
seconds: 0
});
clearInterval(this.timer);
history.push('/year/yearIndex');
}
}, 1000);
}
render() {
const { isEnd, isEmpty, seconds, teams } = this.state;
return (
<div data-skip="treasure">
<HeaderBar title="我的宝箱" arrow={true} />
{
isEnd &&
<p className="activity-end__desc">
活动已结束<br/>
{seconds}s后将自动返回首页
</p>
}
{
(!isEnd && isEmpty) &&
<>
<i className="team-empty__icon"></i>
<p className="team-empty__desc">您当前还没有宝箱哦~</p>
<p className="team-empty__desc">快去组队邀请好友一起开宝箱吧！</p>
<button className="team-empty__button">组队开宝箱</button>
</>
}
{
(!isEnd && !isEmpty) &&
<div className="treasure-content">
{JSON.stringify(teams)}
{
teams.map((item, index) => (
<TreasureTeam data={item} key={index} />
))
}
<TreasureTeam data={{
is_captain: 0,
status: 1,
is_open: 1,
members:[
{
uid:1,
head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/moon_my.jpg",
is_open:1,
is_captain:1,
prize_name:"dfefawefwe"
},
{
uid:22,
head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/app/156274320700059253.png",
is_open:1,
is_captain:0,
prize_name:"带份饭问"
}
]
}}></TreasureTeam>
</div>
}
</div>
)
}
}
export default MyTreasure;
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/index.scss 0 → 100644
[data-skip="treasure"] {
min-height: 100vh;
background-color: #0E7442;
.treasure-content {
padding: 16px 0 10px;
}
.team-container {
margin: 0 10px 12px;
}
.activity-end__desc {
margin: 118px 0 0;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 42px;
}
.team-empty__icon {
display: block;
width: 56px;
height: 49px;
margin: 118px auto 18px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-empty.png');
}
.team-empty__desc {
margin: 0 70px;
font-size: 15px;
color: #fff;
text-align: center;
line-height: 21px;
}
.team-empty__button {
display: block;
width: 297px;
height: 44px;
margin: 20px auto 0;
border: 1px solid #090909;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
color: #090909;
background-color: #FFE319;
}
}
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/team.js 0 → 100644
import React, { Component } from 'react';
import classnames from 'classnames';
import './team.scss';
class TreasureTeam extends Component {
constructor(props) {
super(props);
this.state = {
team: [],
currentMember: {}
};
}
componentDidMount() {
this.initMemberInfo();
}
initMemberInfo = () => {
const { data } = this.props;
let members = data.members;
let len = members.length - 5;
for(; len < 0; len++) {
members.push({});
}
this.setState({
team: Object.assign({}, data, {
members
}),
currentMember: members[0]
});
}
computedClass = (id) => {
const { data: { is_open } } = this.props;
const { currentMember } = this.state;
return classnames(
'team-member__item',
{
'active': id === currentMember.uid && is_open === 1,
}
);
}
computedBg = (val) => {
return val? {
backgroundImage: `url(${val})`
} : {};
}
// 查看队友的奖品，条件：宝箱已拆
toCheckPrize = (id) => {
const { team: { is_open, members = []} } = this.state;
if(is_open) {
const data = members.filter(item => item.uid === id);
this.setState({
currentMember: data[0]
});
}
}
toSplitTreasure = () => {
}
render() {
const {
team: {
id,
is_captain,
status,
team_num,
lack_member,
is_open,
members = [],
prize_type,
bing_phone,
bing_address,
},
currentMember: {
prize_name
}
} = this.state;
return (
<div className="team-container" data-skip="team">
{
is_captain === 0 &&
<i className="team-friend">友</i>
}
{/* 组队状态 */}
{
status === 1
? <i className="team-status">组队中..</i>
: <i className="team-decorate"></i>
}
<h2 className="team-title">{team_num}号队伍</h2>
{/* 队员情况 */}
{
status === 1
? <p className="team-desc">还差{lack_member}名队员即可获得宝箱哦～</p>
: <p className="team-desc">组队成功</p>
}
<div className="team-member">
{
members.map((item, index) => (
<div
className={this.computedClass(item.uid)}
onClick={() => this.toCheckPrize(item.uid)}
key={item.id}
style={this.computedBg(item.head_img)}
>
{
item.is_captain === 1 &&
<span className="team-member__captain">队长</span>
}
</div>
))
}
</div>
<div className="team-footer" data-layout={is_open === 1? 'column': 'row'}>
{/* 队伍未满 */}
{
status === 0 &&
<>
{
is_captain === 1
? <button className="team-button" onClick="$emit('to-invite-team')">继续邀请队友</button>
: <button className="team-button" onClick="$emit('to-help-team')">帮好友完成组队</button>
}
</>
}
{/* 可拆状态 */}
{
(status === 1 && is_open === 0) &&
<>
<span className="team-icon" data-direction="left"></span>
<span className="team-button--split" onClick={() => this.toSplitTreasure(id)}></span>
<span className="team-icon" data-direction="right"></span>
</>
}
{/* 已拆状态 */}
{
(status === 1 && is_open === 1) &&
<>
<p className="team-prize">{prize_name}</p>
{/* 第一：是否需要绑定手机号 */}
{
bing_phone &&
<a className="treamsure-team__result" onClick="$emit('to-bind-phone', data.bing_address)">
<span>绑定手机号</span>
</a>
}
{/* 第二：是否需要填写地址 */}
{
(!bing_phone && bing_address) &&
<a className="treamsure-team__result" onClick="$emit('to-bind-address')">
<span>查看/修改收货信息</span>
</a>
}
{/* 第三：奖品，代金券碎片 */}
{
(!bing_phone && !bing_address && prize_type === 6) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
可合成代金券在购课时使用，
<span>去合成</span>
</a>
}
{/* 第三：奖品，指定课程代金券 */}
{
(!bing_phone && !bing_address && prize_type === 3) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
已发放至您的账户，
<span>去使用</span>
</a>
}
{/* 第三：奖品，通用课程代金券 */}
{
(!bing_phone && !bing_address && prize_type === 4) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
已发放至您的账户，
<span>去使用</span>
</a>
}
{/* 第三：奖品，现金红包 */}
{
(!bing_phone && !bing_address && prize_type === 7) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
已存入您的账户，
<span>去提现</span>
</a>
}
{/* 第三：奖品，线上课程 */}
{
(!bing_phone && !bing_address && prize_type === 2) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>已发放至您的账户</a>
}
</>
}
</div>
</div>
)
}
}
export default TreasureTeam;
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/team.scss 0 → 100644
.team-container {
&[data-skip="team"] {
height: 195px;
border-radius: 3px;
box-sizing: border-box;
background-color: #fff;
}
}
[data-skip="team"] {
position: relative;
padding: 10px 0 0;
.team-friend {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
padding-left: 2px;
box-sizing: border-box;
font-size: 12px;
font-style: normal;
color: #fff;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/team-friend-bg.png');
}
.team-status {
position: absolute;
top: 0;
right: 0;
width: 54px;
border-radius: 0 3px 0 5px;
font-size: 12px;
font-style: normal;
color: #fff;
text-align: center;
line-height: 24px;
background-color: #00C091;
}
.team-decorate {
position: absolute;
top: -10px;
right: -10px;
width: 25px;
height: 25px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/team-decorate.png');
}
.team-title {
margin: 5px 0 0;
font-size: 16px;
color: #090909;
text-align: center;
line-height: 1;
}
.team-desc {
margin: 10px 0 0;
font-size: 12px;
color: #FF2121;
text-align: center;
line-height: 1;
}
.team-member {
display: flex;
align-items: center;
justify-content: center;
margin: 18px 0 0;
}
.team-member__item {
position: relative;
width: 44px;
height: 44px;
margin: 0 10px;
border-radius: 50%;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/team-bg.png');
&.active {
border: 1px solid #00C091;
&::after {
display: block;
}
}
&::after {
content: '';
display: none;
position: absolute;
left: 0;
bottom: -12px;
right: 0;
width: 24px;
height: 3px;
margin: 0 auto;
border-radius: 50%;
background-color: #E6E6E6;
}
}
.team-member__captain {
position: absolute;
top: -6px;
right: -23px;
width: 33px;
height: 18px;
border-radius: 9px 9px 9px 1px;
border: 1px solid #fff;
box-sizing: border-box;
font-size: 12px;
color: #0B7B45;
text-align: center;
line-height: 18px;
background-color: #FFE319;
}
.team-footer {
display: flex;
align-items: center;
justify-content: center;
margin: 17px 0 0;
&[data-layout="column"] {
flex-direction: column;
}
}
.team-button {
display: block;
width: 297px;
height: 44px;
margin: 0 auto;
border: 1px solid #090909;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
color: #090909;
background-color: #FFE319;
}
.team-button--split {
display: inline-block;
width: 60px;
height: 46px;
margin: 0 20px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/treasure-box.png');
}
.team-icon {
display: inline-block;
width: 31px;
height: 21px;
background-size: cover;
&[data-direction="left"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-direction-left.png');
}
&[data-direction="right"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-direction-right.png');
}
}
.team-prize {
margin: 5px 0 0;
font-size: 15px;
color: #303030;
line-height: 1;
}
}
\ No newline at end of file
src/components/activity/newyear-2019/preheat/index.js
......@@ -2,11 +2,13 @@ import React, { Component } from 'react'
import './index.scss'
import LiveRoom from './LiveRoom/index';
import TreasureBox from './../treasure-box/index';
import TreasureNav from './nav';
export default class index extends Component {
render() {
return (
<div>
<TreasureNav></TreasureNav>
<LiveRoom />
<TreasureBox></TreasureBox>
</div>
......
src/components/activity/newyear-2019/preheat/nav.js 0 → 100644
import React, { Component } from 'react';
import classnames from 'classnames';
import './nav.scss';
class TreasureNav extends Component {
constructor(props) {
super(props);
this.state = {
curIndex: 1,
navs: [
{
id: 'year-treasure',
name: '组队开宝箱'
},
{
id: 'year-course',
name: '重磅好课'
},
{
id: 'year-free',
name: '免费专区'
},
{
id: 'year-group',
name: '一元拼团'
},
{
id: 'year-discount',
name: '一折起购专区'
},
]
};
}
render() {
const { curIndex, navs } = this.state;
return (
<div className="treasure-nav" data-skip="nav">
{
navs.map((item, index) => (
<a
href=""
className={classnames("treasure-nav__item",{'active': index === curIndex})}
key={item.id}
>{item.name}</a>
))
}
</div>
)
}
}
export default TreasureNav;
\ No newline at end of file
src/components/activity/newyear-2019/preheat/nav.scss 0 → 100644
.treasure-nav {
&[data-skip="nav"] {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
background-color: #357345;
}
}
[data-skip="nav"] {
.treasure-nav__item {
flex: 1;
box-sizing: border-box;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 26px;
&.active {
border-right: 1px solid #090F08;
border-radius: 3px;
color: #090F08;
background-color: #FEE41D;
}
}
}
\ No newline at end of file
src/components/activity/newyear-2019/treasure-box/rank.js
......@@ -72,7 +72,7 @@ class TreasureRank extends Component {
<div className="rank-body">
{
rank.map((item, index) => (
<dl className="rank-item">
<dl className="rank-item" key={index}>
<dd className="rank-column">
{
index <= 2
......
src/router/router-config.js
......@@ -233,9 +233,16 @@ export default [
path: '/activity/newyear-2019/landing',
component: loadable(() => import(/* webpackChunkName: 'newyear-2019-landing'*/ '@components/activity/newyear-2019/landing/index'))
},
// 双旦活动预热页面
{
path: '/year/yearIndex',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/preheat/index'))
},
// 我的宝箱
{
path: '/year/yearTreasure',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/myTreasure/index'))
}
]
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