import React, { Component, useState } from 'react' import './bargain.scss' import { Flex, Toast } from "antd-mobile" import {differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays} from "date-fns" import { getParam, http } from "@/utils" import Ranking from "@/components/bargainMiddlePage/ranking" import { compose } from "redux" import { withRouter } from 'react-router-dom' import { connect } from "react-redux"; import Mask from '@/common/Mask/index'; import BargainBindPhone from './../bindPhone/index'; import BargainConfirmBind from './../bindPhone/confirm'; class Bargain extends Component { constructor(props) { super(props) this.state = { kanjiaIcon: require('./image/kanjia_icon.png'), info: '', outList: [], list: [], status: '', time: '', barInfo: {}, country: '86', price: 0, // 每次砍价砍掉的价格 sum: 0, // 累计砍掉的价格, bindInfo: {}, // 冲突信息 formInfo: {} } } componentDidMount() { this.getBargainInfo(); this.judgePopupTypeFromCountry(); } // 选择区号后进入 judgePopupTypeFromCountry = () => { const { country, delCountryNum } = this.props; if(country.from && country.from === 'bargain') { this.setState({ country: country.num, status: 3, }); // 清除 delCountryNum(); } } // 获取助理好友 getBargainRankList = (params = {}) => { http.post(`${API.home}/m/bargain/rankList`, params).then((res) => { if (res.data.code === 200) { this.setState({ list: res.data.data.list, outList: res.data.data.list[0] }) } else { Toast.info(res.data.msg, 2) } }) } //获取砍价信息 getBargainInfo = (isFetch = true) => { let data = { courseId: getParam('id') } http.post(`${API.home}/m/bargain/courseDetail`, data).then((res) => { const { code, data, msg = '' } = res.data; if (code === 200) { this.setState({ barInfo: data, }); if(isFetch) { // 砍价状态 0-砍价中,1砍价结束,待支付,2砍价过期(没有砍价记录没有砍价信息),3已购买 if (data.bargain_status === 0 || data.bargain_status === 1 ) { this.getBargainRankList({ type: 0, bargain_code: data.bargain_code }); } } } else { Toast.info(msg, 2); } }); } // 查看更多 getMore = () => { this.setState({ isShowMore: true }) } // 自组件传给父组件的boxHide boxHide = (val) => { this.setState({isShowMore: val}) } // 领取砍价神器 toArtifact = () => { let data = { courseId: getParam('id') } http.post(`${API.home}/m/bargain/receiveLimit`, data).then((res) => { if (res.data.code === 200) { this.setState({ status: 1 }); this.getBargainInfo(false); } else { Toast.info(res.data.msg, 2) } }) } // 使用砍价神器 useArtifact = () => { this.toKanjia(getParam('id'), 2, 0) } // 加入购物车 toCart = () => { 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); } }) } // 继续砍价 continueBargain = () => { const { history } = this.props; const { barInfo = {} } = this.state; const code = barInfo.bargain_code; history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${code}&is_originator=1`) } // 我要砍价 iWantBargain = () => { const { history, user } = this.props const uid = user && user.data && user.data.uid; if(!uid){ history.push('/passport/login'); } else { this.toKanjia(getParam('id'), 1, 0); } } // 砍价接口 toKanjia = (id, type, uid) => { let data = { course_id: id, type: type, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力 parent_uid: uid // 被助力人id 【自己本人操作传0】 }; const { history } = this.props; http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => { const { data: { data, code } } = res; if (code === 200) { // user_status 用户状态 1-关注公众号,2-绑定手机号 3-再砍一刀 (是发起人没有这个字段) if(data.user_status === 2) { this.setState({ status: 3, }); }else { if(type === 2) { this.setState({ status: 2, price: data.amount, sum: data.bargain_price }); this.getBargainInfo(false); this.getBargainRankList({ type: 0, bargain_code: data.bargain_code }); }else { history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${data.bargain_code}&is_originator=1`) } } } else { Toast.info(res.data.msg, 2) } }) } // 关闭弹窗 handleToHide = () => { this.setState({ status: '' }); } // 绑定手机号--确认 confirmBindPhone = (params, bindInfo) => { this.setState({ status: 4, formInfo: params, bindInfo }); } render() { const { list, outList, barInfo, country, price, sum, status, formInfo, bindInfo } = this.state; const { user } = this.props const uid = user && user.data && user.data.uid return ( <div className={'bargain-func'}> {/*bargain_status 砍价状态 0-砍价中,1砍价结束,待支付,2砍价过期(没有砍价记录没有砍价信息),3已购买*/} { (barInfo.bargain_status === 2 || (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) && <BargainIntro limitPeople={barInfo.limit_people} iWantBargain={this.iWantBargain} /> } { (barInfo.bargain_status === 0 || barInfo.bargain_status === 1) && uid && <BargainStatus info={barInfo} outList={outList} getMore={this.getMore} toArtifact={this.toArtifact} useArtifact={this.useArtifact} continueBargain={this.continueBargain} /> } {/* 绑定手机号 */} <Mask visible={status === 3} handleToHide={this.handleToHide}> <BargainBindPhone country={country} handleToBargain={this.iWantBargain} confirmBindPhone={this.confirmBindPhone} /> </Mask> {/* 绑定手机号--确认 */} <Mask visible={status === 4} handleToHide={this.handleToHide}> <BargainConfirmBind data={formInfo} bindInfo={bindInfo} handleToBargain={this.iWantBargain} /> </Mask> {/* 领取砍价神器 */} <Mask visible={status === 1} handleToHide={this.handleToHide}> <Artifact useArtifact={this.useArtifact} /> </Mask> {/* 使用砍价神器 */} <Mask visible={status === 2} handleToHide={this.handleToHide}> <UseArtifact price={price} sum={sum} toCart={this.toCart} /> </Mask> {/* 更多好友砍价 */} <Ranking list={list} icon={this.state.kanjiaIcon} limitPeople={barInfo.limit_people} isShowMore={this.state.isShowMore} boxHide={this.boxHide} /> </div> ) } } // 是砍价课程时,展示砍价按钮 function BargainIntro(props) { return ( <div className="intro-outer"> <div className="intro-inner"> <Flex direction={'column'} justify={'center'} className={'intro-wrapper'} > <p> 邀请 <span className={'indicator'}>{props.limitPeople}位</span> 好友帮忙砍价可获得 <span className={'indicator'}>【砍价神器】</span> </p> <p>一刀绝杀,砍爆底价</p> <Flex.Item> <button onClick={props.iWantBargain}>我要砍价</button> </Flex.Item> </Flex> </div> </div> ) } function BargainStatus(props) { const [day, setDay] = useState(0) const [hour, setHour] = useState(0) const [min, setMin] = useState(0) const [sec, setSec] = useState(0) let thirdRow, btn // is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用 if (props.info.is_artifact === 0) { thirdRow = <div>再邀请<span className={'indicator'}>{props.info.invit_num}</span>位好友助力即可获得<span className={'indicator'}>【砍价神器】</span></div> } else if (props.info.is_artifact === 1) { thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div> btn = <button onClick={props.toArtifact}>立即领取</button> } else if (props.info.is_artifact === 2) { thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div> btn = <button onClick={props.useArtifact}>立即使用</button> } let date = props.info.end_time * 1000 let now = Date.now() setInterval(() => { date -= 1000 setSec(differenceInSeconds(new Date(date), now) % 60) setMin(differenceInMinutes(new Date(date), now) % 60) setHour(differenceInHours(new Date(date), now) % 24) setDay(differenceInDays(new Date(date), now) % 24) }, 1000) return ( <div className="status-outer"> { props.info.bargain_status === 0 && <div className="status-inner"> <Flex direction={'column'}> <div className={'first-row'}> <div> 已砍<span className={'indicator'}>{props.info.bargain_price}元</span> <span className={'time hour'}>{String(hour).padStart(2, 0)}</span> : <span className={'time min'}>{String(min).padStart(2, 0)}</span> : <span className={'time sec'}>{String(sec).padStart(2, 0)}</span> <span className='over'>后砍价结束</span> </div> <div onClick={props.getMore}>{props.info.assist_num}位好友助力></div> </div> <div className="sec-row"> <div> <img src={props.outList.avatar_file} alt=""/> <span className='name'>{props.outList.user_name}</span> </div> <div> <div>砍掉<span className={'indicator'}>{props.outList.amount}元</span></div> <button onClick={props.continueBargain}>继续砍价</button> </div> </div> <div className="third-row"> {thirdRow} {btn} </div> </Flex> </div> } { props.info.bargain_status === 1 && <div className="status-inner status-over"> <Flex direction={'column'}> <div className={'first-row'}> <div> 已砍<span className={'indicator'}>{props.info.bargain_price}元</span> <span className='bargain-over'> 砍价结束 </span> </div> <div onClick={props.getMore}>{props.info.assist_num}位好友助力></div> </div> <div className="time-tobuy"> 砍价金额将于 <span className={'time hour'}>{String(day).padStart(2, 0)}</span><span className={'unit'}> 天 </span> <span className={'time min'}>{String(hour).padStart(2, 0)}</span><span className={'unit'}> 时 </span> <span className={'time sec'}>{String(min).padStart(2, 0)}</span><span className={'unit'}>分</span> 后清零,请尽快完成支付 </div> </Flex> </div> } </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) { const { sum, price } = props; return ( <div className='use-artifact-box'> <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt="" /> <p className='top-tip'>厉害了,又砍掉了{price}元!</p> <p className='middle-tip'> 你已经砍了 <span className={'indicator'}>{sum}元</span> 没见过你这么能砍的人... </p> <p className='btm-tip'>不能再砍了哦~</p> <button className='tubuy' onClick={props.toCart}>去支付</button> </div> ) } export default compose( connect( state => ({ user: state.user }), null ), withRouter )(Bargain)