<%@ 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>
<jsp:include page="../../common.jsp" />
<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>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.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;
     }
    .backdrop {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,.1);
    }
    </style>
</head>
<body>
<div id='loading' class="backdrop" style="display: none; padding-top: 70%; text-align: center;">
    <div>
        <img src="${resourcePath}/images/loading-2.gif" alt="loading" />
    </div>
    <div style="font-family:'Microsoft YaHei';color:#000000;font-size: 0.5rem;">支付中...</div>
    <!--自己放loding图片-->
</div>

<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>
	            </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>
                </div>
            </c:if>

        <input type="hidden" id="userAppId"  value="${userAppId}">
        <input type="hidden" id="payType"  value="${payType}">
        <input type="hidden" id="userid"  value="${userid}">
        <input type="hidden" id="openid"  value="${openid}">
            
</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 isAlipay() {
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/Alipay/i) == "alipay"){
        return true;
    }else{
        return false;
    }
}
function setFocusHander(){
	var money=$("#a").text();
	var userAppId=$("#userAppId").val();
	var payWay=$("#payType").val();
    var userid=$("#userid").val();
    var openid=$("#openid").val();
    if(userAppId == "" || userAppId == null || userAppId == undefined){ // "",null,undefined
        alert("用户id不能为空！");
        return;
    }
    if(money == "" || money == null || money == undefined){ // "",null,undefined
        alert("金额不能为空！");
        return;
    }
    $('#loading').css('display','block');
    $.ajax({
        url:ctx + '/merchant/upGradePay',
        data:{
             "userAppId": userAppId,
             "money": money,
             "payWay": payWay,
             "level":${level},
             "userid":userid,
             "openid":openid,
        },
        dataType:"json",
        type:"post",
        success:function(res){
            $('#loading').css('display','none');
            if(res.code=='1'){
                var rdata = res.data;
                if("WXZF" == payWay){
                    WeixinJSBridge.invoke('getBrandWCPayRequest', {
                        // 商品名称
                        "appId" : rdata.payAppId,
                        "timeStamp" : rdata.payTimeStamp,
                        "nonceStr" : rdata.paynonceStr,
                        "package" : rdata.payPackage,
                        "signType" : rdata.paySignType,
                        "paySign" : rdata.paySign,
                    }, function(res) {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            //成功之后跳转地址
                            window.location = ctx + '/merchant/paySuccess';
                        } else {
                            alert("支付失败");
                        }
                    })
                }else if("ZFBZF" == payWay){
                    var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
                    if(reg.test(rdata.source)){
                        window.location = rdata.source;
                    }else{
                        ap.tradePay({
                            tradeNO : rdata.source
                        }, function(res) {
                            if (res.resultCode == '9000') {
                                window.location = ctx + '/merchant/paySuccess'; //订单支付成功
                            } else if (res.resultCode == '8000') {
                            } else if (res.resultCode == '4000') {
                                ap.alert("订单支付失败");
                            } else if (res.resultCode == '6001') {
                            } else if (res.resultCode == '6002') {
                                ap.alert("网络连接出错");
                            }
                        });
                    }
                }else{
                    window.location = rdata.redirectUrl;
                }
            }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>