sports_web/Application/Home/View/Public/gameHeader.blade.php

<div class="haomabox">
    <div class="waring" id="waringbox">
        <div class="flash"><i></i></div>
        温馨提示：因网络问题，开奖结果会有延迟，所以您需要去喝杯咖啡等一会儿！
    </div>
    <div style="text-align: center;padding-top: 10px;" class="haomaqu" :id="type=='cqSsc'|| type=='kuai3'?'cqSsc':type=='klsf'|| type=='xync'?'klsf':type=='shiyix5'?'shiyix5':'pk10'" :style="loading?styleObject:'height: 132px'">
        <div v-if="loading" style="display: inline-block">
            <img src="/Public/Home/stati/img/icon/piaog.gif">
        </div>
        <div v-else class="haomaqu_resetPar">
            <div class="haomaqul">
                <div class="haomaline">
                    <div class="haomaimg">
                        <img src="/Public/Home/stati/img/{$imgname}.png" alt="{$gamename}"/>
                    </div>
                    <div class="numberqu">
                        <div class="nuberqutit">
                            <span class="ssc">{$gamename}</span>第
                            <span class="preDrawIssue" v-text="gameData.info_no||0"></span> 期开奖号码
                        </div>
                        {literal}
                        <div class="kajianhaoPar" :style="this.type=='klsf'?'height: auto':''">
                            <div :class="type=='kuai3'?'kajianhaod':'kajianhao'"  :id="type=='shiyix5'||type=='kuai3'?'jnumber':''" :style="type=='kuai3'?'width: 100%':''">
                                <ul :id="type=='pk10'?'jnumber':''" :class="type=='pk10'?'numberbox':type=='kuai3'?'kajianhao':''" :style="type=='kuai3'?'overflow: initial;width: 80%':this.type=='klsf'?'margin-bottom: 5px':''">
                                    <li v-if="type=='cqSsc'|| type=='klsf'|| type=='gxkl10'" :style="this.type=='klsf'?'margin-right: 15px':''" class="numblueHead" v-for="x in codes" v-text="x.number||0"></li>

                                    <li v-if="type=='shiyix5'" class="numblueHead" v-for="x in codes" v-text="x.number>9?x.number:'0'+parseInt(x.number||0)"></li>

                                    <li v-if="type=='kuai3'" :class="'num'+x.number" v-for="x in codes"></li>

                                    <li v-if="type=='pk10'" :class="x.number===10?'numsm10':`numsm0${x.number}`" v-for="x in codes"></li>

                                    <li v-if="type=='xync'" :class="x.number>9?`ncnum${x.number}`:`numsm0${x.number}`" v-for="x in codes"></li>

                                </ul>
                                <p :class="dao_time>60?'':'disabled'" class="btn_tz" v-text="dao_time>60?'立即投注':'已封盘'" @click="linkBetting"></p>
                            </div>
                        </div>
                        {/literal}
                        <!--<div class="line drawCountDiv" style="width: 100%">已开<span class="drawCount"></span>期，还有<span class="sdrawCount"></span>期</div>-->
                    </div>
                </div>
            </div>
            <div class="haomaqur">
                <div class="haomaqur_l">
                    <div class="line linetit">距<span class="nextIssue" v-text="parseInt(gameData.info_no)+1||0"></span>期开奖仅有</div>
                    <div class="line linetime" id="timebox">
                        <div v-if="dao_time==0" class="opening opentyle" style="display: block">开奖中...</div>
                        <div v-else class="cuttime">
                            <span class="bgtime minute" v-text="dao_time>60?parseInt(dao_time / 60)>9?parseInt(dao_time / 60):'0'+parseInt(dao_time / 60):'00'">00</span>
                            <span>分</span>
                            <span class="bgtime second" v-text="dao_time>60?parseInt(dao_time % 60)>9?parseInt(dao_time % 60):'0'+parseInt(dao_time % 60):dao_time>9?dao_time:'0'+dao_time">00</span>
                            <span>秒</span>
                        </div>
                    </div>
                </div>
                <div class="line margt20" @click="creatVideo">
                    <img src="/Public/Home/stati/img/video/{$imgname}.png" />
                </div>
            </div>
        </div>

        <!--开奖视频-->
        <div id="sign_box">

        </div>
    </div>

</div>

<div class="haomaqu_resetSon">
    <div class="homaline2">
        <div class="margt30 li_td">
            <ul class="zoushimap">
                {foreach $menu as $m}
                <li {if $type == $m.code} class="checked" {/if}><a href="{$m.url}?game={$game}">{$m.title}</a></li>
                {/foreach}

            </ul>
        </div>
    </div>
</div>



{literal}
<script>
    window.app= new Vue({
        el: '.haomaqu',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                gameType:'cqssc',
                gameData:[],
                predata:[], //提供iframe数据调用
                nowdata:[], //提供iframe数据调用
                nowGameData:'',//存储开奖号码
                dao_time:0,//倒计时
                kjTimer:'',
                loading:true,
                styleObject: {
                    textAlign: 'center',
                    lineHeight: '142px'
                },
                isOpen:false, // 是否正在开奖
            }
        },
        watch: {

        },
        computed: {
            codes(){
                let codes=this.nowGameData.split(','),newCodes=[];
                for (let x=0;x<codes.length;x++){
                    newCodes.push({number:parseInt(codes[x])})
                }
                return newCodes
            },
            type() {
                for (var t = [["xy28", "gpxy28", "jnd28", "gpjnd28", "dj28", "hs28", "tw28", "xjp28"], //'幸运28(返利)','幸运28(高赔)','加拿大28(返利)','加拿大28(高赔)','东京新版28','韩式新版28','台湾宾果28','新加坡新版28',
                    ["shssl"],//'上海时时乐'
                    ["pk10", "jspk10", "bjpk10","hlsmpk10","hlftpk10"],//'三分PK拾','北京PK拾','欢乐赛马'
                    ["cqSsc", "threessc", "cqssc", "tjssc", "xjssc", "hljssc", "ynssc", "ynhnssc"],// '三分时时彩','重庆时时彩','天津时时彩','新疆时时彩','黑龙江时时彩','云南时时彩','越南河内时时彩'
                    ["xync", "cqkl10"],//'幸运农场',
                    ["gxkl10"],//'广西快乐十分'
                    ["klsf", "tjkl10", "gdkl10"], //'天津快乐十分','广东快乐10',
                    ["shiyix5", "gd11x5", "sd11x5", "js11x5", "hlj11x5"], //'广东11选5','山东11选5','江苏11选5','黑龙江11选5',
                    ["fc3d", "fc3d", "pl3"], //'福彩3D','排列3',
                    ["kuai3", "jskuai3", "gxkuai3", "shkuai3", "ahkuai3", "hbkuai3"],//'江苏快三','广西快三','上海快三','安徽快三','湖北快三',
                    ["sixhc", "sixlottery", "sfsixlottery"],//'香港六合彩',
                    ["ssq"]//'双色球',
                ], r = 0, o = t.length; r < o; r++) {
                    for (var s = 0, i = t[r].length; s < i; s++) {
                        if (this.gameType == t[r][s]) return t[r][0]
                    }
                }
            }
        },
        created() {
            this.gameType=this.request('game');
            console.log(this.type);
            this.preGame();
        },
        mounted() {


        },
        methods: {
            boxSelection() {
                console.log(11)
            },
            preGame() {
                $.ajax({
                    url: '/api-gameCenter/preGame?game_name='+this.gameType,
                    type: "GET",
                    data: '',
                    success: (r)=> {
                        if(!!r.data.codes) this.cleaAnimate();
                        this.predata = r.data,this.loading=false,this.gameData=r.data,this.nowGameData=!!r.data.codes?r.data.codes:this.type=='kuai3'?'1,2,3':this.type=='klsf'&&this.gameType!='gxkl10'?'1,2,3,4,5,6,7,8':this.type=='pk10'?'1,2,3,4,5,6,7,8,9,10':'1,2,3,4,5',this.nowGame();
                    },
                    error: (r)=> {
                        this.preGame()
                    },
                });
            },
            nowGame() {
                $.ajax({
                    url: '/api-gameCenter/nowGame?game_name='+this.gameType,
                    type: "GET",
                    data: '',
                    success:(r)=> {
                        this.nowdata = r.data,this.dao_time=r.data.dao_time,clearInterval(this.kjTimer);
                        r.data.info_no==this.gameData.info_no?this.isOpen=true:this.isOpen=false;
                        if(!this.isOpen) this.cleaAnimate();
                        this.kjTimer=setInterval(()=>{
                            this.dao_time>0?(()=>{this.dao_time --;if(!this.gameData.codes)this.preGame()})():(clearInterval(this.kjTimer),this.dao_time=0,this.cleaAnimate(),this.animate(),setTimeout(()=>{this.preGame()},3000))
                        },1000)
                        // this.isOpen?(this.cleaAnimate(),this.animate()):this.cleaAnimate()
                    },
                    error: (data)=> {
                        this.nowGame()
                    },
                });
            },
            request(name) {
                const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i'),
                    r = window.location.search.substr(1).match(reg);
                return r !== null ? unescape(r[2]) : null;
            },
            animate(){
                switch (this.type) {
                    case 'cqSsc':
                        animateMethod.sscAnimate('#cqSsc');
                        break;
                    case  'kuai3':
                        animateMethod.kuai3Animate('#cqSsc');
                        break;
                    case  'klsf':
                        animateMethod.sscAnimate('#klsf');
                        break;
                    case  'shiyix5':
                        animateMethod.sscAnimate('#shiyix5');
                        break;
                    case  'pk10':
                        animateMethod.pk10OpenAnimate('#pk10');
                        break;
                    case  'xync':
                        animateMethod.cqncAnimate('#klsf');
                        break;
                }

            },
            cleaAnimate(){

                switch (this.type) {
                    case 'xync':
                        clearInterval(animateID['#klsf']); //清除动画
                        delete animateID['#klsf'];
                        break;
                    case  'klsf':
                        clearInterval(animateID['#klsf']); //清除动画
                        delete animateID['#klsf'];
                        break;
                    case  'pk10':
                        clearInterval(animateID['#pk10']); //清除动画
                        delete animateID['#pk10'];
                        break;
                    case  'shiyix5':
                        clearInterval(animateID['#shiyix5']); //清除动画
                        delete animateID['#shiyix5'];
                        break;
                    default:
                        clearInterval(animateID['#cqSsc']); //清除动画
                        delete animateID['#cqSsc'];
                }
            },
            linkBetting(){ //${window.location.host}
                window.open(`http://${window.location.host}/Home-${this.gameType}/index`)
            },
            creatVideo(){
                this.nowGame();
                let sign_box=document.querySelector('#sign_box'),gameName=document.querySelector('.ssc').innerText
                sign_box.innerHTML=`<div class="modal-mask"></div>
                                    <div class="modal-wrap" style="">
                                        <div class="modal" style="width: 800px;margin-top: -270px;background: #202020">
                                            <div class="modal-content" style="height: auto">
                                                <div class="modal-body" style="padding: 0;">
                                                    <div class="sign-box" style="width: 800px;height: auto">
                                                        <div class="modal-close" style="width: 100%;height: 50px;">
                                                            <p style="height: 50px;line-height: 50px;text-align: left;margin-left: 10px">${gameName}</p>
                                                            <a class="sign-close" onclick="document.querySelector('#sign_box').innerHTML=''"></a>
                                                        </div>
                                                        <div style="margin-top: 50px;width: 800px">
                                                            <iframe name="gameFrame" ref="iframe" src="/Public/games/${this.type}/index.html?${this.gameType}" width="100%" scrolling="no" frameborder="0" @load="load" id="iframe"></iframe>
                                                        </div>
                                                     </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`
            }
        },
        destroyed() {

        }
    })
</script>
{/literal}