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

<div class="haomabox">
    <div class="waring" id="waringbox">
        <div class="flash"><i></i></div>
        温馨提示：因网络问题，开奖结果会有延迟，所以您需要去喝杯咖啡等一会儿！
    </div>

    <div class="haomaqu" id="pk10">
        <div 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="pk10tit">{$gamename}</span>第
                            <span class="preDrawIssue" v-text="gameData.info_no||0"></span> 期开奖号码
                        </div>
                        <div class="kajianhaoPar">
                            <div class="kajianhao">
                                {literal}
                                <ul id="jnumber" class="numberbox">
                                    <li :class="x.number===10?'numsm10':`numsm0${x.number}`" v-for="x in codes"></li>
                                    <!--<li class="numblueHead">1</li>
                                    <li class="numblueHead">3</li>
                                    <li class="numblueHead">2</li>
                                    <li class="numblueHead">4</li>
                                    <li class="numblueHead">6</li>-->
                                </ul>
                                {/literal}
                            </div>

                        </div>
                        <div class="line drawCountDiv">已开<span class="drawCount"></span>期，还有<span class="sdrawCount"></span>期</div>
                    </div>
                </div>
                <div style="display: none;">
                    <table>
                        <tr class="longhu">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="sumFS"></td>
                            <td class="sumBigSamll"></td>
                            <td class="sumSingleDouble"></td>
                        </tr>
                    </table>
                </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="isOpen" class="opening opentyle">开奖中...</div>
                        <div v-else class="cuttime">
                            <span class="bgtime minute" v-text="dao_time>60?parseInt(dao_time / 60)>10?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 soundId haomaqur_r">
                    <div class="soundline ifSoundSet" id="ifSoundOpen"></div>
                    <!--关闭铃声-->
                    <div class="soundline soundSet" id="soundSet"></div>
                    <!--设置铃声-->
                </div>
                <div class="line margt20" id="startVideo">
                    <img src="/Public/Home/stati/img/video/bjpk10.png?v=2018961524" />
                </div>
            </div>
        </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>
    new Vue({
        el: '.haomaqu',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                gameType:'cqssc',
                gameData:[],
                nowGameData:'',//存储开奖号码
                dao_time:0,//倒计时
                kjTimer:'',
                isOpen:false, // 是否正在开奖
            }
        },
        watch: {
            dao_time(e){
                e===0?()=>{clearInterval(this.kjTimer),this.dao_time=0,this.preGame()}:null
                console.log('this.dao_timethis.dao_time',this.dao_time)
            }
        },
        computed: {
            codes(){
                let codes=this.nowGameData.split(','),newCodes=[];
                for (let x=0;x<codes.length;x++){
                    newCodes.push({number:parseInt(codes[x])})
                }
                return newCodes
            },
        },
        created() {
            console.log(this.boxSelection());
            this.preGame();
        },
        mounted() {


        },
        methods: {
            boxSelection() {
                console.log(11)
            },
            preGame() {
                const gameType=this.request('game');
                $.ajax({
                    url: '/api-gameCenter/preGame?game_name='+gameType,
                    type: "GET",
                    data: '',
                    success: (r)=> {
                        if(!!r.data.codes) this.cleaAnimate();
                        this.gameData=r.data,this.nowGameData=!!r.data.codes?r.data.codes:'1,2,3,4,5';
                        this.nowGame();
                    },
                    error: (r)=> {
                        this.preGame()
                    },
                });
            },
            nowGame() {
                const gameType=this.request('game');
                $.ajax({
                    url: '/api-gameCenter/nowGame?game_name='+gameType,
                    type: "GET",
                    data: '',
                    success:(r)=> {
                        this.dao_time=r.data.dao_time;
                        r.data.info_no==this.gameData.info_no?this.isOpen=true:this.isOpen=false;

                        clearInterval(this.kjTimer)
                        this.kjTimer=setInterval(()=>{
                            this.dao_time>0?this.dao_time --:(clearInterval(this.kjTimer),this.dao_time=0,setTimeout(()=>{this.preGame()},1000))
                        },1000)
                        this.isOpen?(this.cleaAnimate(),this.animate()):this.cleaAnimate()

                        console.log('this.dao_time',this.dao_time)
                    },
                    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(){
                animateMethod.pk10OpenAnimate('#pk10');
            },
            cleaAnimate(){
                clearInterval(animateID['#pk10']); //清除动画
                delete animateID['#pk10'];
            },
        },
        destroyed() {

        }
    })
</script>
{/literal}