UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

249 lines (231 loc) 8.42 kB
import React, {PureComponent} from 'react'; import classNames from 'classnames'; import { WechatConfig, SetParamToCookie, ShareMask, InfoModal, ModalLogin, checkUserAuth } from '../../components'; import {AccountsType, SeckillEnum} from '../../constants'; import {appConfig, shareConfig} from '../../config'; import {tools, message, monitor} from '../../utils'; import {seckillService, authService} from '../../service'; import styles from './seckill.less'; import SeckillSucceed from './succeed'; let seckill_share = shareConfig.seckill; const IsWeixin = tools.isWeiXin(); const SeckillStatus = SeckillEnum.SeckillStatus; const imgurl = `${appConfig.resources.ossDomain}/web/img`; /** * 秒杀活动 */ @checkUserAuth({account: AccountsType.MAIN}) // 微信授权--魔力耳朵公众号 class Seckill extends PureComponent { constructor(props) { super(props); this.state = { modalKey: '', loginVisible: false, shareVisible: false, userJoin: false, // 用户是否参加了活动 seckillStatus: SeckillStatus.OK, // 默认进行中 }; } componentDidMount() { document.title = '体验课时包优惠券限时抢'; this.loadData(); } // 神策指定位置埋点 monitorUtil = (message) => { monitor.log('', message); }; loadData = async () => { // 获取是否登录 const isLogin = await authService.checkLogin(); message.showLoading(); // 获取秒杀数据 const promiseAll = [seckillService.getSeckillInfo()]; if (isLogin) { promiseAll.push(seckillService.getUsrJoinInfo()); } Promise.all(promiseAll).then(([data, joinData]) => { this.monitorUtil('进入了活动页面'); let {seckillStatus, userJoin} = this.state; if (data) { seckillStatus = data.code; } if (joinData) { userJoin = joinData.participates; } this.setState({ seckillStatus, userJoin, }); message.closeLoading(); }).catch(error => { let {seckillStatus} = this.state; seckillStatus = error.code; this.setState({ seckillStatus, }); this.monitorUtil('获取活动页面数据失败'); message.closeLoading(); }); }; handleAccept = () => { this.monitorUtil('用户点击领取'); message.showLoading(); seckillService.acceptCoupon() .then(() => { message.closeLoading(); this.monitorUtil('用户领取成功'); this.setState({ userJoin: true, }); }) .catch(error => { let {userJoin, modalKey} = this.state; if (error.code) { switch (error.code) { case 'LOGIN_REQUIRED': // 未登录 case 'BIZ_USERCENTER_LOGIN_REQUIRED': // 未登录 modalKey = 'login'; break; case 'BIZ_SECKILL_ONLY_UNPAYING': // 老用户不能参与 this.monitorUtil('老生点击了领取'); modalKey = 'info'; break; case 'BIZ_SECKILL_ALREADY_PARTICIPATE': // 已经参与 userJoin = true; break; case 'BIZ_SECKILL_FREQUENT_JOIN': this.monitorUtil('请求太频繁啦,慢一点操作吧~'); modalKey = 'info'; break; case 'BIZ_SECKILL_ACTIVITY_NOT_EXIST': this.monitorUtil('该活动不存在~'); modalKey = 'info'; break; default: message.info('领取优惠券出错了!'); break; } } this.setState({ userJoin, modalKey, }); this.monitorUtil('用户领取失败'); message.closeLoading(); }); }; handleLogin = () => { this.monitorUtil('登录成功'); this.setState({ modalKey: '' }); setTimeout(() => { this.handleAccept(); }, 0); }; /** * 显示shareModal test * */ handelShowShare = () => { this.monitorUtil('点击了首页的分享'); this.setState({ modalKey: 'share' }); }; /** * 关闭Modal */ handelHideModal = () => { this.setState({ modalKey: '' }); }; renderModal = () => { const {modalKey} = this.state; let element = null; switch (modalKey) { case 'login': element = <ModalLogin onOk={this.handleLogin} onCancel={this.handelHideModal} />; break; case 'share': element = <ShareMask onCancel={this.handelHideModal}/>; break; case 'info': element = <InfoModal onCancel={this.handelHideModal}> <div className={styles['info-notes']}>您好,咱们这次活动是新生专享哦,老生学员锁定3月底的续费活动哦~</div> <div className={styles['info-hint']}>如有疑问,请咨询宝贝在魔力耳朵的教务老师</div> </InfoModal>; break; } return element; }; /** * @description 渲染 分享到微信按钮 * @return {*} */ renderShareButton = () => { if (!IsWeixin) return null; return <div className={styles['button-share']} onClick={this.handelShowShare}> </div>; }; renderContent = () => { const {userJoin, seckillStatus} = this.state; let btnStyle = ''; switch (seckillStatus) { case SeckillStatus.BIZ_SECKILL_NO_BEGINNING: // 未开始 btnStyle = styles['notstarted']; break; case SeckillStatus.BIZ_SECKILL_ACTIVITY_END: // 已结束 btnStyle = styles['end-btn']; break; case SeckillStatus.OK: // 进行中 btnStyle = styles['underway']; break; } btnStyle = classNames(styles['button-accept'], btnStyle); if (userJoin && seckillStatus !== SeckillStatus.BIZ_SECKILL_ACTIVITY_END) { return <SeckillSucceed/>; } else { let acceptBtn = seckillStatus === SeckillStatus.OK ? (<div className={btnStyle} onClick={this.handleAccept} />) : (<div className={btnStyle}/>); return (<div className={styles['seckill-wrapper']}> <header className={styles['header']}/> <div className={styles['content']}> {acceptBtn} {this.renderShareButton()} </div> <footer className={styles['footer']}> <div className={styles['introduce']}> <img src={`${imgurl}/seckill/introduce-1.png`} alt="介绍1"/> <img src={`${imgurl}/seckill/introduce-2.png`} alt="介绍2"/> <img src={`${imgurl}/seckill/introduce-3.png`} alt="介绍3"/> <img src={`${imgurl}/seckill/introduce-4.png`} alt="介绍4"/> <img src={`${imgurl}/seckill/introduce-5.png`} alt="介绍5"/> </div> </footer> <SetParamToCookie paramKey="rf"/> <WechatConfig showShare={true} shareOptions={seckill_share}/> {this.renderModal()} </div>); } }; render() { return this.renderContent(); } } export default Seckill;