gift_card_exchange_details.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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/style.css" />
  12. <style>
  13. .mui-table-view:after{display: none;}
  14. .mui-table-view.mui-grid-view .mui-table-view-cell {padding: 10px 0 0 12px;}
  15. .abs-left{position: absolute;left: 20px;top: 20px;color: #fff;}
  16. .abs-left h6{color: #f0f0f0;margin-top: 0;}
  17. .center-middle{position: absolute;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);color: #fff;font-size: 24px;}
  18. .abs-right{position: absolute;right: 15px;bottom: 12px;color: #f0f0f0;font-size: 14px;}
  19. article, section, time, aside {display: block;}
  20. .point-time {content: "";position: absolute;width: 13px;height: 13px;top: 12px;left: 20px;background: #1c87bf;margin-left: -4px;border-radius: 50%;box-shadow: 0 0 0 4px #fff;}
  21. .point-blue {background-color: #33c8ff;border: 2px solid rgba(193,238,255,.9);}
  22. .point-green {background-color: #23d8b1;border: 2px solid rgba(189,243,231,.9);}
  23. .point-yellow {background-color: #ff9c72;border: 2px solid rgba(255,214,197,.9);}
  24. .point-purple {background-color: #678dfc;border: 2px solid rgba(209,221,254,.9);}
  25. .point-purple1 {background-color: #96acfb;border: 2px solid rgba(209,221,254,.9);}
  26. .content {width: 100%;margin: 0 auto;}
  27. .content article {position: relative;}
  28. .content article section {padding:5px 0;height: 60px;position: relative;}
  29. .content article section:before {content: "";width: 3px;top: 17px;bottom: -17px;left: 21px;background: #e6e6e6;position: absolute;}
  30. .content article section:last-child:before {display: none;}
  31. .content article section aside {color: #3a3a38;padding-bottom: 15px;margin-right: 10px;}
  32. .content article section .brief {color: #9f9f9f;}
  33. .left-bottom{position: absolute;left:20px;bottom:12px;font-size:14px;color:#fff;}
  34. a{color: #57c1dc;}
  35. .bgcolor-1{height:45vw;background:url(//s.iamberry.com/watero/images/shop/gift-card-detail-1.jpg) top center no-repeat;background-size: 100% 100%;}
  36. .bgcolor-2{height:45vw;background:url(//s.iamberry.com/watero/images/shop/gift-card-detail-2.jpg) top center no-repeat;background-size: 100% 100%;}
  37. /*.mui-card-footer:after{content: '';position: absolute;left: 50%;top: 25%;width: 1px;height: 50%;background: #70D8EB;-webkit-transform: scaleX(.5);}*/
  38. .mui-card-footer {padding: 0 15%;}
  39. .my-btn-blue{background-color: #70d8ec;border:0;color:#fff;}
  40. </style>
  41. <script>
  42. // 屏蔽分享
  43. window.hiddenAllWechatMenu = true;
  44. </script>
  45. </head>
  46. <body style="background: #fff;">
  47. <div class="loading-bg">
  48. <div class="mui-loading">
  49. <div class="mui-spinner">
  50. </div>
  51. &nbsp;&nbsp;加载中...
  52. </div>
  53. </div>
  54. <div class="mui-content" style="background: #fff;">
  55. <ul class="mui-table-view mui-grid-view">
  56. <li class="mui-table-view-cell mui-media mui-col-xs-12">
  57. <div class="mui-card">
  58. <div class="mui-card-header mui-card-media bgcolor-1">
  59. <span class="center-middle" id="pwd">*******</span>
  60. <span class="left-bottom" id="add-time"></span>
  61. <span class="abs-right" id="status"></span>
  62. </div>
  63. </div>
  64. </li>
  65. </ul>
  66. <div class="content">
  67. <article id="time-list">
  68. <!-- <section>
  69. <span class="point-time point-yellow"></span>
  70. <aside>
  71. <p class="things">
  72. 获取时间:2017-12-01 18:50:03
  73. </p>
  74. </aside>
  75. </section>
  76. <section>
  77. <span class="point-time point-blue"></span>
  78. <aside>
  79. <p class="things">
  80. 售出时间:2017-12-12 16:30:02
  81. </p>
  82. </aside>
  83. </section>
  84. <section>
  85. <span class="point-time point-green"></span>
  86. <aside>
  87. <p class="things">
  88. 兑换时间:2017-12-16 09:30:02
  89. </p>
  90. </aside>
  91. </section>
  92. <section>
  93. <span class="point-time point-purple"></span>
  94. <aside>
  95. <p class="things">
  96. <div style="display:inline-block;width: auto; height: 40px;line-height: 40px;float: left;">兑换产品:</div><img style="border: 1px solid rgba(0,0,0,.1);padding: 2px;float: left;border-radius: 5px;" width="30px" src="//s.iamberry.com/watero/images/cp-1.jpg" /><div style="display:inline-block;width:auto;height: 40px;float: left;margin-left:10px ;">美国watero<br/>净饮水一体机</div>
  97. </p>
  98. </aside>
  99. </section>
  100. <section>
  101. <span class="point-time point-purple1"></span>
  102. <aside>
  103. <p class="things">
  104. 兑换状态:已发货
  105. </p>
  106. </aside>
  107. </section> -->
  108. </article>
  109. </div>
  110. <div class="mui-content-padded mui-text-center">
  111. <button type="button" class="mui-btn my-btn-blue" id="btn-back">返回代理中心</button>
  112. </div>
  113. </div>
  114. <script src="/js/mui.min.js"></script>
  115. <script src="/js/jquery-2.1.1.min.js"></script>
  116. <script src="/js/shop/main.js"></script>
  117. <script src="/js/shop/wechat-utils-1.0.js"></script>
  118. <script type="text/javascript">
  119. var name=getParam('name'),psw=getParam('psw');
  120. mui.ready(function(){
  121. mui.ajax(base_path + '/giftCard/card/exchangDetails?dates=' + new Date().getTime(), {
  122. data: {"cardPwd":psw},
  123. dataType: 'json',
  124. type: 'post',
  125. timeout: 15000,
  126. success: function(dt) {
  127. console.log(dt);
  128. if(dt.isRedirect) {
  129. location.href = dt.redirectURL;
  130. } else {
  131. if(dt.returnCode=="200" && dt.resultCode=="200"){
  132. $("#add-time").text(formatDate(dt.returnMsg.card.cardCreateDate));
  133. $("#pwd").text(psw);
  134. var status='';
  135. if(typeof(dt.returnMsg.card.cardPassword)!="undefined"){
  136. if (dt.returnMsg.card.cardStatus == 2) {
  137. status='已提货';
  138. $(".mui-card-header").removeClass("bgcolor-1").addClass("bgcolor-2");
  139. } else if (dt.returnMsg.card.cardStatus == 1) {
  140. status='待提货';
  141. $(".mui-card").append('<div class="mui-card-footer"><a class="myactive" style="width: 100%;" name="'+dt.returnMsg.card.cardPassword+'" id="'+dt.returnMsg.card.cardId+'">申请提货</a><!--<a class="mui-card-link btn-tixian" id="'+dt.returnMsg.card.cardId+'">申请兑现</a> --></div>');
  142. } else if (dt.returnMsg.card.cardStatus == 3){
  143. status='已兑现';
  144. $(".mui-card-header").removeClass("bgcolor-1").addClass("bgcolor-2");
  145. }
  146. $("#status").text(status);
  147. }
  148. var table = $('#time-list'),str='';
  149. var cl='';
  150. switch (dt.returnMsg.card.machineColor){
  151. case "品蓝":
  152. cl='cp-1.jpg'
  153. break;
  154. case "西瓜红":
  155. cl='cp-4.jpg'
  156. break;
  157. case "苹果绿":
  158. cl='cp-3.jpg'
  159. break;
  160. case "品黑":
  161. cl='cp-2.jpg'
  162. break;
  163. default:
  164. break;
  165. }
  166. if(typeof(dt.returnMsg.card.cardCreateDate)!="undefined"){
  167. str+='<section><span class="point-time point-yellow"></span><aside><p class="things">获取时间:'+formatDate(dt.returnMsg.card.cardCreateDate)+'</p></aside></section>';
  168. }
  169. if(typeof(dt.returnMsg.card.cardSalesDate)!="undefined"){
  170. str+='<section><span class="point-time point-blue"></span><aside><p class="things">提货时间:'+formatDate(dt.returnMsg.card.cardSalesDate)+'</p></aside></section>'
  171. }
  172. var u_str='';
  173. if(typeof(dt.returnMsg.card.cardUseDate)!="undefined"){
  174. var postName = dt.returnMsg.card.userMachinePostName == "sto"? "申通快递" : "其它快递";
  175. u_str='<section><span class="point-time point-purple1"></span><aside><p class="things">收货信息:'+dt.returnMsg.card.userMachineAddressName+dt.returnMsg.card.userMachineAddressTel+'<br/>'+dt.returnMsg.card.userMachineAddressInfo+'</p><a class="mui-pull-right show_post_info" style="margin-top:-20px;" postfirm="' + dt.returnMsg.card.userMachinePostName + '" postnum="' + dt.returnMsg.card.userMachinePostNum + '" gourl="/watero/view/gift_card_exchange_details.html?psw=' + getParam("psw")+'">查看物流</a><p>' + postName + '&nbsp;&nbsp;&nbsp;'+dt.returnMsg.card.userMachinePostNum+'</p></aside></section>';
  176. var m_Status='',sdata='';
  177. if(dt.returnMsg.card.machineStatus==1){
  178. m_Status='待发货';
  179. }else{
  180. m_Status='已发货';
  181. }
  182. if (dt.returnMsg.card.cardSalesStatus == 2 && dt.returnMsg.card.cardStatus == 3){
  183. sdata='兑现';
  184. }else{
  185. sdata='提货';
  186. }
  187. str+='<section><span class="point-time point-green"></span><aside><p class="things">'+sdata+'时间:'+formatDate(dt.returnMsg.card.cardUseDate)+'</p></aside></section><section><span class="point-time point-purple"></span><aside><p class="things"><img style="border: 1px solid rgba(0,0,0,.1);padding: 3px;float: left;border-radius: 5px;" width="35px" src="//s.iamberry.com/watero/images/'+cl+'" />美国watero<br/>净饮水一体机</p></aside></section>'+u_str+'<section><span class="point-time point-purple1"></span><aside><p class="things">提货状态:'+m_Status+'</p></aside></section>';
  188. }
  189. table.append(str);
  190. $(document).on('tap', '.btn-tixian', function() {
  191. var th=$(this).attr('id');
  192. if(typeof(th)!="undefined"){
  193. mui.ajax(base_path + '/giftCard/card/applyCash?dates=' + new Date().getTime(), {
  194. data: {
  195. cardId: th
  196. },
  197. dataType: 'json',
  198. type: 'post',
  199. timeout: 15000,
  200. success: function(dt) {
  201. mui.alert(dt.message);
  202. },
  203. error: function(xhr, type, errorThrown) {
  204. console.log(xhr)
  205. }
  206. });
  207. }
  208. });
  209. $(document).on('tap', '.myactive', function() {
  210. mui.openWindow({
  211. url: '/watero/view/gift_card_user_exchange.html?cardPwd='+psw
  212. });
  213. });
  214. }else{
  215. mui.alert(dt.resultMsg);
  216. }
  217. }
  218. },
  219. error: function(xhr, type, errorThrown) {
  220. console.log(xhr)
  221. }
  222. });
  223. document.querySelector('.loading-bg').style.display='none';
  224. });
  225. mui('body').on('tap', '#btn-back', function() {
  226. mui.openWindow({url:base_path+'/giftCard/card/agencyUI'})
  227. });
  228. </script>
  229. </body>
  230. </html>