index.js 4.6 KB
import React, {PureComponent} from 'react';
import './index.scss'
import api from '../../api';
import yaSDK from 'yoho-activity-sdk';
import config from '../../../../config';
import wx from 'weixin-js-sdk';
import TipModal from '../components/tip-modal';
import dayjs from 'dayjs';

export default class Prize extends PureComponent {
    constructor(props) {
        document.title ='我的奖品';
        super(props);
        this.state = {
            prizes: [],
            pending: true,
            showModal: false,
            modalTip: '请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服',
            modalBtnText: '确定'
        };
    }
    
    detail = (event, prize) => {
        const type = prize.type;
        
        if (type === 4) {
            this.setState({
                showModal: true
            });
            return;
        }
        
        if (yaSDK.env !== 'miniprogram') {
            yaSDK.link(event);
        } else {
            wx.miniProgram.navigateTo({url: {
              2: '/page/subPackage/pages/allowance/allowance',
              3: '/page/subPackage/pages/couponList/couponList'
            }[type]});
        }
    };
    
    confirm = () => {
        this.setState({
            showModal: false
        });
    };
    
    backTry = (e) => {
        yaSDK.link(e);
    };
    
    componentDidMount() {
        yaSDK.getUid().then(async uid => {
            let result = await api.prize({
                act_id: +yaSDK.getQueryObj().actId,
                uid: uid || +yaSDK.getQueryObj().uid  
            }); 
            
            this.setState({
                pending: false,
                prizes: result.data
            });
        });
    }

    render() {
        let {showModal, modalTip, modalBtnText, pending} = this.state;
        let backUrl = `${document.location.protocol}//${document.location.host}${config.routerPath}/home.html?actId=${yaSDK.getQueryObj().actId}`;
        
        let couponLink = 'https://m.yohobuy.com/home/coupons?openby:yohobuy={"action":"go.coupon"}';
        let redEnvelopeLink = 'https://activity.yoho.cn/feature/3221.html?title=我的红包&openby:yohobuy={"action":"go.mineredpackage"}';

        this.state.prizes.map(prize => {
          prize.createTime = dayjs(new Date(prize.createTime).getTime()).format('YYYY-MM-DD HH:mm');
        });

        return (
          pending ? '' :
          (<div className="my-prize-wrap">
                {
                    this.state.prizes.length ? (
                    this.state.prizes.map(prize => {
                        return (
                            <div className="prize-item" key={prize.id}>
                                <div className="item-top">
                                    <img src={prize.img} className="prize-img"/>
                                    <div className="prize-info">
                                        <div className="prize-name">{prize.name}</div>
                                        <div className="got-time">中奖时间:{prize.createTime}</div>
                                    </div>
                                </div>
                                <div className="item-bottom">
                                    <span onClick={(event) => this.detail(event, prize)} data-type="other" 
                                          data-url={prize.type === 2 ? redEnvelopeLink : (prize.type === 3 ? couponLink : '')}
                                          className="detail">去查看
                                        <img className="detail-img" src="http://img10.static.yhbimg.com/yhb-img01/2018/10/13/10/0164db9af7f4b8c64573308b53a6ea409a.png"/>
                                    </span>
                                </div>
                            </div>
                        )
                    })) : (
                        <div className="empty-prize">
                            <img className="empty-img" src="http://img11.static.yhbimg.com/yhb-img01/2018/10/15/17/01a6e21ead7c45efdc7ba902de73218854.png" alt=""/>
                            <div className="empty-tip">您暂时没有奖品</div>
                            <div className="back-try" onClick={(event) => this.backTry(event)} data-type="other" 
                                 data-url={backUrl}>去抽奖</div>
                        </div>
                    )
                }
                {
                    showModal ? <TipModal tip={modalTip} btnText={modalBtnText} confirm={() => {this.confirm()}} /> : ''
                }
            </div>)
        )
    }
}