liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>我要续租</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="/css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="/css/style.css" />
	<style>
		.my-bar-nav {top: 0;-webkit-box-shadow: 0 0 0 #ccc;box-shadow: 0 0 0 #ccc;background: #fff;}
		.my-bar-nav  .mui-btn-link{color: #1cc9f4;font-size: 14px;}
		.my-btn-bluetooth{color: #1cc9f4;padding:2px 18px;font-size: 15px;border-color: #1cc9f4;}
		.my-table-noline:after,.my-table-noline:before,.my-table-noline li:after,.my-table-noline:before{display: none;}
		.mui-btn-link{color: #1cc9f4;}
		.my-btn-water-quality{padding:6px 38px;font-size: 15px;}
		.my-btn-water-quality.active{border: 1px solid rgba(78,215,249,.5);color: #1cc9f4;}
		.year-list{width: 100%;}
		.year-list>li{float: left;width: 22%;text-align: center;color: #1cc9f4;}
		.year-list>li:first-child{text-align: left;width: 17%;}
		.year-list>li:last-child{text-align: right;width: 17%;}
		.mui-input-row.mui-input-range{padding-right: 0;}
		.my-select {border:0!important;color: #999;background-color: #f5f5f5;margin-bottom: 0;padding: 3px 14px;text-align: center;-webkit-appearance: none;height: 40px;}
		.after{padding: 0 11px;position: relative;}
		.after:before{content:'';position:absolute;right: 20px;top: 16px;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 7px solid #666;}
		.my-view1:after,.my-view1 li:after{display: none;}
		.loading{position: fixed;display:none;left: 0;top: 0;right: 0;bottom: 0;width: 100%;height: 100%;background: rgba(0,0,0,.8);color: #fff;text-align: center;padding-top: 50%;font-size: 18px;}
		/* 设定WebKit浏览器下range */
		/*拖动块的样式*/
		.mui-input-range input[type=range]::-webkit-slider-thumb {
			-webkit-appearance: none;/*清除系统默认样式*/
			height: 26px;/*拖动块高度*/
			width: 26px;/*拖动块宽度*/
			background: #1cc9f4;/*拖动块背景*/
			border-radius: 50%; /*外观设置为圆形*/
			border: solid 1px #ddd; /*设置边框*/
		}
		/*横条样式*/
		input[type=range] {
			-webkit-appearance: none;/*清除系统默认样式*/
			width: 100%;
			background: -webkit-linear-gradient(#1cc9f4, #1cc9f4) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
			background-size: 0% 100%;/*设置左右宽度比例*/
			height: 3px;/*横条的高度*/
		}
	</style>
	<script>
        // 屏蔽分享
        window.hiddenAllWechatMenu = true;
	</script>
</head>
<body style="background: #fff;">
<div class="loading-bg">
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
		&nbsp;&nbsp;加载中...
	</div>
</div>
<div class="mui-content" style="background: #fff;">
	<ul class="mui-table-view mui-text-center my-table-noline">
		<li class="mui-table-view-cell">
			<span id="machineStopDate" class="mui-h6" ></span>
		</li>
		<li class="mui-table-view-cell">
			<img src="//s.iamberry.com/watero/images/shop/my_equipment.png" width="50%" />
			<span id="machineNO" style="position: absolute;color: #fff;left: 50%;top: 70%;-webkit-transform: translateX(-50%);"></span>
		</li>
		<li class="mui-table-view-cell">
			<button type="button" id="machineConnectState" class="my-btn-bluetooth mui-btn-link">
				未连接
			</button>
		</li>
		<li class="mui-table-view-cell" style="padding: 0 35px;">
			<div class="mui-input-row mui-input-range">
				<input type="range" id='block-range' name="rechargeDuration" value="1" min="1" max="5" >
			</div>
			<ul class="year-list">
				<li>1年</li>
				<li>2年</li>
				<li>3年</li>
				<li>4年</li>
				<li>5年</li>
			</ul>
		</li>
		<li class="mui-table-view-cell mui-text-left">
			<span class="mui-h5">服务费：</span><span class="cl-red" id="serviceCharge">¥799 元</span><span class="mui-h6 mui-pull-right">到期时间：<span id="rechargeStopDate"></span></span>
		</li>
		<li class="mui-table-view-cell" style="text-align: left;">
			<span class="mui-h6">使用抵扣券</span>
		</li>
		<li class="after">
			<select class="my-select" id="couponSelect" name="couponId">

			</select>
		</li>
		<li class="mui-table-view-cell" style="text-align: left;">
			<div><span class="mui-h6">抵扣金额：</span><span id="couponMoney" class="cl-red mui-pull-right">- ¥0 元</span></div>
		</li>
		<li class="mui-table-view-cell">
			支付金额：<span class="cl-red" id="payCharge">¥799 元</span>
		</li>
		<li class="mui-table-view-cell">
			<button id="sbumitRent" type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="支付中,请稍候"  class="" disabled>
				确认续租
			</button>
		</li>
		<li class="mui-table-view-cell">
			<a id="toRechargeLog" style="text-decoration: underline;font-size: 13px;color: #999;">续租记录</a>
		</li>
	</ul>
</div>
<div class="loading">
	支付中，请稍候<span class="dian">...</span>
</div>
<script src="/js/mui.min.js"></script>
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/shop/main.js"></script>
<!-- <script src="/js/shop/wechat-utils-1.0.js"></script> -->
<script src="/js/shop/layer.js"></script>
<script src="/js/wechat_iot.js?v=6734343"></script>
<script type="text/javascript">
    var machineDeviceId = '',machineId = '',couponId = '',stopDate = '';
    var rechargeOrderId = '', payUrl = '';
    var payData = {};
    var yearNum = 1;//最后要充值的年数
    var isPay = true;
    //每充一年需要多少钱			最后要充值的费用		优惠金额
    var payMoneyOne = 799, payMoney = 799,couponMoney = 0;
    mui.ready(function(){
        machineId = getParam("machineId");
        $('#block-range').val(1);
        initMachine(machineId);
        //判断机器是否在线
        setTimeout("myInterval()",3000);//1000为1秒钟
        document.querySelector('.loading-bg').style.display='none';
    });
    function myInterval(){
        sendMsgAndReceiveData(machineDeviceId,"*getData#",function(state,res){
            if(200 == state){
                //1.去掉遮罩
                document.querySelector('.loading-bg').style.display='none';
                //2.“确认续租”按钮亮起
                $("#sbumitRent").addClass("my-btn-water-quality");
                $("#sbumitRent").addClass("active");
                $("#sbumitRent").removeAttr("disabled");
            }
            if(500 == state){
                //1.去掉遮罩
                document.querySelector('.loading-bg').style.display='none';
                //2.弹框该机器不可续费
                $("#sbumitRent").prop("disabled","disabled");
                $("#machineConnectState").text('未连接');
            }
        });
    }
    /**
     *	初始化服务费抵扣券下拉框和机器信息
     */
    function initMachine(machineId){
        mui.ajax(base_path + '/machine/get_coupons_machine?dates=' + new Date().getTime(), {
            data:{
                "machineId":machineId
            },
            dataType:'json',
            type:'post',
            timeout:15000,
            success: function(dt) {
                if(dt.isRedirect) {
                    location.href = dt.redirectURL;
                } else {
                    if(dt.resultCode == 200 && dt.returnCode == 200){
                        var couponList = dt.returnMsg.couponList;
                        var machine = dt.returnMsg.machine;
                        machineDeviceId = machine.machineDeviceId;
                        stopDate = machine.machineStopDate;
                        $("#machineStopDate").text(stopDate + '  到期');
                        $("#rechargeStopDate").text(addYears(stopDate,1));

                        $("#machineNO").text("NO." + (10000 + parseInt(machineId)));
                        if(machine.machineConnectState == 1){
                            $("#machineConnectState").text('已连接');
                        }else{
                            $("#machineConnectState").text('未连接');
                        }

                        var couponSelect = $("#couponSelect");
                        if(couponList.length == 0){
                            $("#couponSelect").append('<option value="0">没有可用的抵扣券</option>');
                        }else{
                            couponSelect.append('<option serviceMoney="0" value="0">请选择抵扣券</option>');
                            mui(couponList).each(function(index) {
                                couponSelect.append('<option value="' + this.serviceId + '" serviceMoney="' + accDiv(this.serviceMoney,100) + '">' + this.serviceName + '</option>');
                            });
                        }
                    }else{
                        mui.alert("该机器不可以续费!请选择正确的机器!");
                    }
                }
            },
            error:function(xhr, type, errorThrown){
                console.log(xhr);
                mui.alert("该机器不可以续费!!");
            }
        });
    }
    /**
     *	点击年数进度条点击事件
     */
    document.getElementById('block-range').addEventListener('input',function(){
        document.getElementById('block-range').value = this.value;
        //修改服务费、到期时间
        yearNum = parseInt(this.value);
        this.style.backgroundSize= (yearNum - 1) * 25 + "% 100%";
        payMoney = yearNum * payMoneyOne;
        //year_num = yearNum;
        $("#serviceCharge").text('¥' + payMoney + ' 元');
        $("#payCharge").text('¥' + (payMoney - couponMoney) + ' 元');
        $("#rechargeStopDate").text(addYears(stopDate,yearNum));
    });

    /**
     *	抵扣券下拉框change事件
     */
    $('#couponSelect').change(function(){
        couponMoney = $($('#couponSelect option')[$(this)[0].selectedIndex]).attr("serviceMoney");
        $('#couponMoney').text('-¥' + couponMoney + ' 元');
        $("#payCharge").text('¥' + (payMoney - couponMoney) + ' 元');
        couponId = this.value;
    });

    /**
     * 立即续费
     * 校验机器在线、获取预支付id、发起支付
     */
    mui('body').on('tap', '#sbumitRent', function() {
        sendMsgAndReceiveData(machineDeviceId,"*getData#",function(state,res){
            if(200 == state){
                toPay();
            }
            if(500 == state){
                mui.alert("请保持机器在线!");
            }
        });
    });

    function toPay(){
        if(rechargeOrderId == ''){
            payUrl = base_path + '/machine/machine_pay?dates=';
            payData = {
                "machineId":machineId,
                "year_num":yearNum,
                "couponId":couponId
            };
        }else{
            payUrl = base_path + '/machine/recharge_pay?dates=';
            payData = {"orderId":rechargeOrderId};
        }
        if(isPay) {
            isPay = false;
            layer.open({
                type: 2,
                shadeClose: false,
                content: "正在请求加载订单信息..."
            }); // 调用加载弹出层
            mui.ajax(payUrl + new Date().getTime(), {
                data:payData,
                dataType:'json',
                type:'post',
                timeout:15000,
                success: function(dt) {
                    layer.closeAll();
                    if(dt.resultCode == 200 && dt.returnCode == 200){
                        $('#couponSelect').css("display","none");
                        $("#block-range").prop("disabled","disabled");
                        var dataObj = dt.returnMsg;
                        rechargeOrderId = dataObj.returnMsg;
                        var obj = JSON.parse("{" + dataObj.wechat_pay_id + "}");
                        WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
                            if(res.err_msg == 'get_brand_wcpay_request:ok') {
                                layer.open({
                                    type: 2,
                                    shadeClose: false,
                                    content: "正在请求加载订单信息..."
                                }); // 调用加载弹出层
                                $.ajax({
                                    type: 'post',
                                    url: base_path + '/machine/check_recharge_pay_status',
                                    data: {"rechargeOrderId":rechargeOrderId},
                                    dataType: 'json',
                                    timeout: 15000,
                                    success: function(data) {
                                        //console.log(data);
                                        if(data.status) {
                                            if(data.data.rechargeState == 1){
                                                isPay = true;
                                                //mui.alert("支付成功!跳转到我的设备!");
                                                mui.openWindow({url:'my_equipment.html'});
                                            }else{
                                                mui.alert('如果已支付，请等待同步支付状态！', '', function() {
                                                    isPay = true;
                                                });
                                            }
                                        } else {
                                            isPay = true;
                                            mui.alert(data.message);
                                        }
                                    },
                                    error: function(xhr, type, errorThrown) {
                                        //异常处理；
                                        console.log(xhr);
                                        isPay = true;
                                        mui.alert("请检查网络或刷新页面重试！");
                                    }
                                });
                            } else {
                                isPay = true;
                                mui.alert("对不起，支付失败!请稍后重试!");
                            }
                        });

                    }else{
                        //console.log(xhr);
                        isPay = true;
                        mui.alert("该机器不可以续费!请确保机器已经激活并连接!");
                    }
                },
                error:function(xhr, type, errorThrown){
                    console.log(xhr);
                    layer.closeAll();
                    isPay = true;
                    mui.alert("支付失败!请检查网络或刷新页面重试！");
                }
            });
        } else{
            mui.alert("正在请求支付中~~请稍后!");
            return;
        }
    }
    mui('body').on('tap', '#toRechargeLog', function() {
        window.location.href = 'renew_logs.html?machineId=' + machineId;
    });

    /**
     * 给日期字符串增加年
     */
    function addYears(dateStr,years){
        var date = new Date(Date.parse(stopDate.replace(/-/g, "/")));
        var yearStr = date.getFullYear() + years;
        var otherStr = dateStr.substring(4,dateStr.length);
        return yearStr + otherStr;
    }
</script>
</body>
</html>