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 './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 {
render() {
class Activity extends Component {
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 (
<div className="activity__con">
<div className='banner__con'></div>
<div className='content__con'>
<div className="button__get">立即领取</div>
<div className="button__get" onClick={this.getGift}>立即领取</div>
</div>
</div>
)
}
}
export default connect(
state => ({user: state.user}),
null
)(Activity);
src/components/activity/index.scss
......@@ -145,6 +145,13 @@
font-size: 20px;
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 @@
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 {connect} from "react-redux"
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) {
super(props);
this.state = {
isWeiXin: false,
showTip: false,
userList: [{
id:1,
avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
name: '大学生活好'
}, {
id:2,
avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
name: '大学生活好大学生活好大学生活好'
}, {
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: '大学生活好大学生活好大学生活好'
}],
hotValue: 0,
userList: [],
}
}
componentWillMount() {
if(getParam('new')) {
this.props.history.push('/activity');
}
}
componentDidMount() {
if(!this.props.user.hasError) {
this.getUserList();
this.getHotValue();
}
}
componentWillReceiveProps(nextProps) {
if(!nextProps.user.hasError) {
this.getUserList();
this.getHotValue();
}
}
inviteFriends = () => {
this.setState({
showTip: true,
getUserList = () => {
http.get(`${API.home}/sys/user/invite/list`).then(res => {
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 = () => {
this.setState({
showTip: false,
......@@ -48,7 +95,7 @@ export default class Invite extends Component {
}
render() {
let {userList, showTip} = this.state;
let {userList, showTip, hotValue, isWeiXin} = this.state;
return (
<div className="activity__con">
<div className='banner__con'></div>
......@@ -66,11 +113,11 @@ export default class Invite extends Component {
<div className="box__middle">
<div className="box__inner">
<p>当前中奖热力值:</p>
<p className="hot__value">50</p>
<p className="hot__value">{hotValue}</p>
<div className="hot__progress">
<span>0</span>
<div className="progress__bar">
<span className="position__point"></span>
<div className="progress__point" style={{'width': hotValue + '%'}}></div>
</div>
<span>3600</span>
</div>
......@@ -85,26 +132,51 @@ export default class Invite extends Component {
</div>
</div>
<div className="list__title">
<span>邀请好友列表</span>
</div>
{
userList.length > 0 ? (
<>
<div className="list__title">
<span>邀请好友列表</span>
</div>
<p className="show__new">(仅显示新用户)</p>
<div className="list__con">
{
userList.length > 0 && userList.map((item, index) => {
return (
<div className="user__item-info" key={item.id}>
<div className="item__con">
<img className="user_avatar" src={item.avatar} />
<div className="user_name">{item.name}</div>
</div>
</div>
)
})
}
</div>
<p className="show__new">(仅显示新用户)</p>
</>
) : (null)
}
{
userList.length > 0 ? (
<div className="list__con">
{
userList.length === 1 && userList.map((item, index) => {
return (
<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>
)
})
}
{
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>
{
showTip && (
......@@ -112,7 +184,13 @@ export default class Invite extends Component {
<div className="share__tip">
立即分享给好友增加中奖概率
</div>
<div className="share__row"></div>
{
isWeiXin ? (
<div className="share__row"></div>
) : (
null
)
}
</div>
)
}
......@@ -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