import React, { PureComponent } from 'react'; import {CopyToClipboard} from 'react-copy-to-clipboard'; import classnames from 'classnames'; import { isEmpty } from 'lodash'; import { browser } from '@/utils'; import { http, getParam, validateTel } from "@/utils"; import { Formik, Form, Field } from 'formik'; import { Toast } from 'antd-mobile'; import Captcha from '@/common/Captcha'; import FollowQRcode from './../followQRcode'; import './index.scss'; import cookie from 'js-cookie' import { Link } from "react-router-dom"; class RedPacket extends PureComponent { constructor(props) { super(props), this.state = { // 弹窗类型:0: 无弹出,1:非微信,2:微信 type: 0, isCopy: false, validate: '', captchaInstance: null, seconds: 60, isFirst: true, timer: null, isTimer: false, // 是否开始倒计时 shareInfo: { url: '', share_code: '', command: '【七月在线送你一个红包】https://www.julyedu.com/' }, doneInfo: { //领取后的状态,1:领取成功,2:领取超时 status: 2, txt: '手机号绑定超时,红包已失效!', desc: '' }, money: '', // 红包金额, endTime: 10, // 手机绑定时限 countdownTimer: null, countdown: '00分00秒', // 绑定时间 accountInfo: {}, bindInfo: {}, country: { num: '86' } } } componentDidMount() { // console.log(this.props); this.judgePopupTypeFromCountry(); // 分享链接进入 this.judgePopupType(); window.addEventListener('beforeunload', this.removeStatisticsCookie) // 微信进入 const isWechat = getParam('wechat'); const { userInfo } = this.props; if(!userInfo || !userInfo.uid) { this.setRelativeCookie() } if(isWechat === '1' && !browser.isWeixin) { if(userInfo && userInfo.uid) { const type = window.localStorage.getItem('redpacket-click'); if(type === 'split') { http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => { const { code, data } = res.data; if(code === 200) { // 检查收否领取过 http.post( `${API.home}/sys/redPacket/split`, { action: 'check', share_code: data.share_code } ).then(res => { const { code, data } = res.data; if(code === 200) { window.localStorage.removeItem('redpacket-click'); // is_receive 是否领取过 0-否 1-是 if(data.is_receive) { this.judgeReceiveStatus(data, 8); }else { this.setState({ type: 3 }); } } }) } }); }else { this.setState({ type: 1 }); window.localStorage.removeItem('redpacket-click'); } }else { this.setRelativeCookie() this.setState({ type: 1 }); } } this.fetchShareInfo(); } removeStatisticsCookie = () => { cookie.remove('share_code', {path: '/', domain: '.julyedu.com'}) } componentWillUnmount() { window.removeEventListener('beforeunload', this.removeStatisticsCookie) } // 获取分享信息 fetchShareInfo = () => { const share_code = getParam('share_code'); http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => { const { code, data } = res.data; if(code === 200) { this.setState({ shareInfo: share_code? Object.assign({}, data, {share_code}) : data }); } }); } // 分享后进入,链接中带 share_code 字段 judgePopupType = () => { const share_code = getParam('share_code'); const { shareInfo } = this.state; if(share_code && share_code !== 'null') { this.setState({ shareInfo: Object.assign({}, shareInfo, { share_code }) }); // 检查收否领取过 http.post( `${API.home}/sys/redPacket/split`, { action: 'check', share_code } ).then(res => { const {code, data} = res.data; if(code === 200) { // is_overdue 红包是否过期 0-否 1-是 if(data.is_overdue) { this.setState({ type: 7 }); }else { // is_receive 是否领取过 0-否 1-是 if(data.is_receive) { this.judgeReceiveStatus(data); }else { this.setState({ type: browser.isWeixin? 2 : 3 }); } } } if(code === 4030 || code === 4040) { this.setState({ type: browser.isWeixin? 2 : 3 }); } }); } } // 选择区号后进入 judgePopupTypeFromCountry = () => { const { country } = this.props; const { shareInfo } = this.state; if(country.code) { this.setState({ country, shareInfo: Object.assign({}, shareInfo, { share_code: country.code }) }); // 检查收否领取过 http.post( `${API.home}/sys/redPacket/split`, { action: 'check', share_code: country.code } ).then(res => { console.log(res); const { code, data } = res.data; if(code === 200) { // is_receive 是否领取过 0-否 1-是 if(data.is_receive) { this.judgeReceiveStatus(data, 8); }else { this.setState({ type: 3 }); } // 清除 this.props.delCountryNum(); } }) } } // 判断领取状态--领取后 judgeReceiveStatus = (data, bindType=4) => { let txt = ''; let desc = ''; // receive_type 领取类型 1自己 2别人 if(data.receive_type === 1) { desc = '越多好友领取,你所得越多!'; } if(data.receive_type === 2) { desc = '每天只能帮好友领取一次哦~'; } // is_overdue 红包是否过期 0-否 1-是 if(data.is_overdue) { txt = data.red_packet_type === 1? `您已经领过该红包 ${data.amount}元现金!`: `您已经领过该红包 ${data.amount}元代金券碎片!`; }else { txt = data.red_packet_type === 1? `今日已领取${data.amount}元现金!`: `今日已领取${data.amount}元代金券碎片!`; } // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效 if(data.receive_status === 1) { this.setState({ type: 9, doneInfo: { status: 1, txt, desc } }); }else if(data.receive_status === 2) { this.setState({ type: bindType, money: data.amount, endTime: data.end_time }); this.startCountDown(); }else if(data.receive_status === 3) { this.setState({ type: 9, doneInfo: { status: 2, txt: '手机号绑定超时,红包已失效!', desc } }); } } // 绑定时间 startCountDown = () => { if(this.countdownTimer) { window.clearInterval(this.countdownTimer); } const { endTime } = this.state; let time = endTime; let minutes = 0; let seconds = 0; this.countdownTimer = window.setInterval(() => { if (time <= 0) { window.clearInterval(this.countdownTimer); this.setState({ endTime: 0 }); } time -= 1; minutes = `${Math.floor(time / 60)}`.padStart(2, 0); seconds = `${(time % 60)}`.padStart(2, 0); this.setState({ countdown: `${minutes}分${seconds}秒` }); }, 1000) } // 获取分享信息 handleToShare = () => { const { history, userInfo } = this.props; if(browser.isWeixin) { this.setState({ type: 2 }); history.push(`/detail?id=${getParam('id')}&wechat=1`); }else { if(userInfo && userInfo.uid) { // 领取好友的后,再领取自己的 share_code 未更新 http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => { const { code, data } = res.data; if(code === 200) { this.setState({ shareInfo: data, type: 1 }); } }); }else { history.push('/passport/login'); } } } // 提示关注公众号 openTip = () => { const { shareInfo } = this.state; // is_follow 是否关注公众号,0否,1是 if(!shareInfo.is_follow) { this.setState({ type: 11 }); } } // 拆红包 handleToOpen = () => { const { history } = this.props; const { shareInfo: { share_code='' } } = this.state; http.post( `${API.home}/sys/redPacket/split`, { action: 'receive', share_code } ).then(res => { const { code, data } = res.data; if(code === 200) { // is_receive 是否领取过 0-否 1-是 if(data.is_receive) { this.judgeReceiveStatus(data); }else { // red_packet_type 红包类型 1-现金 2-代金券 if(data.red_packet_type === 2) { this.setState({ type: 6, money: data.amount }); }else if(data.red_packet_type === 1) { // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效 if(data.receive_status === 1) { if(data.red_packet_type === 1) { this.setState({ type: 5, money: data.amount }); }else if(data.red_packet_type === 2 ) { this.setState({ type: 6, money: data.amount }); } }else if(data.receive_status === 2) { this.setState({ type: 4, money: data.amount, endTime: data.end_time }); this.startCountDown(); }else if(data.receive_status === 3) { this.setState({ type: 9, doneInfo: { status: 2, txt: '手机号绑定超时,红包已失效!', desc: data.receive_type === 1? '越多好友领取,你所得越多!' : data.receive_type === 2? '每天只能帮好友领取一次哦~' : '' } }); } } } }else if(code === 4030 || code === 4040) { history.push('/passport/login'); } }) } // 关闭弹出 handleToClose = (isOpen, isShare = false) => { if(isOpen) { const { shareInfo: { share_code='' } } = this.state; // 检查收否领取过 http.post( `${API.home}/sys/redPacket/split`, { action: 'check', share_code } ).then(res => { const { code, data } = res.data; if(code === 200) { // is_receive 是否领取过 0-否 1-是 if(data.is_receive) { this.judgeReceiveStatus(data); }else { this.setState({ type: 3 }); } } }); }else { if(isShare) { const { history } = this.props; history.push(`/detail?id=${getParam('id')}`); } this.setState({ type: 0 }); } } // 微信内点击蒙层 clickMask = () => { const { type } = this.state; if(type === 2) { this.setState({ type: 0 }); } } getCaptchaInstance = instance => { this.setState({ captchaInstance: instance }); } onVerify = (err, data) => { if (err) { console.log(err); } else { this.setState({ validate: data.validate }); } } handleToSend = ({tel, code}) => { let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '86'} } = this.state; if(validate) { if (!isFirst) { Toast.info('请重新进行滑块验证', 2, null, false); captchaInstance.refresh(); this.setState({ isFirst: true }); return } if(!isTimer) { if (!tel) { Toast.info('手机号码不能为空', 2, null, false); }else if(!/^\d+$/.test(tel)) { // }else if (!validateTel(tel)) { Toast.info('请输入正确格式的手机号码', 2, null, false); }else { // 获取验证码 http.post( `${API['passport-api']}/m/personal/bindPhoneSendCode`, { area_code: `00${num}`, phone_num: tel } ).then(res => { const { errno, msg } = res.data; if(errno === 200) { Toast.info('验证码发送成功', 2, null, false); // 倒计时 this.timer = window.setInterval(() => { if (seconds <= 0) { window.clearInterval(this.timer); this.setState({ isTimer: false, seconds: 60 }); }else { this.setState({ isTimer: true, seconds: --seconds }); } }, 1000); // 滑块 this.setState({ isFirst: false }) }else { Toast.info(msg, 2, null, false); } }) } } } return false; } // 绑定后领取 receviceAfterBind = () => { http.get(`${API.home}/sys/red_packet/receive`).then(res => { const { code, data, msg } = res.data; if(code === 200) { // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效 if(data.receive_status === 1) { if(data.red_packet_type === 1) { this.setState({ type: 5, money: data.amount }); }else if(data.red_packet_type === 2 ) { this.setState({ type: 6, money: data.amount }); } }else if(data.receive_status === 2) { this.setState({ type: 4, money: data.amount, endTime: data.end_time }); this.startCountDown(); }else if(data.receive_status === 3) { this.setState({ type: 9, doneInfo: { status: 2, txt: '手机号绑定超时,红包已失效!', desc: data.receive_type === 1? '越多好友领取,你所得越多!' : data.receive_type === 2? '每天只能帮好友领取一次哦~' : '' } }); } }else { Toast.info(msg, 2, null, false); } }) } // 绑定手机 toContinueBind = (isValid = 1) => { const { accountInfo: { tel, code}, country: {num = '86'} } = this.state; // is_valid 是否验证 1:验证(默认),0不验证 http.post( `${API['passport-api']}/m/personal/bindPhone`, { area_code: `00${num}`, phone_num: tel, code: code, type: 1, is_valid: isValid } ).then(res => { const { errno, data, msg } = res.data; if(errno === 200 ) { if(isValid) { if(data.tip_info) { this.setState({ type: 10, bindInfo: data.tip_info }) }else { this.receviceAfterBind(); } }else { this.receviceAfterBind(); } }else { Toast.info(msg, 2, null, false); } }); } //设置统计信息 setRelativeCookie = () => { const config = {path: '/', domain: '.julyedu.com'} cookie.set('share_code', getParam('share_code') ? getParam('share_code') : 'share_code', config) } render() { // console.log(this.props); const { history, userInfo } = this.props; const { type, isCopy, validate, isTimer, seconds, shareInfo: { command = '', share_code = '' }, money, doneInfo, countdown, endTime, bindInfo, country } = this.state; const cls = classnames('popup-mask',{ 'popup-mask--no': type !== 2 }); return ( <> <div className="red-packet"> <p className="red-packet__title">分享课程给好友,你和好友都可以领红包哦〜</p> <button className="red-packet__button" onClick={this.handleToShare}>分享领红包</button> </div> {/* popup */} { type !== 0 && <div className={cls} onClick={this.clickMask}> {/* wechat */} { type == 2 && <div className="pupup-wechat"> <h4 className="popup-wechat__title">当前环境不支持领红包活动</h4> <p className="popup-wechat__desc">请点击右上角“ ··· ”,选择在浏览器中打开 然后参与活动!</p> <i className="popup-wechat__icon"></i> </div> } {/* wechat--no */} { type === 1 && <div className="popup-password"> <div className="popup-password__content"> <h4 className="popup-password__header">复制口令发送给好友</h4> <div className="popup-password__body"> <p id="password" className="popup-passowrd__info"> {command.length > 16? `${command.substr(0, 16)}...` : command} </p> {!isCopy ? userInfo && userInfo.uid ? ( <CopyToClipboard text={command} onCopy={() => this.setState({ isCopy: true })} > <button className="popup-password__button--copy">复制口令</button> </CopyToClipboard> ) : ( <button className="popup-password__button--copy" onClick={() => { window.localStorage.setItem('redpacket-click', 'copy'); history.push('/passport/login'); }} >复制口令</button> ) : <p className="popup-password__success">复制成功,快发送给好友吧~</p> } </div> <p className="popup-password__footer"> 好友领取红包后,你将获得同样奖励。<br /> 自己也可以领取哦~ </p> </div> <i className="popup-password__button--close iconfont iconiconfront-2" onClick={() => { if(getParam('wechat') === '1') { if(userInfo && userInfo.uid) { this.handleToClose(true); history.push(`/detail?id=${getParam('id')}`); }else { this.setState({ type: 3 }); window.localStorage.setItem('redpacket-click', 'split'); } }else { this.handleToClose(true); } this.setState({ isCopy: false }); }} /> </div> } {/* red-packet--close */} { type === 3 && <Packet type={3} packetInfo={{ title: '七月在线给你发了个红包~' }} handleToClose={() => this.handleToClose(false)} handleToOpen={this.handleToOpen} /> } {/* red-packet--open */} { type === 4 && <Packet type={4} packetInfo={{ money, tip: ['为了您的资金安全,请于5分钟之内绑定手机号,超时红包将失效'], btn: { txt: `立即绑定(${countdown})`, onClick: () => { this.setState({ type: 8 }); } } }} handleToClose={() => this.handleToClose(false)} /> } {/* red-packet--money success */} { type === 5 && <Packet type={5} packetInfo={{ money, tip: ['可前往【七月在线】APP','- 账户资金中提现'], btn: { txt: '获取更多奖励', onClick: () => { history.push('/ShareCourse'); } } }} handleToClose={() => { const isShare = getParam('share_code')? true : false; this.handleToClose(false, isShare); this.openTip(); }} /> } {/* red-packet--fragment success */} { type === 6 && <Packet type={6} packetInfo={{ money, tip: ['可前往【七月在线】APP','- 我的优惠券中合成代金券'], btn: { txt: '获取更多奖励', onClick: () => { history.push('/ShareCourse'); } } }} handleToClose={() => { const isShare = getParam('share_code')? true : false; this.handleToClose(false, isShare); this.openTip(); }} /> } {/* red-packet--late 来完了 */} { type === 7 && <Packet type={7} packetInfo={{ btn: { txt: '获取更多奖励', onClick: () => { history.push('/ShareCourse') } } }} handleToClose={() => { const isShare = getParam('share_code')? true : false; this.handleToClose(false, isShare); }} /> } {/* form */} { type === 8 && <div className="popup-form"> <Formik initialValues={{ tel: '', code: '' }} validate={({tel, code}) => { const errors = {}; // if (!validateTel(tel)) { if(!/^\d+$/.test(tel)) { errors.tel = '请填写正确格式的手机号'; } if (!/[0-9]{6}/.test(code)) { errors.code = '请输入验证码'; } return errors; }} onSubmit={(values, { setStatus, setSubmitting }) => { this.setState({ accountInfo: { ...values } }); this.toContinueBind(); }} render={({values: {tel, code}, errors}) => ( <Form className="popup-form__content"> <h4 className="popup-form__title">绑定手机号</h4> <div className="popup-form__item"> <Link className="popup-form__button--num" to={`/country?id=${getParam('id')}&share_code=${share_code}`}> +{country.num} <i className="iconfont iconiconfront-69"/> </Link> <Field name="tel" render={({field}) => { return ( <input {...field} className="popup-form__ipt" data-bdrs="0 6px 6px 0" data-type="tel" type="text" placeholder="请填写手机号" /> ); }} /> </div> <Captcha mrBtm={15} getInstance={this.getCaptchaInstance} onVerify={this.onVerify} /> { endTime === 0? ( <> <div className="popup-form__item"> <p className="popup-form__tip"> <i className="iconfont icondanseshixintubiao-8"></i> 绑定超时,红包已失效! </p> </div> <button className="popup-packet__button--bundle" data-status="do" type="button" onClick={() => { history.push('/ShareCourse'); }} >获取更多奖励</button> </> ) : ( <> <div className="popup-form__item"> <Field name="code" render={({field}) => { return ( <input {...field} className="popup-form__ipt popup-form__ipt--left" type="text" placeholder="输入验证码" /> ); }} /> <button className="popup-form__button--code" data-status={(validate && !isTimer)? 'do': ''} type="button" onClick={() => this.handleToSend({tel, code})} > { isTimer? `重新发送${seconds}s` : '发送验证码' } </button> </div> <button className="popup-packet__button--bundle" data-status={(tel && code && isEmpty(errors))? 'do': 'done'} type="submit" > {`完成绑定(${countdown})`} </button> </> ) } </Form> )} /> <i className="popup-password__button--close iconfont iconiconfront-2" onClick={() => this.handleToClose(false)} /> </div> } {/* 领取后的状态 */} { type === 9 && <div className="popup-done"> <div className="popup-done__content"> <h4 className={classnames("popup-done__title", {'popup-done__title--overtime': doneInfo.status === 2})}> { doneInfo.status === 2 && <i className="iconfont icondanseshixintubiao-8"></i> } {doneInfo.txt} </h4> <p className="popup-done__desc">{doneInfo.desc}</p> <button className="popup-packet__button--bundle" data-status="do" type="submit" onClick={() => { history.push('/ShareCourse'); }} >获取更多奖励</button> </div> <i className="popup-password__button--close iconfont iconiconfront-2" onClick={() => { const isShare = getParam('share_code')? true : false; this.handleToClose(false, isShare); }} /> </div> } {/* 手机号绑定提示 */} { type === 10 && <div className="popup-bind"> <div className="popup-bind__content"> <h4 className="popup-bind__title">绑定确认</h4> <p className="popup-bind__desc">该手机号已绑定到以下账号,继续绑定将解除以下绑定状态</p> <ul className="popup-bind__list"> { bindInfo['email'] && <li className="popup-bind__account"> {/* 邮箱 */} <i className="iconfont iconduanxin"></i> <p className="popup-bind__account--name">{bindInfo['email']}</p> </li> } { bindInfo['wechat_nickname'] && <li className="popup-bind__account"> {/* wechat */} <i className="icon-wachat"></i> <p className="popup-bind__account--name">{bindInfo['wechat_nickname']}</p> </li> } { bindInfo['qq_nickname'] && <li className="popup-bind__account"> {/* qq */} <i className="icon-qq"></i> <p className="popup-bind__account--name">{bindInfo['qq_nickname']}</p> </li> } { bindInfo['sina_nickname'] && <li className="popup-bind__account"> {/* 微博 */} <i className="icon-sina"></i> <p className="popup-bind__account--name">{bindInfo['sina_nickname']}</p> </li> } </ul> <div className="popup-bind__button"> <button className="popup-bind__button--cancle" onClick={() => this.handleToClose(false)}>取消</button> <button className="popup-bind__button--confirm" onClick={() => this.toContinueBind(0)}>继续绑定</button> </div> </div> <i className="popup-password__button--close iconfont iconiconfront-2" onClick={() => this.handleToClose(false)} /> </div> } {/* 关注公众号 */} { type === 11 && <FollowQRcode toClose={() => this.handleToClose(false)} /> } </div> } </> ) } } const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => { const cls_content = classnames( 'popup-packet__content', { 'popup-packet__content--open': type === 4, 'popup-packet__content--money': type === 5, 'popup-packet__content--fragment': type === 6, 'popup-packet__content--late': type === 7, } ); const {money, tip=[], btn} = packetInfo; return ( <div className={classnames('popup-packet')}> <div className={cls_content}> { type === 3 && <> <p className="popup-packet__title">七月在线给你发了个红包~</p> <button className="popup-packet__button--split" onClick={handleToOpen} /> </> } { (type === 4 || type === 5 || type === 6)&& <> <h4 className="popup-packet__label">恭喜您获得</h4> <p className="popup-packet__value"> {money} <span className="popup-packet__value--unit">元</span> </p> <p className="popup-packet__tip"> { tip.map((item, index) => { if(index !== (tip.lenght - 1)) { return ( <> {item} <br /> </> ) } return item; }) } </p> <button className="popup-packet__button--bundle" onClick={btn.onClick} > {btn.txt} </button> </> } { type === 7 && <> <h4 className="popup-packet__label">您来晚了!</h4> <p className="popup-packet__value"> 红包仅能当日领取,下次<br /> 早点来哦~ </p> <button className="popup-packet__button--bundle" onClick={btn.onClick} > {btn.txt} </button> </> } </div> <i className="popup-password__button--close iconfont iconiconfront-2" onClick={handleToClose} /> </div> ); } export default RedPacket;