react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
249 lines (231 loc) • 8.42 kB
JavaScript
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`;
/**
* 秒杀活动
*/
({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;