<extend name="Public/bases" />
<block name="css">
<link href="__CSS__/{:C('DEFAULT_THEME')}/gift.css" rel="stylesheet" >
</block>
<block name="header">
<div class="header header-detail">
<section class="wrap">
<a class="hbtn left return" href="{:U('Gift/index',array('account'=>I('account')))}"><span class="table"><span class="table-cell"><img src="__IMG__/wap/detail_nav_btn_return.png"></span></span></a>
<div class="caption"><span class="table"><span class="table-cell">{$data.game_name}</span></span></div>
</section>
</div>
<div class="header-space"></div>
</block>
<block name="body">
<div class="trunk-box detail">
<div class="wrap clearfix">
<div class="base clearfix">
<div class="item clearfix">
<div class="pic"><span class="font table"><span class="table-cell">----游戏</span></span><img src="{:get_cover($data['game_icon'],'path')}"></div>
<div class="sps clearfix">
<span class="table">
<span class="table-cell">
<div class="surplus-box">
<div class="spsb surplus-right">
<div class="spsi surplus-item-right"></div>
</div>
<div class="spsb surplus-left">
<div class="spsi surplus-item-left"></div>
</div>
<div class="surplus" data-value="{$data.surplus}">
<span class="table">
<span class="table-cell">
<span>剩余</span>
<i>{$data['novice_count']}</i>
</span>
</span>
</div>
</div>
</span>
</span>
</div>
<div class="txt">
<h3 class="name">[{:str_replace(array('(安卓版)','(苹果版)'),'',$data['game_name'])}]{$data.gift_name}</h3>
<p class="info"><span class="time">有效期：{$data.start_time|date='y.m.d',###}-{$data.end_time|date='y.m.d',###}</span></p>
<p class="info"><span class="servername">区服：{$data.server_name}</span></p>
</div>
</div>
</div>
<div class="description giftinfo">
<div class="description-title giftinfo-title">礼包内容</div>
<div class="description-content giftinfo-content">
{$data.gift_content}
</div>
</div>
<div class="useway giftinfo">
<div class="useway-title giftinfo-title">使用方法</div>
<div class="useway-content giftinfo-content">
{$data.get_way}
</div>
</div>
<notempty name="relevant">
<div class="relevant giftinfo">
<div class="relevant-title giftinfo-title">相关礼包</div>
<div class="relevant-content">
<ul class="clearfix">
<volist name="relevant" id="vo">
<li>
<div class="item">
<div class="but">
<span class="table">
<span class="table-cell">
<gt name='vo.recordid' value='0'>
<a href="javascript:;" class="butn jsgetgift disabled">已领取</a>
<else />
<a href="javascript:;" data-id="{$vo.id}" class="butn jsgetgift">领取</a>
</gt>
</span>
</span>
</div>
<div class="txt">
<a href="{:U('Gift/detail',array('id'=>$vo['id'],'account'=>I('account')))}" class="name">[{$vo.gift_name}]</a>
<p class="description">礼包内容：<if condition="mb_strwidth($vo['gift_content'],'utf-8') gt 50">{:mb_strimwidth($vo['gift_content'],0,50,'...','utf-8')}<else />{$vo.gift_content}</if></p>
<p class="surplus">剩余：<span><notempty name="vo.novice">{:count(explode(',',$vo['novice']))}<else />0</notempty></span></p>
</div>
</div>
</li>
</volist>
</ul>
</div>
</div>
</notempty>
</div>
</div>
</block>
<block name="footer">
<div class="ggift-space"></div>
<div class="ggift">
<div class="wrap">
<gt name="data.recordid" value="0">
<a href="javascript:;" class="butn jsgetgift disabled" style="background: rgb(190,190,190) !important;">已领取</a>
<else />
<a href="javascript:;" data-id="{$data.id}" class="butn jsgetgift">立即领取</a>
</gt>
</div>
</div>
</block>
<block name="script">
<script src="__STATIC__/layer/layer.js"></script>
<script src="__JS__/clipboard.min.js"></script>
<empty name="data">
<script>layer.msg('未查到此礼包数据');setTimeout(function(){window.location.href="{:U('Gift/index',array('account'=>I('account')))}";},1500);</script>
</empty>
<script>
function Copy(str,that,index){
text = str;
var clipboard = new Clipboard('.copy',{
text: function() {
return text;
}
});
clipboard.on('success', function(e) {
that.text('复制成功');
e.clearSelection();
setTimeout(function(){layer.close(index);layer.msg('复制成功');},1500);
});
clipboard.on('error', function(e) {
that.text('复制完成');
alert('此浏览器不支持此操作，请长按礼包码复制');
});
}
$(function() {
var surplus = $('.surplus').attr('data-value');
var count = 0;
var a = setInterval(function() {
if( count <= 50 ){
$('.surplus-right').css({'transform':'rotate(180deg)',"background":"#DEDEDE"});
$('.surplus-left').css('transform','rotate('+(180-(++count)*3.6)+'deg)');
if (count>=surplus) {clearInterval(a);}
}else{
$('.surplus-left').css({'transform':'rotate(180deg)',"background":"rgb(255,95,129)"});
$('.surplus-right').css('transform','rotate('+(180-((++count)-50)*3.6)+'deg)');
if (count>=surplus) {clearInterval(a);}
}
},10);
$('.jsgetgift').on('click',function() {
var that=$(this),id=$.trim(that.attr('data-id')),text = $.trim(that.text());
if (id>0) {
if (that.hasClass('disabled')) {return false;}
that.addClass('disabled').text('领取中');
$.ajax({
type:'post',
dataType:'json',
url:'{:U("Gift/getgift")}',
data:{id:id},
success:function(data) {
switch(parseInt(data.status)) {
case 1:
case 2:
case 3:{
that.text('已领取');
var title = parseInt(data.status)==2?'你已成功领取过':'领取成功！';
layer.open({
type: 1,
closeBtn: '1',
title: false,
skin: 'layer-lwx-style', //加上边框
area: ['7rem', '3.5rem'], //宽高
content: '<div class="layer-lwx-notice"><h4 class="layer-lwx-title">'+title+'</h4><p class="layer-lwx-novice"><span>激活码：</span><span class="novice-txt">'+data.info+'</span></p><div class="layer-lwx-butn"><a href="javascript:;" class="butn copy">复制激活码</a></div></div>',
success:function(layero, index){
$('.copy').click(function() {
// //移动端复制
$(".copy").text('复制成功');
Copy($('.novice-txt').text(),$(this),index);
return false;
});
}
});
};break;
case 4:{
that.text('已领完');
layer.msg(data.info);
};break;
default:{layer.msg(data.info);
that.removeClass('disabled').text(text);}
}
},error:function() {
layer.msg('服务器故障，请稍候再试...');
that.removeClass('disabled').text(text);
}
});
}
return false;
});
});
</script>
</block>