replace_point.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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.iamberry.com/tooth/css/mui.min.css?v=2017101701" />
  10. <link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/iconfont.css?v=2017101701" />
  11. <link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/style.css?v=2017101701" />
  12. <style>
  13. .yuan{width: 100px;height: 100px;margin: 50px auto;border-radius: 50%;border:3px solid #a6e7fe;line-height: 100px;position: relative;color: #3ba7c9;}
  14. .yuan:before{content: '';position: absolute;width: 1px;height: 30px;left: 50%;top: -40px;background-color: rgba(0,0,0,.1);}
  15. .yuan:after{content: '';position: absolute;width: 1px;height: 30px;left: 50%;bottom: -40px;background-color: rgba(0,0,0,.1);}
  16. .price{position: relative;font-size: 50px;color: #54c0dc;padding-left: 5px;height: 70px;}
  17. .price:after{content: '¥';position: absolute;left: 0;top:30px;color: #54c0dc;font-size: 16px;}
  18. .btn-send{width: 70px;height: 70px;position: absolute;right: 18px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-radius: 50%;color:#54c0dc;background-color: #fff;line-height: 70px;}
  19. .content1{position: absolute;left: 120px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%); color: #54c0dc;text-align: left;}
  20. .couponbox{padding: 0 10px;position: relative;margin: 15px 0;display: none;}
  21. .mui-popup.mui-popup-in{height: 360px;background: url(http://static.iamberry.com/images/shop/yhq_dlg_bg.png) center top /100% no-repeat;}
  22. .mui-popup-inner{background-color: transparent;margin-top: 80px;padding: 15px 15px 5px 15px;position: static;}
  23. .mui-popup-title{font-size: 16px;color: #939393;}
  24. .mui-popup-title+.mui-popup-text{margin-top: 15px;}
  25. .mui-popup-text strong{color: #fc5b8b;font-size:20px;}
  26. .mui-popup-text span{color: #fc5b8b;font-size: 30px;}
  27. .mui-popup-button{background-color: transparent;}
  28. .mui-popup-button:after,.mui-popup-inner:after{display: none;}
  29. .mui-popup-button:last-child{border-radius: 25px;background: #f44f80;height: 38px;line-height: 40px;font-weight: 100;color: #fff;width: 50%;margin: 10px auto;}
  30. .mui-popup-button:last-child:active{background: #fc5b8b;}
  31. .mui-popup-button:first-child{border-radius: 25px;background: #fff;height: 38px;line-height: 40px;font-weight: 100;color:#ed376c;width: 50%;margin: 10px auto;border:1px solid #ed376c}
  32. .mui-popup-button:first-child:active{background: #c9c9c9;}
  33. .mui-popup-buttons{display: block;}
  34. .x-close{position: absolute;right:32px;top: 0;width:20px;}
  35. .mui-popup.mui-popup-out{-webkit-transition-duration: 0ms;transition-duration: 0ms;}
  36. .no_yhq{text-align: center;position:absolute;left:0;top:50%;width:100%;display: none;-webkit-transform: translateY(-70%);transform: translateY(-70%);}
  37. .no_yhq img{width:33%;}
  38. </style>
  39. <script type="text/javascript">
  40. // 屏蔽分享
  41. window.hiddenAllWechatMenu = true;
  42. </script>
  43. </head>
  44. <body style="background: #fff;">
  45. <div class="loading-bg">
  46. <div class="mui-loading">
  47. <div class="mui-spinner">
  48. </div>
  49. &nbsp;&nbsp;加载中...
  50. </div>
  51. </div>
  52. <div class="mui-content" style="background: #fff;">
  53. <div style="height: 200px; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#34a3c5), to(#75cbe8));">
  54. <div style="width: 100px;margin: 0 auto;padding: 20px 0 15px 0;">
  55. <img width="100px" src="/tooth/common/shop/images/tx-4.png" />
  56. </div>
  57. <div style="color: #fff;text-align: center;">
  58. 亲,您的牙刷刷头已经使用3个月 <br/>定期更换刷头,可有效防止细菌滋生
  59. </div>
  60. </div>
  61. <div class="mui-text-center" style="padding: 10px 0;">
  62. <h5 id="hintCreateTime">1900-01-01</h5>
  63. <div>开始使用</div>
  64. <div class="yuan">
  65. 三个月
  66. </div>
  67. <h5 id="hintTime">1900-01-01</h5>
  68. <div>需要更换</div>
  69. <div class="couponbox">
  70. <img width="100%" src="/tooth/common/shop/images/quan-bg3.png" />
  71. <div style="position: absolute;left: 45px;top: 50%;-webkit-transform: translateY(-50%);"><span class="price">0</span></div>
  72. <div class="content1">
  73. <div>仅供购买刷头使用</div>
  74. <div style="font-size: 12px;">限量100份</div>
  75. </div>
  76. <div class="btn-send">立即领取</div>
  77. </div>
  78. </div>
  79. </div>
  80. <script src="//s.iamberry.com/tooth/js/mui.min.js?v=2017101701"></script>
  81. <script src="//s.iamberry.com/tooth/js/jquery-2.1.1.min.js"></script>
  82. <script src="//s.iamberry.com/tooth/js/shop/main.js?v=2017101701"></script>
  83. <!--<script src="//s.iamberry.com/tooth/js/shop/wechat-utils-1.0.js"></script>-->
  84. <script type="text/javascript">
  85. var hintId=getParam("hintId");
  86. var couponTypeId='';
  87. mui.ready(function(){
  88. mui.ajax(base_path + '/agentTooth/select_order_hint?dates=' + new Date().getTime(), {
  89. data:{"hintId":hintId},
  90. dataType: 'json',
  91. type: 'post',
  92. timeout: 15000,
  93. success: function(dt) {
  94. //console.log(dt)
  95. if(dt.resultCode=="200") {
  96. $("#hintCreateTime").text(formatDate(dt.data.hint.hintCreateTime));
  97. $("#hintTime").text(formatDate(dt.data.hint.hintTime));
  98. coupon(dt.data.couponTypeId);
  99. couponTypeId=dt.data.couponTypeId;
  100. }else{
  101. console.log("获取信息失败!");
  102. }
  103. },
  104. error: function(xhr, type, errorThrown) {
  105. errorfn(xhr)
  106. }
  107. });
  108. document.querySelector('.loading-bg').style.display='none';
  109. });
  110. function coupon(typeId){
  111. var btnArray = ['否', '是'];
  112. mui.ajax(base_path + '/coupon/couponTypeList', {
  113. data: {
  114. "typeId": typeId
  115. },
  116. dataType: 'json',
  117. type: 'post',
  118. timeout: 15000,
  119. success: function(dt) {
  120. //console.log(dt);
  121. if(dt.resultCode=="200") {
  122. if(dt.data.typeList.length>0){
  123. $(".price").text(accDiv(dt.data.typeList[0].couponReduce, 100));
  124. /*$(".btn-send").attr("name",dt.data.typeList[0].couponId);*/
  125. $(".couponbox").show();
  126. }
  127. }
  128. },
  129. error: function(xhr, type, errorThrown) {
  130. console.log(xhr);
  131. }
  132. });
  133. }
  134. //领券
  135. $(document).on('tap','.btn-send',function(){
  136. if(couponTypeId!=''){
  137. mui.ajax(base_path + '/coupon/getCoupon', {
  138. data: {
  139. "couponId": couponTypeId
  140. },
  141. dataType: 'json',
  142. type: 'post',
  143. timeout: 15000,
  144. success: function(dt) {
  145. //console.log(dt);
  146. if(dt.status) {
  147. var btnArray = ['查看优惠券', '立 即 使 用'];
  148. mui.confirm('<span>' + $(".price").text() + '元 </span>优惠券<img class="x-close" src="/tooth/common/shop/images/x.png" />', '恭喜您成功领取一张', btnArray, function(e) {
  149. if(e.index == 1) {
  150. location.href = base_path + '/wxCart/goProductList'
  151. } else {
  152. location.href = base_path + '/couponWechat/couponList'
  153. }
  154. })
  155. } else {
  156. var r = confirm(dt.message);
  157. if(r == true) {
  158. location.reload(true)
  159. }
  160. }
  161. },
  162. error: function(xhr, type, errorThrown) {
  163. if(xhr.readyState == 4 && xhr.status == 200) {} else {
  164. location.href = domanUrl + base_path + "/couponWechat/coupon?dates=" + new Date().getTime()
  165. }
  166. }
  167. });
  168. }
  169. });
  170. </script>
  171. </body>
  172. </html>