<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>升级充值</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://www.shouyinbei.net/resources/wap/js/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="http://unpkg.com/vue-ydui/dist/ydui.rem.css">
    <!-- 引入rem自适应类库 -->
    <script src="http://unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
    <style>
        .body,html{
            margin: 0;
            padding: 0;
            font-family: 微软雅黑, 宋体, Arial;
        }
        .center-top{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
        }
     .yd-navbar-center-title,.yd-back-icon{
         color: #fff !important;
     }
     .center{
         margin-top: 20px;
         padding: 20px;
         background-color: #eee;
     }
     .chong{
       width: 150px;
       margin: 0 auto;
     }
     .b{
         width: 100%;
         height: 200px;
         font-size: 20px;
         font-family: 微软雅黑, 宋体, Arial;
     }
     .btn{
        margin-top: 40px;
        width: 100%;
        height: 40px;
        background-color: #f96a4f;
        color:#fff;
        border-radius: 5px;
        border: 0;
     }
    </style>
</head>
<body>
<div id="app">
        <yd-navbar title="充值" style="background-color: #f96a4f;">
            <a to="#" slot="left">
                <yd-navbar-back-icon></yd-navbar-back-icon>
             </a>
        </yd-navbar>
         <c:if test="${level eq '1'}">
        <div class="center-top">
            <img class="b" src="https://www.shouyinbei.net/resources/images/levelLogo.png" alt="">
        </div>
        </c:if>
        
         <c:if test="${level eq '2'}">
         <div class="center-top">
            <img class="b" src="https://www.shouyinbei.net/resources/images/levellogo1.png" alt="">
        </div>
        </c:if>
        
        <c:if test="${level eq '1'}">
	        <div class="center">
	                    <div class="chong">
	                        <span style="font-size: 16px;" >充值金额:<b id="a">${twoUpVipAmount}</b>元</span>
	                    </div>
	                    <button class="btn" onclick="setFocusHander()">立即充值</button>
	                <input type="hidden" id="userId"  value="${userId}">
	            </div>
            </c:if>
            
            <c:if test="${level eq '2'}">
            <div class="center">
                        <div class="chong">
                            <span style="font-size: 16px;" >充值金额:<b id="a">${threeUpVipAmount}</b>元</span>
                        </div>
                        <button class="btn" onclick="setFocusHander()">立即充值</button>
                    <input type="hidden" id="userId"  value="${userId}">
                </div>
            </c:if>
            
</div>
<!-- 引入 Vue -->
<script src="http://unpkg.com/vue"></script>
<!-- 引入组件库 -->
<script src="http://unpkg.com/vue-ydui/dist/ydui.rem.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script>
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}
function setFocusHander(){
	var money=$("#a").text();
	var userId=$("#userId").val();
	var payWay='';
    if(isWeiXin()){
        payWay='WXZF';
    }else{
        payWay='ZFBZF';
    }
    $.ajax({
        url:'/wap/wechat/leshuaPay',
        data:{
             "userId": userId,
             "money": money,
             "payWay": payWay,
             "level":${level},
        },
        dataType:"json",
        type:"post",
        success:function(res){
            if(res.code=='1'){
                window.location=res.jspay_url;
            }else{
                alert(res.msg);
            }
        }
    })
}


   /*  new Vue({
        el: '#app',
        data:{
            input10:''
        },
        mounted(){
        	var money=this.$refs.a.innerHTML;
        	console.log(this.$refs.b.value)
        },
        methods: {
        	setFocusHander: function (){
            	var money=this.$refs.a.innerHTML;
            	var userId=this.$refs.b.value;
            	var payWay='';
            	if(isWeiXin()){
            		payWay='WXZF';
            	}else{
            		payWay='ZFBZF';
            	}
            	$.ajax({
            		url:'/wap/wechat/leshuaPay',
            		data:{
            			 "userId": userId,
                         "money": money,
                         "payWay": payWay,
            		},
            		dataType:"json",
            		type:"post",
            		success:function(res){
            			if(res.code=='1'){
            				window.location=res.jspay_url;
            			}else{
            				alert(res.msg);
            			}
            		}
            	})
            },
        }
    }) */
</script>
</body>
</html>