my-warranty_card.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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. <style type="text/css">
  13. .warranty-box{margin: 14px;position: relative;}
  14. .warranty-box>img{width: 100%;}
  15. .warranty-name{position: absolute;top: 22px;left: 90px;font-size: 18px;}
  16. .warranty-tips{position: absolute;top: 48px;left: 90px;}
  17. .icon-chanpintiyan{font-size: 50px;}
  18. .jiqi{position: absolute;left: 20px;top: 15px;line-height: 1;border-radius: 50%;}
  19. .date-list{display: table;width: 100%;position: absolute;top: 50%;text-align: center;}
  20. .date-list>div{display: table-cell;position: relative;}
  21. .date-list>div:after{content: '';width: 1px;top: 25%;height: 50%;background-color: #fff;-webkit-transform: scaleX(.5);position: absolute;right: 0;}
  22. .warranty-number{position: absolute;left: 20px;bottom: 15px;}
  23. </style>
  24. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  25. <script>
  26. //屏蔽分享
  27. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  28. WeixinJSBridge.call('hideOptionMenu');
  29. });
  30. </script>
  31. </head>
  32. <body style="background-color: #f1f1f1;">
  33. <div class="loading-bg">
  34. <div class="mui-loading">
  35. <div class="mui-spinner">
  36. </div>
  37. &nbsp;&nbsp;加载中...
  38. </div>
  39. </div>
  40. <header class="mui-bar mui-bar-nav" style="background-color: transparent;">
  41. <div id="pro-menu" class="mui-segmented-control">
  42. <a class="mui-control-item mui-active" href="#item1">净水机</a>
  43. <a class="mui-control-item" href="#item2">冲奶机</a>
  44. <a class="mui-control-item" href="#item3">电动牙刷</a>
  45. </div>
  46. </header>
  47. <div class="mui-content" style="background-color: #f1f1f1;">
  48. <div style="margin: 10px 14px 15px 14px;background-color: #fff;padding: 10px;border-radius: 5px;">
  49. <div style="padding:0 0 10px 0"><span class="iconfont icon-shouhoudianhua" style="color: #d78b82;float: left;"></span> &nbsp;&nbsp;联系方式</div>
  50. <p>1、公众号联系客服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、客服电话:<a href="400 8006 692">400 8006 692</a></p>
  51. </div>
  52. <div class="data-cards" id="data-cards">
  53. <div class="warranty-box" id="add_warranty" style="display: block;">
  54. <img src="images/add-bg.png"/>
  55. <img class="go_add_warranty_card" style="position: absolute;width: 25%;left: 37.5%;top: 16%;" src="images/add.png"/>
  56. <div style="position: absolute;bottom: 20%;text-align: center;width: 100%;">添加质保卡</div>
  57. </div>
  58. <div class="warranty-box">
  59. <img src="images/naiji-bg.png"/>
  60. <span class="jiqi" style="">
  61. <img width="60px" src="images/naiji-logo.png" />
  62. </span>
  63. <span class="warranty-name">Aiberle冲奶机</span>
  64. <span class="warranty-tips">售后根据国家三包政策</span>
  65. <div class="date-list">
  66. <div>购买日期<br/>2017-01-02</div>
  67. <div>换新截止<br/>2017-01-02</div>
  68. <div>保修截止<br/>2017-01-02</div>
  69. </div>
  70. <div class="warranty-number">NO. 1599 9999 999</div>
  71. </div>
  72. </div>
  73. <div class="mui-content-padded mui-text-center">
  74. <h6>温馨提示:产品有任何问题,请于保修期内联系客服解决</h6>
  75. </div>
  76. </div>
  77. <script type="text/javascript" src="js/mui.min.js"></script>
  78. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  79. <script type="text/javascript" src="js/main.js"></script>
  80. <script type="text/javascript">
  81. var num = getParam("num");
  82. mui.ready(function(){
  83. // $.ajax(base_path + '/qrcode/select_warranty_card_list?dates=' + new Date().getTime(), {
  84. // dataType: 'json',
  85. // type: 'post',
  86. // timeout: 15000,
  87. // success: function(dt) {
  88. // if(dt.isRedirect) {
  89. // location.href = dt.redirectURL;
  90. // } else {
  91. // if(dt.status) {
  92. // var data_cards = dt.data;
  93. // var table = $('#data-cards');
  94. // var li = '';
  95. // mui(data_cards).each(function(index) {
  96. // li += '<div class="mui-content" style="background: #fff;">'
  97. // +'<div class="warranty-box">'
  98. // +'<img src="//s.iamberry.com/wateroPF/new/images/shop/warranty_card.png"/>'
  99. // +'<span class="jiqi" style=""><span class="iconfont icon-chanpintiyan"></span></span>'
  100. // +'<span class="warranty-name">美国WaterO可移动智能净水机</span>'
  101. // +'<span class="warranty-tips">一年只换不修、十年质保</span>'
  102. // +'<div class="date-list">'
  103. // +'<div>购买日期<br/>' + dateFormat(this.cardSaleTime) + '</div>'
  104. // +'<div>一年包换<br/>' + dateFormat(this.cardRenewTime) + '</div>'
  105. // +'<div>质保截止<br/>' + dateFormat(this.cardEndTime) + '</div>'
  106. // +'</div>'
  107. // +'<div class="warranty-number">NO.&nbsp;&nbsp;'+ datePhone(this.cardBarcode) +'</div>'
  108. // +'</div>'
  109. // +'</div>'
  110. // });
  111. // if (li == '') {
  112. // $('#add_warranty').show();
  113. // } else {
  114. // $('#add_warranty').hide();
  115. // }
  116. // table.append(li);
  117. // } else {
  118. // mui.alert(dt.message);
  119. // }
  120. // }
  121. // },
  122. // error: function(xhr, type, errorThrown) {
  123. // //异常处理;
  124. // console.log(xhr);
  125. // }
  126. // });
  127. document.querySelector('.loading-bg').style.display='none';
  128. });
  129. function datePhone(phone) {
  130. if (phone != null && phone.length >= 12) {
  131. var phone1 = phone.substring(0,4);
  132. var phone2 = phone.substring(4,8);
  133. var phone3 = phone.substring(8,12);
  134. var phone4 = phone.substring(12,phone.length);
  135. return phone1 + "&nbsp;&nbsp;" + phone2 + "&nbsp;&nbsp;" + phone3 + "&nbsp;&nbsp;" + phone4;
  136. }
  137. }
  138. //添加质保卡
  139. mui('body').on('tap', '.go_add_warranty_card', function() {
  140. alert(num);
  141. location.href='/wateroPF/view/add_machine.html?num='+num;
  142. });
  143. function dateFormat(now) {
  144. if (now == null || now == '') {
  145. return '暂无';
  146. } else {
  147. now = new Date(now);
  148. var year = now.getFullYear();
  149. var month = now.getMonth() + 1;
  150. var date = now.getDate();
  151. if (month < 10) {
  152. month = "0" + month;
  153. }
  154. if (date < 10) {
  155. date = "0" + date;
  156. }
  157. return year + "-" + month + "-" + date
  158. }
  159. };
  160. </script>
  161. </body>
  162. </html>