react-app-shell/activity/src/views/lottery/prize-list/prize-list.js

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

import React, {PureComponent} from 'react';
import queryString from 'query-string';
import {Button} from 'antd-mobile';

import {appConfig} from '../../../config';
import {DocumentTitle} from '../../../components';
import ShareWechat from '../components/shareWechat';
import {tools, message} from '../../../utils';
import {lotteryService, authService} from '../../../service';
import {PRIZE_TYPE, ERROR_CODE} from '../../../constants';
import styles from './prize-list.less';
import cry_rabbit from '../../../public/images/lottery/cry_rabbit.png';

/**
 * 查看奖品列表
 */
class PrizeList extends PureComponent {
    constructor(props) {
        super(props);
        this.lotteryId = Number(this.props.match.params.id);
        this.rf = queryString.parse(window.location.search).rf;
        this.state = {
            prizeList: null
        };
        message.showLoading();
    }

    async componentDidMount() {
        const isLogin = await authService.checkLogin();
        if (!isLogin) {
            this.jumpToHomePage('replace');
        } else {
            this.loadPrizeList();
        }
    }

    /**
     * 加载奖品列表数据
     */
    loadPrizeList = () => {
        lotteryService.getUserPrizeList(this.lotteryId).then(prizeList => {
            this.setState({
                prizeList
            });
            message.closeLoading();
        }).catch(error => {
            message.closeLoading();
            if (error.code === ERROR_CODE.LOGIN_REQUIRED) {
                this.jumpToHomePage('replace');
            } else {
                tools.delayEvent(0).then(() => {
                    message.error(error.msg || '获取中奖记录失败');
                    console.error(error);
                    this.setState({
                        prizeList: []
                    });
                });
            }
        });
    };

    /**
     * 跳转到活动首页
     */
    jumpToHomePage = (mode) => {
        let searchObj = {
            rf: this.rf,
        };
        this.props.history[mode](`/lottery/${this.lotteryId}?${queryString.stringify(searchObj)}`);
    };

    handelClick = (data) => {
        if (data.prizeType === PRIZE_TYPE.TRAIL_COURSE) {
            this.jumpToCoursePage();
        } else {
            this.jumpToAddressPage(data.id, data.addressExist);
        }
    };

    /**
     * 跳转到去约课页面
     */
    jumpToCoursePage = () => {
        // 约课链接
        const {bookingUrl} = appConfig.resources;

        window.location.href = bookingUrl;
    };

    /**
     * 跳转到地址页面
     */
    jumpToAddressPage = (recordId, status) => {
        console.log(status, recordId);
        const searchObj = {
            rf: this.rf,
            recordId
        };
        // 根据是否填写收货地址跳转到不同页面
        if (status) {
            this.props.history.push(`/lottery/address-view/${this.lotteryId}?${queryString.stringify(searchObj)}`);
        } else {
            this.props.history.push(`/lottery/address/${this.lotteryId}?${queryString.stringify(searchObj)}`);
        }
    };

    render() {
        const {prizeList} = this.state;
        return (
            <div className={styles.prize}>
                <DocumentTitle title="中奖记录"/>
                {prizeList ? prizeList.length > 0 ? (
                    <div className={styles.prizeList}>
                        {
                            prizeList.map(item => (
                                <div className={styles.prizeItem}
                                    key={item.id}
                                    onClick={this.handelClick.bind(null, item)}>
                                    <img src={item.prizeImg}/>
                                    <div className={styles.itemDetail}>
                                        <label className={styles.itemTitle}>{item.name}</label>
                                        <p className={styles.itemDescribe}>{item.prizeType === PRIZE_TYPE.TRAIL_COURSE ? '适合4～12岁，在家直播就能上～' : '我们会尽快为您寄出~'}</p>
                                        <div className={styles.itemBtn}>
                                            {item.prizeType === PRIZE_TYPE.TRAIL_COURSE ? (
                                                <Button className={styles.btnCourse}>去约课</Button>
                                            ) : (
                                                <Button className={styles.btnAddress}>
                                                    {item.addressExist ? '查看收货地址' : '填写收货地址'}
                                                </Button>
                                            )}

                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                ) : (
                    <div className={styles.prizeNone}>
                        <img src={cry_rabbit}/>
                        <p>啊哦~还没有中奖记录呢</p>
                        <p>再抽一次试试手气吧！</p>
                        <Button className={styles.prizeBtn}
                            onClick={this.jumpToHomePage.bind(null, 'push')}>去抽奖</Button>
                    </div>
                ) : ''}
                <ShareWechat/>
            </div>
        );
    }
}

export default PrizeList;