{% extends 'VipPlugin:Vip:layout.html.twig' %}
{% block title %}{{ 'vip.vip_zone_title'|trans }} - {{ parent() }}{% endblock %}
{% set menu = 'index' %}
{% do script(['vipplugin/js/vip/index.js']) %}
{% block vip_main %}
{{ render(controller('VipPlugin:Vip:vipBanner',{userVip: userVip|default(null)})) }}{#会员banner#}
{% endblock %}
{% block bottom %}
<form id="member-buy-form" style="display: none" data-try-buy-url="/vip/tryBuy" action="/order/show">
<input type="hidden" name="targetType" value="vip"/>
<div class="form-group">
<label class="col-sm-3 control-label">会员等级</label>
<div class="col-sm-8 radios">
<label><input type="radio" name="targetId" value="1" > 青铜会员(1月)</label>
<label><input type="radio" name="targetId" value="2" > 白银会员(半年)</label>
<label><input type="radio" name="targetId" value="3" checked="checked" > 黄金会员(1年)</label>
<label><input type="radio" name="targetId" value="4" > 钻石会员(2年)</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="duration">开通时长</label>
<div class="col-sm-8 radios">
<label><input type="radio" name="unit" value="month" > 按月</label>
<label><input type="radio" name="unit" value="year" checked="checked" > 按年</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8 controls">
<input type="text" name="num" id="duration" value="1" >
<input type="hidden" name="defaultBuyMonth" value="1" >
<input type="hidden" name="defaultBuyYear" value="1" >
</div>
</div>
<input type="hidden" name="buyType" value="renew">
</form>
<!--vip弹窗-->
<div class="bg_back" style="display:none;">
</div>
<div class="popup_vip" style="display:none;">
<div class="guanbi"></div>
<div class="title">
开通VIP·学习全站真题解析
</div>
<div class="con">
<p> 171****3334 3分钟前购买了2年VIP</p>
<ul class="vip clearfix">
<li class="" data-id="1">
<div class="box">
<p>1个月VIP</p>
<h2 ><em>¥</em>58</h2>
<h4>每天仅需 1.9 元</h4>
</div>
</li>
<li class="" data-id="2">
<div class="box">
<p>6个月VIP</p>
<h2><em>¥</em>158</h2>
<h4>每天仅需 0.87 元</h4>
</div>
</li>
<li class="hover" data-id="3">
<div class="box">
<span class="tj">推荐</span>
<p>1年VIP</p>
<h2 style=" color:#f52346;"><em>¥</em>258</h2>
<h4>每天仅需 0.7 元</h4>
</div>
</li>
<li class="" data-id="4">
<div class="box">
<p>2年VIP</p>
<h2><em>¥</em>358</h2>
<h4>每天仅需 0.49 元</h4>
</div>
</li>
</ul>
<a href="javascript:;" id="kaitong" class="butt">立即开通</a>
</div>
</div>
<script>
$(".vip_buy").click(function (){
$(".bg_back,.popup_vip").show();
});
$(".popup_vip .con ul li").click(function(){
$(".popup_vip .con ul li").removeClass("hover");
$(this).addClass("hover");
$(".popup_vip h2").css("color","#222222");
$(this).find("h2").css("color","#ff0000");
//表单事件
var id = parseInt($(this).attr("data-id"));
$(":radio[name='targetId'][value='" + id + "']").prop("checked", "checked");
switch(id)
{
case 1:
$(":radio[name='unit'][value='month']").prop("checked", "checked");
$("#duration").val(1);
break;
case 2 :
$(":radio[name='unit'][value='month']").prop("checked", "checked");
$("#duration").val(6);
break;
case 3 :
$(":radio[name='unit'][value='year']").prop("checked", "checked");
$("#duration").val(1);
break;
case 4 :
$(":radio[name='unit'][value='month']").prop("checked", "checked");
$("#duration").val(24);
break;
default:
break;
}
});
$(".guanbi ,.bg_back ").click(function(){
$(".bg_back,.popup_vip").hide();
});
$("#kaitong").click(function (){
$("#member-buy-form").submit();
});
</script>
{% endblock %}