vip_center.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  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. <style>
  14. body,.mui-content{background: #fff;}
  15. .my-view-order .mui-media-body {
  16. padding-top: 0;
  17. }
  18. .center-middle{font-size: 12px; position: absolute;
  19. left: 90px;
  20. top: 50%;
  21. -webkit-transform: translateY(-50%);}
  22. .wh-80 {
  23. width: 70px !important;
  24. max-width: 70px !important;
  25. height: 70px !important;
  26. margin: 0 5px 0 0 !important;
  27. overflow: hidden;
  28. display: inline-block;
  29. text-align: center;
  30. }
  31. .wh-80 img {
  32. height: 70px;
  33. }
  34. .btn-box{bottom:auto;top:12px;}
  35. .icon-orderyue{font-size: 35px;}
  36. #menu-nav .mui-control-item {line-height: 1;color: #333;border-color: #fff;border:0;padding: 10px 0 15px 0;font-size: 12px;}
  37. #menu-nav {border: 0;border-radius: 3px;}
  38. #menu-nav .mui-control-item.mui-active {color: #333;background-color:rgba(0,0,0,.1);}
  39. #menu-nav .iconfont{color: #55c0dc;padding: 10px 0;}
  40. #menu-order .mui-control-item {line-height: 1;color: #333;border-color: #fff;border:0;padding: 6px 0 10px 0;font-size: 12px;}
  41. #menu-order {border: 0;border-radius: 3px;}
  42. #menu-order .mui-control-item.mui-active {color: #333;background-color:rgba(0,0,0,.1);}
  43. #menu-order .iconfont{color: #f5556c;padding: 5px 0;}
  44. .my-view-order{color: #333;}
  45. .my-view-order:before{display: none;}
  46. .mui-grid-view.mui-grid-9 .mui-media{background-color: #fff;padding: 11px 5px;}
  47. .mui-grid-view.mui-grid-9:after{height: 0;display: none;}
  48. .icon-xiaxian,.icon-kefu{color: #55c0dc;}
  49. .icon-liwu,.icon-wheel{color: #f7624e;}
  50. .icon-renwu,.icon-naifen{color: #f88c43;}
  51. .icon-shouhou,.icon-order{color: #31c27c;}
  52. .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{font-size: 12px;}
  53. #menu-lease-order,#menu-lease-other{border: 0;border-radius: 3px;}
  54. #menu-lease-order .mui-control-item,#menu-lease-other .mui-control-item{line-height: 1;color: #333;border-color: #fff;border:0;padding: 6px 0 10px 0;font-size: 12px;}
  55. #menu-lease-order .mui-control-item.mui-active,#menu-lease-other .mui-control-item.mui-active{color: #333;background-color:rgba(0,0,0,.1);}
  56. #menu-lease-order .iconfont,#menu-lease-other .iconfont{padding: 5px 0;}
  57. .icon-daifahuo1,.icon-shebeiliebiao{color: #1bcba8;}
  58. .icon-yifahuo,.icon-zulinxieyi{color: #55c0dc;}
  59. .wh-80 {
  60. width: 60px !important;
  61. max-width: 60px !important;
  62. height: 80px !important;
  63. margin: 0 5px 0 0 !important;
  64. overflow: hidden;
  65. display: inline-block;
  66. text-align: center;
  67. }
  68. .try-btn-pay{ background: #55c0dc;
  69. border: 1px solid transparent;
  70. border-radius: 4px;
  71. color: #fff;
  72. padding: 3px 8px;}
  73. .center-middle{font-size: 12px; position: absolute;
  74. left: 90px;
  75. top: 50%;
  76. -webkit-transform: translateY(-50%);}
  77. .vip-tt{background: #fff;}
  78. .nikname{color: #333;left: 7.5em;}
  79. #menu-order .iconfont{color: #24cae9;}
  80. #menu-order .mui-control-item{font-size: 14px;}
  81. .tx{padding: 0;left: 2em;}
  82. .see-rights{color:#8f8f94;background: #fff;border-radius: 6px;padding: 3px 10px;float: right;margin-right: 10px;font-size: 13px;}
  83. .vip-show{background: #dff4fa;border-radius: 25px;font-size: 12px;text-align: center;width: 90%;margin:0 auto;padding: 3px 0;display: none;}
  84. </style>
  85. <script>
  86. // 屏蔽分享
  87. window.hiddenAllWechatMenu = true;
  88. </script>
  89. </head>
  90. <body>
  91. <div class="loading-bg">
  92. <div class="mui-loading">
  93. <div class="mui-spinner">
  94. </div>
  95. &nbsp;&nbsp;加载中...
  96. </div>
  97. </div>
  98. <nav class="mui-bar mui-bar-tab" id="footer-bar">
  99. <a class="mui-tab-item" >
  100. <div class="iconfont icon-home"></div>
  101. <span class="mui-tab-label">首页</span>
  102. </a>
  103. <a class="mui-tab-item">
  104. <div class="iconfont icon-gouwuche"><span class="mui-badge">0</span></div>
  105. <span class="mui-tab-label">购物车</span>
  106. </a>
  107. <a class="mui-tab-item">
  108. <div class="iconfont icon-dingdan"></div>
  109. <span class="mui-tab-label">订单</span>
  110. </a>
  111. <a class="mui-tab-item mui-active">
  112. <div class="iconfont icon-vip"></div>
  113. <span class="mui-tab-label">我的</span>
  114. </a>
  115. </nav>
  116. <div class="mui-content">
  117. <div class="vip-tt">
  118. <!-- <img src="/iamberry/common/shop/images/member_photo-bg_2.png"> -->
  119. <div class="tx bg-orange" id="headDiv">
  120. <img src="images/logo_head.png" id="userHead">
  121. </div>
  122. <div class="nikname">
  123. <div>
  124. <span id="userNickname">水时代</span>
  125. </div>
  126. <div >
  127. <span id="vipName">普通用户</span>
  128. <!--<span class="go_daili_2wm" id="2WM" style="display:none">立即分享二维码 ></span>-->
  129. <span class="see-rights">查看权益<span class="mui-icon mui-icon-arrowright" style="font-size: 18px;"></span></span>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="vip-show">
  134. 凡购买滤芯套装,立减100元/套,结算时系统自动减免
  135. </div>
  136. <!-- <div style="padding:0;background: #fff;margin-bottom: 8px;">
  137. <div id="menu-nav" class="mui-segmented-control">
  138. <a class="mui-control-item go_cash_log">
  139. <div class="iconfont icon-orderyue"></div>
  140. 余额
  141. </a>
  142. <a class="mui-control-item go_daili_order_list">
  143. <div class="iconfont icon-orderjiangli"></div>
  144. 待奖励
  145. </a>
  146. <a class="mui-control-item go_couponList">
  147. <div class="iconfont icon-orderyouhui"></div>
  148. 优惠券
  149. </a>
  150. <a class="mui-control-item go_gwc">
  151. <div class="iconfont icon-ordercart"></div>
  152. 购物车
  153. </a>
  154. </div>
  155. </div> -->
  156. <!--<div style="padding:0;background: #fff;margin-bottom: 8px;">-->
  157. <!--<div id="menu-nav" class="mui-segmented-control">-->
  158. <!--<a class="mui-control-item go_cash_log">-->
  159. <!--<div class="iconfont icon-orderjiangli"></div>-->
  160. <!--奖励记录-->
  161. <!--</a>-->
  162. <!--<a class="mui-control-item">-->
  163. <!--<div class="iconfont icon-orderyue"></div>-->
  164. <!--余额 <span class="cl-red">0.00</span>-->
  165. <!--</a>-->
  166. <!--<a class="mui-control-item" href="/watero/view/coupon_bag.html">-->
  167. <!--<div class="iconfont icon-wodequanbao"></div>-->
  168. <!--我的券包-->
  169. <!--</a>-->
  170. <!--</div>-->
  171. <!--</div>-->
  172. <!--<ul class="mui-table-view my-view-order">-->
  173. <!--<li class="mui-table-view-cell">-->
  174. <!--<a class="mui-navigate-right go_pay_count">-->
  175. <!--我的订单-->
  176. <!--</a>-->
  177. <!--</li>-->
  178. <!--</ul>-->
  179. <div style="padding:10px 0 30px 0;background: #fff;">
  180. <div id="menu-order" class="mui-segmented-control">
  181. <a class="mui-control-item go_pay_count">
  182. <div class="iconfont icon-daifukuan"></div>
  183. 待付款
  184. </a>
  185. <a class="mui-control-item go_deliver_count">
  186. <div class="iconfont icon-daifahuo"></div>
  187. 待发货
  188. </a>
  189. <a class="mui-control-item go_delivered_count">
  190. <div class="iconfont icon-yifahuo"></div>
  191. 已发货
  192. </a>
  193. <a class="mui-control-item go_all_count">
  194. <div class="iconfont icon-alldingdan"></div>
  195. 全部订单
  196. </a>
  197. </div>
  198. </div>
  199. <!--<ul class="mui-table-view my-view-order">-->
  200. <!--<li class="mui-table-view-cell">-->
  201. <!--设备租赁-->
  202. <!--</li>-->
  203. <!--</ul>-->
  204. <!--<div style="padding:0;background: #fff;margin-bottom: 8px;">-->
  205. <!--<div id="menu-lease-order" class="mui-segmented-control">-->
  206. <!--<a class="mui-control-item">-->
  207. <!--<div class="iconfont icon-daifahuo1" id="rent_wait_deliver"></div>-->
  208. <!--全部订单-->
  209. <!--</a>-->
  210. <!--<a class="mui-control-item">-->
  211. <!--<div class="iconfont icon-yifahuo" id="rent_already_deliver"></div>-->
  212. <!--已发货-->
  213. <!--</a>-->
  214. <!--<a class="mui-control-item">-->
  215. <!--<div class="iconfont icon-shebeiliebiao"></div>-->
  216. <!--设备列表-->
  217. <!--</a>-->
  218. <!--<a class="mui-control-item">-->
  219. <!--<div class="iconfont icon-zulinxieyi" id="xieyi-dalog"></div>-->
  220. <!--租赁协议-->
  221. <!--</a>-->
  222. <!--</div>-->
  223. <!--</div>-->
  224. <!--<ul class="mui-table-view my-view-order">-->
  225. <!--<li class="mui-table-view-cell">-->
  226. <!--服务-->
  227. <!--</li>-->
  228. <!--</ul>-->
  229. <!--<div style="padding:0;background: #fff;margin-bottom: 8px;">-->
  230. <!--<div id="menu-lease-other" class="mui-segmented-control">-->
  231. <!--<a class="mui-control-item">-->
  232. <!--<div class="iconfont icon-xiaxian"></div>-->
  233. <!--我的好友-->
  234. <!--</a>-->
  235. <!--<a class="mui-control-item">-->
  236. <!--<div class="iconfont icon-shouhou"></div>-->
  237. <!--售后服务-->
  238. <!--</a>-->
  239. <!--<a class="mui-control-item">-->
  240. <!--<div class="iconfont icon-kefu"></div>-->
  241. <!--客服电话-->
  242. <!--</a>-->
  243. <!--<a class="mui-control-item">-->
  244. <!--<div class="iconfont icon-order"></div>-->
  245. <!--常见问答-->
  246. <!--</a>-->
  247. <!--</div>-->
  248. <!--</div>-->
  249. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-center-no" id="center-menu" >
  250. <li class="mui-table-view-cell" href="coupon_bag.html?tabindex=10">
  251. <div class="mui-table">
  252. <div class="mui-table-cell mui-col-xs-5 table-middle">
  253. 我的券包
  254. </div>
  255. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  256. <span class="mui-icon mui-icon-arrowright"></span>
  257. </div>
  258. </div>
  259. </li>
  260. <li class="mui-table-view-cell" href="faq.html">
  261. <div class="mui-table">
  262. <div class="mui-table-cell mui-col-xs-5">
  263. 常见问答
  264. </div>
  265. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  266. <span class="mui-icon mui-icon-arrowright"></span>
  267. </div>
  268. </div>
  269. </li>
  270. <li class="mui-table-view-cell" href="after_service_watero.html">
  271. <div class="mui-table">
  272. <div class="mui-table-cell mui-col-xs-5">
  273. 售后服务
  274. </div>
  275. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  276. <span class="mui-icon mui-icon-arrowright"></span>
  277. </div>
  278. </div>
  279. </li>
  280. <li class="mui-table-view-cell" href="tel:400-8006692">
  281. <div class="mui-table">
  282. <div class="mui-table-cell mui-col-xs-5">
  283. 客服电话
  284. </div>
  285. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  286. <!--<span class="mui-h5" style="position: absolute;width: 100px;right: 25px;top: 2px;">400-8006692</span>-->
  287. <span class="mui-icon mui-icon-arrowright"></span>
  288. </div>
  289. </div>
  290. </li>
  291. <li class="mui-table-view-cell" href="coupon_dec.html" id="coupon-sys" style="display: none;">
  292. <div class="mui-table">
  293. <div class="mui-table-cell mui-col-xs-5">
  294. 滤芯兑换券
  295. </div>
  296. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  297. <span class="mui-h5" style="position: absolute;width: 100px;right: 25px;top: 2px;">使用说明</span><span class="mui-icon mui-icon-arrowright"></span>
  298. </div>
  299. </div>
  300. </li>
  301. </ul>
  302. </div>
  303. <script src="js/mui.min.js"></script>
  304. <script src="js/jquery-2.1.1.min.js"></script>
  305. <script src="js/main.js"></script>
  306. <script src="js/page/wechat-utils-1.0.js"></script>
  307. <!--<script src="js/shop/vip_center.js?v=2017040701"></script>-->
  308. <script>
  309. mui.ready(function() {
  310. marquee_Show();
  311. getCartNum();
  312. $.ajax(base_path + '/agent/member?dates=' + new Date().getTime(), {
  313. dataType: 'json',
  314. type: 'post',
  315. timeout: 15000,
  316. xhrFields: {
  317. withCredentials: true
  318. },
  319. crossDomain: true,
  320. success: function(dt) {
  321. if (dt.isRedirect) {
  322. location.href = dt.redirectURL;
  323. } else {
  324. var data = dt.data;
  325. if(dt.status) {
  326. if(data.userHead != null && typeof(data.userHead) != "undefined" && data.userHead != '') {
  327. var imgObj = $("<img src='" + data.userHead + "?" + new Date().getTime() + "'/>");
  328. $("#headDiv").empty().append(imgObj)
  329. }
  330. if(data.userNickname != null && typeof(data.userNickname) != "undefined" && data.userNickname != '') {
  331. $("#userNickname").html(decodeURI(data.userNickname))
  332. }
  333. var userNickname = $("#userNickname").html();
  334. if(data.userIsVip == 2) {
  335. //$("#2WM").show();
  336. if(userNickname != "") {
  337. $("#userNickname").html(userNickname )
  338. $("#vipName").html('<img style="width: 12px;" src="images/s-vip.png" /><span class="mui-h6">VIP用户</span>');
  339. }
  340. $(".vip-show,#coupon-sys").show();
  341. } else {
  342. if(userNickname != "") {
  343. $("#userNickname").html(userNickname)
  344. $("#vipName").html('<span class="mui-h6">普通用户</span>');
  345. $(".see-rights").hide();
  346. }
  347. }
  348. $.ajax({
  349. type: 'post',
  350. url: base_path + '/probationOrder/membersProbationOrder',
  351. data: {},
  352. dataType: 'json',
  353. timeout: 15000,
  354. xhrFields: {
  355. withCredentials: true
  356. },
  357. crossDomain: true,
  358. success: function(dts) {
  359. if (dt.isRedirect) {
  360. location.href = dt.redirectURL;
  361. } else {
  362. if(dts.status) {
  363. var str = '';
  364. if(dts.data.probationOrderDtoList.length == 0) {
  365. $("#try_order_list").hide()
  366. }
  367. mui(dts.data.probationOrderDtoList).each(function(index) {
  368. switch(this.probationStatus) {
  369. case 1:
  370. str = "待派送";
  371. break;
  372. case 2:
  373. str = "派送中";
  374. break;
  375. case 3:
  376. str = "待支付";
  377. break;
  378. case 4:
  379. str = "暂停试用";
  380. break;
  381. case 5:
  382. str = "支付完成";
  383. break;
  384. default:
  385. str = "订单关闭";
  386. break
  387. }
  388. var str1 = '',
  389. str2 = '';
  390. if(str == "待支付") {
  391. 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>';
  392. str2 = '<div>试用剩余时间:<span id="time_out' + (index + 1) + '"></span></div>'
  393. }
  394. $("#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>');
  395. if(str == "待支付") {
  396. addTimer('time_out' + (index + 1), this.probationRemainingTime / 1000)
  397. }
  398. })
  399. } else {
  400. mui.alert(dts.data.message)
  401. }
  402. }
  403. },
  404. error: function(xhr, type, errorThrown) {
  405. console.log(xhr);
  406. mui.alert("请检查网络或刷新页面重试!")
  407. }
  408. });
  409. document.querySelector('.loading-bg').style.display = 'none'
  410. } else {
  411. var btnArray = ['否', '是'];
  412. mui.confirm(dt.message, '提示', btnArray, function(e) {
  413. if(e.index == 1) {
  414. location.reload(true)
  415. }
  416. })
  417. }
  418. }
  419. },
  420. error: function(xhr, type, errorThrown) {
  421. console.log(xhr)
  422. }
  423. });
  424. if(marquee != '') {
  425. $('body').append('<div class="marquee-show"><div></div></div>')
  426. }
  427. });
  428. var isPay = true;
  429. mui('body').on('tap', '.try-btn-pay', function() {
  430. var th = this;
  431. if(isPay) {
  432. mui(this).button('loading');
  433. isPay = false;
  434. $.ajax({
  435. type: 'post',
  436. url: base_path + '/probation/pay',
  437. data: {
  438. "orderId": th.getAttribute("proid")
  439. },
  440. dataType: 'json',
  441. timeout: 15000,
  442. xhrFields: {
  443. withCredentials: true
  444. },
  445. crossDomain: true,
  446. success: function(dt) {
  447. if (dt.isRedirect) {
  448. location.href = dt.redirectURL;
  449. } else {
  450. if(dt.status) {
  451. var obj = JSON.parse("{" + dt.data.info + "}");
  452. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  453. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  454. $.ajax({
  455. type: 'post',
  456. url: base_path + '/probation/check_probation_pay_success',
  457. data: {
  458. "orderId": th.getAttribute("proid")
  459. },
  460. dataType: 'json',
  461. timeout: 15000,
  462. xhrFields: {
  463. withCredentials: true
  464. },
  465. crossDomain: true,
  466. success: function(data) {
  467. if (dt.isRedirect) {
  468. location.href = dt.redirectURL;
  469. } else {
  470. if(data.status) {
  471. if(data.data == 5) {
  472. mui.alert("支付成功", '', function() {
  473. mui.openWindow({
  474. url: base_path + '/probation/try_order?orderId=' + th.getAttribute("proid")
  475. })
  476. })
  477. } else {
  478. mui.alert(data.message, '', function() {
  479. mui(th).button('reset')
  480. })
  481. }
  482. } else {
  483. mui(th).button('reset');
  484. mui.alert(data.message)
  485. }
  486. }
  487. },
  488. error: function(xhr, type, errorThrown) {
  489. isPay = true;
  490. console.log(xhr);
  491. mui(th).button('reset');
  492. mui.alert("请检查网络或刷新页面重试!")
  493. }
  494. })
  495. } else {
  496. isPay = true;
  497. mui(th).button('reset');
  498. mui.alert("对不起,支付失败!请稍后重试!")
  499. }
  500. })
  501. } else {
  502. mui(th).button('reset');
  503. mui.alert(dt.message)
  504. }
  505. }
  506. },
  507. error: function(xhr, type, errorThrown) {
  508. isPay = true;
  509. console.log(xhr);
  510. mui(th).button('reset');
  511. mui.alert("请检查网络或刷新页面重试!")
  512. }
  513. })
  514. } else {
  515. mui.alert("正在请求支付中~~请稍后!");
  516. return
  517. }
  518. });
  519. var addTimer = function() {
  520. var list = [],
  521. interval;
  522. return function(id, time) {
  523. if(!interval) {
  524. interval = setInterval(go, 1000)
  525. }
  526. list.push({
  527. ele: document.getElementById(id),
  528. time: time
  529. })
  530. };
  531. function go() {
  532. for(var i = 0; i < list.length; i += 1) {
  533. list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);
  534. if(!list[i].time) {
  535. list.splice(i--, 1)
  536. }
  537. }
  538. }
  539. function getTimerString(time) {
  540. 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);
  541. if(time > 0) {
  542. return d + "天" + h + "时" + m + "分" + s + "秒"
  543. } else {
  544. return "试用已结束"
  545. }
  546. }
  547. }();
  548. $(document).on('tap', '#center-menu>li', function() {
  549. var href = $(this).attr("href");
  550. location.href =href;
  551. });
  552. $(document).on('tap', '.see-rights', function() {
  553. location.href ='member_benefits.html';
  554. });
  555. </script>
  556. </body>
  557. </html>