coupon_list.html 5.3 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/main.css" />
  12. <script type="text/javascript">
  13. // 屏蔽分享
  14. window.hiddenAllWechatMenu = true;
  15. </script>
  16. </head>
  17. <body>
  18. <!--下拉刷新容器-->
  19. <div id="pullrefresh_yhq_list" class="mui-content mui-scroll-wrapper">
  20. <div class="mui-scroll">
  21. <!--现金券列表-->
  22. <ul class="my-yhq-list">
  23. </ul>
  24. </div>
  25. </div>
  26. <script type="text/javascript" src="js/mui.min.js"></script>
  27. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  28. <script type="text/javascript" src="js/main.js"></script>
  29. <script type="text/javascript" src="js/wechat-utils-1.0.js"></script>
  30. <script>
  31. window.addEventListener('pageshow', function(e) {
  32. // 通过persisted属性判断是否存在 BF Cache
  33. if(e.persisted) {
  34. location.reload();
  35. }
  36. });
  37. var pageNumber = 0,
  38. pagesize = 6;
  39. mui.init({
  40. pullRefresh: {
  41. container: '#pullrefresh_yhq_list',
  42. down: {
  43. //callback: pulldownRefresh
  44. },
  45. up: {
  46. contentrefresh: '正在加载...',
  47. callback: pullupRefresh
  48. }
  49. }
  50. });
  51. /**
  52. * 上拉加载具体业务实现
  53. */
  54. function pullupRefresh() {
  55. ++pageNumber; //每次上拉页数+1
  56. $.ajax(base_path + '/wechat/coupon/couponItemList?dates=' + new Date().getTime(), {
  57. data: {
  58. "pageNO": pageNumber, //pageNo第几页
  59. "pageSize": pagesize //pageSize每页条数
  60. },
  61. dataType: 'json',
  62. xhrFields: {
  63. withCredentials: true
  64. },
  65. crossDomain: true,
  66. type: 'get',
  67. timeout: 15000,
  68. success: function(dt) {
  69. if(dt.isRedirect) {
  70. location.href = dt.redirectURL;
  71. } else {
  72. console.log(dt)
  73. if(dt.status) { //判断接口返回状态status
  74. var table = document.body.querySelector('.my-yhq-list');
  75. var data = dt.data.itemList;
  76. mui('#pullrefresh_yhq_list').pullRefresh().endPullupToRefresh(dt.data.itemList.length < pagesize); //endPullupToRefresh(ture)表示没有更多数据了,停止上拉加载
  77. mui.each(data, function(index) {
  78. var li = document.createElement('li'); //创建li标签
  79. var src = 'images/yhq-1.png';
  80. if(new Date(this.couponUseEndDate) >= new Date) {
  81. li.className = 'my-yhq-cell';
  82. } else {
  83. li.className = 'my-yhq-cell active';
  84. src = 'images/yhq-2.png';
  85. }
  86. var couponReduceHtml = '';
  87. if(this.couponType == 1) { //减免金额
  88. couponReduceHtml += '<span>' + (this.couponReduce / 100).toFixed(0) + '</span>元';
  89. } else if(this.couponType == 2) { //减免率
  90. couponReduceHtml += '<span>' + (this.couponReduce / 10).toFixed(1) + '</span>折';
  91. }
  92. /*使用条件*/
  93. var couponConsumeEnoughHtml = "";
  94. switch (this.couponId){
  95. case 20000:
  96. couponConsumeEnoughHtml = '购买刷头使用<br>可兑换“柔羽呵护”或“温和洁净”刷头1支';
  97. break;
  98. case 30000:
  99. couponConsumeEnoughHtml = '购买电动牙刷使用';
  100. break;
  101. case 110000:
  102. couponConsumeEnoughHtml = '购买电动牙刷使用';
  103. break;
  104. case 110001:
  105. case 110002:
  106. case 110003:
  107. case 110004:
  108. couponConsumeEnoughHtml = '购买刷头时使用';
  109. break;
  110. default:
  111. if(this.couponToothbrushEnough != 0){
  112. couponConsumeEnoughHtml += '牙刷满'+(this.couponToothbrushEnough / 100).toFixed(0)+'元可用';
  113. }else{
  114. couponConsumeEnoughHtml = '满'+(this.couponConsumeEnough / 100).toFixed(0)+'元可用'
  115. }
  116. break;
  117. }
  118. li.innerHTML = '<img width="100%" src="' + src + '" /><div class="fixed-box"><div class="table"><div class="left-cell" style="width: 76%;"><span class="tit">' + this.couponName + '</span><p class="time" style="line-height: 15px;">使用条件:' + couponConsumeEnoughHtml + '</p><span class="condition" style="bottom: 12%;">有效期至:' + this.couponUseEndDate + '</span></div><div class="right-cell"><div class="money">' + couponReduceHtml + '</div></div></div></div';
  119. table.appendChild(li);
  120. });
  121. } else {
  122. mui.alert("获取现金券列表失败!");
  123. }
  124. }
  125. },
  126. error: function(xhr, type, errorThrown) {
  127. console.log(xhr);
  128. mui.alert("获取现金券列表失败!网络错误");
  129. }
  130. });
  131. }
  132. mui.ready(function() {
  133. mui('#pullrefresh_yhq_list').pullRefresh().pullupLoading(); //首次加载
  134. });
  135. //去列表
  136. $(document).on('tap', '.fixed-box', function() {
  137. location.href="pro-list.html";
  138. });
  139. </script>
  140. </body>
  141. </html>