<%@ page 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 name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <c:set var="ctx" value="${pageContext.request.contextPath}"  scope="request"/>
    <c:set var="resourcePath" value="${ctx}/resources"  scope="request"/>
    <script type="text/javascript">
        var ctx = "${ctx}"; //上下文路径
        var resourcePath = "${resourcePath}";
        document.writeln('<script type="text/javascript" src="'+resourcePath+'/js/global.js?d=' + new Date().getTime() + '" ><\/script>');
    </script>
    <link rel="stylesheet" href="${resourcePath}/css/weui.min.css">
    <link rel="stylesheet" href="${resourcePath}/css/jquery-weui.min.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/recharge.css"/>
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/icon.css"/>
<%--    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>--%>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="${resourcePath}/js/jquery.min.js"></script>
    <style>
        body{
            font-size: 1rem;
            line-height: 1.2;
        }
        .uInfo-lef{
            font-size: 0.8rem;
        }
        .card-head{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .vip-card-logo{
            width: 27px;
            height: 27px;
        }
        .shopDes{
            font-size: 0.9rem;
        }
        .choseCard{
            margin-bottom: .5rem;
        }
    </style>
    <title>会员充值</title>
</head>
<body>
    <div class="container">
        <div class="top ">
            <div class="card">
                <div class="card-head">
                    <img class="vip-card-logo" src="${resourcePath}/images/vip-card-logo.png">
                    <div class="shopName">${merchant.alias}</div>
                </div>
                <div class="shopDes">欢迎使用本店会员卡</div>
                <c:if test="${not empty activityRecharge}">
                    <div class="shopAct">
                        <div class="iconfont icon-dian saicon"></div>
                        充${activityRecharge.rechargeMoney}送${activityRecharge.giveMoney}
                    </div>
                </c:if>
                <div class="uInfo">
                    <div class="uInfo-lef">
                        <div >卡号：${menber.cardNo}</div>
                        <div class="uName">会员：${menber.nickName}</div>
                    </div>
                    <div class="uInfo-rig">
                        <span class="curNumText">余额：</span>
                        <span class="curNum">${balance}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="mid">
            <div class="rechargeNum-box">
                <div class="rn-des">￥</div>
                <input id="rnInput"  type="number" ${store.storeId eq 'TQTDMS' ? 'readonly' : ''}   value="" maxlength="14" class="rechargeNum-input" placeholder="${store.storeId eq 'TQTDMS' ? '不支持自定义金额' : '自定义金额'}">
            </div>
            <div class="choseCard-box">
                <c:if test="${not empty list}">
                    <c:forEach items="${list}" var="r">
                        <div class="choseCard "> <%--cardActive--%>
                            <div class="cardNum" data-i="${r.id}"  data-v="${r.rechargeMoney}" data-r="${r.giveMoney}" data-t="1">${r.rechargeMoney}元</div>
                            <div class="cardNumA">送${r.giveMoney}元</div>
                                <%--<div class="sel-icon iconfont icon-gou"></div>--%>
                        </div>
                    </c:forEach>
                </c:if>
                <c:if test="${not empty amt}">
                    <c:forEach items="${amt}" var="a">
                        <div class="choseCard">
                            <div class="cardNum" data-v="${a}" data-t="0">${a}元</div>
                        </div>
                    </c:forEach>
                </c:if>
<%--                <div class="choseCard">--%>
<%--                    <div class="cardNum" data-v="300" data-t="0">300元</div>--%>
<%--                </div>--%>
<%--                <div class="choseCard">--%>
<%--                    <div class="cardNum" data-v="200" data-t="0">200元</div>--%>
<%--                </div>--%>
<%--                <div class="choseCard">--%>
<%--                    <div class="cardNum" data-v="100" data-t="0">100元</div>--%>
<%--                </div>--%>
            </div>
            <div class="recharge-button flex-cc" id="toRecharge">
                <div class="iconfont recharge-loading"></div>
                <div class="recharge-text">立即充值</div>
            </div>
        </div>
        <!-- <div class="bot">
            <div class="banlanceRecord-item">
                <div class="bot-title">最近30天余额记录</div>
            </div>
            <div class="banlanceRecord-item">
                <view class="bi-des">会员消费信息</view>
                <view class="bi-time">2020-10-12 14:57:06</view>
                <view class="bi-Num">-0.1元</view>
            </div>
            <div class="banlanceRecord-item">
                <view class="bi-des">会员消费信息</view>
                <view class="bi-time">2020-10-12 14:57:06</view>
                <view class="bi-Num">-0.1元</view>
            </div>

        </div> -->
    </div>
</body>
<script src="${resourcePath}/js/recharge/recharge.js" type="text/javascript" charset="utf-8"></script>
<script src="${resourcePath}/js/jquery-weui.min.js"></script>
<script>
    $("#toRecharge").click(function () {
        var rechargeAmt = $("#rnInput").val();
        if(!rechargeAmt){
            $.alert("请输入充值金额！");
            return;
        }
        var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if(!reg.test(rechargeAmt)){
            $.alert("金额格式不正确！");
            return;
        }
        if(parseFloat(rechargeAmt) < 0.01){
            $.alert("最少充值0.01！");
            return;
        }
       /* openLoading();
        $(this).unbind("click","fn");*/
        var dom = $(".cardActive");
        var t = "0";
        var v = rechargeAmt;
        var i = "";
        if(dom.length != 0){
            t = dom.find("div").attr("data-t");
            i = dom.find("div").attr("data-i");
        }
        if(t == 1){
            var gv = dom.find("div").attr("data-r") == undefined ? 0.00 : dom.find("div").attr("data-r");
            v = parseFloat(v) + parseFloat(gv);
        }
        $.confirm({
            title: '充值',
            text: '充值'+rechargeAmt+'元实际到账'+v+'元！',
            onOK: function () {
                openLoading();
                $("#toRecharge").unbind("click","fn");
                ajaxFormPay(t,rechargeAmt,i);
            },
            onCancel: function () {
            }
        });
    })

    function ajaxFormPay(t,rechargeAmt,i) {
        let data = {};
        data.storeId = '${store.id}';
        data.appOpenId = '${appOpenId}';
        data.rechargeAmt = rechargeAmt;
        data.payWay = "WXZF";
        data.payType = "03";
        data.type = t;
        data.aId = i;
        let province = window.localStorage.getItem("province");
        if(province){
            data.province = province;
        }
        var url = ctx + "/merchant/toRecharge";
        $.ajax({
            url : url,
            data : JSON.stringify(data),
            dataType : "json",
            type : "post",
            contentType:'application/json',
            success : function(res) {
                $("#toRecharge").bind("click","fn");
                closeLoading();
                if (res.code == '200') {
                    var rdata = res.data;
                    var params = '?timestamp=' + rdata.payTimeStamp + '&nonceStr=' + rdata.paynonceStr
                        + '&package=' + encodeURIComponent(rdata.payPackage) + '&signType=' + rdata.paySignType
                        + '&paySign=' + encodeURIComponent(rdata.paySign) + '&pType=0&appId='+rdata.payAppId;
                    var path = '../../pages/store/wxpay'+params;
                    //通过JSSDK的api跳转到指定的小程序页面
                    wx.miniProgram.navigateTo({url: path});
                } else {
                    $.alert(res.message,"系统提示");
                    <%--$.alert(res.message,"系统提示",function (){--%>
                    <%--    if(res.message.indexOf("收款店铺过远") > -1 && !province){--%>
                    <%--        window.location.href = ctx + "/merchant/wxLocation?storeId=${store.id}&appOpenId=${appOpenId}";--%>
                    <%--    }--%>
                    <%--});--%>
                }
            }
        })
    }

    function openLoading(){
        $('.recharge-loading').addClass('icon-loading');
        $('.recharge-text').text('支付中');
        $('.recharge-button').css('background-color','#ec7b8e')
    }
    // 关闭loading
    function closeLoading(){
        $('.recharge-loading').removeClass('icon-loading');
        $('.recharge-text').text('立即充值');
        $('.recharge-button').css('background-color','#f33c5b')
    }
</script>
</html>