index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>soodo上朵</title>
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
  11. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  12. <link rel="stylesheet" type="text/css" href="css/main.css" />
  13. <style>
  14. .color_a {
  15. color: #000000;
  16. }
  17. .color_a:hover {
  18. color: #000000;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <!--底部菜单开始-->
  24. <footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
  25. <a class="mui-tab-item mui-active">
  26. <span class="iconfont icon-shouye"></span>
  27. <span class="mui-tab-label">首页</span>
  28. </a>
  29. <a class="mui-tab-item">
  30. <span class="iconfont icon-liebiao"></span>
  31. <span class="mui-tab-label">列表</span>
  32. </a>
  33. <a class="mui-tab-item">
  34. <span class="iconfont icon-gouwuche"></span>
  35. <span class="mui-tab-label">购物车</span>
  36. </a>
  37. <a class="mui-tab-item">
  38. <span class="iconfont icon-huiyuan"></span>
  39. <span class="mui-tab-label">会员</span>
  40. </a>
  41. </footer>
  42. <!--底部菜单结束-->
  43. <!--内容开始-->
  44. <div class="mui-content">
  45. <header class="header">
  46. <!--头部选项卡-->
  47. <div id="index-top-menu" class="mui-segmented-control">
  48. <!--(默认选中哪个就加上mui-active),其他不加-->
  49. <a class="mui-control-item mui-active" href="#item1">soodo上朵</a>
  50. <a class="mui-control-item" href="#item2">会员专区</a>
  51. <!--<a class="mui-control-item" href="#item3">刷头</a>-->
  52. </div>
  53. </header>
  54. <!--选项卡item1显示区域(默认选中哪个就加上mui-active),其他不加-->
  55. <div id="item1" class="mui-control-content mui-active">
  56. <div class="banner-box">
  57. <!--banner开始-->
  58. <div id="slider" class="mui-slider">
  59. <div class="mui-slider-group mui-slider-loop">
  60. <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
  61. <div class="mui-slider-item mui-slider-item-duplicate">
  62. <a>
  63. <img src="images/index_shuatou_2.png">
  64. </a>
  65. </div>
  66. <!-- 第一张 -->
  67. <div class="mui-slider-item">
  68. <a>
  69. <img src="images/banner-1.jpg">
  70. </a>
  71. </div>
  72. <!-- 第二张 -->
  73. <div class="mui-slider-item">
  74. <a>
  75. <img src="images/banner-2.jpg">
  76. </a>
  77. </div>
  78. <!-- 第三张 -->
  79. <div class="mui-slider-item">
  80. <a>
  81. <img src="images/index_shuatou_2.png">
  82. </a>
  83. </div>
  84. <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
  85. <div class="mui-slider-item mui-slider-item-duplicate">
  86. <a>
  87. <img src="images/banner-1.jpg">
  88. </a>
  89. </div>
  90. </div>
  91. <!--轮播图下面的点(和轮播图数量一致)-->
  92. <div class="mui-slider-indicator my-slider-indicator">
  93. <div class="mui-indicator mui-active"></div>
  94. <div class="mui-indicator"></div>
  95. <div class="mui-indicator"></div>
  96. </div>
  97. </div>
  98. <!--banner结束-->
  99. <div class="index-banner" style="display: none;"></div>
  100. </div>
  101. <div>
  102. <img width="100%" src="images/index-tit-1.jpg" />
  103. </div>
  104. <div>
  105. <a class="color_a" href="pro-details.html?colorId=44">
  106. <img width="100%" src="images/index-1.jpg" />
  107. </a>
  108. </div>
  109. <div style="padding-top: 30px;">
  110. <!-- Swiper begin-->
  111. <div class="swiper-container">
  112. <div class="swiper-wrapper">
  113. <div class="swiper-slide">
  114. <a class="color_a" href="pro-details.html?colorId=44">
  115. <img src="images/yashua-fen.png">
  116. <div class="mui-text-center">樱花粉</div>
  117. </a>
  118. </div>
  119. <div class="swiper-slide">
  120. <a class="color_a" href="pro-details.html?colorId=46">
  121. <img src="images/yashua-huang.png">
  122. <div class="mui-text-center">奶油黄</div>
  123. </a>
  124. </div>
  125. <div class="swiper-slide">
  126. <a class="color_a" href="pro-details.html?colorId=45">
  127. <img src="images/yashua-lan.png">
  128. <div class="mui-text-center">冰川蓝</div>
  129. </a>
  130. </div>
  131. <div class="swiper-slide">
  132. <a class="color_a" href="pro-details.html?colorId=43">
  133. <img src="images/yashua-hei.png">
  134. <div class="mui-text-center">晶石黑</div>
  135. </a>
  136. </div>
  137. <div class="swiper-slide">
  138. <a class="color_a" href="pro-details.html?colorId=42">
  139. <img src="images/yashua-bai.png">
  140. <div class="mui-text-center">极光白</div>
  141. </a>
  142. </div>
  143. </div>
  144. <!-- Add Arrows -->
  145. <div class="swiper-button-next swiper-button-black"></div>
  146. <div class="swiper-button-prev swiper-button-black"></div>
  147. </div>
  148. <!-- Swiper end-->
  149. </div>
  150. <div>
  151. <img width="100%" src="images/index-tit-2.jpg" />
  152. </div>
  153. <div>
  154. <a class="color_a" href="pro-details.html?colorId=50">
  155. <img width="100%" src="images/index_shuatou.png" />
  156. </a>
  157. </div>
  158. <div>
  159. <br />
  160. <ul class="mui-table-view mui-grid-view my-grid-view-no">
  161. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  162. <a class="color_a" href="pro-details.html?colorId=50">
  163. <img class="mui-media-object" src="images/product/r_fen.png">
  164. <div class="mui-media-body">柔羽呵护刷头</div>
  165. </a>
  166. </li>
  167. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  168. <a class="color_a" href="pro-details.html?colorId=51">
  169. <img class="mui-media-object" src="images/product/d_fen.png">
  170. <div class="mui-media-body">温和洁净刷头</div>
  171. </a>
  172. </li>
  173. </ul>
  174. </div>
  175. <div>
  176. <img width="100%" src="images/index-content.jpg" />
  177. </div>
  178. <div>
  179. <img width="100%" src="images/banner-2.jpg" />
  180. </div>
  181. <div>
  182. <img width="100%" src="images/index-tit-3.jpg" />
  183. </div>
  184. <div>
  185. <a class="color_a" href="pro-details.html?colorId=44">
  186. <img width="100%" src="images/index-1.jpg" />
  187. </a>
  188. </div>
  189. <!--<div class="mui-text-center mui-content-padded">
  190. <span style="color: #f16071;">¥399.00</span>
  191. </div>-->
  192. <div>
  193. <img width="100%" src="images/index_shuatou_2.png" />
  194. </div>
  195. <div>
  196. <img width="100%" src="images/index-tit-4.jpg" />
  197. </div>
  198. <div>
  199. <a class="color_a" href="pro-details.html?colorId=50">
  200. <img width="100%" src="images/index_shuatou.png" />
  201. </a>
  202. </div>
  203. <!--<div class="mui-text-center mui-content-padded">
  204. <span style="color: #f16071;">¥42.00</span>
  205. </div>-->
  206. <div>
  207. <img width="100%" src="images/index-tit-5.jpg" />
  208. </div>
  209. <div>
  210. <a class="color_a" href="pro-details.html?colorId=51">
  211. <img width="100%" src="images/index_d_shuatou.png" />
  212. </a>
  213. </div>
  214. <!--<div class="mui-text-center mui-content-padded">
  215. <span style="color: #f16071;">¥36.00</span>
  216. </div>-->
  217. </div>
  218. <!--选项卡item2显示区域-->
  219. <div id="item2" class="mui-control-content">
  220. <div><img width="100%" src="images/banner-4.jpg"/></div>
  221. <ul class="mui-table-view mui-grid-view mui-grid-9" id="menu-grid-9">
  222. <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a>
  223. <span class="iconfont icon-fenbi"></span>
  224. <div class="mui-media-body">朵粉币 1200</div></a></li>
  225. <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="cash-coupon-log.html">
  226. <span class="iconfont icon-jilu"></span>
  227. <div class="mui-media-body">兑换记录</div></a></li>
  228. <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="cash-coupon-dic.html">
  229. <span class="iconfont icon-guize"></span>
  230. <div class="mui-media-body">兑换规则</div></a></li>
  231. </ul>
  232. <ul class="mui-table-view mui-grid-view" id="grid-view">
  233. <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
  234. <a href="#">
  235. <img class="mui-media-object" src="images/100-quan.jpg">
  236. <div class="mui-media-body">100元现金券 </div>
  237. <h6>商场全品类满100可用</h6>
  238. <div class="prices">1000朵粉币</div>
  239. <div><button type="button" class="mui-btn">兑换</button></div>
  240. </a>
  241. </li>
  242. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  243. <a href="#">
  244. <img class="mui-media-object" src="images/50-quan.jpg">
  245. <div class="mui-media-body">50元现金券</div>
  246. <h6>商场全品类满50可用</h6>
  247. <div class="prices">500朵粉币</div>
  248. <div><button type="button" class="mui-btn">兑换</button></div>
  249. </a>
  250. </li>
  251. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  252. <a href="#">
  253. <img class="mui-media-object" src="images/30-quan.jpg">
  254. <div class="mui-media-body">30元现金券</div>
  255. <h6>商场全品类满30可用</h6>
  256. <div class="prices">300朵粉币</div>
  257. <div><button type="button" class="mui-btn">兑换</button></div>
  258. </a>
  259. </li>
  260. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  261. <a href="#">
  262. <img class="mui-media-object" src="images/20-quan.jpg">
  263. <div class="mui-media-body">20元现金券</div>
  264. <h6>商场全品类满20可用</h6>
  265. <div class="prices">200朵粉币</div>
  266. <div><button type="button" class="mui-btn">兑换</button></div>
  267. </a>
  268. </li>-->
  269. </ul>
  270. </div>
  271. <!--选项卡item3显示区域-->
  272. <div id="item3" class="mui-control-content">
  273. </div>
  274. </div>
  275. <!--内容结束-->
  276. <!--春节放假通知-->
  277. <!--<div class="year-dalog"></div>-->
  278. <!-- 加载ing begin-->
  279. <div class="loading covers">
  280. <div class="loading-bj"></div>
  281. <p>正在加载...</p>
  282. </div>
  283. <!-- 加载ing end -->
  284. <script src="js/mui.min.js"></script>
  285. <script src="js/jquery-2.1.1.min.js"></script>
  286. <script src="js/swiper.min.js"></script>
  287. <script src="js/main.js"></script>
  288. <script src="js/wechat-utils-1.0.js"></script>
  289. <script>
  290. window.addEventListener('pageshow', function(e) {
  291. // 通过persisted属性判断是否存在 BF Cache
  292. if(e.persisted) {
  293. location.reload();
  294. }
  295. });
  296. // var clickdate = JSON.parse(localStorage.getItem('clickdate'));
  297. //ready事件
  298. mui.ready(function() {
  299. //banner轮播图
  300. var slider = mui("#slider");
  301. slider.slider({
  302. interval: 5000 //interval设置为0(毫秒)时不轮播
  303. });
  304. //牙刷图swiper左右切换
  305. var swiper = new Swiper('.swiper-container', {
  306. slidesPerView: 3, //每行可视数量
  307. slidesPerGroup: 3, //每组展示数量
  308. slidesPerColumn: 1, //展示几列
  309. loop: true, //循环
  310. slidesPerColumnFill: 'row', //排序方式
  311. navigation: {
  312. nextEl: '.swiper-button-next', //后箭头
  313. prevEl: '.swiper-button-prev', //前箭头
  314. },
  315. spaceBetween: 0 //每个图片的左右间距
  316. });
  317. $.ajax(base_path +'/wechat/integral_pro/list_product?dates=' + new Date().getTime(), {
  318. data: {},
  319. dataType: 'json',
  320. xhrFields: {
  321. withCredentials: true
  322. },
  323. crossDomain: true,
  324. type: 'get',
  325. timeout: 15000,
  326. success: function(dt) {
  327. if(dt.isRedirect) {
  328. location.href = dt.redirectURL;
  329. } else {
  330. if(dt.status) {
  331. console.log(dt)
  332. } else {
  333. mui.alert("获取数据失败!");
  334. }
  335. }
  336. },
  337. error: function(xhr, type, errorThrown) {
  338. console.log(xhr);
  339. //mui.alert("获取数据失败!网络错误");
  340. var dt={
  341. "status": true,
  342. "message": "SUCCESS",
  343. "data": {
  344. "integralProductList": [
  345. {
  346. "integralProductId": 1,
  347. "integralProductImg":"images/100-quan.jpg",
  348. "integralProductName": "积分商品一",
  349. "integralProductDesc": "积分商品一,其他",
  350. "integralProductType": 2,
  351. "integralProductNum": 1000,
  352. "integralProductRemainingNum": 0,
  353. "integralProductImagetext": "1111",
  354. "integralProductStatus": 1,
  355. "integralProductCreateTime": 1525225128000,
  356. "integralProductUpdateTime": 1525225204000,
  357. "convertId": 1,
  358. "convertDfbi": 100,
  359. "convertIsMailing": 2,
  360. "convertIsPay": 1,
  361. "convertPrice": 0
  362. },
  363. {
  364. "integralProductId": 2,
  365. "integralProductImg":"images/50-quan.jpg",
  366. "integralProductName": "兑换券",
  367. "integralProductDesc": "兑换券",
  368. "integralProductType": 1,
  369. "integralProductNum": 1000,
  370. "integralProductRemainingNum": 1,
  371. "integralProductImagetext": "1213",
  372. "integralProductStatus": 1,
  373. "integralProductCreateTime": 1525225200000,
  374. "integralProductUpdateTime": 1525607456000,
  375. "convertId": 2,
  376. "convertDfbi": 100,
  377. "convertIsMailing": 2,
  378. "convertIsPay": 2,
  379. "convertPrice": 0,
  380. "couponId": 50000,
  381. "couponType": 1,
  382. "couponReduce": 10000
  383. }
  384. ],
  385. "integral": 240
  386. },
  387. "resultCode": "200"
  388. }
  389. var table=document.body.querySelector("#grid-view");
  390. mui.each(dt.data.integralProductList, function(index) {
  391. var li = document.createElement('li');//创建li标签
  392. li.className='mui-table-view-cell mui-media mui-col-xs-6';
  393. li.innerHTML='<a><img class="mui-media-object" src="'+this.integralProductImg+'"><div class="mui-media-body">'+this.integralProductName+'</div><h6>'+this.integralProductDesc+'</h6><div class="prices">'+this.convertDfbi+'朵粉币</div><div><button type="button" class="mui-btn" name="'+this.integralProductId+'">兑换</button></div></a>';
  394. table.appendChild(li);//将li插入table
  395. });
  396. }
  397. });
  398. $(document).on('tap', '#grid-view .mui-table-view-cell .mui-btn', function() {
  399. var th=$(this);
  400. console.log(th.attr("name"))
  401. if(th.attr("name")!="undefined"){
  402. location.href="cash-coupon.html?id="+th.attr("name");
  403. }
  404. });
  405. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  406. // var d = new Date().getTime();//当前时间戳
  407. // //弹窗提示时间为2月8日-2月22日
  408. // if(d > 1518019200000 && d < 1519315200000) {
  409. // if(!window.localStorage) {
  410. // mui.alert("您的浏览器不支持localStorage");
  411. // } else {
  412. // if(clickdate != null) {
  413. // var oldDate = new Date(clickdate.text).getDay();
  414. // //如果本地存储的getDay比当前时间的getDay大则显示弹窗
  415. // if(new Date().getDay() > oldDate) {
  416. // $(".year-dalog").addClass("active").show();
  417. // }
  418. // }else{
  419. // //本地没有存储时间也显示弹窗
  420. // $(".year-dalog").addClass("active").show();
  421. // }
  422. // }
  423. // }
  424. });
  425. //春节放假通知弹窗点击事件
  426. // $(document).on('tap', '.year-dalog', function() {
  427. // if(!window.localStorage) {
  428. // mui.alert("您的浏览器不支持localStorage");
  429. // } else {
  430. // //自定义json数据
  431. // var obj = {};
  432. // obj = {
  433. // text: new Date().getTime()
  434. // };
  435. // //json格式化插入 点击时间
  436. // localStorage.setItem('clickdate', JSON.stringify(obj));
  437. // }
  438. // $(".year-dalog").removeClass("active");
  439. // setTimeout(function(){
  440. // $(".year-dalog").hide();
  441. // },500);
  442. // });
  443. </script>
  444. </body>
  445. </html>