index.js 3.57 KB
import React, {PureComponent} from 'react';
import './index.scss'
import {conf, start} from '../../api'
import {getQueryObj, linkToMiniApp, invokeMethod, parseUrl} from '../../../../common/utils';
import wxshare from '../../../../common/wxshare'
import wx from 'weixin-js-sdk';
import yaSDK from 'yoho-activity-sdk';
import config from '../../config';
import cookie from 'react-cookies';
import LazyLoad from 'react-lazy-load'
import {
    Link
} from 'react-router-dom'

import BottomButtons from '../components/bottom-buttons';

const {actId} = getQueryObj();

export default class wheelSurf extends PureComponent {
    constructor(props) {
        document.title ='大转盘';
        super(props);
        this.state = {
            initial: true,
            pending: false, // 抽奖中
            startEnd: false,
            isEnding: false, // 即将停止

            conf: {
                loading: ''
            }
        };
        
        this.init();
    }

    init = async () => {
        let uid = cookie.load('app_uid') || getQueryObj().uid || 0;
        if(!uid || !parseInt(uid)){
            return;
        }

        let result = await conf({
            actId,
            uid: uid,
            sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '',
            sessionType: cookie.load('app_client_type') || '',
            appVersion: cookie.load('app_version') || ''
        });
        
        if (result.code === 200) {
            this.setState({
                conf: result.data
            })
        }
    };

    componentDidMount = () => {
        window.addEventListener('scroll', this.handleScroll);
    };

    componentWillUnmount = () => {
        window.removeEventListener('scroll', this.handleScroll);
    };
    
    start = async () => {
        console.log('抽奖开始');
        let uid = cookie.load('app_uid') || getQueryObj().uid || 0;
        if(!uid || !parseInt(uid)){
            return;
        }

        let result = await start({
            actId,
            uid: uid,
            sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '',
            sessionType: cookie.load('app_client_type') || '',
            appVersion: cookie.load('app_version') || ''
        });

        if (result.code === 200) {
            this.setState({
                conf: result.data
            })
        }
    };

    render() {
        const {conf, isEnding} = this.state;
        if (!conf.id) {
            return (
                <div className="home-wrap">
                    <img className="main-bg" src={this.state.conf.loading + '?imageslim'}/>
                </div>
            )
        }
        
        return (
            <div className="home-wrap">
                <img className="main-bg" src={conf.main_bg + '?imageslim'}/>
                {conf.rule_btn_bg ? (<Link to={`${config.routerPath}/rule.html`}><img className="rule-btn" src={conf.rule_btn_bg + '?imageslim'}/></Link>) : ''}
                {conf.share_btn_bg ? (<img className="share-btn" src={conf.share_btn_bg + '?imageslim'}/>): ''}
                <img className="wheel-bg" src={conf.wheel_bg + '?imageslim'}/>
                <img className="wheel-bg-surf-layer" src={conf.wheel_bg}/>
                <img onClick={()=>{this.start()}} className="start-btn-bg" src={conf.prize_btn_bg}/>
                {isEnding ? (<img className="prize-hit-bg" src={conf.win_prize_bg}/>) : ''}
                {isEnding ? (<img className="prize-hit-start-bg" src={conf.prize_btn_bg}/>) : ''}
                <BottomButtons className="button-btns"/>
            </div>
        )
    }
}