import React, { Component } from "react" import "./index.scss" import { getParam, http } from "src/utils" import { Toast, Flex } from "antd-mobile" import { connect } from "react-redux" import { withRouter } from "react-router-dom" import { compose } from "redux" class ShareRank extends Component { constructor(props) { super(props) this.state = { list: [], // 分销排行榜 rankingslice: [], // 分销排行榜前两名 code: "", // 分销code shareRank: false, } } componentDidMount() { this.getRankList() this.getCode() } // 获取排行榜 getRankList = () => { http.get(`${API.home}/dist/rankList/${getParam("id")}`).then((res) => { if (res.data.code === 200) { this.setState({ list: res.data.data, rankingslice: res.data.data.slice(0, 2), }) } else { Toast.info(res.data.msg, 2) } }) } // 获取分销码 getCode = () => { const { user } = this.props const uid = user && user.data && user.data.uid if (!uid) return let data = { course_id: getParam("id"), } http.post(`${API.home}/dist/createCode`, data).then((res) => { if (res.data.code === 200) { this.setState({ code: res.data.data.code, }) } else { Toast.info(res.data.msg, 2) } }) } // 点击分销跳转到海报页 share = (info) => { const { user } = this.props const uid = user && user.data && user.data.uid if (!uid) { this.props.history.push("/passport/login") } else { const courseId = getParam("id") const dist_first = info.dist_first_level_ti const dist_code = this.state.code this.props.history.push( `/shareposter?courseId=${courseId}&dist_first=${dist_first}&uid=${uid}&dist_code=${dist_code}` ) } } // 打开分销排行榜弹窗 openRanking = () => { this.setState({ shareRank: true, }) } // 关闭弹窗 colse = () => { this.setState({ shareRank: false, }) } render() { const { courseInfo: info = "" } = this.props // let info = '' // if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) { // info = this.props.courseInfo.courseInfo.course_info // } return ( <div className="share-ranking"> <Flex className="share-container" justify="between"> <Flex className="share-list"> <span className="title">排行榜:</span> <div className="ranking-box" onClick={this.openRanking}> {this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item, index) => { return ( <span key={index} className="ranking-mess"> <img src={item.head_imgurl} alt="" /> <i>{item.amount}元</i> </span> ) })} </div> </Flex> <Flex className="share-money" justify="between" align="center"> <img onClick={this.openRanking} className="ranking-ellipsis" src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt="" /> <button className="share" onClick={this.share.bind(this, info)}> 分享赚{info.dist_first_level_ti}元 </button> </Flex> </Flex> {this.state.shareRank && ( <div className="shareMbc"> <div className="content"> <div className="title-box"> <span className="lable">赚钱排行榜</span> <span className="tips">只展示前9名用户</span> </div> <ul> {this.state.list && this.state.list.length > 0 && this.state.list.map((item, index) => { return ( <li key={index}> <img src={item.head_imgurl} alt="" /> <span className="course-title">{item.user_name}</span> <span className="course-price">{item.amount}元</span> </li> ) })} </ul> <div className="shareBtn"> <button onClick={this.share.bind(this, info)}> 分享赚{info.dist_first_level_ti}元 </button> </div> <i onClick={this.colse} className={"iconfont iconiconfront-2 close"} ></i> </div> </div> )} </div> ) } } export default compose( connect( (state) => ({ // courseInfo: state, user: state.user, }), null ), withRouter )(ShareRank)