vip_center.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
  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="//s.iamberry.com/watero/css/mui.min.css?v=2018111001" />
  10. <link rel="stylesheet" type="text/css" href="//s.iamberry.com/watero/css/iconfont.css?v=2018111001" />
  11. <link rel="stylesheet" type="text/css" href="//s.iamberry.com/watero/css/style.css?v=2018111001" />
  12. <link rel="stylesheet" type="text/css" href="//s.iamberry.com/watero/css/vip_center.css?v=2018111001" />
  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="//s.iamberry.com/watero/images/shop/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="/watero/view/coupon_bag.html">
  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="//w.iamberry.com/watero/view/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="/watero/view/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:4001234123">
  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: 3px;">400-8006692</span><span class="mui-icon mui-icon-arrowright"></span>
  287. </div>
  288. </div>
  289. </li>
  290. <li class="mui-table-view-cell" href="/watero/view/coupon_dec.html" id="coupon-sys" style="display: none;">
  291. <div class="mui-table">
  292. <div class="mui-table-cell mui-col-xs-5">
  293. 滤芯兑换券
  294. </div>
  295. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  296. <span class="mui-h5" style="position: absolute;width: 100px;right: 25px;top: 3px;">使用说明</span><span class="mui-icon mui-icon-arrowright"></span>
  297. </div>
  298. </div>
  299. </li>
  300. </ul>
  301. </div>
  302. <script src="//s.iamberry.com/watero/js/mui.min.js?v=2016111701"></script>
  303. <script src="//s.iamberry.com/watero/js/jquery-2.1.1.min.js"></script>
  304. <script src="//s.iamberry.com/watero/js/shop/main.js?v=2016111701"></script>
  305. <script src="//s.iamberry.com/watero/js/shop/wechat-utils-1.0.js"></script>
  306. <!--<script src="//s.iamberry.com/watero/js/shop/vip_center.js?v=2017040701"></script>-->
  307. <script>
  308. mui.ready(function() {
  309. marquee_Show();
  310. getCartNum();
  311. mui.ajax(base_path + '/agent/member?dates=' + new Date().getTime(), {
  312. dataType: 'json',
  313. type: 'post',
  314. timeout: 15000,
  315. success: function(dt) {
  316. var data = dt.data;
  317. if(dt.status) {
  318. if(data.userHead != null && typeof(data.userHead) != "undefined" && data.userHead != '') {
  319. var imgObj = $("<img src='" + data.userHead + "?" + new Date().getTime() + "'/>");
  320. $("#headDiv").empty().append(imgObj)
  321. }
  322. if(data.userNickname != null && typeof(data.userNickname) != "undefined" && data.userNickname != '') {
  323. $("#userNickname").html(decodeURI(data.userNickname))
  324. }
  325. var userNickname = $("#userNickname").html();
  326. if(data.userIsVip == 2) {
  327. //$("#2WM").show();
  328. if(userNickname != "") {
  329. $("#userNickname").html(userNickname )
  330. $("#vipName").html('<img style="width: 12px;" src="//s.iamberry.com/watero/images/s-vip.png" /><span class="mui-h6">VIP用户</span>');
  331. }
  332. $(".vip-show,#coupon-sys").show();
  333. } else {
  334. if(userNickname != "") {
  335. $("#userNickname").html(userNickname)
  336. $("#vipName").html('<span class="mui-h6">普通用户</span>');
  337. $(".see-rights").hide();
  338. }
  339. }
  340. $.ajax({
  341. type: 'post',
  342. url: base_path + '/probationOrder/membersProbationOrder',
  343. data: {},
  344. dataType: 'json',
  345. timeout: 15000,
  346. success: function(dts) {
  347. if(dts.status) {
  348. var str = '';
  349. if(dts.data.probationOrderDtoList.length == 0) {
  350. $("#try_order_list").hide()
  351. }
  352. mui(dts.data.probationOrderDtoList).each(function(index) {
  353. switch(this.probationStatus) {
  354. case 1:
  355. str = "待派送";
  356. break;
  357. case 2:
  358. str = "派送中";
  359. break;
  360. case 3:
  361. str = "待支付";
  362. break;
  363. case 4:
  364. str = "暂停试用";
  365. break;
  366. case 5:
  367. str = "支付完成";
  368. break;
  369. default:
  370. str = "订单关闭";
  371. break
  372. }
  373. var str1 = '',
  374. str2 = '';
  375. if(str == "待支付") {
  376. 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>';
  377. str2 = '<div>试用剩余时间:<span id="time_out' + (index + 1) + '"></span></div>'
  378. }
  379. $("#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>');
  380. if(str == "待支付") {
  381. addTimer('time_out' + (index + 1), this.probationRemainingTime / 1000)
  382. }
  383. })
  384. } else {
  385. mui.alert(dts.data.message)
  386. }
  387. },
  388. error: function(xhr, type, errorThrown) {
  389. console.log(xhr);
  390. mui.alert("请检查网络或刷新页面重试!")
  391. }
  392. });
  393. document.querySelector('.loading-bg').style.display = 'none'
  394. } else {
  395. var btnArray = ['否', '是'];
  396. mui.confirm(dt.message, '提示', btnArray, function(e) {
  397. if(e.index == 1) {
  398. location.reload(true)
  399. }
  400. })
  401. }
  402. },
  403. error: function(xhr, type, errorThrown) {
  404. console.log(xhr)
  405. }
  406. });
  407. if(marquee != '') {
  408. $('body').append('<div class="marquee-show"><div></div></div>')
  409. }
  410. });
  411. var isPay = true;
  412. mui('body').on('tap', '.try-btn-pay', function() {
  413. var th = this;
  414. if(isPay) {
  415. mui(this).button('loading');
  416. isPay = false;
  417. $.ajax({
  418. type: 'post',
  419. url: base_path + '/probation/pay',
  420. data: {
  421. "orderId": th.getAttribute("proid")
  422. },
  423. dataType: 'json',
  424. timeout: 15000,
  425. success: function(dt) {
  426. if(dt.status) {
  427. var obj = JSON.parse("{" + dt.data.info + "}");
  428. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  429. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  430. $.ajax({
  431. type: 'post',
  432. url: base_path + '/probation/check_probation_pay_success',
  433. data: {
  434. "orderId": th.getAttribute("proid")
  435. },
  436. dataType: 'json',
  437. timeout: 15000,
  438. success: function(data) {
  439. if(data.status) {
  440. if(data.data == 5) {
  441. mui.alert("支付成功", '', function() {
  442. mui.openWindow({
  443. url: base_path + '/probation/try_order?orderId=' + th.getAttribute("proid")
  444. })
  445. })
  446. } else {
  447. mui.alert(data.message, '', function() {
  448. mui(th).button('reset')
  449. })
  450. }
  451. } else {
  452. mui(th).button('reset');
  453. mui.alert(data.message)
  454. }
  455. },
  456. error: function(xhr, type, errorThrown) {
  457. isPay = true;
  458. console.log(xhr);
  459. mui(th).button('reset');
  460. mui.alert("请检查网络或刷新页面重试!")
  461. }
  462. })
  463. } else {
  464. isPay = true;
  465. mui(th).button('reset');
  466. mui.alert("对不起,支付失败!请稍后重试!")
  467. }
  468. })
  469. } else {
  470. mui(th).button('reset');
  471. mui.alert(dt.message)
  472. }
  473. },
  474. error: function(xhr, type, errorThrown) {
  475. isPay = true;
  476. console.log(xhr);
  477. mui(th).button('reset');
  478. mui.alert("请检查网络或刷新页面重试!")
  479. }
  480. })
  481. } else {
  482. mui.alert("正在请求支付中~~请稍后!");
  483. return
  484. }
  485. });
  486. var addTimer = function() {
  487. var list = [],
  488. interval;
  489. return function(id, time) {
  490. if(!interval) {
  491. interval = setInterval(go, 1000)
  492. }
  493. list.push({
  494. ele: document.getElementById(id),
  495. time: time
  496. })
  497. };
  498. function go() {
  499. for(var i = 0; i < list.length; i += 1) {
  500. list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);
  501. if(!list[i].time) {
  502. list.splice(i--, 1)
  503. }
  504. }
  505. }
  506. function getTimerString(time) {
  507. 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);
  508. if(time > 0) {
  509. return d + "天" + h + "时" + m + "分" + s + "秒"
  510. } else {
  511. return "试用已结束"
  512. }
  513. }
  514. }();
  515. $(document).on('tap', '#center-menu>li', function() {
  516. var href = $(this).attr("href");
  517. location.href =href;
  518. });
  519. $(document).on('tap', '.see-rights', function() {
  520. location.href ='/watero/view/member_benefits.html';
  521. });
  522. </script>
  523. </body>
  524. </html>