import React, {Component} from 'react'
import './bargain-middle-page.scss'
import {HeaderBar, VList} from '@common'
import {Course} from '@common'
import {api, getParam, http, browser, wxShare} from "@/utils"
import {Toast} from "antd-mobile"
import {Link, withRouter} from "react-router-dom"
import Ranking from './ranking'
import {differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays} from "date-fns"
import Overlay from '../detail/overlay'
import {compose} from "redux"
import {connect} from "react-redux";
import {getCourses} from './../detail/actions';
import classnames from 'classnames';
import FollowBarcode from './barcode/index';
@connect(state => ({
user: state.user
}))
class BargainMiddlePage extends Component {
timer
constructor(props) {
super(props)
this.state = {
isShowOverlay: false,
isOriginator: '',
kanjiaIcon: require('./image/kanjia_icon.png'),
course: {}, // 当前砍价课程
courseList: [], // 所有砍价课程
data: '',
bargainData: '',
limitPeople: 0,
outList: [],
list: [],
width: '0',
isShowMore: '',
status: '',
hour: '',
min: '',
sec: '',
day: '',
amount: '', // 每次砍掉的价格
firendBaigainPrice: true,
isshowYindao: false,
isLoaidng: true,
imglink: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/',
}
}
componentDidMount() {
this.getBargainRankList(getParam('id'), 1)
this.getBargainCourse()
this.getBargainInfo()
}
componentDidUpdate(prevProps) {
let {user} = this.props
let {user: prevUser} = prevProps
if(!user.hasError && user.hasError !== prevUser.hasError){
this.getBargainRankList(getParam('id'), 1)
this.getBargainCourse()
this.getBargainInfo()
}
}
// 获取砍价信息
getBargainInfo = () => {
// is_originator 来源，0-PC端扫码 1-M端分享 2-APP端分享
http.get(`${API.home}/m/bargain/info?bargaincode=${getParam('bargaincode')}&is_originator=${getParam('is_originator')}`).then((res) => {
if (res.data.code === 200) {
this.setState(
{
data: res.data.data,
isOriginator: res.data.data.is_originator,
originatorUid: res.data.data.originator_uid,
course: res.data.data.course,
limitPeople: res.data.data.course.limit_people,
bargainData: res.data.data.bargain,
width: (res.data.data.bargain.bargain_price / res.data.data.bargain.total_price).toFixed(2) * 100 + '%'
},
() => {
if (this.state.bargainData.expire_time) {
let date = this.state.bargainData.expire_time * 1000
let now = Date.now()
clearInterval(this.timer)
this.timer = setInterval(() => {
date -= 1000
let _d = new Date(date)
let s = differenceInSeconds(_d, now) % 60,
m = differenceInMinutes(_d, now) % 60,
h = differenceInHours(_d, now) % 24,
d = differenceInDays(_d, now) % 24
this.setState({
hour: h,
min: m,
sec: s,
day: d
})
}, 1000)
}
}
)
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取砍价课程
getBargainCourse = () => {
http.get(`${API.home}/m/bargain/courseList`).then((res) => {
if (res.data.code === 200) {
this.setState({
courseList: res.data.data
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取助理好友
getBargainRankList = (id = '', type) => {
const bargain_code = getParam('bargaincode') || '';
let data = {
courseId: id,
type: type,
bargain_code
}
http.post(`${API.home}/m/bargain/rankList`, data).then((res) => {
if (res.data.code === 200) {
let arr = ['刀神', '刀王', '刀霸']
let newList = res.data.data.out_list.map((item, i) => {
return {
...item,
rank: arr[i]
}
})
this.setState({
list: res.data.data.list,
outList: newList
})
} else if (res.data.code == 4030 || res.data.code == 4040) {
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 直接支付
toCart = () => {
const { history } = this.props;
http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) =>{
const { errno, msg } = res.data;
if (errno === 0) {
this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
}else if(errno === 4030 || errno === 4040) {
history.push('/passport');
} else {
Toast.info(msg, 2);
}
})
// let data = {
// course_id: getParam('id')
// }
// http.post(`${API.home}/m/cart/add`, data).then((res) => {
// if (res.data.code === 200 || res.data.code === 15001) {
// this.props.history.push('/shopcart')
// } else {
// Toast.info(res.data.msg, 2);
// }
// })
}
// 我要砍价列表的去支付
toCartBottom = (id) => {
http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => {
if (res.data.errno === 0) {
this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
} else {
Toast.info(res.data.msg, 2);
}
})
// http.post(`${API.home}/m/cart/add`, data).then((res) => {
// if (res.data.code === 200 || res.data.code === 15001) {
// this.props.history.push('/shopcart')
// } else {
// Toast.info(res.data.msg, 2);
// }
// })
}
// 查看更多
getMore = () => {
this.setState({
isShowMore: true
})
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({isShowMore: val})
}
// 领取砍价神器
toArtifact = () => {
const { history } = this.props;
const { course: { course_id = '' } } = this.state;
let data = {
courseId: getParam('id')? getParam('id') : course_id
}
http.post(`${API.home}/m/bargain/receiveLimit`, data).then((res) => {
const { code, msg } = res.data;
if (code === 200) {
this.setState({
isShowOverlay: true,
status: 5,
});
this.getBargainInfo();
}else if(code === 4030 || code === 4040) {
history.push('/passport');
} else {
Toast.info(msg, 2)
}
})
}
// 使用砍价神器
useArtifact = () => {
const { course: { course_id = '' } } = this.state;
const id = getParam('id')? getParam('id') : course_id;
this.toKanjia(id, 2, 0);
}
// 砍价接口
toKanjia = (id, type, uid) => {
let data = {
course_id: id,
type: type, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: uid // 被助力人id 【自己本人操作传0】
}
http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
if (res.data.code === 200) {
// is_success =0一切正常 =1 不能在砍了 =2关注公众号,可以再砍一刀！
this.setState({
amount: res.data.data.amount
})
if (type === 2) {
this.setState({
isShowOverlay: true,
status: 6
});
this.getBargainInfo();
this.getBargainRankList('', 1);
}
if (res.data.data.is_success === 1) {
this.setState({
isShowOverlay: true,
status: 4
})
} else if (res.data.data.is_success === 2) {
if (type === 3) {
this.setState({
isShowOverlay: true,
status: 2
})
} else if (type === 4) {
this.setState({
isShowOverlay: true,
status: 1,
firendBaigainPrice: false
})
}
} else if (res.data.data.is_success === 0) {
if (type === 3) {
this.setState({
isShowOverlay: true,
status: 2
})
} else if (type === 4) {
this.setState({
isShowOverlay: true,
status: 3
})
}
}
this.getBargainInfo()
this.getBargainRankList(getParam('id'), 1)
} else if (res.data.code == 4030 || res.data.code == 4040) {
if (browser.isWeixin) {
let redirectURI = window.location.href
if (redirectURI.includes('code=') && redirectURI.includes('state=STATE')) {
let index = redirectURI.lastIndexOf('code=');
redirectURI = redirectURI.substr(0, index - 1);
}
window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(redirectURI)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
} else {
this.props.history.push('/passport')
}
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 帮好友砍价第一刀
friendBargainFirst = () => {
const { course: { course_id = '' } } = this.state;
const id = getParam('id')? getParam('id') : course_id;
this.toKanjia(id, 3, this.state.originatorUid);
}
// 帮好友砍价第二刀
friendBargainSecond = () => {
const { course: { course_id = '' } } = this.state;
const id = getParam('id')? getParam('id') : course_id;
this.toKanjia(id, 4, this.state.originatorUid);
}
// 邀请好友砍价
shareFriendBargain = () => {
const { history } = this.props;
history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${getParam('bargaincode')}&is_originator=1`);
this.setState({
isShowOverlay: true,
status: 7,
isshowYindao: browser.isWeixin ? true : false
});
wxShare({
title: `我发现一门好课，快来帮我砍价吧！`,
desc: `我已经砍了${this.state.bargainData.bargain_price}元，看看你能砍多少`,
link: encodeURI(location.href),
imgUrl: this.state.course.course_img,
});
}
// 关闭弹窗
close = () => {
this.setState({
isShowOverlay: false,
status: '',
});
}
toCourseDetail = (id) => {
const {dispatch, history} = this.props;
// dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`);
return false;
// }));
}
render() {
// console.log(this.props);
let thirdRow, btn
// is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
if (this.state.bargainData.is_artifact === 0) {
thirdRow =
<div>再邀请<span className={'indicator'}>{this.state.bargainData.invite_num}</span>位好友助力即可获得<span
className={'indicator'}>【砍价神器】</span></div>
} else if (this.state.bargainData.is_artifact === 1) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button className={'artifact-btn'} onClick={this.toArtifact}>立即领取</button>
} else if (this.state.bargainData.is_artifact === 2) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button className={'artifact-btn'} onClick={this.useArtifact}>立即使用</button>
}
const { data: { is_originator = 0, assist_status = 0, bargain_status = 0 } } = this.state;
let bargainBtn = '';
// assist_status 助力状态 0-未助力，1-已助力一次 2-已助力两次，不能再助力
// is_originator 是否发起人 0-否 1-是
// bargain_status 砍价状态 0-砍价中，1砍价结束，待支付，2砍价过期（没有砍价记录没有砍价信息），3已购买
if(is_originator) {
if(bargain_status === 0) {
bargainBtn = <button className='active-btn' onClick={this.shareFriendBargain}>邀请好友砍价</button>
}
else {
bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
}
}else {
if(assist_status === 0 && bargain_status === 0) {
bargainBtn = <button className='active-btn' onClick={this.friendBargainFirst}>帮好友砍一刀</button>
}else if (assist_status === 1 && bargain_status === 0) {
bargainBtn = <button className='active-btn' onClick={this.friendBargainSecond}>再砍一刀</button>
}else if (assist_status === 2 && bargain_status === 0) {
bargainBtn = <button className={'invalid-btn'}>已帮好友助力</button>
}else if (bargain_status !== 0) {
bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
}
}
// if (this.state.isOriginator !== 1 && this.state.data.assist_status === 0 && this.state.data.bargain_status === 0) {
// bargainBtn = <button className='active-btn' onClick={this.friendBargainFirst}>帮好友砍一刀</button>
// } else if (this.state.isOriginator !== 1 && this.state.data.assist_status === 1) {
// bargainBtn = <button className='active-btn' onClick={this.friendBargainSecond}>再砍一刀1</button>
// } else if (this.state.isOriginator !== 1 && this.state.data.assist_status === 2) {
// bargainBtn = <button className={'invalid-btn'}>已帮好友助力</button>
// } else if (this.state.data.bargain_status === 1 || this.state.data.bargain_status === 2) {
// bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
// } else if (this.state.isOriginator === 1 && this.state.data.bargain_status === 0) {
// bargainBtn = <button className='active-btn' onClick={this.shareFriendBargain}>邀请好友砍价</button>
// }
return (
<div className={'bargain-middle-page'}>
<HeaderBar title='砍价详情' arrow={true} cart={true} toHref={'/'}></HeaderBar>
{/*<Loading isLoading={this.state.isLoaidng}>*/}
<div className="top">
<div className="bargain-area">
{
this.state.isOriginator !== 1 &&
<p className='bargain-tip'>你的好友发现一门精品课程，快来一起帮他砍价：</p>
}
<ul>
<VList
img={this.state.course.course_img}
info={
<CourseDes
isOriginator={this.state.isOriginator}
data={this.state.data}
toCart={this.toCart}/>
}
/>
</ul>
<div className="bargain-detail">
{
(this.state.data.bargain_status == 0 || this.state.data.bargain_status == 1) &&
<div>
<div className="top">
<div>
已砍<span className={'reduced-price'}>{this.state.bargainData.bargain_price}元</span>
</div>
{
this.state.data.bargain_status === 0 &&
<div>
<span
className={'time hour'}>{String(this.state.hour).padStart(2, 0)}</span> :
<span
className={'time min'}>{String(this.state.min).padStart(2, 0)}</span> :
<span className={'time sec'}>{String(this.state.sec).padStart(2, 0)}</span>
<span className={'inactive'}> 后砍价结束</span>
</div>
}
{
this.state.data.bargain_status === 1 && this.state.isOriginator === 1 &&
<span className={'inactive'}>砍价结束</span>
}
</div>
<div className="middle">
<span style={{width: this.state.width}}></span>
</div>
</div>
}
{
this.state.isOriginator === 1 && this.state.data.bargain_status === 0 &&
<div>
{thirdRow}
{btn}
</div>
}
{
this.state.isOriginator === 1 && this.state.data.bargain_status === 1 &&
<div>
砍价金额将于
<span className={'time hour'}>{String(this.state.day).padStart(2, 0)}</span><span
className={'unit'}> 天 </span>
<span className={'time min'}>{String(this.state.hour).padStart(2, 0)}</span><span
className={'unit'}> 时 </span>
<span className={'time sec'}>{String(this.state.min).padStart(2, 0)}</span><span
className={'unit'}>分</span>
后清零，请尽快完成支付
</div>
}
<div className={'button'}>
{bargainBtn}
</div>
</div>
</div>
<div className="bargain-records">
<div className="title">砍价记录</div>
<ul>
{
this.state.outList && this.state.outList.length > 0 && this.state.outList.map((item, index) => {
return (
<li key={index}>
<div className="left">
<img className='avatar' src={item.avatar_file} alt=""/>
<span className={'nickname'}>{item.user_name}</span>
<span className="rank-tag">{item.rank}</span>
</div>
<div className="right">
<img className='kanjia-icon' src={this.state.kanjiaIcon} alt=""/>
砍掉<span className={'price'}>{item.amount}</span>
</div>
</li>
)
})
}
</ul>
<div className="more" onClick={this.getMore}>查看更多>></div>
</div>
</div>
<div className="bargain-course-list" id='bargainCourse'>
<div className="title-wrapper">
<div className="title">我要砍价</div>
<div className="subtitle">邀请{this.state.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</div>
</div>
<ul>
{
this.state.courseList && this.state.courseList.length > 0 && this.state.courseList.map((item, index) => {
return <Course
className={'text-overflow-2'}
key={index}
id={item.course_id}
img={item.image_name}
title={item.course_title}
toDetail={this.toCourseDetail}
bottom={
<CourseBottom
user={this.props.user}
item={item}
toCartBottom={this.toCartBottom.bind(this, item.course_id)}
toDetail={this.toCourseDetail}
/>
}
/>
})
}
</ul>
</div>
<Link to={'/classify'} className={'preferential'}>查看更多精品课程 >></Link>
{/*更多好友砍价*/}
<Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople}
isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>
{
this.state.isShowOverlay &&
<Overlay>
<div className="bargain-popup__content">
{/*砍价成功去分享*/}
{
this.state.status === 7 &&
<BargainSuccess isshowYindao={this.state.isshowYindao} limitPeople={this.state.limitPeople}
close={this.close}/>
}
{/*引导关注公众号*/}
{/* {
this.state.status === 1 &&
<PublicNumber
money={this.state.amount}
avatar={this.props.user.data.avatar}
firendBaigainPrice={this.state.firendBaigainPrice}/>
} */}
{
this.state.status === 1 &&
<FollowBarcode
userInfo={this.props.user.data}
money={this.state.amount}
firendBaigainPrice={this.state.firendBaigainPrice}
/>
}
{/*好友成功砍第一刀*/}
{
this.state.status === 2 &&
<BargainFirst
bargainSecond={this.friendBargainSecond}
money={this.state.amount}
/>
}
{/*好友成功砍第二刀*/}
{
this.state.status === 3 &&
<BargainSecond close={this.close} money={this.state.amount}/>
}
{/*不能在砍了*/}
{
this.state.status === 4 &&
<NotBargain close={this.close} limitPeople={this.state.limitPeople}/>
}
{/*领取砍价神器*/}
{
this.state.status === 5 &&
<Artifact useArtifact={this.useArtifact}/>
}
{/*使用砍价神器*/}
{
this.state.status === 6 &&
<UseArtifact toCart={this.toCart} money={this.state.amount}
allMoney={this.state.bargainData.bargain_price}/>
}
{
this.state.status !== 7 &&
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-popup__button--close'}></i>
}
</div>
</Overlay>
}
{/*</Loading>*/}
</div>
);
}
}
// 课程信息 -- 右侧
function CourseDes(props) {
const { data: { bargain_status = 0, course = {}, is_originator = 0 }, toCart } = props;
return (
<div className={'des'}>
<div className="course-title text-overflow-2">
{course.course_title}
</div>
<div className="price-bar">
<span className={'discount-price'}>￥{course.course_price}</span>
{/* is_originator 是否发起人 0-否 1-是 */}
{
(is_originator == 1 && bargain_status !=3) &&
<button className={'purchase-btn'} onClick={toCart}>
¥{course.pay_price}去支付
</button>
}
{
(is_originator == 1 && bargain_status == 3) &&
<span className="course-button__buy--done">已购买</span>
}
</div>
</div>
);
}
function CourseBottom(props) {
// bargain_status 砍价状态 0-砍价中，1砍价结束，待支付，2砍价过期（没有砍价记录没有砍价信息），3已购买
const {course_id = '', bargain_status = '', price1 = '', pay_price = '' } = props.item || {};
const { user: { data = {} } } = props;
const price = bargain_status === 2? price1 : pay_price;
let Buttons
if(data.uid) {
if (props.item.bargain_status === 2) {
// Buttons = <Link to={`/detail?id=${props.item.course_id}`} className={'bargain'}>我要砍价</Link>
Buttons = (
<div className="">
<a onClick={() => props.toDetail(props.item.course_id)} className={'bargain bargian-study'}>我要砍价</a>
</div>
)
} else if (bargain_status === 3) {
if(course_id === 139) {
Buttons = (
<a
onClick={() => props.toDetail(props.item.course_id)}
className={'bargain bargian-study'}
>我要砍价</a>
);
}else {
Buttons = (
<Link
to={`/play/video?id=${props.item.v_course_id}`}
className={classnames('bargain', 'button--study')}
>去学习</Link>
);
}
} else {
Buttons = (
<div className="btns">
{/*<button className={classnames('bargain-btn', {invalid: props.item.bargain_status === 2})}>*/}
{/*{props.item.bargain_status === 2 ? '砍价结束' : '继续砍价'}*/}
{/*</button>*/}
{
bargain_status === 1 &&
<button className='invalid'>砍价结束</button>
}
{
bargain_status === 0 &&
<a onClick={() => props.toDetail(props.item.course_id)} className={'bargain-btn'}>继续砍价</a>
}
<button
onClick={() => props.toCartBottom(props.item.course_id)}
className={'purchase-btn'}
>
¥{price}去支付
</button>
</div>
)
}
}else {
Buttons = (
<a
onClick={() => props.toDetail(props.item.course_id)}
className={'bargain bargian-study'}
>我要砍价</a>
);
}
return (
<div className="course-bottom">
<div className={'course-price'}>
<span className={'discount-price'}>¥{props.item.price1}</span>
<span className={'original-price'}>¥{props.item.price0}</span>
</div>
{Buttons}
</div>
)
}
function PublicNumber(props) {
return (
<div className='bargain-public-number'>
<img className='avait' src={props.avatar} alt="" />
{
props.firendBaigainPrice &&
<p className='status-title ff4'>谢谢你帮我砍了{props.money}元！</p>
}
<p className='status-dec'>关注公众号，可以再砍一刀哦~</p>
<img
className='public-number-img'
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
alt=""
/>
</div>
)
}
function BargainFirst(props) {
return (
<div className='bargain-first'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='status-title'>谢谢你帮我砍了<span className='ff4'>{props.money}元</span>！</p>
<p className='status-dec'>你还可以帮我再砍一刀哦~</p>
<button className='bargain-href' onClick={props.bargainSecond}>再砍一刀</button>
</div>
)
}
function BargainSecond(props) {
return (
<div className='bargain-second'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='status-title'>厉害了，又帮好友砍掉<span className='ff4'>{props.money}元</span>！</p>
<a className='bargain-href' href='#bargainCourse' onClick={props.close}>我也要砍价</a>
</div>
)
}
function NotBargain(props) {
return (
<div className='not-bargain'>
<img className='middle-img' src={require('./image/kanjia_no_iccon.png')} alt=""/>
<p className='status-title'>你的好友用【砍价神器】把我砍蒙圈了<br/>不能再砍了哦~</p>
<p className='status-dec'>邀请{props.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</p>
<a className='bargain-href' href='#bargainCourse' onClick={props.close}>我也要砍价</a>
</div>
)
}
function Artifact(props) {
return (
<div className='artifact-box'>
<p className='top-tip'>恭喜你获得【砍价神器】！</p>
<p className='middle-tip'>
您可以使用
<span className={'indicator'}>【砍价神器】</span>
再砍一刀
</p>
<button className='use-artifact' onClick={props.useArtifact}>立即使用</button>
</div>
)
}
function UseArtifact(props) {
return (
<div className='use-artifact-box'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='top-tip'>厉害了，又砍掉了{props.money}元！</p>
<p className='middle-tip'>
你已经砍了
<span className={'indicator'}>{props.allMoney}元</span>
没见过你这么能砍的人...
</p>
<p className='btm-tip'>
不能再砍了哦~
</p>
<button className='tubuy' onClick={props.toCart}>去支付</button>
</div>
)
}
function BargainSuccess(props) {
return (
<div>
<div className='close-bargain-success' onClick={props.close}></div>
<div className="bargain-success">
{
props.isshowYindao &&
<i className='iconfont iconyindao'></i>
}
<p>分享到微信群邀请更多好友帮忙砍价</p>
<p>超过{props.limitPeople}位好友助力可获得<span className={'indicator'} style={{color: '#FF4000'}}>【砍价神器】</span>哦
</p>
</div>
</div>
)
}
export default withRouter(BargainMiddlePage);