old-for-new.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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>Aiberle以旧换新</title>
  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/icons-extra.css" />
  12. <link rel="stylesheet" type="text/css" href="css/main.css" />
  13. <style>
  14. .pro-select-color{padding: 3px 0;background: #fff;border: 1px solid rgba(0,0,0,.1); color: #999;border-radius: 5px;margin-right: 8px;margin-bottom: 15px; display: inline-block;width: 46%;text-align: center;font-size: 14px;}
  15. .pro-select-color.active{background: #737272;color: #fff;}
  16. .mui-control-content img{display: block;max-width: 100%;}
  17. .return {position: fixed;right: 10px;bottom: 140px;background: rgba(0, 0, 0, .1);padding: 12px;border-radius: 50%;height: 50px;width: 50px;text-align: center;opacity: .9;color: #333;display: none;}
  18. .my-picker {max-height: 100%;background-color: rgba(0, 0, 0, .5);}
  19. .my-btn-receive {width: 100%;border-radius: 0;bottom: 0;height: 50px;line-height: 50px;text-align: center;font-size: 1.1rem; border: 0;position: fixed;right: 0;background: #f1443c;color: #fff;}
  20. .mui-icon-extra-sweep{position: absolute;right: 0;top: 0;padding: 8px;}
  21. .oldNew-title{position: relative;font-size: 1rem;font-weight: bold;padding-left: 15px;margin: 10px 0;}
  22. .oldNew-title:after{content:''; position: absolute;left: 3px;top: 8px;width: 6px;height: 6px;border-radius: 6px;background: #f00;}
  23. .oldNew-ul{border: 1px solid rgba(0,0,0,.1);border-radius: 10px;padding: 10px;font-size: .6rem;margin-bottom: 10px;color: #666;}
  24. .oldNew-ul .tt{color: #333;font-size: .8rem;font-weight: bold;padding: 4px 0;}
  25. .oldNew-ul li{margin: 3px 0;}
  26. .link-updown{color: #666;font-size: .7rem;padding: 5px;}
  27. .link-updown .mui-icon{font-size: 1.2rem;}
  28. .box-content{height:auto; overflow: hidden;}
  29. .box-content img{width: 100%;}
  30. .mui-input{font-size: .7rem;}
  31. #ipt-scan::-webkit-input-placeholder{color: #999;}
  32. </style>
  33. <script>
  34. //屏蔽分享
  35. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  36. WeixinJSBridge.call('hideOptionMenu');
  37. });
  38. </script>
  39. </head>
  40. <body>
  41. <footer class="mui-bar mui-bar-tab" style="box-shadow: 0 0 0 0;">
  42. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no">
  43. <li class="mui-table-view-cell">
  44. <div class="my-btn-receive" style="background-color: #f2312f;">立即领取</div>
  45. </li>
  46. </ul>
  47. </footer>
  48. <div class="mui-content">
  49. <div class="banner-box-pro">
  50. <div id="slider" class="mui-slider">
  51. <div class="mui-slider-group mui-slider-loop">
  52. <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
  53. <div class="mui-slider-item mui-slider-item-duplicate">
  54. <a>
  55. <img src="images/oldfornew.jpeg">
  56. </a>
  57. </div>
  58. <!-- 第一张 -->
  59. <div class="mui-slider-item">
  60. <a>
  61. <img src="images/oldfornew.jpeg">
  62. </a>
  63. </div>
  64. <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
  65. <div class="mui-slider-item mui-slider-item-duplicate">
  66. <a>
  67. <img src="images/oldfornew.jpeg">
  68. </a>
  69. </div>
  70. </div>
  71. <div class="mui-slider-indicator">
  72. <div class="mui-indicator mui-active" style="display: none;"></div>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="mui-control-content mui-active" id="item1">
  77. <div class="mui-content-padded">
  78. <div class="oldNew-title">活动详情</div>
  79. <div class="box-content">
  80. <img src="images/WechatIMG9.jpeg" />
  81. <!--<ul class="oldNew-ul">
  82. <li class="tt">爱贝源冲奶机以旧换新活动介绍</li>
  83. <li>1、凡是爱贝源冲奶机的客户,不论购买渠道或冲奶机好坏都可参加本次活动。</li>
  84. <li>2、用户将冲奶机按回收地址寄回。在活动页面提交快递单号,即刻发放799元折旧代金券,寄回运费统一以45元代金券形式,也发放至客户的aiberle微信公众号会员账户。</li>
  85. <li>3、代金券仅限在aiberle微商城购买aiberle桌面净水机产品可直接等额抵用现金。</li>
  86. </ul>
  87. <ul class="oldNew-ul">
  88. <li class="tt">代金券使用规则</li>
  89. <li>1、折旧价值以代金券形式返还到用户账户,可在“会员中心-券包”里查看。</li>
  90. <li>2、活动时间:3月15日-4月15日,代金券超过活动期限未使用,将自动失效。</li>
  91. <li>3、用户使用抵用券购机,发货前退款,返还付款,抵用券退至该用户账号;发货后取消订单,抵用券自动作废,仅退款差额部分。</li>
  92. </ul>-->
  93. </div>
  94. <!--<div class="mui-text-center"><span class="link-updown">展开<span class="mui-icon mui-icon-arrowdown"></span></span></div>-->
  95. <div class="oldNew-title">物流单号</div>
  96. <div class="mui-input-row">
  97. <input type="text" class="mui-input" data-input-password="3" placeholder="请输入寄回冲奶机的物流单号" id="ipt-scan">
  98. <!-- <span class="mui-icon-extra mui-icon-extra-sweep mui-active"></span> -->
  99. </div>
  100. <p>
  101. 提示:填写单号,即可领取799元的代金券和45元运费代金券,机器无法寄回的用户,请联系客服。
  102. </p>
  103. </div>
  104. </div>
  105. </div>
  106. <div class="return">
  107. <span onClick="gotoTop(0.1,10);return false;" class="mui-icon-extra mui-icon-extra-top"></span>
  108. </div>
  109. <!-- 加载ing -->
  110. <div class="loading covers">
  111. <div class="loading-bj"></div>
  112. <p>加载中...</p>
  113. </div>
  114. <!-- 加载ing END -->
  115. <script src="js/mui.min.js"></script>
  116. <script src="js/jquery-2.1.1.min.js"></script>
  117. <script src="js/main.js"></script>
  118. <!-- <script src="js/wechat-utils-1.0.js"></script> -->
  119. <script>
  120. window.addEventListener('pageshow', function(e) {
  121. // 通过persisted属性判断是否存在 BF Cache
  122. if(e.persisted) {
  123. location.reload();
  124. }
  125. });
  126. mui.ready(function() {
  127. var currentDate = new Date(2019, 3, 18, 23, 59, 59, 0);
  128. var newDate = new Date();
  129. if(currentDate <= newDate){
  130. mui.alert("本次活动已经结束,期待您的下次参与!",'提示',function () {
  131. location.href = 'index.html';
  132. });
  133. return false;
  134. }
  135. $.ajax( base_path + '/wechat/coupon/isRecCouRen?dates=' + new Date().getTime(),{
  136. data :{
  137. couponId : 20000
  138. },
  139. dataType:'json',
  140. type:'post',
  141. xhrFields: {
  142. withCredentials: true
  143. },
  144. crossDomain: true,
  145. timeout:15000,
  146. success:function(dt){
  147. console.log(dt);
  148. if(dt.isRedirect) {
  149. location.href = dt.redirectURL;
  150. } else {
  151. if(dt.status){
  152. if(dt.data > 0){
  153. mui.alert("您已领取换新代金券,可在“会员中心—券包”查看。点击下方确定,马上换新选购吧。",'提示',function () {
  154. location.href = 'pro-details.html?productId=39';
  155. });
  156. }
  157. }
  158. }
  159. },
  160. error:function(xhr,type,errorThrown){
  161. //异常处理;
  162. console.log(xhr);
  163. }
  164. });
  165. var slider = mui("#slider");
  166. slider.slider({
  167. interval: 0
  168. });
  169. $(".loading").hide().css("opacity", "0");
  170. });
  171. //立即领取
  172. $(document).on('tap', '.my-btn-receive', function() {
  173. if($("#ipt-scan").val()!=''){
  174. $.ajax( base_path + '/wechat/coupon/recCouRen?dates=' + new Date().getTime(),{
  175. data :{
  176. couponId : 20000
  177. },
  178. dataType:'json',
  179. type:'post',
  180. xhrFields: {
  181. withCredentials: true
  182. },
  183. crossDomain: true,
  184. timeout:15000,
  185. success:function(dt){
  186. console.log(dt);
  187. if(dt.isRedirect) {
  188. location.href = dt.redirectURL;
  189. } else {
  190. if(dt.status){
  191. mui.alert('恭喜您已领取换新代金券,可在“会员中心—券包”查看。点击下方确定,马上换新选购吧。','提示',function () {
  192. location.href = 'pro-details.html?productId=39';
  193. });
  194. }else{
  195. mui.alert("您已领取换新代金券,可在“会员中心—券包”查看。点击下方确定,马上换新选购吧。",'提示',function () {
  196. location.href = 'index.html';
  197. });
  198. }
  199. }
  200. },
  201. error:function(xhr,type,errorThrown){
  202. //异常处理;
  203. console.log(xhr);
  204. mui.alert("领取失败!网络错误");
  205. }
  206. });
  207. }else{
  208. mui.alert("请输入寄回冲奶机的物流单号!")
  209. }
  210. });
  211. //扫码
  212. $(document).on('tap', '#ipt-scan', function() {
  213. wx.scanQRCode({
  214. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  215. scanType: ["barCode"], // 可以指定扫二维码qrCode还是一维码,默认二者都有
  216. success: function(res) {
  217. var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
  218. var serial = result.split(",");
  219. $("#ipt-scan").text(serial[serial.length-1]);
  220. }
  221. });
  222. });
  223. //绑定滚动条事件
  224. $(window).on("scroll", function() {
  225. //向下滚动距离大于180像素显示返回顶部,否则隐藏
  226. if($(window).scrollTop() > 180) {
  227. $(".return").show();
  228. } else {
  229. $(".return").hide();
  230. }
  231. });
  232. $(document).on('tap', '.link-updown', function() {
  233. if($(this).find(".mui-icon-arrowup").length>0){
  234. $(".box-content").css("height","87px");
  235. $(this).html('展开<span class="mui-icon mui-icon-arrowdown"></span>');
  236. }else{
  237. $(".box-content").css("height","auto");
  238. $(this).html('收起<span class="mui-icon mui-icon-arrowup"></span>');
  239. }
  240. });
  241. </script>
  242. </body>
  243. </html>