warranty_card.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  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="//s.iamberry.com/wateroPF/css/mui.min.css">
  10. <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/new/css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/css/style.css" />
  12. <style type="text/css">
  13. .warranty-box{margin: 10px;position: relative;}
  14. .warranty-box>img{width: 100%;}
  15. .warranty-name{position: absolute;color: #fff;top: 22px;left: 85px;font-size: 18px;}
  16. .warranty-tips{color: #fff;position: absolute;top: 48px;left: 85px;}
  17. .icon-chanpintiyan{color: #fff;font-size: 50px;}
  18. .jiqi{position: absolute;left: 20px;top: 20px;line-height: 1;border-radius: 50%;
  19. box-shadow:-3px 0 3px #73c7e0, /*左边阴影*/
  20. 3px 0 3px #73c7e0, /*右边阴影*/
  21. 0 -4px 3px #73c7e0, /*顶部阴影*/
  22. 0 1px 3px #73c7e0; /*底边阴影*/ }
  23. .date-list{display: table;width: 100%;position: absolute;top: 50%;text-align: center;}
  24. .date-list>div{display: table-cell;color: #fff;position: relative;}
  25. .date-list>div:after{content: '';width: 1px;top: 25%;height: 50%;background-color: #fff;-webkit-transform: scaleX(.5);position: absolute;right: 0;}
  26. .warranty-number{position: absolute;left: 20px;bottom: 15px;color: #fff;}
  27. </style>
  28. </head>
  29. <body style="background: #fff;">
  30. <div class="loading-bg">
  31. <div class="mui-loading">
  32. <div class="mui-spinner">
  33. </div>
  34. &nbsp;&nbsp;加载中...
  35. </div>
  36. </div>
  37. <div class="mui-content" style="background: #fff;">
  38. <div style="margin: 10px 10px 15px 10px;">
  39. <div style="padding:0 0 10px 0"><span class="iconfont icon-shouhoudianhua" style="color: #1bcba8;float: left;"></span> &nbsp;&nbsp;联系方式</div>
  40. <p>1、公众号联系客服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、客服电话:<a href="400 8006 692">400 8006 692</a></p>
  41. </div>
  42. <div class="data-cards" id="data-cards">
  43. <div class="warranty-box" id="add_warranty" style="display: none;">
  44. <img src="//s.iamberry.com/wateroPF/new/images/shop/warranty_card.png"/>
  45. <img class="go_add_warranty_card" style="position: absolute;width: 30%;left: 35%;top: 22%;" src="//s.iamberry.com/wateroPF/new/images/shop/add_warranty_card.png"/>
  46. <div style="position: absolute;bottom: 15%;color: #fff;text-align: center;width: 100%;">添加质保卡</div>
  47. </div>
  48. <!--<div class="mui-content" style="background: #fff;">
  49. <div class="warranty-box">
  50. <img src="//s.iamberry.com/wateroPF/new/images/shop/warranty_card.png"/>
  51. <span class="jiqi" style=""><span class="iconfont icon-chanpintiyan"></span></span>
  52. <span class="warranty-name">美国watero净饮水一体机</span>
  53. <span class="warranty-tips">一年换新、十年质保</span>
  54. <div class="date-list">
  55. <div>购买日期<br/>2017-01-02</div>
  56. <div>换新截止<br/>2017-01-02</div>
  57. <div>质保截止<br/>2017-01-02</div>
  58. </div>
  59. <div class="warranty-number">NO. 1599 9999 999</div>
  60. </div>
  61. </div>-->
  62. </div>
  63. </div>
  64. <script src="//s.iamberry.com/wateroPF/js/mui.min.js?v=2016101701"></script>
  65. <script src="//s.iamberry.com/wateroPF/js/jquery-2.1.1.min.js"></script>
  66. <script src="//s.iamberry.com/wateroPF/new/js/page/main.js?v=2016101701"></script>
  67. <script type="text/javascript">
  68. mui.ready(function(){
  69. mui.ajax(base_path + '/qrcode/select_warranty_card_list?dates=' + new Date().getTime(), {
  70. dataType: 'json',
  71. type: 'post',
  72. timeout: 15000,
  73. success: function(dt) {
  74. if(dt.isRedirect) {
  75. location.href = dt.redirectURL;
  76. } else {
  77. if(dt.status) {
  78. var data_cards = dt.data;
  79. var table = $('#data-cards');
  80. var li = '';
  81. mui(data_cards).each(function(index) {
  82. li += '<div class="mui-content" style="background: #fff;">'
  83. +'<div class="warranty-box">'
  84. +'<img src="//s.iamberry.com/wateroPF/new/images/shop/warranty_card.png"/>'
  85. +'<span class="jiqi" style=""><span class="iconfont icon-chanpintiyan"></span></span>'
  86. +'<span class="warranty-name">美国WaterO可移动智能净水机</span>'
  87. +'<span class="warranty-tips">一年只换不修、三年包修、十年保修</span>'
  88. +'<div class="date-list">'
  89. +'<div>购买日期<br/>' + dateFormat(this.cardSaleTime) + '</div>'
  90. +'<div>换新截止<br/>' + dateFormat(this.cardRenewTime) + '</div>'
  91. +'<div>质保截止<br/>' + dateFormat(this.cardEndTime) + '</div>'
  92. +'</div>'
  93. +'<div class="warranty-number">NO.&nbsp;&nbsp;'+ datePhone(this.cardBarcode) +'</div>'
  94. +'</div>'
  95. +'</div>'
  96. });
  97. if (li == '') {
  98. $('#add_warranty').show();
  99. } else {
  100. $('#add_warranty').hide();
  101. }
  102. table.append(li);
  103. } else {
  104. mui.alert(dt.message);
  105. }
  106. }
  107. },
  108. error: function(xhr, type, errorThrown) {
  109. //异常处理;
  110. console.log(xhr);
  111. }
  112. });
  113. document.querySelector('.loading-bg').style.display='none';
  114. });
  115. function datePhone(phone) {
  116. if (phone != null && phone.length >= 12) {
  117. var phone1 = phone.substring(0,4);
  118. var phone2 = phone.substring(4,8);
  119. var phone3 = phone.substring(8,12);
  120. var phone4 = phone.substring(12,phone.length);
  121. return phone1 + "&nbsp;&nbsp;" + phone2 + "&nbsp;&nbsp;" + phone3 + "&nbsp;&nbsp;" + phone4;
  122. }
  123. }
  124. //添加质保卡
  125. mui('body').on('tap', '.go_add_warranty_card', function() {
  126. location.href='/wateroPF/view/add_machine.html';
  127. });
  128. function dateFormat(now) {
  129. if (now == null || now == '') {
  130. return '暂无';
  131. } else {
  132. now = new Date(now);
  133. var year = now.getFullYear();
  134. var month = now.getMonth() + 1;
  135. var date = now.getDate();
  136. if (month < 10) {
  137. month = "0" + month;
  138. }
  139. if (date < 10) {
  140. date = "0" + date;
  141. }
  142. return year + "-" + month + "-" + date
  143. }
  144. };
  145. </script>
  146. </body>
  147. </html>