Skip to content

M
mr-julyedu
Commit 99594366 by wangshuo
Options

邀请好友页

parent 75cf5c63
Showing with 179 additions and 52 deletions
src/components/activity/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import './index.scss' import {connect} from "react-redux";
import { http, getParam, is_weixin, wxShare } from '@/utils';
import './index.scss';
import {Toast} from "antd-mobile";
export default class Activity extends Component { class Activity extends Component {
render() { constructor(props) {
super(props);
}
getGift = () => {
if(this.props.user.hasError) {
this.props.history.push('/passport');
} else {
http.get(`${API.home}/sys/receive/reg/gift`).then(res => {
let {code, msg} = res.data;
if(code === 200) {
Toast.info('领取成功，你可前往七月在线官网/APP进行查看', 2);
}else{
Toast.info(msg, 2);
}
})
}
}
render() {
return ( return (
<div className="activity__con"> <div className="activity__con">
<div className='banner__con'></div> <div className='banner__con'></div>
<div className='content__con'> <div className='content__con'>
<div className="button__get">立即领取</div> <div className="button__get" onClick={this.getGift}>立即领取</div>
</div> </div>
</div> </div>
) )
} }
} }
export default connect(
state => ({user: state.user}),
null
)(Activity);
src/components/activity/index.scss
...@@ -145,6 +145,13 @@ ...@@ -145,6 +145,13 @@
font-size: 20px; font-size: 20px;
transform: scale(0.5); transform: scale(0.5);
} }
.progress__point {
position: absolute;
height: 6px;
border-radius: 3px;
background:linear-gradient(90deg,rgba(83,39,250,1) 0%,rgba(168,39,250,1) 100%);
}
} }
} }
...@@ -244,6 +251,16 @@ ...@@ -244,6 +251,16 @@
color: #fff; color: #fff;
} }
} }
.item__con-only {
width: 100%;
&:nth-child(2n+1) {
border-right: none;
}
.item__con {
width: 100%;
}
}
} }
} }
......
src/components/activity/invite.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import {connect} from "react-redux"
import './index.scss'; import './index.scss';
import { http, getParam, is_weixin, wxShare } from '@/utils';
import {Toast} from "antd-mobile";
export default class Invite extends Component { class Invite extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
isWeiXin: false,
showTip: false, showTip: false,
userList: [{ hotValue: 0,
id:1, userList: [],
avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png', }
name: '大学生活好' }
}, {
id:2, componentWillMount() {
avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png', if(getParam('new')) {
name: '大学生活好大学生活好大学生活好' this.props.history.push('/activity');
}, {
id:3,
avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
name: '大学生活好大学生活好大学生活好'
}, {
id:4,
avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
name: '大学生活好大学生活好大学生活好'
}, {
id:5,
avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
name: '大学生活好大学生活好大学生活好'
}],
} }
} }
componentDidMount() { componentDidMount() {
if(!this.props.user.hasError) {
this.getUserList();
this.getHotValue();
}
}
componentWillReceiveProps(nextProps) {
if(!nextProps.user.hasError) {
this.getUserList();
this.getHotValue();
}
} }
inviteFriends = () => { getUserList = () => {
this.setState({ http.get(`${API.home}/sys/user/invite/list`).then(res => {
showTip: true, let {code, data, msg} = res.data;
if(code === 200) {
this.setState({
userList: data
});
} else {
Toast.info(msg, 2);
}
});
}
getHotValue = () => {
http.get(`${API.home}/sys/user/hot/value`).then(res => {
let {code, data, msg} = res.data;
if(code === 200) {
this.setState({
hotValue: data.hot_value
});
} else {
Toast.info(msg, 2);
}
}); });
} }
inviteFriends = () => {
// 未登录先去登录
if(this.props.user.hasError) {
this.props.history.push('/passport');
} else {
if(is_weixin()) {
// TODO 这里需要运营确定文案
wxShare({
title: "哈哈哈哈哈哈哈",
desc: "你的老相好在七月在线学习呢你来不来",
link: encodeURI(location.origin + '/invite?new=1'),
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/20a86c1353.jpg'
});
this.setState({
showTip: true,
isWeiXin: true,
});
}else{
history.replaceState(null,null,'invite?new=1')
this.setState({
showTip: true,
});
}
}
}
closeMark = () => { closeMark = () => {
this.setState({ this.setState({
showTip: false, showTip: false,
...@@ -48,7 +95,7 @@ export default class Invite extends Component { ...@@ -48,7 +95,7 @@ export default class Invite extends Component {
} }
render() { render() {
let {userList, showTip} = this.state; let {userList, showTip, hotValue, isWeiXin} = this.state;
return ( return (
<div className="activity__con"> <div className="activity__con">
<div className='banner__con'></div> <div className='banner__con'></div>
...@@ -66,11 +113,11 @@ export default class Invite extends Component { ...@@ -66,11 +113,11 @@ export default class Invite extends Component {
<div className="box__middle"> <div className="box__middle">
<div className="box__inner"> <div className="box__inner">
<p>当前中奖热力值:</p> <p>当前中奖热力值:</p>
<p className="hot__value">50</p> <p className="hot__value">{hotValue}</p>
<div className="hot__progress"> <div className="hot__progress">
<span>0</span> <span>0</span>
<div className="progress__bar"> <div className="progress__bar">
<span className="position__point"></span> <div className="progress__point" style={{'width': hotValue + '%'}}></div>
</div> </div>
<span>3600</span> <span>3600</span>
</div> </div>
...@@ -85,26 +132,51 @@ export default class Invite extends Component { ...@@ -85,26 +132,51 @@ export default class Invite extends Component {
</div> </div>
</div> </div>
<div className="list__title"> {
<span>邀请好友列表</span> userList.length > 0 ? (
</div> <>
<div className="list__title">
<span>邀请好友列表</span>
</div>
<p className="show__new">(仅显示新用户)</p> <p className="show__new">(仅显示新用户)</p>
</>
<div className="list__con"> ) : (null)
{ }
userList.length > 0 && userList.map((item, index) => {
return ( {
<div className="user__item-info" key={item.id}> userList.length > 0 ? (
<div className="item__con"> <div className="list__con">
<img className="user_avatar" src={item.avatar} /> {
<div className="user_name">{item.name}</div> userList.length === 1 && userList.map((item, index) => {
</div> return (
</div> <div className="user__item-info item__con-only" key={index}>
) <div className="item__con">
}) <img className="user_avatar" src={item.avatar} />
} <div className="user_name">{item.name}</div>
</div> </div>
</div>
)
})
}
{
userList.length > 1 && userList.map((item, index) => {
return (
<div className="user__item-info" key={index}>
<div className="item__con">
<img className="user_avatar" src={item.avatar} />
<div className="user_name">{item.name}</div>
</div>
</div>
)
})
}
</div>
) : (
null
)
}
</div> </div>
{ {
showTip && ( showTip && (
...@@ -112,7 +184,13 @@ export default class Invite extends Component { ...@@ -112,7 +184,13 @@ export default class Invite extends Component {
<div className="share__tip"> <div className="share__tip">
立即分享给好友增加中奖概率 立即分享给好友增加中奖概率
</div> </div>
<div className="share__row"></div> {
isWeiXin ? (
<div className="share__row"></div>
) : (
null
)
}
</div> </div>
) )
} }
...@@ -120,3 +198,9 @@ export default class Invite extends Component { ...@@ -120,3 +198,9 @@ export default class Invite extends Component {
) )
} }
} }
export default connect(
state => ({user: state.user}),
null
)(Invite);
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