react-app-shell/activity/src/views/bargain/component/main/bargainBtn.js

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

import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import moment from 'moment';
import {withRouter} from 'react-router-dom';
import queryString from 'query-string';
import {Button} from 'antd-mobile';
import className from 'classnames';

import {ModalLogin, InfoModal} from '../../../../components';
import {ShareLayerModal} from '../../../component';

import {message, tools} from '../../../../utils';
import {bargainService, bargainOldService} from '../../../../service';
import {
    ACTIVE_STATUS,
    BARGAIN_OWNER,
    BARGAIN_STATUS,
    USER_STATUS,
    CAMP_STATUS,
    ADS_STATUS,
    BARGAIN_MODAL_KEY,
    BARGAIN_RESULT_CODE,
    ApplyError
} from '../../../../constants';

import styles from '../styles.less';

/**
 * 渲染状态
 */
@inject(({bargainStore}) => {
    const levels = bargainStore.activeInfo.levels;
    let activePrice = 0;
    if (levels && levels.length > 0) {
        activePrice = levels[levels.length - 1].price;
    }
    return {
        // 数据
        activeId: bargainStore.state.activeId,
        recordId: bargainStore.state.recordId,
        status: bargainStore.state.status, // 状态
        activeStatus: bargainStore.state.activeStatus,
        bargainRank: bargainStore.state.bargainRank,
        myRecordId: bargainStore.state.myRecordId,
        cltUrl: bargainStore.campInfo.cltUrl,
        campTime: bargainStore.campInfo.startTime,
        campUrl: bargainStore.campInfo.url,
        campRank: bargainStore.campInfo.trainingCampRank,
        activePrice: activePrice,
        bargainPrice: bargainStore.bargainData.bargainPrice || 0,

        // 函数
        loadData: bargainStore.loadData,
    };
})
@observer
@withRouter
export default class BargainBtn extends Component {
    constructor(props) {
        super(props);

        this.urlParams = queryString.parse(window.location.search);
        this.allow = true;
        this.state = {
            modalKey: '',
            tipsInfo: {
                tipsTitle: '',
                tipsText: '',
                helpNum: 0
            },
        };
        this.openId = tools.getActivityOpenId();
    }

    /**
     * 渲染状态按钮
     * @returns {*}
     */
    renderBtn = () => {
        const {bargainOwner, userStatus} = this.props.status;
        const {activeStatus} = this.props;
        if (activeStatus === ACTIVE_STATUS.NOT_BEGIN) {  // 活动未开始
            return (
                <div>
                    <Button className={className(styles['btn-normal'], styles['btn-grey'])}>活动未开始，敬请期待</Button>
                    <p className={styles['warn-txt']}>限量免费<span>3000</span>份</p>
                </div>
            );
        } else if (activeStatus === ACTIVE_STATUS.ACTIVE) {  // 活动进行中
            return this.renderBargainStatusBtn();
        } else if (activeStatus === ACTIVE_STATUS.END) { // 活动已结束
            if (userStatus === USER_STATUS.JOIN_BARGAIN) {  // 当前微信用户已发起砍价（已登录）
                if (bargainOwner === BARGAIN_OWNER.MY_BARGAIN) {  // 该砍价ID发起人为当前登录用户
                    return this.renderMyBargainBtn();
                } else if (bargainOwner === BARGAIN_OWNER.OTHER_BARGAIN) {  // 该砍价ID发起人非当前登录用户
                    return (
                        <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handelToMyBargain}>我的砍价</Button>
                    );
                }
            }
        }
        return null;
    };

    /**
     * 渲染砍价进行中状态按钮
     * @returns {*}
     */
    renderBargainStatusBtn = () => {
        const {bargainStatus, bargainOwner, userStatus} = this.props.status;

        if (bargainOwner === BARGAIN_OWNER.UNKNOWN) {  // 当前砍价ID没有发起人（砍价未发起则发起人为UNKNOWN）
            if (userStatus === USER_STATUS.NOT_JOIN) {  // 当前微信用户是否未发起过砍价活动 （当前微信用户未登录，当前微信用户已登录且未发起砍价活动）
                return (
                    <div>
                        <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handelMakeBargain}>我要参加砍价活动</Button>
                        <p className={styles['warn-txt']}>限量免费<span>3000</span>份</p>
                    </div>
                );
            } else {  // 当前登录用户发起过砍价活动则需要跳转到该用户的活动页面
                // window.location.replace('url')
                return null;
            }
        } else if (bargainOwner === BARGAIN_OWNER.MY_BARGAIN) {  // 该砍价ID是否为当前微信用户发起（登录）
            if (bargainStatus === BARGAIN_STATUS.BARGAINING) {  // 该砍价ID砍价状态为砍价中-邀请好友
                return (
                    <div>
                        <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handelInviteHelp}>邀请好友帮你砍价吧~</Button>
                        <p className={styles['warn-txt']}>限量免费<span>3000</span>份</p>
                    </div>
                );
            } else {  // 该砍价ID砍价状态非砍价中（砍价成功）
                return this.renderMyBargainBtn();
            }
        } else if (bargainOwner === BARGAIN_OWNER.OTHER_BARGAIN) {  // 该砍价ID并非当前微信用户发起（用户未登录默认为非本人、用户已登录且非本人发起）
            return this.renderOtherBargain();
        }
        return null;
    };

    /**
     * 渲染砍价成功状态按钮
     * @returns {*}
     */
    renderMyBargainBtn = () => {
        const {bargainStatus, campStatus, adsStatus} = this.props.status;
        const {activePrice, bargainPrice} = this.props;
        const {bargainRank, cltUrl, campRank} = this.props;
        const campTime = moment(this.props.campTime).format('M.D');
        if (bargainStatus === BARGAIN_STATUS.SUCCESS_CAMP) {  // 训练营砍价成功
            if (campStatus === CAMP_STATUS.CURRENT_CAMP) {  // 是否为首批训练营
                return (
                    <div>
                        <p className={styles['success-congra']}>
                            恭喜您砍价成功！{activePrice !== bargainPrice ? '' : `您是第${bargainRank}位砍价成功的用户，`}成功加入第一批训练营，快点进入班级吧～
                        </p>
                        <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handleToCamp}>进入教室</Button>
                    </div>
                );
            } else if (campStatus === CAMP_STATUS.NOT_CURRENT_CAMP) {  // 非首批训练营
                return (
                    <div>
                        <p className={styles['success-congra']}>
                            恭喜您砍价成功！{activePrice !== bargainPrice ? '' : `您是第${bargainRank}位砍价成功的用户，`}成功加入第{campRank}批训练营，开营时间是{campTime}日，您可以先添加教务老师为好友哦！
                        </p>
                        <div className={styles['edu-code']}>
                            <img src={cltUrl}/>
                            <p className={styles['edu-warn-msg']}>
                                提示：由于微信对添加好友有限制，可能会出现老师收不到好友请求的情况，
                                如在24小时内老师还未通过您的好友申请，请您隔天一定再发送一次哦~</p>
                        </div>
                    </div>
                );
            }
        } else if (bargainStatus === BARGAIN_STATUS.SUCCESS_GIFT) { // 大礼包砍价成功
            if (adsStatus === ADS_STATUS.ADD_ADS) {  // 是否未填写地址
                return (<div>
                    <p className={styles['success-congra']}>恭喜您砍价成功！{activePrice !== bargainPrice ? '' : `您是第${bargainRank}位砍价成功的用户，`}快点填写收货地址吧～</p>
                    <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handleToAddress}>填写收货地址~</Button>
                </div>);
            } else if (adsStatus === ADS_STATUS.VIEW_ADS) {  // 已填写地址
                return (<div>
                    <p className={styles['success-congra']}>恭喜您砍价成功！{activePrice !== bargainPrice ? '' : `您是第${bargainRank}位砍价成功的用户，`}点击查看收货地址～</p>
                    <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handleToAddress}>查看收货地址</Button>
                </div>);
            }
        }
        return null;
    };

    /**
     * 渲染好友帮砍状态按钮
     * @returns {*}
     */
    renderOtherBargain = () => {
        const {userStatus, bargainStatus} = this.props.status;
        if (userStatus === USER_STATUS.NOT_JOIN) {  // 当前微信用户是否未发起砍价活动（当前微信用户未登录，当前微信用户已登录且未发起砍价活动）
            if (bargainStatus === BARGAIN_STATUS.BARGAINING) {  // 当前砍价ID砍价状态为砍价中
                return (
                    <div>
                        <Button
                            className={className(styles['btn-normal'], styles['btn-left'])}
                            onClick={this.handelFriendHelp}>帮他砍价</Button>
                        <Button
                            className={className(styles['btn-normal'], styles['btn-right'])}
                            onClick={this.handelMakeBargain}>发起砍价</Button>
                    </div>
                );
            } else { // 砍价成功
                return (
                    <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handelMakeBargain}>发起砍价</Button>
                );
            }

        } else if (userStatus === USER_STATUS.JOIN_BARGAIN) { // 当前微信用户是已发起砍价活动（登录）
            if (bargainStatus === BARGAIN_STATUS.BARGAINING) {  // 当前砍价ID砍价状态为砍价中
                return (
                    <div>
                        <Button
                            className={className(styles['btn-normal'], styles['btn-left'])}
                            onClick={this.handelFriendHelp}>帮他砍价</Button>
                        <Button
                            className={className(styles['btn-normal'], styles['btn-right'])}
                            onClick={this.handelToMyBargain}>我的砍价</Button>
                    </div>
                );
            } else { // 砍价成功
                return (
                    <Button className={className(styles['btn-normal'], styles['btn-large'])} onClick={this.handelToMyBargain}>我的砍价</Button>
                );
            }

        }

        return null;
    };

    /**
     * 显示弹窗
     * @returns {*}
     */
    renderModal = () => {
        const {modalKey} = this.state;
        const {tipsText, tipsTitle, helpNum} = this.state.tipsInfo;

        switch (modalKey) {
            case 'Login': { // 登录或者注册
                return (
                    <ModalLogin
                        onOk={this.handleLoginCallback}
                        onCancel={this.handleHideModal}
                        promotion="bargain"
                    ></ModalLogin>
                );
            }
            case BARGAIN_MODAL_KEY.SHARE_MODAL: { // 提示分享
                return (
                    <ShareLayerModal onCancel={this.handleHideModal}/>
                );
            }
            case BARGAIN_MODAL_KEY.MAKE_BARGAIN: { // 发起砍价成功
                return (
                    <InfoModal
                        cancelVisible={false}
                        okText={'我知道了'}
                        okBtnStyle={{
                            background: 'linear-gradient(90deg,rgba(255,132,44,1) 0%,rgba(255,107,44,1) 100%)',
                            color: '#fff'
                        }}
                        onCancel={this.handelToMyBargain}>
                        <div className={styles['info-msg']}>
                            <div className={styles['info-title']}>恭喜发起砍价成功</div>
                            <div className={styles['info-notes']}>{tipsText}</div>
                        </div>
                    </InfoModal>
                );
            }
            case BARGAIN_MODAL_KEY.FAIL_BARGAIN: {
                // 发起砍价失败、砍价失败
                return (
                    <InfoModal
                        cancelVisible={false}
                        headerType={'weep'}
                        okText={'我知道了'}
                        okBtnStyle={{
                            background: 'linear-gradient(90deg,rgba(255,132,44,1) 0%,rgba(255,107,44,1) 100%)',
                            color: '#fff'
                        }}
                        onCancel={this.handleHideModal}>
                        <div className={styles['info-msg']}>
                            <div className={styles['info-title']}>{tipsTitle}</div>
                            <div className={styles['info-notes']}>{tipsText}</div>
                        </div>
                    </InfoModal>
                );
            }
            case BARGAIN_MODAL_KEY.HELP_BARGAIN: {
                // 帮砍成功
                return (
                    <InfoModal
                        cancelVisible={false}
                        okText={'我知道了'}
                        okBtnStyle={{
                            background: 'linear-gradient(90deg,rgba(255,132,44,1) 0%,rgba(255,107,44,1) 100%)',
                            color: '#fff'
                        }}
                        onCancel={this.handleHideModal}>
                        <div className={styles['info-msg']}>
                            <div className={styles['info-title']}>
                                成功砍掉
                                <span className={styles['info-num']}>{helpNum}</span>
                                元
                            </div>
                            <div className={styles['info-notes']}>{tipsText}</div>
                        </div>

                    </InfoModal>
                );
            }
        }
        return null;
    };

    /**
     * 登录/注册成功的回调
     */
    handleLoginCallback = () => {
        const {activeId, recordId, loadData} = this.props;
        this.setState({
            modalKey: '',
            tipsText: ''
        });
        // 登录成功之后 重新获取团购数据
        loadData(activeId, recordId);
    };

    /**
     * 关闭modal
     */
    handleHideModal = () => {
        const tipsInfo = {
            tipsTitle: '',
            tipsText: '',
            helpNum: 0
        };
        this.setState({
            modalKey: '',
            tipsInfo
        });
    };

    /**
     * 砍价失败TipsText
     */
    handleSetTipsText = (tipsText, tipsTitle) => {
        const tipsInfo = {
            ...this.state.tipsInfo,
            tipsText,
            tipsTitle
        };
        this.setState({
            modalKey: BARGAIN_MODAL_KEY.FAIL_BARGAIN,
            tipsInfo
        });
    };

    /**
     * 发起砍价
     */
    handelMakeBargain = () => {
        if (!this.allow) return;
        const {activeId} = this.props;
        const activityOpenId = this.openId;
        this.allow = false;
        bargainService.makeBargain(activeId, activityOpenId).then(res => {
            this.allow = true;
            this.loadBargianInfo();
            const tipsInfo = {
                ...this.state.tipsInfo,
                tipsText: '赶紧去邀请好友帮你砍价吧~',
                tipsTitle: '恭喜发起砍价成功'
            };
            this.setState({
                modalKey: BARGAIN_MODAL_KEY.MAKE_BARGAIN,
                tipsInfo
            });
        }).catch(error => {
            this.allow = true;
            if (error.code) {
                switch (error.code) {
                    case BARGAIN_RESULT_CODE.BIZ_BARGAIN_LOGIN_TOKEN_ERROR: // 用户Token错误
                    case BARGAIN_RESULT_CODE.LOGIN_REQUIRED: // 用户未登录
                        this.setState({
                            modalKey: 'Login'
                        });
                        break;
                    default:
                        this.handleSetTipsText(error.msg || '请稍后再试', '发起砍价失败');
                        break;
                }
            } else {
                message.error(error.msg || '发生错误了');
            }
        });
    };

    /**
     * 好友帮砍
     */
    handelFriendHelp = () => {
        const {activeId, recordId} = this.props;
        const activityOpenId = this.openId;
        if (!this.allow) return;
        this.allow = false;
        bargainService.friendHelpBargain(activeId, recordId, activityOpenId).then(({bargainPrice}) => {
            this.allow = true;
            this.loadBargianInfo();
            const tipsInfo = {
                ...this.state.tipsInfo,
                tipsText: '快来参加砍价活动吧!',
                helpNum: bargainPrice || 0
            };
            this.setState({
                modalKey: BARGAIN_MODAL_KEY.HELP_BARGAIN,
                tipsInfo
            });
        }).catch(error => {
            this.allow = true;
            if (error.code) {
                if (error.code === 'BIZ_BARGAIN_ALREADY_SUCCESS') { // 多人同时砍价时，其他好友已经帮砍成功时，需要重新加载数据
                    this.handleSetTipsText(error.msg);
                    this.loadBargianInfo();
                }
                this.handleSetTipsText(error.msg || '再试一次', '砍价失败');
            } else {
                message.error(error.msg || '发生错误了');
            }
        });
    };

    /**
     * 邀请好友帮忙砍价-分享弹框
     */
    handelInviteHelp = () => {
        this.setState({
            modalKey: BARGAIN_MODAL_KEY.SHARE_MODAL
        });
    };

    /**
     * 跳转到我的砍价
     */
    handelToMyBargain = () => {
        const {activeId, myRecordId} = this.props;
        if (!myRecordId) {
            message.error('您尚未发起砍价，请重试');
            return;
        }
        this.handleHideModal();
        const {rf} = this.urlParams;
        let searchObj = {
            recordId: myRecordId,
            rf,
        };
        // 跳转至我的砍价页面
        this.props.history.push(`/bargain/${activeId}?${queryString.stringify(searchObj)}`);
    };

    /**
     * 跳转至地址页面
     */
    handleToAddress = () => {
        const {activeId, recordId} = this.props;
        const {rf} = this.urlParams;
        let searchObj = {
            recordId,
            rf,
        };
        this.props.history.push(`/address/${activeId}?${queryString.stringify(searchObj)}`);
    };

    /**
     * 跳转至进入教室---老页面
     */
    handleToCamp = () => {
        const {activeId, campUrl} = this.props;
        const campId = campUrl.substr(campUrl.lastIndexOf('/') + 1);
        let params = {
            trainingCampId: campId,
            activityId: activeId,
            force: 1
        };
        if (!this.allow) return;
        this.allow = false;
        bargainOldService.campApply(params).then(res => {
            if (String(res.code) === '0') {
                window.location.href = campUrl;
            }
            this.allow = true;
        }).catch(error => {
            this.allow = true;
            if (String(error.code) === '400061106') {
                window.location.href = campUrl;
            } else {
                let errormsg = ApplyError.ErrorCode[error.code];
                message.info(errormsg || '进入班级失败，请联系教务老师');
            }
            console.error(error, 'error');
        });
    };

    /**
     * 重新加载数据
     */
    loadBargianInfo = async () => {
        const {activeId, recordId, loadData} = this.props;
        await loadData(activeId, recordId);
    };

    render() {
        return (
            <div className={styles['btn-wrapper']}>
                {this.renderBtn()}
                {this.renderModal()}
            </div>
        );
    }
}