index.js 3.77 KB
import React, {PureComponent} from 'react';
import './index.scss'
import {prize} from '../../api';
import yaSDK from 'yoho-activity-sdk';
import TipModal from '../components/tip-modal';


export default class Prize extends PureComponent {
    constructor(props) {
        document.title ='我的奖品';
        super(props);
        this.state = {
            prizes: [
                {
                    id: 1,
                    type: 2
                }, {
                    id: 2,
                    type: 3

                }, {
                    id: 3,
                    type: 4
                }
            ],
            showModal: false,
            modalTip: '请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服请联系客服',
            modalBtnText: '确定'
        };
    }
    
    detail = (event, prize) => {
        console.log('查看详情');
        const type = prize.type;
        
        if (type === 4) {
            this.setState({
                showModal: true
            });
            return;
        }
        
        if (yaSDK.env !== 'miniprogram') {
            yaSDK.link(event);
        }
    };
    
    confirm = () => {
        this.setState({
            showModal: false
        });
    };
    
    componentDidMount() {
        yaSDK.getUid().then(uid => {
            prize({
                act_id: +yaSDK.getQueryObj().actId,
                uid: uid || +yaSDK.getQueryObj().uid  
            })
        })
    }

    render() {
        let {showModal, modalTip, modalBtnText} = this.state;
        
        let couponLink;
        let redEnvelopeLink;
        
        if (yaSDK.env !== 'miniprogram') {
            couponLink = 'https://m.yohobuy.com/home/coupons?openby:yohobuy={"action":"go.coupon"}';
            redEnvelopeLink = 'https://activity.yoho.cn/feature/3221.html?title=我的红包&openby:yohobuy={"action":"go.mineredpackage"}';
        } else {
            // TODO 小程序红包优惠券链接
        }

        return (
            <div className="my-prize-wrap">
                {
                    this.state.prizes.map(prize => {
                        return (
                            <div className="prize-item" key={prize.id}>
                                <div className="item-top">
                                    <img src="http://img11.static.yhbimg.com/yhb-img01/2018/10/11/10/0157b624efd3c0db2e2b0c1c5b84a1fff7.png" className="prize-img"/>
                                    <div className="prize-info">
                                        <div className="prize-name">OFF-WHITE x Nike Air and nnAir and nnAir and nnAir and nnAir and nnAir and nn</div>
                                        <div className="got-time">中奖时间:2018-10-12  20:20</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>
                        )
                    })
                }
                {
                    showModal ? <TipModal tip={modalTip} btnText={modalBtnText} confirm={() => {this.confirm()}} /> : ''
                }
            </div>
        )
    }
}