vip页面

程维达

{% 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 %}