yearrenew.html 5.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>年续费</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->
    <link rel="apple-touch-icon-precomposed" href="favicon.ico">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="Bookmark" href="favicon.ico">
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${staticHost}/css/reset.css">
</head>
<body ontouchstart>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">车牌号</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" maxlength="7" value="${carNo!''}" readonly>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">卡类别</label></div>
        <div class="weui-cell__bd">
            ${cardTypeStr!''}
        </div>
    </div>
</div>

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">停车场</label></div>
        <div class="weui-cell__bd">${parkName!''}</div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">购买数量</label></div>
        <div class="weui-cell__bd"><span id="reduce_btn" class="reduce_btn">-</span><input class="weui-input inpt-num"
                                                                                           id="numder" type="text"
                                                                                           readonly="" value="1"><span
                id="add_btn" class="add_btn">+</span></div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">当前有效期</label></div>
        <div class="weui-cell__bd" id="expiryDate">
            ${expDateStr!''}
        </div>
    </div>
    <!--<div class="weui-cell">-->
    <!--<div class="weui-cell__hd"><label for="date" class="weui-label">开始时间</label></div>-->
    <!--<div class="weui-cell__bd">-->
    <!--<input class="weui-input" id="date" type="text"  placeholder="请选择开始时间">-->
    <!--</div>-->
    <!--<div class="weui-cell__ft">-->
    <!--</div>-->
    <!--</div>-->
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date1" class="weui-label">有效期至</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="date1" type="text" readonly value="">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">合计</label></div>
        <div class="weui-cell__bd pay-total">
            ¥<span id="totle_money">${cardPrice!'null'}</span>
        </div>
    </div>
</div>
<div class="pay-content-padded">
    <a href="javascript:;" class="weui-btn weui-btn_primary" id="pay_btn">提交订单</a>
</div>

<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="${staticHost}/js/lib/jquery-weui.min.js"></script>
<script src="${staticHost}/js/jsutil.js"></script>
<script src="${staticHost}/js/url.js"></script>
<script>
    //单价
    var price = ${cardPrice!null};
    var startDateStr = '${expDateStr!""}';
    var id = ${id};

    //添加数量
    $("#add_btn").click(function () {
        var num = $("#numder").val();
        num++;
        if (num > 1 && num < 6) {
            initEndDateStr(num);
        } else {
            $.toptip('最多续期5年', 2000, 'warning');
        }

    });
    //减去数量
    $("#reduce_btn").click(function () {
        var num = $("#numder").val();
        num--;
        if (num > 0) {
            initEndDateStr(num);
        } else {
            $.toptip('最少续期一年', 2000, 'warning');
        }


    });
    //立即支付
    $('#pay_btn').on('click', function () {
        var num = $("#numder").val();
        if (num > 5 || num < 1) {
            $.toptip('订购数量不合法', 2000, 'error')
        } else {
            $.toptip('最多购买5年', 2000, 'warning');
        }
        var req = {
            custCardId:${id},
            num: num
        }

        $.ajax({
            url: mUrl.renewSubmitOrder,
            data: req,
            type: 'Post',
            success: function (res) {
                if (res.code == '8888') {
                    var parkOrderId = res.data;
                    window.location.href = mUrl.orderPayView + '&parkOrderId=' + parkOrderId;
                } else {
                    $.toptip('系统异常', 2000, 'error')
                }
            }
        });
    });


    //计算结束时间
    function initEndDateStr(num) {
        num = parseInt(num);

        if (null == startDateStr || startDateStr.length < 4) {
            $.toptip('无法获取开始时间', 2000, 'warning');
        }
        var startDate = new Date(startDateStr);

        var endDate = new Date(startDate.format('yyyy-MM-dd'));
        //设置数量
        $("#numder").val(num);
        endDate.setYear(endDate.getFullYear() + num);

        //设置失效日期
        $('#date1').val(endDate.format('yyyy-MM-dd'));
        //设置总价
        var price = $("#cardAmount").val();
        $("#totle_money").html(num * price);


    }

    //第一次初始化为数量1
    initEndDateStr(1);


</script>
</body>
</html>