react-app-shell/activity/src/views/seckill/index.js

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

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;