liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
							<!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" href="/css/mui.min.css">
	<link rel="stylesheet" href="/css/iconfont.css" />
	<link rel="stylesheet" href="/css/icons-extra.css"/>
	<link rel="stylesheet" href="/css/style.css" />
	<style type="text/css">
		.mui-backdrop {
			position: fixed;
			z-index: 998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: url(//s.iamberry.com/watero/images/shop/share-lease.png) top center no-repeat rgba(0, 0, 0, .4);
			background-size: 100%;
		}
		.cart_fixed{position: fixed;right: 30px;bottom:135px;background: rgba(0,0,0,.2);padding: 12px;border-radius: 50%;text-align: center;opacity: .5;}
		.cart_fixed .mui-badge{position: absolute;right:-7px;top:-5px;font-size: 12px;}
		.return{position: fixed;
			right: 30px;
			bottom: 80px;
			background: rgba(0,0,0,.2);
			padding: 12px;
			border-radius: 50%;
			text-align: center;
			opacity: .9;color: #333;display: none;}
		.my-btn-hand{display:block;width: 100%;height: 55px;background-color: #1cc9f4;color: #fff;border: 0;border-radius: 0;font-size: 20px;}
		.my-btn-hand.active{background-color: #ccc;}
		.cl-blue{color: #1cc9f4;}
		.iconfont{font-size: 20px;}
		.mui-content-madded{background: #fff;padding: 10px 10px 40px 10px;}
		.lease-ul{font-size: 14px;color: #999;}
		.lease-ul:after,.no-line:after,.no-line:before{display: none;}
		.lease-left{display: inline-block;width: 20%;}
		.ul_radio{width: 100%;}
		.ul_radio li{width:21%;height: 55px;margin: 0 1%;border: 1px solid rgba(0,0,0,.1);border-radius: 5px; display: inline-block;position: relative;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;}
		.ul_radio .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}
		.radio1{background: url(//s.iamberry.com/watero/images/cp-1.jpg) center center /auto 85% no-repeat;}
		.radio2{background: url(//s.iamberry.com/watero/images/cp-2.jpg) center center /auto 85% no-repeat;}
		.radio3{background: url(//s.iamberry.com/watero/images/cp-3.jpg) center center /auto 85% no-repeat;}
		.radio4{background: url(//s.iamberry.com/watero/images/cp-4.jpg) center center /auto 85% no-repeat;}
		.ul_radio .radio5,.ul_radio .radio6,.ul_radio .radio7,.ul_radio .radio8{border: 0;}
		.radio5{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
		.radio5:before,.radio6:before,.radio7:before,.radio8:before{content: 'watero水杯';position: absolute;bottom: -20px;font-size: 12px;text-align: center;width: 100%;color: #999;}
		.radio6{background: url(//s.iamberry.com/watero/images/lease-zeng1.jpg) center center /auto 85% no-repeat;}
		.radio7{background: url(//s.iamberry.com/watero/images/lease-zeng1.jpg) center center /auto 85% no-repeat;}
		.radio8{background: url(//s.iamberry.com/watero/images/lease-zeng1.jpg) center center /auto 85% no-repeat;}
		.lease-r-center{position: absolute;left: 70px;top: 20px;}
		.lease-select-box{padding: 12px 0;position: relative;}
		.lease-select{position: absolute;left: 0;top: 10px;}
		.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: #1cc9f4;}
		.mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{left: 0;}
		.mui-checkbox.mui-left label, .mui-radio.mui-left label{padding-left: 35px;font-size: 12px;color: #999;}
		.icon-lease2{font-size: 15px;padding-left: 22px;}
		.icon-lease2:before{font-size: 19px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
		#open-wechat-addres-a{margin: -15px -15px -15px -28px !important;}
		.mui-table-view-cell>a .mui-pull-right{color: #999;font-size: 14px;}
		.mui-h5, h5 {margin-left: 30px;font-size: 12px;}
		.my-btn-exchange{background: #f5f5f5 !important;text-align: center;border: 0 !important;font-size: 14px;margin-bottom: 0 !important;}
		.icon-fuxuankuang a{color: #24cae9;text-decoration:underline;font-size: 12px;}
		.icon-fuxuankuang{font-size: 14px;padding:5px 5px 5px 22px;}
		.icon-fuxuankuang:before{font-size: 15px;margin-top: 5px;margin-right: 3px;color:#e4004d;}
		.icon-fuxuankuang.mui-active:before{color: #c8c8c8;}
	</style>
	<script>
        // 屏蔽分享
        //window.hiddenAllWechatMenu = true;
        var url = '//'+document.domain+'/watero/view/i_want_lease_test.html';
        window.repleFlag = true;
        window.repleWxData = {
            "appId": "",
            "imgUrl": '//s.iamberry.com/watero/images/shop/share-lease.png',
            "link": url,
            "desc": "快来围观吧，美国watero一款可移动的净水机。",
            "title": "净水机可以租啦！",
            "netError": "您的网络异常，请刷新重试!如多次刷新无效，请向我们反应 ~",
            "shareTimeSuccess": "分享成功",
            "shareTimeCancel": "已取消分享",
            "shareAppSuccess": "分享成功!",
            "shareAppCancel": "已取消分享"
        };
        //getConfig();
	</script>
</head>

<body>
<div class="loading-bg">
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
		&nbsp;&nbsp;加载中...
	</div>
</div>
<div class="mui-content">
	<div id="lease-slider" class="mui-slider">
		<div class="mui-slider-group">
			<div class="mui-slider-item">
				<a>
					<img src="//s.iamberry.com/watero/images/shop/banner-lease2.png">
				</a>
			</div>
		</div>
		<!-- <div class="mui-slider-indicator">
            <div class="mui-indicator"></div>
        </div> -->
	</div>
	<ul class="mui-table-view no-line">
		<li class="mui-table-view-cell">
			<span class="iconfont icon-lease3 cl-blue"></span>&nbsp;美国watero净饮水一体机
		</li>
	</ul>
	<div class="mui-content-madded" style="padding-bottom: 80px;padding-top: 0;">
		<div class="lease-select-box">
			<div class="lease-left"><span class="lease-select">选择颜色：</span></div>
			<div style="display:inline-block;width:73%;text-align: right;">
				<ul class="ul_radio">
					<li class="radio1 active" id="3"></li>
					<li class="radio2" id="2"></li>
					<li class="radio3" id="4"></li>
					<li class="radio4" id="1"></li>
				</ul>
			</div>
		</div>
		<div style="padding:0 0 10px 0;"><span>选择租期：</span></div>
		<form class="my-input-group">
			<div class="mui-input-row mui-radio mui-left">
				<label>租一年   <span class="cl-red">¥1599.00   （800元押金+799元服务费）</span></label>
				<input name="radio1" type="radio" value="1" checked>
			</div>
			<div class="mui-input-row mui-radio mui-left">
				<label>租两年(免押金) <span class="cl-red">¥1499.00（0元押金+1499元服务费）</span></label>
				<input name="radio1" type="radio" value="2">
			</div>
		</form>
		<ul class="mui-table-view" style="padding: 10px 0;margin: 10px 0 0 0;">
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right" id="open-wechat-addres-a">
					<span class="iconfont icon-lease2">收货信息</span><span class="mui-h5">请选择收货地址</span>
					<!-- <ul class="ft-12" style="color: #333;">
                        <li>收  货  人：林林</li>
                        <li>手 机 号：15999999999</li>
                        <li>详细地址：广东省深圳市福田区莲花街道特区报业大厦12B</li>
                    </ul> -->
				</a>
			</li>
		</ul>
		<div style="padding:10px 0;"><span>推荐人</span><span class="mui-h6">（核实后，将会为推荐人免去半年服务费）</span></div>
		<div>
			<input type="tel" value="" placeholder="请填写推荐人手机号码" maxlength="11" class="mui-input-clear my-btn-exchange" id="ipt-exchange"/>
		</div>
		<ul class="mui-table-view no-line">
			<li style="padding:20px 10px 20px 10px;text-align: center;">
				<span class="iconfont icon-fuxuankuang mui-active" id="btn-tongyi">我已经阅读并同意<a id="xieyi-dalog">《美国watero租赁协议》</a></span>
			</li>
		</ul>
		<div class="mui-text-center">
			<span id="pay_text">支付定金：</span><span class="cl-red" id="pay_price">¥99.00</span>
		</div>
	</div>

	<div class="buy-footer">
		<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="mui-btn my-btn-hand active" id="btn_submit" disabled="disabled">立即支付</button>
	</div>
</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>
    //wechatAddr.status=true;
    var check = false,alert_msg='';
    var uname = /^[A-Za-z\-\u4e00-\u9fa5]{1,10}$/;//简体中文英文
    var mobile=/^(13|14|15|18|17)[0-9]{9}$/; //11位手机号码
    var isPay = true; // 是否在请求支付，false表示正在请求,true可以请求
    mui.ready(function() {
        $(".ul_radio li").each(function() {
            $(this).on("click", function() {
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            });
        });
        $(".mui-radio input[name=radio1]").each(function() {
            $(this).on("click", function() {
                if(city=='深圳市' || wechatAddr.status==false){
                    $("#pay_price").text('¥99.00');
                    $("#pay_text").text('支付定金：');
                }else{
                    $("#pay_text").text('支付金额：');
                    if($(this).val()=='1'){
                        $("#pay_price").text('¥1599.00');
                    }else{
                        $("#pay_price").text('¥1499.00');
                    }
                }
            });
        });
        mui.ajax(base_path + '/giftCard/card/product/details?dates=' + new Date().getTime(), {
            data: {},
            dataType: 'json',
            type: 'post',
            timeout: 15000,
            success: function(dt) {
                //console.log(dt);
                if(dt.isRedirect) {
                    location.href = dt.redirectURL;
                }
            },
            error: function(xhr, type, errorThrown) {
                console.log(xhr)
            }
        });

        document.querySelector('.loading-bg').style.display = 'none';
    });
    mui('body').on('tap', '#btn_submit', function() {
        change_input();
        var th=this;
        if(check){
            if(isPay) {
                isPay = false; // 锁定请求按钮
                mui(this).button('loading');
                var param = {
                    "applyColor":$(".ul_radio .active").attr("id"),
                    "applyTime": $("input[name=radio1]:checked").val(),
                    "applyAddr": address,
                    "applyName": nickname,
                    "applyTel":ads_tel,
                    "applyReTel":$("#ipt-exchange").val().trim(),
                };
                $.ajax({
                    type: 'post',
                    url: '/watero/wechat/leaseOrder/apply?dates=' + new Date().getTime(),
                    data: param,
                    dataType: 'json',
                    timeout: 15000,
                    success: function(dt) {
                        //console.log(dt);
                        if(dt.isRedirect) {
                            location.href = dt.redirectURL;
                        }else{
                            if(dt.resultCode=='200' && dt.returnCode=='200') {
                                var obj = JSON.parse("{" + dt.returnMsg.returnMsg + "}");
                                WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
                                    if(res.err_msg == 'get_brand_wcpay_request:ok') {
                                        mui.openWindow({url:'/watero/view/lease_order_win.html'});
                                    } else {
                                        isPay = true;
                                        mui(th).button('reset');
                                        mui.alert("对不起，支付失败!请稍后重试!");
                                    }
                                });
                            } else {
                                mui(th).button('reset');
                                isPay = true;
                                mui.alert(dt.returnMsg);
                            }
                        }
                    },
                    error: function(xhr, type, errorThrown) {
                        //异常处理；
                        console.log(xhr);
                        isPay = true;
                        mui.alert("请检查网络或刷新页面重试！");
                        mui(th).button('reset');
                    }
                });
            }else{
                mui.alert("正在请求支付中~~请稍后!");
                return;
            }
        }else{
            mui.alert(alert_msg);
        }
    });
    mui('body').on('tap', '#xieyi-dalog', function() {
        mui.openWindow({
            url: '/watero/view/lease_test_xieyi.html'
        });
    });
    $(document).on('tap', '#btn-tongyi', function() {
        var btn_submit=$("#btn_submit");
        if($(this).hasClass("mui-active")){
            $(this).removeClass("mui-active");
            check=true;
            if(wechatAddr.status){
                btn_submit.removeClass("active").removeAttr("disabled");
            }else{
                btn_submit.addClass("active").prop("disabled","disabled");
            }
        }else{
            check=false;
            $(this).addClass("mui-active");
            btn_submit.addClass("active").prop("disabled","disabled");
        }
    });
    var address='',nickname='',ads_tel='',city='';
    //获取微信共享地址
    mui('body').on('tap', '#open-wechat-addres-a', function() {
        editAddrV1(
            function(res) {
                // 用户成功拉出地址 
                address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
                city=res.cityName;
                nickname=res.userName;
                ads_tel= res.telNumber;
                wechatAddr.status = true;
                wechatAddr.detailInfo = address;
                wechatAddr.postalCode = res.postalCode;
                wechatAddr.userName = res.userName;
                wechatAddr.userTel = res.telNumber;
                wechatAddr.nationalCode = res.nationalCode;
                $("#open-wechat-addres-a").empty().append('<ul class="ft-12" style="color: #333;"><li>收  货  人：'+ wechatAddr.userName +'</li><li>手 机 号：' + wechatAddr.userTel + '</li><li>详细地址：'+ wechatAddr.detailInfo+'</li></ul>');
                if(city=='深圳市'){
                    $("#pay_price").text('¥99.00');
                    $("#pay_text").text('支付定金：');
                }else{
                    $("#pay_text").text('支付金额：');
                    if($("input[name=radio1]:checked").val()=='1'){
                        $("#pay_price").text('¥1599.00');
                    }else{
                        $("#pay_price").text('¥1499.00');
                    }
                }
                if(check){
                    $(this).removeClass("mui-active");
                    $("#btn_submit").removeClass("active").removeAttr("disabled");
                }
            },
            function() {
                if($('#open-wechat-addres-a').html() != null && $('#open-wechat-addres-a').html() != '') {
                    wechatAddr.status = true;
                } else {
                    wechatAddr.status = false;
                    // 用户取消拉出地址
                    $('#open-wechat-addres-a').html('收货地址<span class="mui-h5">请选择收货地址</span>');
                }
            }
        );

    });
    function change_input() {
        if($("#btn-tongyi").hasClass("mui-active")){
            alert_msg="请勾选同意《美国watero代理说明》";
            check=false;
            return false;
        }else{
            check=true;
        }
        if(mobile.test($("#ipt-exchange").val().trim()) || $("#ipt-exchange").val().trim()==''){
            check=true;
        }else{
            alert_msg="手机号码不正确，请重新填写";
            check=false;
            return false;
        }
        if(wechatAddr.status){
            check=true;
        }else{
            alert_msg="请选择收货地址";
            check=false;
            return false;
        }
        if(check) {
            $("#btn_submit").removeClass("mui-active").removeAttr("disabled");
        }else{
            $("#btn_submit").addClass("mui-active").prop("disabled","disabled");
        }
    }
    mui.os.ios ? listener_ipt() : keyup_fn();

    function keyup_fn() {
        $(document).on('keyup', '#ipt-exchange', function(e) {
            change_input();
            if(check){
                $("#btn_submit").removeClass("active").removeAttr("disabled");
            }else{
                $("#btn_submit").addClass("active").prop("disabled","disabled");
            }
        });
    }

    function listener_ipt() {
        document.getElementById('ipt-exchange').onblur = function() {
            change_input();
            if(check){
                $("#btn_submit").removeClass("active").removeAttr("disabled");
            }else{
                $("#btn_submit").addClass("active").prop("disabled","disabled");
            }
        }
    }
    mui('body').on('tap', '#btn-share-mask', function() {
        mask.show();//显示遮罩
    });
    var mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调；
    //mask.close();//关闭遮罩
</script>
</body>

</html>