src/main/webapp/WEB-INF/pages/monthrenew.html

<!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" 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 placeholder="请先选择开始时间">
        </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 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="//cdn.bootcss.com/jquery-weui/1.0.1/js/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 < 12) {
            initEndDateStr(num);
        } else {
            $.toptip('最多续期11个月', 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')
        }
        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);
        //设置数量
        $("#numder").val(num);
        var temp = startDateStr.split("-");
        var endDate = new Date(temp[0] + '-' + temp[1] + '-01');
        endDate.setMonth(endDate.getMonth() + num+1);
        endDate.setDate(0)//设置为0，意思为取当前月最后一天
        var year = endDate.getFullYear();
        var month = endDate.getMonth() + 1 + '';
        var day = endDate.getDate() + '';
        if (month.length == 1) {
            //只有一位，需要补0
            month = '0' + month;
        }
        if (day.length == 1) {
            //只有一位，需要补0
            day = '0' + day;
        }
        var endDateStr = year + '-' + month + '-' + day;
        //设置失效日期
        $('#date1').val(endDateStr);
        //设置价格
        $("#totle_money").html(num * price);
    }
    //第一次初始化为数量1
    initEndDateStr(1);
</script>
</body>
</html>