vip_center.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  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. <link rel="stylesheet" type="text/css" href="css/vip_center.css" />
  13. <script>
  14. // 屏蔽分享
  15. window.hiddenAllWechatMenu = true;
  16. </script>
  17. </head>
  18. <body style="background: #fff;">
  19. <div class="loading-bg">
  20. <div class="mui-loading">
  21. <div class="mui-spinner">
  22. </div>
  23. &nbsp;&nbsp;加载中...
  24. </div>
  25. </div>
  26. <nav class="mui-bar mui-bar-tab" id="footer-bar">
  27. <a class="mui-tab-item" >
  28. <div class="iconfont icon-shouye"></div>
  29. <span class="mui-tab-label">首页</span>
  30. </a>
  31. <a class="mui-tab-item">
  32. <div class="iconfont icon-gouwuche"><span class="mui-badge">0</span></div>
  33. <span class="mui-tab-label">购物车</span>
  34. </a>
  35. <a class="mui-tab-item">
  36. <div class="iconfont icon-dingdan"></div>
  37. <span class="mui-tab-label">订单</span>
  38. </a>
  39. <a class="mui-tab-item mui-active">
  40. <div class="iconfont icon-wode"></div>
  41. <span class="mui-tab-label">我的</span>
  42. </a>
  43. </nav>
  44. <div class="mui-content" style="background: #fff;">
  45. <div class="vip-tt">
  46. <!-- <img src="/iamberry/common/shop/images/member_photo-bg_2.png"> -->
  47. <div class="tx bg-orange" id="headDiv">
  48. <img src="images/logo_head.png" id="userHead">
  49. </div>
  50. <div class="nikname">
  51. <div>
  52. <span id="userNickname">水时代</span>
  53. </div>
  54. <div >
  55. <span id="vipName">普通用户</span>
  56. <!--<span class="go_daili_2wm" id="2WM" style="display:none">立即分享二维码 ></span>-->
  57. <span class="see-rights">查看权益<span class="mui-icon mui-icon-arrowright" style="font-size: 18px;"></span></span>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="vip-show">
  62. 凡购买滤芯套装,立减100元/套,结算时系统自动减免
  63. </div>
  64. <br />
  65. <ul class="mui-table-view my-view-order">
  66. <li class="mui-table-view-cell">
  67. <a class="mui-navigate-right">
  68. <span class="mui-badge">查看全部</span>
  69. 我的订单
  70. </a>
  71. </li>
  72. </ul>
  73. <div style="padding:0 0 20px 0;background: #fff;">
  74. <div id="menu-order" class="mui-segmented-control">
  75. <a class="mui-control-item go_pay_count">
  76. <div class="iconfont icon-daifukuan"></div>
  77. 待付款
  78. </a>
  79. <a class="mui-control-item go_pay_ping">
  80. <div class="iconfont icon-pindan"></div>
  81. 拼单中
  82. </a>
  83. <a class="mui-control-item go_deliver_count">
  84. <div class="iconfont icon-daifahuo"></div>
  85. 待发货
  86. </a>
  87. <a class="mui-control-item go_delivered_count">
  88. <div class="iconfont icon-yifahuo"></div>
  89. 已发货
  90. </a>
  91. <!--<a class="mui-control-item go_all_count">
  92. <div class="iconfont icon-alldingdan"></div>
  93. 全部订单
  94. </a>-->
  95. </div>
  96. </div>
  97. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-center-no" id="center-menu" >
  98. <li class="mui-table-view-cell" href="coupon_bag.html?tabindex=10">
  99. <div class="mui-table">
  100. <div class="mui-table-cell mui-col-xs-5 table-middle">
  101. 我的券包
  102. </div>
  103. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  104. <span class="mui-icon mui-icon-arrowright"></span>
  105. </div>
  106. </div>
  107. </li>
  108. <li class="mui-table-view-cell" href="faq.html">
  109. <div class="mui-table">
  110. <div class="mui-table-cell mui-col-xs-5">
  111. 常见问答
  112. </div>
  113. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  114. <span class="mui-icon mui-icon-arrowright"></span>
  115. </div>
  116. </div>
  117. </li>
  118. <li class="mui-table-view-cell" href="after_service_watero.html">
  119. <div class="mui-table">
  120. <div class="mui-table-cell mui-col-xs-5">
  121. 售后服务
  122. </div>
  123. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  124. <span class="mui-icon mui-icon-arrowright"></span>
  125. </div>
  126. </div>
  127. </li>
  128. <li class="mui-table-view-cell" href="tel:400-8006692">
  129. <div class="mui-table">
  130. <div class="mui-table-cell mui-col-xs-5">
  131. 客服电话
  132. </div>
  133. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  134. <!--<span class="mui-h5" style="position: absolute;width: 100px;right: 25px;top: 2px;">400-8006692</span>-->
  135. <span class="mui-icon mui-icon-arrowright"></span>
  136. </div>
  137. </div>
  138. </li>
  139. <li class="mui-table-view-cell" href="coupon_dec.html" id="coupon-sys" style="display: none;">
  140. <div class="mui-table">
  141. <div class="mui-table-cell mui-col-xs-5">
  142. 滤芯兑换券
  143. </div>
  144. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  145. <span class="mui-h5" style="position: absolute;width: 100px;right: 25px;top: 3px;">使用说明</span><span class="mui-icon mui-icon-arrowright"></span>
  146. </div>
  147. </div>
  148. </li>
  149. </ul>
  150. </div>
  151. <script src="js/mui.min.js"></script>
  152. <script src="js/jquery-2.1.1.min.js"></script>
  153. <script src="js/main.js"></script>
  154. <script src="js/page/wechat-utils-1.0.js"></script>
  155. <!--<script src="js/shop/vip_center.js?v=2017040701"></script>-->
  156. <script>
  157. mui.ready(function() {
  158. marquee_Show();
  159. getCartNum();
  160. $.ajax(base_path + '/agent/member?dates=' + new Date().getTime(), {
  161. dataType: 'json',
  162. type: 'post',
  163. timeout: 15000,
  164. xhrFields: {
  165. withCredentials: true
  166. },
  167. crossDomain: true,
  168. success: function(dt) {
  169. if (dt.isRedirect) {
  170. location.href = dt.redirectURL;
  171. } else {
  172. var data = dt.data;
  173. if(dt.status) {
  174. if(data.userHead != null && typeof(data.userHead) != "undefined" && data.userHead != '') {
  175. var imgObj = $("<img src='" + data.userHead + "?" + new Date().getTime() + "'/>");
  176. $("#headDiv").empty().append(imgObj)
  177. }
  178. if(data.userNickname != null && typeof(data.userNickname) != "undefined" && data.userNickname != '') {
  179. $("#userNickname").html(decodeURI(data.userNickname))
  180. }
  181. var userNickname = $("#userNickname").html();
  182. if(data.userIsVip == 2) {
  183. //$("#2WM").show();
  184. if(userNickname != "") {
  185. $("#userNickname").html(userNickname )
  186. $("#vipName").html('<img style="width: 12px;" src="images/s-vip.png" /><span class="mui-h6">VIP用户</span>');
  187. }
  188. $(".vip-show,#coupon-sys").show();
  189. } else {
  190. if(userNickname != "") {
  191. $("#userNickname").html(userNickname)
  192. $("#vipName").html('<span class="mui-h6">普通用户</span>');
  193. $(".see-rights").hide();
  194. }
  195. }
  196. $.ajax({
  197. type: 'post',
  198. url: base_path + '/probationOrder/membersProbationOrder',
  199. data: {},
  200. dataType: 'json',
  201. timeout: 15000,
  202. xhrFields: {
  203. withCredentials: true
  204. },
  205. crossDomain: true,
  206. success: function(dts) {
  207. if (dt.isRedirect) {
  208. location.href = dt.redirectURL;
  209. } else {
  210. if(dts.status) {
  211. var str = '';
  212. if(dts.data.probationOrderDtoList.length == 0) {
  213. $("#try_order_list").hide()
  214. }
  215. mui(dts.data.probationOrderDtoList).each(function(index) {
  216. switch(this.probationStatus) {
  217. case 1:
  218. str = "待派送";
  219. break;
  220. case 2:
  221. str = "派送中";
  222. break;
  223. case 3:
  224. str = "待支付";
  225. break;
  226. case 4:
  227. str = "暂停试用";
  228. break;
  229. case 5:
  230. str = "支付完成";
  231. break;
  232. default:
  233. str = "订单关闭";
  234. break
  235. }
  236. var str1 = '',
  237. str2 = '';
  238. if(str == "待支付") {
  239. str1 = '<a data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="正在支付" class="mui-btn try-btn-pay mui-pull-right" style="margin-right: 12px;" proid="' + this.probationOrderid + '">立即支付</a>';
  240. str2 = '<div>试用剩余时间:<span id="time_out' + (index + 1) + '"></span></div>'
  241. }
  242. $("#try_order_list").append('<li class="mui-table-view-cell mui-media"><a class="go_try_order" proid="' + this.probationOrderid + '" style="margin-left: -20px;"><span class="mui-media-object mui-pull-left wh-80"><img src="' + this.productIntroduceImg + '"></span><div class="mui-media-body center-middle"><div>' + str + '</div><div>订单号:' + this.probationOrderid + '</div>' + str2 + '</div></a><div class="btn-box">' + str1 + '</div></li>');
  243. if(str == "待支付") {
  244. addTimer('time_out' + (index + 1), this.probationRemainingTime / 1000)
  245. }
  246. })
  247. } else {
  248. mui.alert(dts.data.message)
  249. }
  250. }
  251. },
  252. error: function(xhr, type, errorThrown) {
  253. console.log(xhr);
  254. mui.alert("请检查网络或刷新页面重试!")
  255. }
  256. });
  257. document.querySelector('.loading-bg').style.display = 'none'
  258. } else {
  259. var btnArray = ['否', '是'];
  260. mui.confirm(dt.message, '提示', btnArray, function(e) {
  261. if(e.index == 1) {
  262. location.reload(true)
  263. }
  264. })
  265. }
  266. }
  267. },
  268. error: function(xhr, type, errorThrown) {
  269. console.log(xhr)
  270. }
  271. });
  272. if(marquee != '') {
  273. $('body').append('<div class="marquee-show"><div></div></div>')
  274. }
  275. });
  276. var isPay = true;
  277. mui('body').on('tap', '.try-btn-pay', function() {
  278. var th = this;
  279. if(isPay) {
  280. mui(this).button('loading');
  281. isPay = false;
  282. $.ajax({
  283. type: 'post',
  284. url: base_path + '/probation/pay',
  285. data: {
  286. "orderId": th.getAttribute("proid")
  287. },
  288. dataType: 'json',
  289. timeout: 15000,
  290. xhrFields: {
  291. withCredentials: true
  292. },
  293. crossDomain: true,
  294. success: function(dt) {
  295. if (dt.isRedirect) {
  296. location.href = dt.redirectURL;
  297. } else {
  298. if(dt.status) {
  299. var obj = JSON.parse("{" + dt.data.info + "}");
  300. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  301. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  302. $.ajax({
  303. type: 'post',
  304. url: base_path + '/probation/check_probation_pay_success',
  305. data: {
  306. "orderId": th.getAttribute("proid")
  307. },
  308. dataType: 'json',
  309. timeout: 15000,
  310. xhrFields: {
  311. withCredentials: true
  312. },
  313. crossDomain: true,
  314. success: function(data) {
  315. if (dt.isRedirect) {
  316. location.href = dt.redirectURL;
  317. } else {
  318. if(data.status) {
  319. if(data.data == 5) {
  320. mui.alert("支付成功", '', function() {
  321. mui.openWindow({
  322. url: base_path + '/probation/try_order?orderId=' + th.getAttribute("proid")
  323. })
  324. })
  325. } else {
  326. mui.alert(data.message, '', function() {
  327. mui(th).button('reset')
  328. })
  329. }
  330. } else {
  331. mui(th).button('reset');
  332. mui.alert(data.message)
  333. }
  334. }
  335. },
  336. error: function(xhr, type, errorThrown) {
  337. isPay = true;
  338. console.log(xhr);
  339. mui(th).button('reset');
  340. mui.alert("请检查网络或刷新页面重试!")
  341. }
  342. })
  343. } else {
  344. isPay = true;
  345. mui(th).button('reset');
  346. mui.alert("对不起,支付失败!请稍后重试!")
  347. }
  348. })
  349. } else {
  350. mui(th).button('reset');
  351. mui.alert(dt.message)
  352. }
  353. }
  354. },
  355. error: function(xhr, type, errorThrown) {
  356. isPay = true;
  357. console.log(xhr);
  358. mui(th).button('reset');
  359. mui.alert("请检查网络或刷新页面重试!")
  360. }
  361. })
  362. } else {
  363. mui.alert("正在请求支付中~~请稍后!");
  364. return
  365. }
  366. });
  367. var addTimer = function() {
  368. var list = [],
  369. interval;
  370. return function(id, time) {
  371. if(!interval) {
  372. interval = setInterval(go, 1000)
  373. }
  374. list.push({
  375. ele: document.getElementById(id),
  376. time: time
  377. })
  378. };
  379. function go() {
  380. for(var i = 0; i < list.length; i += 1) {
  381. list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);
  382. if(!list[i].time) {
  383. list.splice(i--, 1)
  384. }
  385. }
  386. }
  387. function getTimerString(time) {
  388. d = Math.floor(time / 86400), h = Math.floor((time % 86400) / 3600), m = Math.floor(((time % 86400) % 3600) / 60), s = Math.floor(((time % 86400) % 3600) % 60);
  389. if(time > 0) {
  390. return d + "天" + h + "时" + m + "分" + s + "秒"
  391. } else {
  392. return "试用已结束"
  393. }
  394. }
  395. }();
  396. $(document).on('tap', '#center-menu>li', function() {
  397. var href = $(this).attr("href");
  398. location.href =href;
  399. });
  400. $(document).on('tap', '.see-rights', function() {
  401. location.href ='member_benefits.html';
  402. });
  403. </script>
  404. </body>
  405. </html>