<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
<title>影视会员</title>
<link rel="stylesheet" type="text/css" href="${ctx }/styles/common/reset.css?v=1.0" />
 <link rel="stylesheet" type="text/css" href="${ctx }/styles/wechat/moviesviprecharge.css?ver=4.0" />
<script type="text/javascript" src="${ctx }/scripts/common/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${ctx }/scripts/common/common.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="${ctx }/scripts/common/shareAppMessage.js"></script>
<link rel="stylesheet" href="${ctx }/styles/visitor/layer.css" type="text/css">
<script type="text/javascript" src="${ctx }/scripts/visitor/layer.js?v=4.0"></script>
<script type="text/javascript" src="${ctx }/scripts/wechat/moviesviprecharge.js?ver=4.2"></script>
</head>
<body>
	<input id="contextPath" value="${ctx}" type="hidden" />
	<input type="hidden" id="developId" value="${developId}"  />
	<input type="hidden" id="tradeType" value="${tradeType}"  />
	<input type="hidden" id="openId" value="${openId}"  />
	<input type="hidden" id="channelCode" value="${channelCode}"  />
	<input type="hidden" id="payWay" value="${payWay}"  />
	<input type="hidden" id="operationType" value="${operationType}"  />
	<input type="hidden" id="webUrl" value="${webUrl }" />
	<input type="hidden" id="imageUrl" value="${visitPrefix }${productCategories.iconUrl}" />
	<input type="hidden" id="productCategoriesName" value="${productCategories.name }" />
	 <div class="makervip">
            <img src="${visitPrefix }${productCategories.iconUrl}"  alt="" class="makericon"/>
            <span>${productCategories.name }充值</span>
        </div>
        <c:if test="${ not empty productList }">
        <div class="makerrecharge clearfix">
            <div class="rechargeentry">
                <label>请输入手机号码</label>
                <div class="entryinput">
                    <input type="number"  id="mobile"/>
                </div>
                <p>*付款后，卡密将以短信形式发送给您，请至相应官网激活。</p>
            </div>
            <div class="optionamount">
                <span>请选择充值金额</span>
                <div class="optionamounlistwrap">
                    <ul class="optionamounlist clearfix">
                    	<c:forEach items="${productList }" var="product" varStatus="status">
                    		<c:choose>
                    			<c:when test="${status.index==0 }">
	                    			<li class="pitchon">
			                            <em class="amountit">${product.productName }</em>
			                            <input type="hidden" id="${product.id }"/>
			                            <strong class="preferentialPrice" id="${product.realPrice }">${product.realPrice }元<br><em>${product.productPrice }元</em></strong>
		                       		 </li>
                    			</c:when>
                    			<c:otherwise>
                    				 <li>
			                            <em class="amountit">${product.productName }</em>
			                             <input type="hidden" id="${product.id }"/>
			                            <strong class="preferentialPrice" id="${product.realPrice }">${product.realPrice }元<br><em>${product.productPrice }元</em></strong>
                        			</li>
                    			</c:otherwise>
                    		</c:choose>
                        </c:forEach>
                    </ul>
                </div>
                <c:choose>
                	<c:when test="${operationType!='MGTV' }">
                		<div class="entrynumber clearfix">
                    		<label>充值数量</label>
		                    <div class="entryadd">
		                        <a href="javascript: void(0);" title="减" class="reduce"></a>
		                        <div class="entryaddinput"><input type="number" id="entryaddNumber" onkeyup="calculatedAmount()" value="1" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" /></div>
		                        <a href="javascript: void(0);" title="加" class="plus"></a>
		                    </div>
	                    	<strong>(1-100)</strong>
                		</div>
                	</c:when>
                	<c:otherwise>
                		<input type="hidden" id="entryaddNumber" value="1" />
                	</c:otherwise>
                </c:choose>
                <div class="entrynumber clearfix">
                    <label>合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计</label>
                    <em class="totalprice">¥0.00</em>
                </div>
            </div>
        </div>
          <input type="button" class="makervipbtn" value="立即充值"/>
        </c:if>
        <c:if test="${empty  productList}">
        <div class="nogoods">
			<img src="${ctx}/images/gasrecharge/nothinggoods.png" alt="" /><span>暂无此商品</span>
		</div>
		</c:if>


        <div class="jumowrap">
            <div class="jump clearfix">
                <a href="javascript:void(0);" onclick="searchOrder()">订单查询</a>
                <a href="javascript:void(0);" class="explainshow">充值说明</a>
            </div>
        </div>

        <!-- 充值说明 -->
        <div class="explainmask">
            <div class="explain">
                <h3>充值说明</h3>
                <p>
                1、芒果TV会员：本商品为自动充值，付款后会自动充值至您填写的账号中，请确保账号填写正确，充值成功后不予退换。<br/>
                2、其他会员（除芒果TV会员外）：售出商品为官方卡密，均不退不换。付款后，卡密将以短信形式发至您填写是手机号码中，请确保手机号码填写正确。<br/>
                3、如因会员账号填写错误导致误充，或因输入错误的手机号码导致卡密信息泄露，系统不予退款，请您尝试联系充错的号码协商补偿。<br/>
                4、如有疑问，请咨询客服：<a href="tel:4008386065">4008386065</a>
                </p>
                <a href="javascript: void(0)" class="explainbtn">知道了</a>
            </div>
        </div>
        <script type="text/javascript">
            $(".explainshow").click(function(){
                $(".explainmask").show();
            });
            $(".explainbtn").click(function(){
                $(".explainmask").hide();
            });
        </script>
</body>
</html>