water_competition_for_me.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  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" type="text/css" href="/css/mui.min.css">
  10. <link rel="stylesheet" type="text/css" href="/css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="/css/style.css" />
  12. <style>
  13. .my-btn-blue{border: 0 !important;background-color: #1cc9f4 !important;color: #fff;width:150px;}
  14. .cl-blue{color: #1cc9f4;}
  15. .iconfont{font-size: 20px;}
  16. .mui-table-view:before,.mui-table-view:after,.mui-table-view .mui-table-view-cell:after,.mui-table-view .mui-table-view-cell:before{display: none;}
  17. .mui-backdrop {position: fixed;z-index: 998;top: 0;right: 0;bottom: 0;left: 0;background: url(//s.iamberry.com/images/shop/share.png) top center no-repeat rgba(0, 0, 0, .4);background-size: 100%;}
  18. </style>
  19. <script src="/js/mui.min.js"></script>
  20. <script src="/js/jquery-2.1.1.min.js"></script>
  21. <script src="/js/shop/main.js"></script>
  22. <script>
  23. var deviceId=getParam("deviceId");
  24. // 屏蔽分享
  25. // window.hiddenAllWechatMenu = true;
  26. </script>
  27. </head>
  28. <body style="background: #fff;">
  29. <div class="loading-bg">
  30. <div class="mui-loading">
  31. <div class="mui-spinner">
  32. </div>
  33. &nbsp;&nbsp;加载中...
  34. </div>
  35. </div>
  36. <div class="mui-content" style="background: #fff;">
  37. <ul class="mui-table-view mui-text-center my-table-noline">
  38. <li class="mui-table-view-cell">
  39. <div><a class="mui-btn mui-btn-link">快来围观吧,我家净水管家,本领强,颜值高!</a></div>
  40. </li>
  41. <li class="mui-table-view-cell">
  42. <img src="//s.iamberry.com/watero/images/shop/my_equipment.png" width="45%" />
  43. </li>
  44. <li class="mui-table-view-cell">
  45. 总净饮水量:<span class="count_l">0</span>L
  46. <br/>
  47. <span class="mui-h6">相当于0桶传统18.9l的桶装水</span>
  48. </li>
  49. <li class="mui-table-view-cell">
  50. <span class="mui-h5 my_shuizhi">我家水质(tds):未知</span>
  51. </li>
  52. <li class="mui-table-view-cell">
  53. <div>
  54. <button type="button" class="mui-btn my-btn-blue share_wechat">分享</button>
  55. </div>
  56. </li>
  57. </ul>
  58. <div class="mui-content-padded">
  59. <ul class="mui-table-view">
  60. <li class="mui-table-view-cell" style="padding: 11px 0;">
  61. <span class="iconfont icon-lease cl-blue"></span>&nbsp;TIPS<span class="mui-h6">(仅您可见)</span>
  62. </li>
  63. <li class="mui-table-view-cell mui-h6">
  64. 如果有朋友喜欢,成功租用,我们将赠送您押金提取券、现金、 服务费抵扣券哦!规则如下:<br />
  65. 押金提取券:可提前提取押金(第一位朋友租用)<br />
  66. 现金300元:直接发300元现金(第二位朋友租用)<br />
  67. 现金300元:直接发300元现金(第三位朋友租用)<br />
  68. 服务费抵扣券:400元(第四位朋友租用)
  69. </li>
  70. <li class="mui-table-view-cell">
  71. <span class="mui-pull-right mui-h6">(活动截止时间:20xx年-xx月-xx日)</span>
  72. </li>
  73. </ul>
  74. </div>
  75. </div>
  76. <script src="/js/shop/wechat-utils-1.0.js"></script>
  77. <script type="text/javascript">
  78. mui.ready(function(){
  79. mui.ajax(base_path + '/machine/waterCompete', {
  80. data: {
  81. deviceId: deviceId
  82. },
  83. type: 'post',
  84. timeout: 15000,
  85. success: function(dt) {
  86. /*console.log(dt)*/
  87. if(dt.isRedirect) {
  88. location.href = dt.redirectURL;
  89. }else{
  90. console.log(dt);
  91. if(dt.status) {
  92. $(".count_l").text(dt.data.machineHaveWater);
  93. $(".my_shuizhi").text("我家水质(tds):"+dt.data.machineTDS);
  94. }
  95. }
  96. },
  97. error: function(xhr, type, errorThrown) {
  98. console.log(xhr)
  99. }
  100. });
  101. document.querySelector('.loading-bg').style.display='none';
  102. });
  103. var mask = mui.createMask(function() {});
  104. mui('body').on('tap', '.share_wechat', function() {
  105. mask.show();
  106. window.hiddenAllWechatMenu = false;
  107. mui.ajax(base_path + '/machine/addCompetingRecords', {
  108. data: {
  109. deviceId: deviceId
  110. },
  111. type: 'post',
  112. timeout: 15000,
  113. success: function(dt) {
  114. /*console.log(dt)*/
  115. if(dt.isRedirect) {
  116. location.href = dt.redirectURL;
  117. }else{
  118. console.log(dt);
  119. if(dt.status) {
  120. var url = 'https://'+document.domain+'/watero/view/water_competition.html?shareId='+dt.data;
  121. window.wxData = {
  122. "appId": "", // 服务号可以填写appId
  123. "imgUrl":'//s.iamberry.com/watero/images/shop/share-lease.png',
  124. "link":url,
  125. "desc":"快来围观吧,美国watero一款可移动的净水机!",
  126. "title":"净水机可以租啦!"
  127. };
  128. window.wxFriend = {
  129. "appId": "", // 服务号可以填写appId
  130. "imgUrl":'//s.iamberry.com/watero/images/shop/share-lease.png',
  131. "link":url,
  132. "desc":"快来围观吧,美国watero一款可移动的净水机!",
  133. "title":"净水机可以租啦!"
  134. };
  135. window.wxReady = false;
  136. getConfig();
  137. }
  138. }
  139. },
  140. error: function(xhr, type, errorThrown) {
  141. console.log(xhr)
  142. }
  143. });
  144. });
  145. </script>
  146. </body>
  147. </html>