<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>超级签首页</title>
    <link href="__CSS__/ssg/common.css" rel="stylesheet" type="text/css">
    <script src="__JS__/ssg/flexible.min.js" type="text/javascript"></script>
    <script src="__JS__/ssg/juicer.min.js" type="text/javascript"></script>
</head>
<style>
    .index-box .gamenocheck{
    background:url('__IMG__/ssg/index/nocheck.png') no-repeat top center/100% 100%;
    }
    .index-box .gamecheck{
    background:url('__IMG__/ssg/index/check.png') no-repeat top center/100% 100%;
    }
</style>

<body class="index-box">

    <div class="title">
        <div class="flexitem back" id="logout">
            <img class="logout" src="__IMG__/ssg/index/logout.png">
            <div>退出登入</div>
        </div>
        <div class="content">至尊版购买</div>
        <div class="flexitem orderbox" onclick="window.location.href='{:U(\'order\')}'">
            <img class="order" src="__IMG__/ssg/index/order.png">
            <div>订单查询</div>
        </div>
    </div>
    <div class="allitembox">
        <div class="shaddowbox aditem">
            <div class="title-cell">
                <div class="borderitem">
                    <div class="title-name">苹果超级签</div>
                    <div class="flexitem a9color" onclick="window.location.href='{:U(\'rule\')}'">
                        <div style="margin-right: 5px;">至尊版说明</div>
                        <img class="wh3rem" src="__IMG__/ssg/index/back.png">
                    </div>
                </div>
            </div>
            <div class="flexitem adimg">
                <img class="order" src="__IMG__/ssg/index/ad.png">
            </div>
        </div>
        <div class="shaddowbox maringtop3rem">
            <div class="title-cell" style="font-size: .24rem;">
                <p style="padding: .3rem;">
                    1.选择游戏产品时,即选择购买超级签游戏下载链接和对应
                    的游戏礼包,无法退换哦~
                </p>
                <p style="padding:0 .3rem .3rem;">
                    2.同个账号多个设备需要去找客服那边购买。
                </p>
            </div>
        </div>
        <div class="shaddowbox maringtop3rem">
            <div class="title-cell">
                <div class="borderitem">
                    <div class="title-name">选择产品</div>
                    <div class="flexitem inputbox">
                        <img src="__IMG__/ssg/index/select.png">
                        <input id="selectVal" type="text" value="">
                    </div>
                </div>

            </div>
            <!--游戏列表-->
            <div style=" padding:0 .3rem .3rem;" id="gamebox">
                <div style="text-align: center;font-size: .24rem;color: #a9a9a9;line-height: 5;">游戏数据获取中....</div>
            </div>
        </div>
            <!---button--->
        <div class="shaddowbox maringtop3rem">
            <div class="title-cell" onclick="window.location.href='{:U(\'help\')}'">
                <div class="borderitem">
                    <div class="title-name">支付未到账?</div>
                    <div class="flexitem a9color">
                        <div style="margin-right: 5px;">充值帮助</div>
                        <img class="wh3rem" src="__IMG__/ssg/index/back.png">
                    </div>
                </div>
            </div>
            <div class="title-cell" onclick="chatQQ()">
                    <div class="borderitem">
                        <div class="title-name">联系客服</div>
                        <div class="flexitem a9color">
                            <img  class="wh3rem" src="__IMG__/ssg/index/back.png">
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div style="margin:auto;width:100%;height:1.34rem;"></div>
    <div class="pay-button">
        <div style="background:url('__IMG__/ssg/index/paybt.png') no-repeat top center/cover;">确认支付¥10</div>
    </div>
<input id="this_game_id" value="{$_GET['game_id']}" style="display: none"/>
</body>
<script type="text/template" id="gametpl">
    {@each list  as item,index}
    <div class="gameitem flexitem" data-game_id = "${item.game_id}">
        <img class="gameimg" src="${item.game_icon}">
        <div class="" style="margin-left: .2rem;flex-grow: 1;">
            <div class="flexitem">
                <div style="font-size: .28rem;">${item.game_name}-超级签</div>
                <img src="__IMG__/ssg/index/gif.png" style="width: .27rem;height: .27rem;margin-left: .2rem;">
            </div>
            <div style="color:#A9A9A9;font-size: .2rem;">
                至尊特权礼包(限量)
            </div>
        </div>
        {@if item.game_id==game_id}
        <div class="gamechoose gamenocheck gamecheck"></div>
        {@else}
        <div class="gamechoose gamenocheck "></div>
        {@/if}
    </div>
    {@/each}
</script>
<script src="__JS__/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="__STATIC__/bg4_4.js"></script>
<script>

checkSafari();
var index = {
    self :this,
    select:{type:1},
    choose:{},
    pay_game_id:{},
    getgamelist(){
        $.ajax({
            type: 'POST',
            url: 'mobile.php/Ssg/getGamaList.html',
            dataType: 'JSON',
            data:index.select,
            success: function (result) {
                console.log(result)
                try {
                    if(result.pay_game_id){
                        index.pay_game_id = result.pay_game_id;
                    }
                } catch (error) {}
                index.jucierFun(result)
            }
        })
    },
    jucierFun(data){
        data['game_id'] = $('#this_game_id').val();

        var first,aimArr,aimNum;
        first = {id:0};
        aimArr = {id:0};
        if(data['game_id']) {
            data["list"].forEach(function (arr,index) {


                if (index == 0) {
                    first = arr;
                }
                if(arr.id==data['game_id']) {
                    aimArr = arr;
                    aimNum = index;
                }
            })
            if (aimArr.id != 0) {
                if (first.id !=aimArr.id) {
                    data["list"][0] = aimArr;
                    data['list'][aimNum] = first;
                }
            }

        }

        var tpl = document.getElementById('gametpl').innerHTML;
         var html = juicer(tpl, data);
         $("#gamebox").html(html);
         if(data["list"].length != 0){
            index.choose.game_id = data['list'][0]['game_id']
         }

         index.event();
    },
    event(){
        $(".gameitem").off("click");
        $("#selectVal").off("keyup");
        $(".gameitem").on("click",function(){
            $(".gamechoose").removeClass("gamecheck");
            $(this).find(".gamechoose").addClass("gamecheck");

            var data = $(this).data();
            index.choose.game_id = data.game_id;
        })
        $("#selectVal").on("keyup",function(){
            // index.select.game_name =$(this).val().replace(/\s*/g,"");
            index.select.game_name =$(this).val().replace(/[\w\s]/g,"");
            index.select.type = 0;
            index.getgamelist()
        })
    }
}
index.getgamelist();
$(".pay-button").on("click",function(){
    var inres =  index.pay_game_id.indexOf(index.choose.game_id+'');
    if(inres > -1){
        alert("亲~您已购买过了~请到【订单查询】查看订单信息哟~");
    }else{
        location.href = "mobile.php/Ssg/pay/game_id/"+index.choose.game_id;
    }
})
$("#logout").on("click",function(){
    location.href = "mobile.php/Ssg/logout.html";
})

function throttle(fun, delay) {
    var timer = null;
    var startTime = Date.now();

    return function () {
        var curTime = Date.now();
        var remaining = delay - (curTime - startTime);  //计算出两次触发的时间间隔有没有大余delay 
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if (remaining <= 0) {
            fun.apply(context, args);
            startTime = Date.now();  //如果两次触发时间大余delay,则立马触发一次任务函数并且更新起始时间戳
        } else {
            timer = setTimeout(fun, remaining);  //如果两次触发时间小于delay, 则改变定时器时间保证delay时间一定触发任务函数
        }
    }
}
function chatQQ() {
    window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin={$app_qq}&version=1&src_type=web&web_src=oicqzone.com';
}
function checkSafari() {
    var ua = navigator.userAgent.toLowerCase();
    //判断是不是在iPhone的Safair浏览器打开的本页面
    if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1 &&
        ua.indexOf('linux') === -1 && ua.indexOf('android') === -1 && ua.indexOf('chrome') === -1 &&
        ua.indexOf('ios') === -1 && ua.indexOf('browser') === -1) {
        return true;
    }
    else {
        alert("请使用iPhone中的Safari浏览器打开本页面!");
        window.location.href = 'mobile.php?s=/Ssg/home.html';
    }
}
</script>
</html>