20190807.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>WaterO</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. /*loading*/
  14. .loading {
  15. width: 100%;
  16. height: 100%;
  17. position: fixed;
  18. top: 0;
  19. padding-top: 50%;
  20. left: 0;
  21. background: rgba(0, 0, 0, 0.8);
  22. z-index: 999;
  23. }
  24. .loading-bj {
  25. background: url(images/loading.png);
  26. width: 20px;
  27. height: 20px;
  28. background-size: 20px;
  29. margin: 0.3rem auto 0;
  30. animation: rotateIn 1s .2s linear infinite;
  31. -moz-animation: rotateIn 1s .2s linear infinite;
  32. -webkit-animation: rotateIn 1s .2s linear infinite;
  33. }
  34. .loading p {
  35. color: #fff;
  36. opacity: .7;
  37. font-size: 12px;
  38. text-align: center;
  39. margin-top: 0.1rem;
  40. }
  41. .index-title {
  42. text-align: center;
  43. }
  44. .no-after:after,
  45. .no-after:before,
  46. .no-after .mui-table-view-cell:after {
  47. display: none;
  48. }
  49. .no-after .mui-table-view-cell.mui-active {
  50. background: #fff;
  51. }
  52. .pro-list .mui-media-body {
  53. font-size: 14px;
  54. }
  55. .my-table-order tr td:last-child {
  56. padding-right: 0;
  57. }
  58. .my-table-order {
  59. font-size: 12px;
  60. }
  61. .cl-red {
  62. color: #ec6276;
  63. }
  64. .wh-120 {
  65. width: 130px !important;
  66. max-width: 130px !important;
  67. height: 130px !important;
  68. line-height: 130px;
  69. margin-top: 0;
  70. overflow: hidden;
  71. margin-right: 10px;
  72. }
  73. .wh-120 img {
  74. width: 100%;
  75. }
  76. .my-table-order .btn-ping {
  77. background: #ec6276;
  78. border: 0;
  79. border-radius: 50px;
  80. color: #fff;
  81. min-width: 70px;
  82. text-align: center;
  83. }
  84. .my-table-order .btn-qiang {
  85. background: #ec6276;
  86. border: 0;
  87. border-radius: 50px;
  88. color: #fff;
  89. min-width: 70px;
  90. text-align: center;
  91. }
  92. .my-table-order .btn-qiang[disabled]{
  93. background: #ccc;
  94. }
  95. .my-table-order h4 {
  96. margin: 0;
  97. font-size: 14px;
  98. font-weight: 500;
  99. }
  100. .my-table-order h6 {
  101. margin: 0;
  102. color: #999;
  103. }
  104. .my-table-order .yf {
  105. padding-bottom: 15px;
  106. }
  107. .time-out {
  108. color: #ec6276;
  109. }
  110. .qixi {
  111. border: 1px solid #5ecddf;
  112. border-radius: 30px;
  113. color: #5ecddf;
  114. background: transparent;
  115. display: block;
  116. width: 70px;
  117. padding: 0;
  118. line-height: 1.5;
  119. text-align: center;
  120. }
  121. .mui-col-xs-4 img {
  122. width: 100%;
  123. padding: 0 3%;
  124. }
  125. .mui-col-xs-4:first-child img {
  126. padding-right: 6%;
  127. padding-left: 0;
  128. }
  129. .mui-col-xs-4:last-child img {
  130. padding-left: 6%;
  131. padding-right: 0;
  132. }
  133. .mui-col-xs-4 a s {
  134. color: #999;
  135. margin-left: 10px;
  136. }
  137. .mui-col-xs-4 .content {
  138. padding-right: 5%;text-align:center;
  139. }
  140. .mui-table-view>.mui-table-view-cell {
  141. padding: 11px 13px;
  142. }
  143. .mui-table-view>.mui-table-view-cell>a.mui-active{background: #fff;}
  144. .mui-table-view-striped>.mui-table-view-cell {
  145. padding: 5px 12px;
  146. }
  147. .btn-qiang{background: #ec6276;color: #fff;border-radius: 25px;border: 0;min-width: 60px;text-align: center;position: absolute;right: 3%;bottom: 14%;display: none;}
  148. </style>
  149. </head>
  150. <body style="background: #fff;">
  151. <div class="loading covers">
  152. <div class="loading-bj"></div>
  153. <p>正在加载...</p>
  154. </div>
  155. <nav class="mui-bar mui-bar-tab" id="footer-bar">
  156. <a class="mui-tab-item mui-active">
  157. <div class="iconfont icon-shouye"></div>
  158. <span class="mui-tab-label">首页</span>
  159. </a>
  160. <a class="mui-tab-item go_gwc">
  161. <div class="iconfont icon-gouwuche"><span class="mui-badge">0</span></div>
  162. <span class="mui-tab-label">购物车</span>
  163. </a>
  164. <a class="mui-tab-item">
  165. <div class="iconfont icon-dingdan"></div>
  166. <span class="mui-tab-label">订单</span>
  167. </a>
  168. <a class="mui-tab-item">
  169. <div class="iconfont icon-wode"></div>
  170. <span class="mui-tab-label">我的</span>
  171. </a>
  172. </nav>
  173. <div class="mui-content" style="background: #fff;">
  174. <!--banner 开始-->
  175. <div class="swiper-container">
  176. <div class="swiper-wrapper">
  177. <div class="swiper-slide"><img width="100%" src="images/2019072901.jpg" /></div>
  178. </div>
  179. <!-- 如果需要分页器 -->
  180. <div class="swiper-pagination mui-text-center"></div>
  181. </div>
  182. <!--banner 结束-->
  183. <div style="background: #faf5f5;clear: both;position: relative;padding:16px 14px 12px 14px;">
  184. <div style="background: #fff;margin:0;padding: 10px 0;">
  185. <div class="index-title">
  186. <strong>2人成团</strong>
  187. </div>
  188. <table>
  189. <tr>
  190. <td proid="66" colorid="49" class="go_chanpin_details">
  191. <img width="100%" src="images/2019080601.jpg" />
  192. </td>
  193. <td proid="71" colorid="55" class="go_chanpin_details">
  194. <img width="100%" src="images/2019080602.jpg" />
  195. </td>
  196. <td proid="60" colorid="42" class="go_chanpin_details">
  197. <img width="100%" src="images/2019080603.jpg" />
  198. </td>
  199. </tr>
  200. </table>
  201. </div>
  202. </div>
  203. <div style="background: #faf5f5;padding:5px 14px;">
  204. <div style="background: #fff;padding: 10px 0;position: relative;">
  205. <div class="index-title">
  206. <strong>限时抢购</strong>
  207. </div>
  208. <img proid="61" colorid="43" class="go_chanpin_details" width="100%" src="images/2019080607.png" />
  209. <div style="position: absolute;bottom: 16%;left: 42%;">
  210. <span class="iconfont icon-naozhong cl-red"></span><span class="time-out" id="showtime">00:00:00</span>
  211. </div>
  212. <button type="button" class="mui-btn btn-qiang">抢购</button>
  213. </div>
  214. </div>
  215. <div style="background: #faf5f5;padding:12px 14px 16px 14px;">
  216. <div style="background: #fff;padding-top: 10px;">
  217. <div class="index-title">
  218. <strong>买净水机送好礼</strong>
  219. </div>
  220. <img width="100%" src="images/2019080102.png" />
  221. </div>
  222. </div>
  223. <div style="padding: 10px 0;">
  224. <div class="index-title">
  225. <strong>价格直降</strong><div style="position: absolute;right: 10px;top: 5px;" class="go_web_shop"><span>更多</span><font class="mui-icon mui-icon-arrowright" style="font-size: 18px;font-weight: bold;"></font></div>
  226. </div>
  227. <table>
  228. <tr>
  229. <td proid="34" colorid="2" class="go_chanpin_details">
  230. <img width="100%" src="images/2019080604.jpg" />
  231. </td>
  232. <td proid="58" colorid="40" class="go_chanpin_details">
  233. <img width="100%" src="images/2019080605.jpg" />
  234. </td>
  235. <td proid="38" colorid="5" class="go_chanpin_details">
  236. <img width="100%" src="images/2019080606.jpg" />
  237. </td>
  238. </tr>
  239. </table>
  240. </div>
  241. <br />
  242. </div>
  243. <script src="js/mui.min.js"></script>
  244. <script src="js/jquery-2.1.1.min.js"></script>
  245. <script src="js/main.js"></script>
  246. <script src="js/page/wechat-utils-1.0.js"></script>
  247. </body>
  248. <script>
  249. //ajax loading
  250. $(window).ajaxStart(function() {
  251. $(".covers").show();
  252. });
  253. $(window).ajaxStop(function() {
  254. $(".covers").hide();
  255. });
  256. $(document).on('tap', '.go', function() {
  257. location.href = '';
  258. });
  259. mui.ready(function() {
  260. getCartNum();
  261. fenxiang();
  262. //活动倒计时
  263. var date = new Date('2019/08/12 00:00:00');//活动截止如期 2019-08-13 0:00:00
  264. let countdown = () => {
  265. let showtime = dc('showtime')
  266. let now = new Date().getTime();
  267. let end = date.getTime();
  268. let last_time = end - now;
  269. if(now - end > 0) {
  270. //抢购活动结束
  271. $("#showtime").text("抢购已结束").css("font-size", "10px");
  272. //location.href='index.html';
  273. } else {
  274. const px_d = 1000 * 60 * 60 * 24;
  275. const px_h = 1000 * 60 * 60;
  276. const px_m = 1000 * 60;
  277. const px_s = 1000;
  278. let d = Math.floor(last_time / px_d);
  279. let h = Math.floor((last_time - d * px_d) / px_h);
  280. let m = Math.floor((last_time - d * px_d - h * px_h) / px_m);
  281. let s = Math.floor((last_time - d * px_d - h * px_h - m * px_m) / px_s);
  282. let html = ``
  283. if(now>1565539200000 && now<1565625600000){
  284. date = new Date('2019/08/13 00:00:00');
  285. html = `${h}时${m}分${s}秒`
  286. $('.btn-qiang').show();
  287. }else if(now>1565625600000){
  288. html = `已结束,请下次尽早参与活动.`
  289. $('.btn-qiang').hide();
  290. }else{
  291. html = `待开始${d}天${h}时${m}分${s}秒`
  292. }
  293. showtime.innerHTML = html;
  294. clearTimeout();
  295. }
  296. }
  297. setInterval(function() {
  298. countdown();
  299. }, 1000)
  300. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  301. });
  302. //分享
  303. function fenxiang() {
  304. var src = location.href;
  305. window.wxFriend = {
  306. "appId": "",
  307. "imgUrl": 'https://s.iamberry.com/watero/wechat/images/2019080701.jpg',
  308. "link": src,
  309. "desc": '二人成团,惊喜折扣。更多好礼等你来',
  310. "title": '情定七夕,钜惠好礼',
  311. "netError": "您的网络异常,请刷新重试!如多次刷新无效,请向我们反应 ~",
  312. "shareTimeSuccess": "分享成功",
  313. "shareTimeCancel": "已取消分享",
  314. "shareAppSuccess": "分享成功!",
  315. "shareAppCancel": "已取消分享"
  316. };
  317. getConfig();
  318. }
  319. </script>
  320. </html>