vip_center.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  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. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  10. <meta http-equiv="Pragma" content="no-cache" />
  11. <meta http-equiv="Expires" content="0" />
  12. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  13. <meta http-equiv="X-UA-Compatible" content="IE=8">
  14. <meta http-equiv="Cache" content="no-cache">
  15. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  16. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  17. <link rel="stylesheet" type="text/css" href="css/style.css" />
  18. <link rel="stylesheet" type="text/css" href="css/vip_center.css" />
  19. <script>
  20. // 屏蔽分享
  21. window.hiddenAllWechatMenu = true;
  22. </script>
  23. </head>
  24. <body>
  25. <div class="loading-bg">
  26. <div class="mui-loading">
  27. <div class="mui-spinner">
  28. </div>
  29. &nbsp;&nbsp;加载中...
  30. </div>
  31. </div>
  32. <nav class="mui-bar mui-bar-tab" id="footer-bar">
  33. <a class="mui-tab-item ">
  34. <div class="iconfont">
  35. <svg class="icon" aria-hidden="true">
  36. <use xlink:href="#icon-kang-hui"></use>
  37. </svg>
  38. </div>
  39. <span class="mui-tab-label">首页</span>
  40. </a>
  41. <a class="mui-tab-item go_gwc">
  42. <div class="iconfont icon-gouwuche-num">
  43. <svg class="icon" aria-hidden="true">
  44. <use xlink:href="#icon-ji-hui"></use>
  45. </svg>
  46. <span class="mui-badge">0</span>
  47. </div>
  48. <span class="mui-tab-label">购物车</span>
  49. </a>
  50. <a class="mui-tab-item ">
  51. <div class="iconfont">
  52. <svg class="icon" aria-hidden="true">
  53. <use xlink:href="#icon-yi-hui"></use>
  54. </svg>
  55. </div>
  56. <span class="mui-tab-label">订单</span>
  57. </a>
  58. <a class="mui-tab-item mui-active-select">
  59. <div class="iconfont">
  60. <svg class="icon" aria-hidden="true">
  61. <use xlink:href="#icon-W-qing"></use>
  62. </svg>
  63. </div>
  64. <span class="mui-tab-label">我的</span>
  65. </a>
  66. </nav>
  67. <div class="mui-content">
  68. <div class="center-header">
  69. <div class="wecat-head">
  70. <img style="display: block;width: 100%; " src="images/vip-center-bg.jpg" />
  71. <div class="user-head">
  72. <img id="headDiv" class="img_head" src="images/tx-1.jpg" />
  73. </div>
  74. <div id="userNickname">微信用户</div>
  75. <!--<div class="mui-table" style="padding-top: 15px;">
  76. <div class="mui-table-cell amount-div">
  77. <h5 style="font-size: 14px;padding-bottom: 10px;">待入帐</h5>
  78. <div class="cl-red" style="font-size: 20px;">¥<span id="await-amount">0</span></div>
  79. </div>
  80. <div class="mui-table-cell amount-div">
  81. <h5 style="font-size: 14px;padding-bottom: 10px;">可提现</h5>
  82. <div class="cl-red" style="font-size: 20px;">¥<span id="uables-amount">0</span></div>
  83. <div style="width: 1px;height: 30px;background: #ccc;-webkit-transform: scaleX(.3);position: absolute;right: 0;bottom: 5px;"></div>
  84. </div>
  85. </div>-->
  86. </div>
  87. <div class="bottom-vip">
  88. <div class="mui-table">
  89. <div class="mui-table-cell">
  90. <span class="vip-title">WaterO</span> 会员
  91. <div class="vip-line"></div>
  92. <img class="vip-arrow" src="images/v.png" />
  93. </div>
  94. <div class="mui-table-cell join-vip mui-text-right">
  95. <span class="vip-l">
  96. <span class="vip-note" type="1">成为会员</span>
  97. <i class="mui-icon mui-icon-arrowright" style="font-size: 17px;margin-left: 5px;"></i>
  98. </span>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="center-content">
  104. <div class="mui-table mui-text-center my-count">
  105. <div class="mui-table-cell go-integral-center">
  106. <strong class="user-integeal">0</strong>
  107. <p>积分</p>
  108. </div>
  109. <div class="mui-table-cell go-coupon-bag" >
  110. <strong class="user-count">0</strong>
  111. <p>券包</p>
  112. </div>
  113. <div class="mui-table-cell go-coupon-bag-2">
  114. <strong class="user-vip-count">0</strong>
  115. <p>会员专享</p>
  116. </div>
  117. </div>
  118. <div class="order-box">
  119. <ul class="mui-table-view">
  120. <li class="mui-table-view-cell" style="padding: 11px 15px 5px 15px;">
  121. 我的订单
  122. <!--<a class="mui-navigate-right">
  123. <span class="mui-badge">查看全部</span> 我的订单
  124. </a>-->
  125. </li>
  126. </ul>
  127. <div>
  128. <div id="menu-order" class="mui-segmented-control">
  129. <a class="mui-control-item go_pay_count">
  130. <div class="iconfont icon-daifukuan"></div>
  131. 待付款
  132. </a>
  133. <!--<a class="mui-control-item go_pay_ping">
  134. <div class="iconfont icon-pindan"></div>
  135. 拼单中
  136. </a>-->
  137. <a class="mui-control-item go_deliver_count">
  138. <div class="iconfont icon-daifahuo"></div>
  139. 待发货
  140. </a>
  141. <a class="mui-control-item go_delivered_count">
  142. <div class="iconfont icon-yifahuo"></div>
  143. 已发货
  144. </a>
  145. <a class="mui-control-item go_all_count">
  146. <div class="iconfont icon-dingdan1"></div>
  147. 全部
  148. </a>
  149. </div>
  150. </div>
  151. </div>
  152. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-center-no" id="center-menu">
  153. <li class="mui-table-view-cell" href="vip-info.html">
  154. <div class="mui-table">
  155. <div class="mui-table-cell mui-col-xs-5 table-middle">
  156. 个人信息
  157. </div>
  158. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  159. <span class="mui-icon mui-icon-arrowright"></span>
  160. </div>
  161. </div>
  162. </li>
  163. <li class="mui-table-view-cell" href="faq.html">
  164. <div class="mui-table">
  165. <div class="mui-table-cell mui-col-xs-5">
  166. 常见问答
  167. </div>
  168. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  169. <span class="mui-icon mui-icon-arrowright"></span>
  170. </div>
  171. </div>
  172. </li>
  173. <li class="mui-table-view-cell" href="after_service_watero.html">
  174. <div class="mui-table">
  175. <div class="mui-table-cell mui-col-xs-5">
  176. 售后服务
  177. </div>
  178. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  179. <span class="mui-icon mui-icon-arrowright"></span>
  180. </div>
  181. </div>
  182. </li>
  183. <li class="mui-table-view-cell" href="tel:400-8006692">
  184. <div class="mui-table">
  185. <div class="mui-table-cell mui-col-xs-5">
  186. 客服电话
  187. </div>
  188. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  189. <a class="tel" href="tel:400-8006692">400-8006692</a> <span class="mui-icon mui-icon-arrowright"></span>
  190. </div>
  191. </div>
  192. </li>
  193. <!--<li class="mui-table-view-cell" href="coupon_dec.html" id="coupon-sys">
  194. <div class="mui-table">
  195. <div class="mui-table-cell mui-col-xs-5">
  196. 滤芯兑换券
  197. </div>
  198. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  199. <span class="mui-h5" style="position: absolute;width: 100px;right: 25px;top: 3px;">使用说明</span><span class="mui-icon mui-icon-arrowright"></span>
  200. </div>
  201. </div>
  202. </li>-->
  203. </ul>
  204. </div>
  205. </div>
  206. <div class="dalog">
  207. <div>
  208. <div class="tp-box">
  209. <ul>
  210. <li><strong>积分也能当钱花</strong></li>
  211. <li>
  212. <ol>
  213. <li>·注册会员即可获得100积分</li>
  214. <li>·会员专享折扣</li>
  215. <li>·购买产品,享受积分抵扣现金优惠</li>
  216. <li>·积分换购特惠商品权益</li>
  217. <li>·会员专享生日大礼包</li>
  218. </ol>
  219. </li>
  220. <li><button type="button" class="mui-btn btn-see-integral">成为会员</button></li>
  221. </ul>
  222. </div>
  223. <br />
  224. <div class="mui-text-center">
  225. <i class="iconfont icon-guanbi"></i>
  226. </div>
  227. </div>
  228. </div>
  229. <script src="js/mui.min.js"></script>
  230. <script src="js/jquery-2.1.1.min.js"></script>
  231. <script src="js/main.js"></script>
  232. <script src="js/page/wechat-utils-1.0.js"></script>
  233. <script src="js/iconfont.js"></script>
  234. <script>
  235. mui.ready(function() {
  236. marquee_Show();
  237. getCartNum();
  238. $.ajax(base_path + '/user/member?dates=' + new Date().getTime(), {
  239. dataType: 'json',
  240. type: 'post',
  241. timeout: 15000,
  242. xhrFields: {
  243. withCredentials: true
  244. },
  245. crossDomain: true,
  246. success: function(dt) {
  247. if(dt.isRedirect) {
  248. location.href = dt.redirectURL;
  249. } else {
  250. var data = dt.data;
  251. if(dt.status) {
  252. if(data.userHead != null && typeof(data.userHead) != "undefined" && data.userHead != '') {
  253. // var imgObj = $("<img src='" + data.userHead + "?" + new Date().getTime() + "'/>");
  254. // $("#headDiv").empty().append(imgObj)
  255. $(".img_head").attr("src",data.userHead)
  256. }
  257. if(data.userNickname != null && typeof(data.userNickname) != "undefined" && data.userNickname != '') {
  258. $("#userNickname").html(decodeURI(data.userNickname))
  259. }
  260. $(".user-integeal").text(data.userSurplusIntegral);
  261. $(".user-count").text(data.couponCount);
  262. if(data.couponVipCount == null || data.couponVipCount == ""){
  263. $(".user-vip-count").text(1);
  264. }else{
  265. $(".user-vip-count").text(data.couponVipCount+1);
  266. }
  267. // var userNickname = $("#userNickname").html();
  268. // if(data.userIsVip == 2) {
  269. // //$("#2WM").show();
  270. // if(userNickname != "") {
  271. // $("#userNickname").html(userNickname)
  272. // $("#vipName").html('<img style="width: 12px;" src="images/s-vip.png" /><span class="mui-h6">VIP用户</span>');
  273. // }
  274. // $(".vip-show,#coupon-sys").show();
  275. // } else {
  276. // if(userNickname != "") {
  277. // $("#userNickname").html(userNickname)
  278. // $("#vipName").html('<span class="mui-h6">普通用户</span>');
  279. // $(".see-rights").hide();
  280. // }
  281. // }
  282. if(data.userIsVip == 1){ //是否为vip :1:非vip 2:vip
  283. $('.vip-note').text('注册会员')
  284. $(".vip-note").attr('type',1); //1:成为会员 2:完善信息 3:会员权益
  285. }else{
  286. if(data.userArrange == 1){//是否已完善信息 1:已完善 2:未完善
  287. $('.vip-note').text('会员权益')
  288. $(".vip-note").attr('type',3);
  289. }else{
  290. $('.vip-note').text('完善信息')
  291. $(".vip-note").attr('type',2);
  292. }
  293. }
  294. $.ajax({
  295. type: 'post',
  296. url: base_path + '/probationOrder/membersProbationOrder',
  297. data: {},
  298. dataType: 'json',
  299. timeout: 15000,
  300. xhrFields: {
  301. withCredentials: true
  302. },
  303. crossDomain: true,
  304. success: function(dts) {
  305. if(dt.isRedirect) {
  306. location.href = dt.redirectURL;
  307. } else {
  308. if(dts.status) {
  309. var str = '';
  310. if(dts.data.probationOrderDtoList.length == 0) {
  311. $("#try_order_list").hide()
  312. }
  313. mui(dts.data.probationOrderDtoList).each(function(index) {
  314. switch(this.probationStatus) {
  315. case 1:
  316. str = "待派送";
  317. break;
  318. case 2:
  319. str = "派送中";
  320. break;
  321. case 3:
  322. str = "待支付";
  323. break;
  324. case 4:
  325. str = "暂停试用";
  326. break;
  327. case 5:
  328. str = "支付完成";
  329. break;
  330. default:
  331. str = "订单关闭";
  332. break
  333. }
  334. var str1 = '',
  335. str2 = '';
  336. if(str == "待支付") {
  337. 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>';
  338. str2 = '<div>试用剩余时间:<span id="time_out' + (index + 1) + '"></span></div>'
  339. }
  340. $("#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>');
  341. if(str == "待支付") {
  342. addTimer('time_out' + (index + 1), this.probationRemainingTime / 1000)
  343. }
  344. })
  345. } else {
  346. mui.alert(dts.data.message)
  347. }
  348. }
  349. },
  350. error: function(xhr, type, errorThrown) {
  351. console.log(xhr);
  352. mui.alert("请检查网络或刷新页面重试!")
  353. }
  354. });
  355. document.querySelector('.loading-bg').style.display = 'none'
  356. } else {
  357. var btnArray = ['否', '是'];
  358. mui.confirm(dt.message, '提示', btnArray, function(e) {
  359. if(e.index == 1) {
  360. location.reload(true)
  361. }
  362. })
  363. }
  364. }
  365. },
  366. error: function(xhr, type, errorThrown) {
  367. console.log(xhr)
  368. }
  369. });
  370. if(marquee != '') {
  371. $('body').append('<div class="marquee-show"><div></div></div>')
  372. }
  373. });
  374. var isPay = true;
  375. mui('body').on('tap', '.try-btn-pay', function() {
  376. var th = this;
  377. if(isPay) {
  378. mui(this).button('loading');
  379. isPay = false;
  380. $.ajax({
  381. type: 'post',
  382. url: base_path + '/probation/pay',
  383. data: {
  384. "orderId": th.getAttribute("proid")
  385. },
  386. dataType: 'json',
  387. timeout: 15000,
  388. xhrFields: {
  389. withCredentials: true
  390. },
  391. crossDomain: true,
  392. success: function(dt) {
  393. if(dt.isRedirect) {
  394. location.href = dt.redirectURL;
  395. } else {
  396. if(dt.status) {
  397. var obj = JSON.parse("{" + dt.data.info + "}");
  398. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  399. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  400. $.ajax({
  401. type: 'post',
  402. url: base_path + '/probation/check_probation_pay_success',
  403. data: {
  404. "orderId": th.getAttribute("proid")
  405. },
  406. dataType: 'json',
  407. timeout: 15000,
  408. xhrFields: {
  409. withCredentials: true
  410. },
  411. crossDomain: true,
  412. success: function(data) {
  413. if(dt.isRedirect) {
  414. location.href = dt.redirectURL;
  415. } else {
  416. if(data.status) {
  417. if(data.data == 5) {
  418. mui.alert("支付成功", '', function() {
  419. mui.openWindow({
  420. url: base_path + '/probation/try_order?orderId=' + th.getAttribute("proid")
  421. })
  422. })
  423. } else {
  424. mui.alert(data.message, '', function() {
  425. mui(th).button('reset')
  426. })
  427. }
  428. } else {
  429. mui(th).button('reset');
  430. mui.alert(data.message)
  431. }
  432. }
  433. },
  434. error: function(xhr, type, errorThrown) {
  435. isPay = true;
  436. console.log(xhr);
  437. mui(th).button('reset');
  438. mui.alert("请检查网络或刷新页面重试!")
  439. }
  440. })
  441. } else {
  442. isPay = true;
  443. mui(th).button('reset');
  444. mui.alert("对不起,支付失败!请稍后重试!")
  445. }
  446. })
  447. } else {
  448. mui(th).button('reset');
  449. mui.alert(dt.message)
  450. }
  451. }
  452. },
  453. error: function(xhr, type, errorThrown) {
  454. isPay = true;
  455. console.log(xhr);
  456. mui(th).button('reset');
  457. mui.alert("请检查网络或刷新页面重试!")
  458. }
  459. })
  460. } else {
  461. mui.alert("正在请求支付中~~请稍后!");
  462. return
  463. }
  464. });
  465. var addTimer = function() {
  466. var list = [],
  467. interval;
  468. return function(id, time) {
  469. if(!interval) {
  470. interval = setInterval(go, 1000)
  471. }
  472. list.push({
  473. ele: document.getElementById(id),
  474. time: time
  475. })
  476. };
  477. function go() {
  478. for(var i = 0; i < list.length; i += 1) {
  479. list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);
  480. if(!list[i].time) {
  481. list.splice(i--, 1)
  482. }
  483. }
  484. }
  485. function getTimerString(time) {
  486. 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);
  487. if(time > 0) {
  488. return d + "天" + h + "时" + m + "分" + s + "秒"
  489. } else {
  490. return "试用已结束"
  491. }
  492. }
  493. }();
  494. $(document).on('tap', '#center-menu>li', function() {
  495. var href = $(this).attr("href");
  496. location.href = href;
  497. });
  498. $(document).on('tap', '.see-rights', function() {
  499. location.href = 'member_benefits.html';
  500. });
  501. // 弹窗
  502. $(document).on('tap', '.join-vip', function() {
  503. var type = $(".vip-note").attr('type');//1:成为会员 2:完善信息 3:会员权益
  504. if(type == 1 || type == 2){
  505. $('.dalog').show();
  506. }else{
  507. location.href='vip-equity.html';
  508. }
  509. });
  510. // 关闭弹窗
  511. $(document).on('tap', '.icon-guanbi', function() {
  512. $('.dalog').hide();
  513. });
  514. // 成为会员
  515. $(document).on('tap', '.btn-see-integral', function() {
  516. var type = $(".vip-note").attr('type');
  517. if(type == 1 || type == 2){
  518. location.href='register-vip.html';
  519. }
  520. });
  521. // 积分
  522. $(document).on('tap', '.go-integral-center', function() {
  523. location.href='integral-center.html';
  524. });
  525. // 券包
  526. $(document).on('tap', '.go-coupon-bag', function() {
  527. location.href='coupon_bag1.html?type=1';
  528. });
  529. // 券包
  530. $(document).on('tap', '.go-coupon-bag-2', function() {
  531. location.href='coupon_bag1.html?type=2';
  532. });
  533. </script>
  534. </body>
  535. </html>