vip_center.html 22 KB

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