123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443 |
- <!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="//s.iamberry.com/watero/css/mui.min.css">
- <link rel="stylesheet" href="//s.iamberry.com/watero/css/iconfont.css" />
- <link rel="stylesheet" href="//s.iamberry.com/watero/css/icons-extra.css"/>
- <link rel="stylesheet" href="//s.iamberry.com/watero/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.png) top center no-repeat rgba(0, 0, 0, .8);
- background-size: 80%;
- }
- .mui-backdrop:after{content:'分享有福利啦!';position: absolute;left:0;top:0;width:100%; text-align: center;color:#fff;padding-top:50%;font-size:19px;}
- .mui-backdrop:before{content:'如果您是新用户,分享好友并成功租用后,将奖励您300元服务费抵扣券;如果您已经租用过我们的净水机,分享后奖励,请 点击查看!';position: absolute;left:0;top:0;width:90%; text-align: left;color:#fff;font-size:16px;padding:60% 5% 10px 5%;}
- .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: #c5c5c5;color: #fff;border: 0;border-radius: 0;}
- .my-btn-hand.active{background-color: #1cc9f4;}
- .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 li{margin:10px 0;}
- .lease-ul:after{display: none;}
- .lease-left{display: inline-block;width: 20%;}
- .ul_radio{width: 100%;}
- .gift_radio{margin-bottom:20px;}
- .ul_radio li{width:23%;height: 55px;margin: 10px 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;}
- .radio16{background: url(//s.iamberry.com/watero/images/rent/rent_product_img.png) center center /auto 85% no-repeat;}
- .radio20:before,.radio21:before,.radio22:before,.radio23:before,.radio24:before,.radio25:before,.radio26:before,.radio27:before,.radio28:before{content: 'watero水杯';position: absolute;bottom: -20px;font-size: 12px;text-align: center;width: 100%;color: #999;}
- .radio20{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio21{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio22{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio23{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio24{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio25{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio26{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio27{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio28{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio29{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio30{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio31{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
- .radio24:before,.radio25:before,.radio26:before,.radio27:before{content: '赠品1';position: absolute;bottom: -20px;font-size: 12px;text-align: center;width: 100%;color: #999;}
- .radio28:before,.radio29:before,.radio30:before,.radio31:before{content: '赠品2';position: absolute;bottom: -20px;font-size: 12px;text-align: center;width: 100%;color: #999;}
- .lease-r-center{position: absolute;left: 70px;top: 20px;}
- .lease-select-box{padding:4px 0;position: relative;}
- .lease-select{position: absolute;left: 0;top:30px;}
- .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: 14px;color: #999;}
- .chanpin-ditails-dic img{width:100%;height:100%;}
- .chanpin-ditails-dic {
- padding: 0px;
- background: #fff;
- margin:0;
- color: #444;
- }
- .icon-lease8{position: relative;}
- .icon-lease8:before{position: absolute;
- right: 0;
- top: 2px;}
- </style>
- <script>
- // 屏蔽分享
- //window.hiddenAllWechatMenu = true;
- </script>
- </head>
- <body>
- <div class="loading-bg">
- <div class="mui-loading">
- <div class="mui-spinner">
- </div>
- 加载中...
- </div>
- </div>
- <div class="mui-content">
- <div id="lease-slider" class="mui-slider">
- <div class="mui-slider-group mui-slider-loop">
- <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
- <div class="mui-slider-item mui-slider-item-duplicate">
- <a>
- <img src="//s.iamberry.com/watero/images/rent/rent_banner3.png">
- </a>
- </div>
- <!-- 第一张 -->
- <div class="mui-slider-item">
- <a>
- <img src="//s.iamberry.com/watero/images/rent/rent_banner1.png">
- </a>
- </div>
- <!-- 第二张 -->
- <div class="mui-slider-item">
- <a href="#">
- <img src="//s.iamberry.com/watero/images/rent/rent_banner2.png">
- </a>
- </div>
- <!-- 第三张 -->
- <div class="mui-slider-item">
- <a href="#">
- <img src="//s.iamberry.com/watero/images/rent/rent_banner3.png">
- </a>
- </div>
- <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
- <div class="mui-slider-item mui-slider-item-duplicate">
- <a href="#">
- <img src="//s.iamberry.com/watero/images/rent/rent_banner1.png">
- </a>
- </div>
- </div>
- <div class="mui-slider-indicator">
- <div class="mui-indicator mui-active"></div>
- <div class="mui-indicator"></div>
- <div class="mui-indicator"></div>
- </div>
- </div>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- <span class="iconfont icon-lease3 cl-blue"></span > <span id="rentProductName"></span><span class="mui-pull-right cl-blue" id="btn-share-mask"><span class="iconfont icon-lease8"></span>分享</span>
- </li>
- </ul>
- <div class="mui-content-madded" style="padding-bottom: 80px;">
- <ul class="lease-ul">
- <li>设备押金:<span class="cl-red" id="pledgeMoney"></span> (租期终止后押金退还)</li>
- <li>年服务费:<span class="cl-red" id="serviceMoney"></span> (租期内免费更换滤芯)</li>
- </ul>
- <div class="lease-select-box">
- <div class="lease-left"><span class="lease-select">选择颜色:</span></div>
- <div style="display:inline-block;width:73%;text-align: left;">
- <ul class="ul_radio lease-order-list" style="padding-left: 20px;">
- </ul>
- </div>
- </div>
- <div style="padding:0 0 10px 0;"><span>选择租期:</span></div>
- <form class="my-input-group" id="rentType">
- </form>
- <div style="padding: 10px 0;"><span>选择赠品:</span></div>
- <ul class="ul_radio gift_radio1" id="gift_radio1"></ul>
- <ul class="ul_radio gift_radio2" style="display: none;" id="gift_radio2"></ul>
- <ul class="ul_radio gift_radio3" style="display: none;" id="gift_radio3"></ul>
- <ul class="mui-table-view lease-ul" style="margin-top: 20px;">
- <li class="mui-table-view-cell mui-collapse">
- <a class="mui-navigate-right" id="goProductInfo" proid="" colorid="" href="#productImage">查看产品详情</a>
- <div class="mui-collapse-content" style="padding: 0;">
- <div class="chanpin-ditails-dic" id="productImage" style="display: none;">
- <ul>
- <li>
- <img id="product_image_info" src="">
- </li>
- </ul>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="buy-footer">
- <button type="button" class="mui-btn my-btn-hand btn-pay active">我要租用</button>
- </div>
- </div>
- <div class="return">
- <span onClick="gotoTop();return false;" class="mui-icon-extra mui-icon-extra-top"></span>
- </div>
- <script src="//s.iamberry.com/watero/js/mui.min.js"></script>
- <script src="//s.iamberry.com/watero/js/jquery-2.1.1.min.js"></script>
- <script src="//s.iamberry.com/watero/js/shop/main.js"></script>
- <script src="//s.iamberry.com/watero/js/shop/wechat-utils-1.0.js"></script>
- <script type="text/javascript">
- var productId = 0;
- var shareOpenid = '';
- var ruleOne = 0;
- var ruleTwo = 0;
- var ruleThree = 0;
- mui.ready(function() {
- document.querySelector('.loading-bg').style.display = 'none';
- mui.ajax(base_path + '/rent_order/selectRentProduct?dates=' + new Date().getTime(), {
- dataType: 'json',
- type: 'post',
- timeout: 15000,
- success: function(dt) {
- //console.log(dt);
- if(dt.isRedirect) {
- location.href = dt.redirectURL;
- } else {
- if(dt.status) {
- var type_data = dt.data.typeList;
- var product_data = dt.data.rentProductList;
- var gift_data = dt.data.giftList;
- ruleOne = dt.data.ruleOne;
- ruleTwo = dt.data.ruleTwo;
- ruleThree = dt.data.ruleThree;
- var type_item = '';
- shareOpenid = dt.data.shareOpenid;
- var table = document.body.querySelector('.lease-order-list');
- //banner图循环播放
- var bannerstr = "",
- dian = "";
- dc('mui-slider-loop').innerHTML = bannerstr;
- dc('my-slider-indicator').innerHTML = dian;
- $("<div id='lease-slider' class='mui-slider'><div class='mui-slider-group mui-slider-loop' id='mui-slider-loop'>" + bannerstr + "</div><div id='my-slider-indicator' class='mui-slider-indicator my-slider-indicator'>" + dian + "</div></div>").insertBefore(".chanpin-box");
- dc('lease-slider').style.display = 'block';
- var banner = mui('#lease-slider');
- banner.slider({
- interval: 5000
- });
- mui.each(document.querySelectorAll('#lease-slider a'), function(index, el) {
- el.addEventListener('tap', function() {
- //document.querySelector('.loading-bg').style.display = 'block';
- var str=this.getAttribute('href');
- //console.log(this.getAttribute('href'));
- if(str!="#" && str!=''){
- location.href = this.getAttribute('href')
- }
- }, false)
- });
- //循环显示租赁类型
- mui(type_data).each(function(index) {
- var cheType = '';
- //默认选中租一年的选项
- if (this.typeId == 1){
- cheType = 'checked';
- $('#pledgeMoney').val(this.typePledgeMoney);
- $('#serviceMoney').val(this.typeServiceMoney);
- $('#pledgeMoney').html('¥' + accDiv( this.typePledgeMoney, 100) + '/台');
- $('#serviceMoney').html('¥' + accDiv( this.typeServiceMoney, 100) + '/年');
- }
- type_item += '<div class="mui-input-row mui-radio mui-left">'
- + '<label>' + this.typeName + '<span class="cl-red"> ' + accDiv(this.typeMoney, 100) + '元</span></label>'
- + '<input name="radio1" value="' + this.typeId + '" rentMoney = ' + this.typeMoney + ' type="radio" ' + cheType + '>'
- + '</div>';
- });
- //循环显示租赁商品信息
- mui(product_data).each(function(index) {
- productName = this.productName;
- $('#rentProductName').html(productName);
- $('#product_image_info').attr('src',this.productParameterImg);
- var li = document.createElement('li');
- if(index==0){
- li.className ='radio'+this.colorId+' active';
- $('#goProductInfo').attr('proid',this.productId);
- $('#goProductInfo').attr('colorid',this.colorId);
- }else{
- li.className ='radio'+this.colorId;
- }
- li.setAttribute("id",this.colorId);
- li.setAttribute("value",this.productColor);
- table.appendChild(li);
- });
- $(".lease-order-list li").each(function() {
- $(this).on("click", function() {
- $(this).addClass("active");
- $(this).siblings().removeClass("active");
- var productColorId = $(".lease-order-list .active").attr("id");
- $('#goProductInfo').attr('colorid',productColorId);
- });
- });
- //循环显示赠品信息
- var gift1 = document.body.querySelector('.gift_radio1');
- var gift2 = document.body.querySelector('.gift_radio2');
- var gift3 = document.body.querySelector('.gift_radio3');
- mui(gift_data).each(function(index) {
- var li = document.createElement('li');
- if (this.productId == ruleOne) {
- if($("#gift_radio1 li").length==0){
- li.className ='radio'+this.colorId+' active';
- }else{
- li.className ='radio'+this.colorId;
- }
- li.setAttribute("id",this.colorId);
- gift1.appendChild(li);
- }
- if (this.productId == ruleTwo) {
- if($("#gift_radio2 li").length==0){
- li.className ='radio'+this.colorId+' active';
- }else{
- li.className ='radio'+this.colorId;
- }
- li.setAttribute("id",this.colorId);
- gift2.appendChild(li);
- }
- if (this.productId == ruleThree) {
- if($("#gift_radio3 li").length==0){
- li.className ='radio'+this.colorId+' active';
- }else{
- li.className ='radio'+this.colorId;
- }
- li.setAttribute("id",this.colorId);
- gift3.appendChild(li);
- }
- });
- $(".gift_radio1 li").each(function() {
- $(this).on("click", function() {
- $(this).addClass("active");
- $(this).siblings().removeClass("active");
- });
- });
- $(".gift_radio2 li").each(function() {
- $(this).on("click", function() {
- $(this).addClass("active");
- $(this).siblings().removeClass("active");
- });
- });
- $(".gift_radio3 li").each(function() {
- $(this).on("click", function() {
- $(this).addClass("active");
- $(this).siblings().removeClass("active");
- });
- });
- $('#rentType').html(type_item);
- //分享
- var url = "https:" + domanUrl + base_path + "/rent_order/goWantLease?shareOpenid=" + shareOpenid;
- window.repleFlag = false;
- window.wxFriend = {
- "appId": "",
- "imgUrl": domanUrl + '/watero/common/shop/images/index.jpg',
- "link": url,
- "desc": "美国标准,4级净化,5档水温,废水比3:1,水质TDS智能显示。",
- "title": "Watero,美国高端净水专家,4级净化,5档水温,免安装饮水一体机。",
- "netError": "您的网络异常,请刷新重试!如多次刷新无效,请向我们反应 ~",
- "shareTimeSuccess": "分享成功",
- "shareTimeCancel": "已取消分享",
- "shareAppSuccess": "分享成功!",
- "shareAppCancel": "已取消分享"
- };
- getConfig();
- } else {
- //mui('#pullrefresh_chanpin_list').pullRefresh().endPullupToRefresh(true);
- }
- }
- },
- error: function(xhr, type, errorThrown) {
- console.log(xhr)
- }
- })
- });
- mui('body').on('tap', '#btn-share-mask', function() {
- mask.show();//显示遮罩
- });
- $(document).on('click', 'input[name=radio1]', function() {
- var value = $("input[name=radio1]:checked").val(); //获取选中的值
- switch (value) {
- case '1':
- $('.gift_radio1').show();
- $('.gift_radio2').hide();
- $('.gift_radio3').hide();
- break;
- case '2':
- $('.gift_radio1').hide();
- $('.gift_radio2').show();
- $('.gift_radio3').hide();
- break;
- case '3':
- $('.gift_radio1').hide();
- $('.gift_radio2').hide();
- $('.gift_radio3').show();
- break;
- default:
- $('.gift_radio1').show();
- $('.gift_radio2').hide();
- $('.gift_radio3').hide();
- break;
- }
- });
- mui('body').on('tap', '#goProductInfo', function() {
- if($("#productImage").is(":hidden")){
- $('#productImage').show(); //如果元素为隐藏,则将它显现
- setTimeout(function(){
- window.scrollTo(0,580)
- },1000)
- }else{
- $('#productImage').hide(); //如果元素为显现,则将其隐藏
- }
- });
- mui('body').on('tap', '.btn-pay', function() {
- var pledgeMoney = $('#pledgeMoney').val();
- var serviceMoney = $('#serviceMoney').val();
- var radio1 = $("input[name='radio1']:checked").val();
- var rentMoney = $("input[name='radio1']:checked").attr("rentMoney");
- var rentProduct = $(".lease-order-list .active").attr("id");
- var giftId = 0;
- var productColor = $(".lease-order-list .active").attr("value");
- switch (radio1) {
- case '1':
- giftId = $(".gift_radio1 .active").attr("id");
- break;
- case '2':
- giftId = $(".gift_radio2 .active").attr("id");
- break;
- case '3':
- giftId = $(".gift_radio3 .active").attr("id");
- break;
- default:
- giftId = $(".gift_radio1 .active").attr("id");
- break;
- }
- mui.openWindow({url: encodeURI('/watero/view/i_want_lease_pay.html?pledgeMoney='+pledgeMoney+'&serviceMoney='+serviceMoney + '&radio1=' + radio1 + '&rentProduct=' + rentProduct + '&giftId=' + giftId + '&productName=' + productName + '&productColor=' + productColor + '&rentMoney=' + rentMoney) });
- });
- var mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调;
- $(window).on("scroll", function() {
- if($(window).scrollTop() > 280) {
- $(".return").show()
- } else {
- $(".return").hide()
- }
- });
- </script>
- </body>
- </html>
|