i_want_lease.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>我要租用</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="//s.iamberry.com/watero/css/mui.min.css">
  10. <link rel="stylesheet" href="//s.iamberry.com/watero/css/iconfont.css" />
  11. <link rel="stylesheet" href="//s.iamberry.com/watero/css/icons-extra.css"/>
  12. <link rel="stylesheet" href="//s.iamberry.com/watero/css/style.css" />
  13. <style type="text/css">
  14. .mui-backdrop {
  15. position: fixed;
  16. z-index: 998;
  17. top: 0;
  18. right: 0;
  19. bottom: 0;
  20. left: 0;
  21. background:url(//s.iamberry.com/watero/images/shop/share.png) top center no-repeat rgba(0, 0, 0, .8);
  22. background-size: 80%;
  23. }
  24. .mui-backdrop:after{content:'分享有福利啦!';position: absolute;left:0;top:0;width:100%; text-align: center;color:#fff;padding-top:50%;font-size:19px;}
  25. .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%;}
  26. .cart_fixed{position: fixed;right: 30px;bottom:135px;background: rgba(0,0,0,.2);padding: 12px;border-radius: 50%;text-align: center;opacity: .5;}
  27. .cart_fixed .mui-badge{position: absolute;right:-7px;top:-5px;font-size: 12px;}
  28. .return{position: fixed;
  29. right: 30px;
  30. bottom: 80px;
  31. background: rgba(0,0,0,.2);
  32. padding: 12px;
  33. border-radius: 50%;
  34. text-align: center;
  35. opacity: .9;color: #333;display: none;}
  36. .my-btn-hand{display:block;width: 100%;height: 55px;background-color: #c5c5c5;color: #fff;border: 0;border-radius: 0;}
  37. .my-btn-hand.active{background-color: #1cc9f4;}
  38. .cl-blue{color: #1cc9f4;}
  39. .iconfont{font-size: 20px;}
  40. .mui-content-madded{background: #fff;padding: 10px 10px 40px 10px;}
  41. .lease-ul{font-size: 14px;color: #999;}
  42. .lease-ul li{margin:10px 0;}
  43. .lease-ul:after{display: none;}
  44. .lease-left{display: inline-block;width: 20%;}
  45. .ul_radio{width: 100%;}
  46. .gift_radio{margin-bottom:20px;}
  47. .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;}
  48. .ul_radio .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}
  49. .radio16{background: url(//s.iamberry.com/watero/images/rent/rent_product_img.png) center center /auto 85% no-repeat;}
  50. .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;}
  51. .radio20{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  52. .radio21{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  53. .radio22{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  54. .radio23{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  55. .radio24{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  56. .radio25{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  57. .radio26{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  58. .radio27{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  59. .radio28{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  60. .radio29{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  61. .radio30{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  62. .radio31{background: url(//s.iamberry.com/watero/images/shop/lease-zeng1.jpg) center center /auto 85% no-repeat;}
  63. .radio24:before,.radio25:before,.radio26:before,.radio27:before{content: '赠品1';position: absolute;bottom: -20px;font-size: 12px;text-align: center;width: 100%;color: #999;}
  64. .radio28:before,.radio29:before,.radio30:before,.radio31:before{content: '赠品2';position: absolute;bottom: -20px;font-size: 12px;text-align: center;width: 100%;color: #999;}
  65. .lease-r-center{position: absolute;left: 70px;top: 20px;}
  66. .lease-select-box{padding:4px 0;position: relative;}
  67. .lease-select{position: absolute;left: 0;top:30px;}
  68. .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: #1cc9f4;}
  69. .mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{left: 0;}
  70. .mui-checkbox.mui-left label, .mui-radio.mui-left label{padding-left: 35px;font-size: 14px;color: #999;}
  71. .chanpin-ditails-dic img{width:100%;height:100%;}
  72. .chanpin-ditails-dic {
  73. padding: 0px;
  74. background: #fff;
  75. margin:0;
  76. color: #444;
  77. }
  78. .icon-lease8{position: relative;}
  79. .icon-lease8:before{position: absolute;
  80. right: 0;
  81. top: 2px;}
  82. </style>
  83. <script>
  84. // 屏蔽分享
  85. //window.hiddenAllWechatMenu = true;
  86. </script>
  87. </head>
  88. <body>
  89. <div class="loading-bg">
  90. <div class="mui-loading">
  91. <div class="mui-spinner">
  92. </div>
  93. &nbsp;&nbsp;加载中...
  94. </div>
  95. </div>
  96. <div class="mui-content">
  97. <div id="lease-slider" class="mui-slider">
  98. <div class="mui-slider-group mui-slider-loop">
  99. <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
  100. <div class="mui-slider-item mui-slider-item-duplicate">
  101. <a>
  102. <img src="//s.iamberry.com/watero/images/rent/rent_banner3.png">
  103. </a>
  104. </div>
  105. <!-- 第一张 -->
  106. <div class="mui-slider-item">
  107. <a>
  108. <img src="//s.iamberry.com/watero/images/rent/rent_banner1.png">
  109. </a>
  110. </div>
  111. <!-- 第二张 -->
  112. <div class="mui-slider-item">
  113. <a href="#">
  114. <img src="//s.iamberry.com/watero/images/rent/rent_banner2.png">
  115. </a>
  116. </div>
  117. <!-- 第三张 -->
  118. <div class="mui-slider-item">
  119. <a href="#">
  120. <img src="//s.iamberry.com/watero/images/rent/rent_banner3.png">
  121. </a>
  122. </div>
  123. <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
  124. <div class="mui-slider-item mui-slider-item-duplicate">
  125. <a href="#">
  126. <img src="//s.iamberry.com/watero/images/rent/rent_banner1.png">
  127. </a>
  128. </div>
  129. </div>
  130. <div class="mui-slider-indicator">
  131. <div class="mui-indicator mui-active"></div>
  132. <div class="mui-indicator"></div>
  133. <div class="mui-indicator"></div>
  134. </div>
  135. </div>
  136. <ul class="mui-table-view">
  137. <li class="mui-table-view-cell">
  138. <span class="iconfont icon-lease3 cl-blue"></span >&nbsp;<span id="rentProductName"></span><span class="mui-pull-right cl-blue" id="btn-share-mask"><span class="iconfont icon-lease8"></span>分享</span>
  139. </li>
  140. </ul>
  141. <div class="mui-content-madded" style="padding-bottom: 80px;">
  142. <ul class="lease-ul">
  143. <li>设备押金:<span class="cl-red" id="pledgeMoney"></span> (租期终止后押金退还)</li>
  144. <li>年服务费:<span class="cl-red" id="serviceMoney"></span> (租期内免费更换滤芯)</li>
  145. </ul>
  146. <div class="lease-select-box">
  147. <div class="lease-left"><span class="lease-select">选择颜色:</span></div>
  148. <div style="display:inline-block;width:73%;text-align: left;">
  149. <ul class="ul_radio lease-order-list" style="padding-left: 20px;">
  150. </ul>
  151. </div>
  152. </div>
  153. <div style="padding:0 0 10px 0;"><span>选择租期:</span></div>
  154. <form class="my-input-group" id="rentType">
  155. </form>
  156. <div style="padding: 10px 0;"><span>选择赠品:</span></div>
  157. <ul class="ul_radio gift_radio1" id="gift_radio1"></ul>
  158. <ul class="ul_radio gift_radio2" style="display: none;" id="gift_radio2"></ul>
  159. <ul class="ul_radio gift_radio3" style="display: none;" id="gift_radio3"></ul>
  160. <ul class="mui-table-view lease-ul" style="margin-top: 20px;">
  161. <li class="mui-table-view-cell mui-collapse">
  162. <a class="mui-navigate-right" id="goProductInfo" proid="" colorid="" href="#productImage">查看产品详情</a>
  163. <div class="mui-collapse-content" style="padding: 0;">
  164. <div class="chanpin-ditails-dic" id="productImage" style="display: none;">
  165. <ul>
  166. <li>
  167. <img id="product_image_info" src="">
  168. </li>
  169. </ul>
  170. </div>
  171. </div>
  172. </li>
  173. </ul>
  174. </div>
  175. <div class="buy-footer">
  176. <button type="button" class="mui-btn my-btn-hand btn-pay active">我要租用</button>
  177. </div>
  178. </div>
  179. <div class="return">
  180. <span onClick="gotoTop();return false;" class="mui-icon-extra mui-icon-extra-top"></span>
  181. </div>
  182. <script src="//s.iamberry.com/watero/js/mui.min.js"></script>
  183. <script src="//s.iamberry.com/watero/js/jquery-2.1.1.min.js"></script>
  184. <script src="//s.iamberry.com/watero/js/shop/main.js"></script>
  185. <script src="//s.iamberry.com/watero/js/shop/wechat-utils-1.0.js"></script>
  186. <script type="text/javascript">
  187. var productId = 0;
  188. var shareOpenid = '';
  189. var ruleOne = 0;
  190. var ruleTwo = 0;
  191. var ruleThree = 0;
  192. mui.ready(function() {
  193. document.querySelector('.loading-bg').style.display = 'none';
  194. mui.ajax(base_path + '/rent_order/selectRentProduct?dates=' + new Date().getTime(), {
  195. dataType: 'json',
  196. type: 'post',
  197. timeout: 15000,
  198. success: function(dt) {
  199. //console.log(dt);
  200. if(dt.isRedirect) {
  201. location.href = dt.redirectURL;
  202. } else {
  203. if(dt.status) {
  204. var type_data = dt.data.typeList;
  205. var product_data = dt.data.rentProductList;
  206. var gift_data = dt.data.giftList;
  207. ruleOne = dt.data.ruleOne;
  208. ruleTwo = dt.data.ruleTwo;
  209. ruleThree = dt.data.ruleThree;
  210. var type_item = '';
  211. shareOpenid = dt.data.shareOpenid;
  212. var table = document.body.querySelector('.lease-order-list');
  213. //banner图循环播放
  214. var bannerstr = "",
  215. dian = "";
  216. dc('mui-slider-loop').innerHTML = bannerstr;
  217. dc('my-slider-indicator').innerHTML = dian;
  218. $("<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");
  219. dc('lease-slider').style.display = 'block';
  220. var banner = mui('#lease-slider');
  221. banner.slider({
  222. interval: 5000
  223. });
  224. mui.each(document.querySelectorAll('#lease-slider a'), function(index, el) {
  225. el.addEventListener('tap', function() {
  226. //document.querySelector('.loading-bg').style.display = 'block';
  227. var str=this.getAttribute('href');
  228. //console.log(this.getAttribute('href'));
  229. if(str!="#" && str!=''){
  230. location.href = this.getAttribute('href')
  231. }
  232. }, false)
  233. });
  234. //循环显示租赁类型
  235. mui(type_data).each(function(index) {
  236. var cheType = '';
  237. //默认选中租一年的选项
  238. if (this.typeId == 1){
  239. cheType = 'checked';
  240. $('#pledgeMoney').val(this.typePledgeMoney);
  241. $('#serviceMoney').val(this.typeServiceMoney);
  242. $('#pledgeMoney').html('¥' + accDiv( this.typePledgeMoney, 100) + '/台');
  243. $('#serviceMoney').html('¥' + accDiv( this.typeServiceMoney, 100) + '/年');
  244. }
  245. type_item += '<div class="mui-input-row mui-radio mui-left">'
  246. + '<label>' + this.typeName + '<span class="cl-red"> ' + accDiv(this.typeMoney, 100) + '元</span></label>'
  247. + '<input name="radio1" value="' + this.typeId + '" rentMoney = ' + this.typeMoney + ' type="radio" ' + cheType + '>'
  248. + '</div>';
  249. });
  250. //循环显示租赁商品信息
  251. mui(product_data).each(function(index) {
  252. productName = this.productName;
  253. $('#rentProductName').html(productName);
  254. $('#product_image_info').attr('src',this.productParameterImg);
  255. var li = document.createElement('li');
  256. if(index==0){
  257. li.className ='radio'+this.colorId+' active';
  258. $('#goProductInfo').attr('proid',this.productId);
  259. $('#goProductInfo').attr('colorid',this.colorId);
  260. }else{
  261. li.className ='radio'+this.colorId;
  262. }
  263. li.setAttribute("id",this.colorId);
  264. li.setAttribute("value",this.productColor);
  265. table.appendChild(li);
  266. });
  267. $(".lease-order-list li").each(function() {
  268. $(this).on("click", function() {
  269. $(this).addClass("active");
  270. $(this).siblings().removeClass("active");
  271. var productColorId = $(".lease-order-list .active").attr("id");
  272. $('#goProductInfo').attr('colorid',productColorId);
  273. });
  274. });
  275. //循环显示赠品信息
  276. var gift1 = document.body.querySelector('.gift_radio1');
  277. var gift2 = document.body.querySelector('.gift_radio2');
  278. var gift3 = document.body.querySelector('.gift_radio3');
  279. mui(gift_data).each(function(index) {
  280. var li = document.createElement('li');
  281. if (this.productId == ruleOne) {
  282. if($("#gift_radio1 li").length==0){
  283. li.className ='radio'+this.colorId+' active';
  284. }else{
  285. li.className ='radio'+this.colorId;
  286. }
  287. li.setAttribute("id",this.colorId);
  288. gift1.appendChild(li);
  289. }
  290. if (this.productId == ruleTwo) {
  291. if($("#gift_radio2 li").length==0){
  292. li.className ='radio'+this.colorId+' active';
  293. }else{
  294. li.className ='radio'+this.colorId;
  295. }
  296. li.setAttribute("id",this.colorId);
  297. gift2.appendChild(li);
  298. }
  299. if (this.productId == ruleThree) {
  300. if($("#gift_radio3 li").length==0){
  301. li.className ='radio'+this.colorId+' active';
  302. }else{
  303. li.className ='radio'+this.colorId;
  304. }
  305. li.setAttribute("id",this.colorId);
  306. gift3.appendChild(li);
  307. }
  308. });
  309. $(".gift_radio1 li").each(function() {
  310. $(this).on("click", function() {
  311. $(this).addClass("active");
  312. $(this).siblings().removeClass("active");
  313. });
  314. });
  315. $(".gift_radio2 li").each(function() {
  316. $(this).on("click", function() {
  317. $(this).addClass("active");
  318. $(this).siblings().removeClass("active");
  319. });
  320. });
  321. $(".gift_radio3 li").each(function() {
  322. $(this).on("click", function() {
  323. $(this).addClass("active");
  324. $(this).siblings().removeClass("active");
  325. });
  326. });
  327. $('#rentType').html(type_item);
  328. //分享
  329. var url = "https:" + domanUrl + base_path + "/rent_order/goWantLease?shareOpenid=" + shareOpenid;
  330. window.repleFlag = false;
  331. window.wxFriend = {
  332. "appId": "",
  333. "imgUrl": domanUrl + '/watero/common/shop/images/index.jpg',
  334. "link": url,
  335. "desc": "美国标准,4级净化,5档水温,废水比3:1,水质TDS智能显示。",
  336. "title": "Watero,美国高端净水专家,4级净化,5档水温,免安装饮水一体机。",
  337. "netError": "您的网络异常,请刷新重试!如多次刷新无效,请向我们反应 ~",
  338. "shareTimeSuccess": "分享成功",
  339. "shareTimeCancel": "已取消分享",
  340. "shareAppSuccess": "分享成功!",
  341. "shareAppCancel": "已取消分享"
  342. };
  343. getConfig();
  344. } else {
  345. //mui('#pullrefresh_chanpin_list').pullRefresh().endPullupToRefresh(true);
  346. }
  347. }
  348. },
  349. error: function(xhr, type, errorThrown) {
  350. console.log(xhr)
  351. }
  352. })
  353. });
  354. mui('body').on('tap', '#btn-share-mask', function() {
  355. mask.show();//显示遮罩
  356. });
  357. $(document).on('click', 'input[name=radio1]', function() {
  358. var value = $("input[name=radio1]:checked").val(); //获取选中的值
  359. switch (value) {
  360. case '1':
  361. $('.gift_radio1').show();
  362. $('.gift_radio2').hide();
  363. $('.gift_radio3').hide();
  364. break;
  365. case '2':
  366. $('.gift_radio1').hide();
  367. $('.gift_radio2').show();
  368. $('.gift_radio3').hide();
  369. break;
  370. case '3':
  371. $('.gift_radio1').hide();
  372. $('.gift_radio2').hide();
  373. $('.gift_radio3').show();
  374. break;
  375. default:
  376. $('.gift_radio1').show();
  377. $('.gift_radio2').hide();
  378. $('.gift_radio3').hide();
  379. break;
  380. }
  381. });
  382. mui('body').on('tap', '#goProductInfo', function() {
  383. if($("#productImage").is(":hidden")){
  384. $('#productImage').show(); //如果元素为隐藏,则将它显现
  385. setTimeout(function(){
  386. window.scrollTo(0,580)
  387. },1000)
  388. }else{
  389. $('#productImage').hide(); //如果元素为显现,则将其隐藏
  390. }
  391. });
  392. mui('body').on('tap', '.btn-pay', function() {
  393. var pledgeMoney = $('#pledgeMoney').val();
  394. var serviceMoney = $('#serviceMoney').val();
  395. var radio1 = $("input[name='radio1']:checked").val();
  396. var rentMoney = $("input[name='radio1']:checked").attr("rentMoney");
  397. var rentProduct = $(".lease-order-list .active").attr("id");
  398. var giftId = 0;
  399. var productColor = $(".lease-order-list .active").attr("value");
  400. switch (radio1) {
  401. case '1':
  402. giftId = $(".gift_radio1 .active").attr("id");
  403. break;
  404. case '2':
  405. giftId = $(".gift_radio2 .active").attr("id");
  406. break;
  407. case '3':
  408. giftId = $(".gift_radio3 .active").attr("id");
  409. break;
  410. default:
  411. giftId = $(".gift_radio1 .active").attr("id");
  412. break;
  413. }
  414. 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) });
  415. });
  416. var mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调;
  417. $(window).on("scroll", function() {
  418. if($(window).scrollTop() > 280) {
  419. $(".return").show()
  420. } else {
  421. $(".return").hide()
  422. }
  423. });
  424. </script>
  425. </body>
  426. </html>