my-center.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="pragma" content="no-cache">
  6. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  7. <meta http-equiv="expires" content="0">
  8. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11. <meta name="format-detection" content="telphone=no, email=no" />
  12. <title>我的</title>
  13. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  14. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  15. <link rel="stylesheet" type="text/css" href="css/main.css" />
  16. <style>
  17. html,body{background: #F2F2F2;}
  18. .mui-content {
  19. background: #f2f2f2;
  20. }
  21. .center-header {
  22. position: relative;
  23. background: #9fa0a0;
  24. height: 160px;
  25. }
  26. .center-header .wecat-head {
  27. position: absolute;
  28. left: 0;
  29. top: 0;
  30. width: 100%;
  31. text-align: center;
  32. color: #fff;
  33. }
  34. .center-header .bottom-vip {
  35. font-size: 12px;
  36. background: #2f2d3a;
  37. position: absolute;
  38. left: 14px;
  39. right: 14px;
  40. bottom: 0;
  41. height: 40px;
  42. border-radius: 15px 15px 0 0;
  43. color: #fff;
  44. padding: 10px 0;
  45. }
  46. .center-header .bottom-vip .mui-table-cell:first-child {
  47. width: 13em;
  48. padding-left: 12px;
  49. }
  50. .center-header .vip-l {
  51. /* margin: 0 14px; */
  52. vertical-align: middle;
  53. }
  54. .center-header .vip-icon {
  55. display: inline-block;
  56. vertical-align: middle;
  57. margin-right: 2px;
  58. width: 15px;
  59. }
  60. .center-header .vip-title {
  61. vertical-align: middle;
  62. }
  63. .center-header .vip-arrow {
  64. display: inline-block;
  65. vertical-align: middle;
  66. margin-left: 5px;
  67. margin-right: 12px;
  68. width: 7px;
  69. padding-bottom: 3px;
  70. }
  71. .center-header .sign-in {
  72. position: absolute;
  73. right: 4px;
  74. top: 5px;
  75. color: #fff;
  76. padding: 5px 10px;
  77. height: 28px;
  78. }
  79. .center-header .sign-in>img {
  80. width: 19px;
  81. }
  82. .center-header .sign-in>span {
  83. vertical-align: top;
  84. font-size: 12px;
  85. }
  86. .center-header #userNickname {
  87. font-size: 14px;
  88. }
  89. #menu-nav .mui-control-item {
  90. line-height: 1.2;
  91. padding: 6px 0 12px 0;
  92. color: #666;
  93. font-size: 12px;
  94. }
  95. p{color: #999;font-size: 12px;}
  96. .center-content{background: #f2f2f2;padding:10px 14px 14px 14px;}
  97. .center-content .my-count{padding: 12px 0;background: #fff;border-radius: 8px;margin-bottom: 8px;}
  98. .center-content .mui-navigate-right:after{font-size: 20px;color: #999;top: 48%;}
  99. .center-content .mui-table-view:after{left: 15px;right: 15px; background: #e5e5e5;}
  100. .my-center-no .mui-table-view-cell .mui-icon{color: #999;font-size: 18px;}
  101. .order-box{padding:0;background: #fff;margin-bottom: 8px;border-radius: 8px;overflow: hidden;}
  102. .order-box .mui-badge{background: transparent;color: #bbb;font-size: 12px;}
  103. strong{font-size: 16px;}
  104. .order-box strong{font-size: 14px;}
  105. .my-center-no{border-radius: 8px;overflow: hidden;font-size: 12px;}
  106. .dalog {
  107. position: fixed;
  108. left: 0;
  109. top: 0;
  110. bottom: 0;
  111. right: 0;
  112. background: rgba(0, 0, 0, .7);
  113. display: none;
  114. z-index: 99;
  115. }
  116. .dalog>div {
  117. position: absolute;
  118. width: 270px;
  119. height: 290px;
  120. left: 50%;
  121. margin-left: -135px;
  122. top: 50%;
  123. margin-top: -150px;
  124. text-align: center;
  125. }
  126. .dalog .tp-box {
  127. background: #fff;
  128. padding: 10px 12px;
  129. border-radius: 8px;
  130. margin-bottom: 8px;
  131. }
  132. .dalog ul{
  133. padding-top: 12px;
  134. }
  135. .dalog ol{
  136. width: 185px;
  137. display: block;
  138. margin: 0 auto;
  139. text-align: left;
  140. padding-bottom: 4px;
  141. }
  142. .dalog ol>li{
  143. font-size: 12px;
  144. margin:0;
  145. white-space: nowrap;
  146. }
  147. .dalog ul>li {
  148. margin:0 0 16px 0;
  149. color: #727171;
  150. }
  151. .dalog ul>li:last-child{
  152. margin-bottom: 10px;
  153. }
  154. .dalog ul li p {
  155. color: #666;
  156. }
  157. .dalog .btn-see-integral {
  158. border-radius: 25px;
  159. background: #727171;
  160. color: #fff;
  161. padding: 5px 22px;
  162. border: 0;
  163. font-size: 14px;
  164. }
  165. .dalog .icon-guanbicha {
  166. color: #fff;
  167. font-size: 26px;
  168. }
  169. .dalog strong {
  170. font-size: 22px;
  171. letter-spacing: 4px;
  172. }
  173. .dalog .icon-A-zhucewancheng {
  174. font-size: 40px;
  175. }
  176. </style>
  177. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  178. <script>
  179. //屏蔽分享
  180. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  181. WeixinJSBridge.call('hideOptionMenu');
  182. });
  183. </script>
  184. </head>
  185. <body>
  186. <footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
  187. <a class="mui-tab-item ">
  188. <span class="iconfont">
  189. <svg class="icon" aria-hidden="true">
  190. <use xlink:href="#icon-kang-hui"></use>
  191. </svg>
  192. </span>
  193. <span class="mui-tab-label" >首页</span>
  194. </a>
  195. <a class="mui-tab-item">
  196. <span class="iconfont" >
  197. <svg class="icon" aria-hidden="true">
  198. <use xlink:href="#icon-ji-hui"></use>
  199. </svg>
  200. </span>
  201. <span class="mui-tab-label">购物车</span>
  202. </a>
  203. <a class="mui-tab-item">
  204. <span class="iconfont">
  205. <svg class="icon" aria-hidden="true">
  206. <use xlink:href="#icon-yi-hui1"></use>
  207. </svg>
  208. </span>
  209. <span class="mui-tab-label">订单</span>
  210. </a>
  211. <a class="mui-tab-item mui-active-select">
  212. <span class="iconfont">
  213. <svg class="icon" aria-hidden="true">
  214. <use xlink:href="#icon-qing"></use>
  215. </svg>
  216. </span>
  217. <span class="mui-tab-label">我的</span>
  218. </a>
  219. </footer>
  220. <div class="mui-content">
  221. <div class="center-header">
  222. <div class="wecat-head">
  223. <div class="user-head">
  224. <img id="headDiv" src="images/tx-1.jpg" />
  225. </div>
  226. <div id="userNickname">微信用户</div>
  227. <!--<div class="mui-table" style="padding-top: 15px;">
  228. <div class="mui-table-cell amount-div">
  229. <h5 style="font-size: 14px;padding-bottom: 10px;">待入帐</h5>
  230. <div class="cl-red" style="font-size: 20px;">¥<span id="await-amount">0</span></div>
  231. </div>
  232. <div class="mui-table-cell amount-div">
  233. <h5 style="font-size: 14px;padding-bottom: 10px;">可提现</h5>
  234. <div class="cl-red" style="font-size: 20px;">¥<span id="uables-amount">0</span></div>
  235. <div style="width: 1px;height: 30px;background: #ccc;-webkit-transform: scaleX(.3);position: absolute;right: 0;bottom: 5px;"></div>
  236. </div>
  237. </div>-->
  238. </div>
  239. <div class="bottom-vip">
  240. <div class="mui-table">
  241. <div class="mui-table-cell "><img class="vip-icon" src="images/vip-1.png" />&nbsp;&nbsp;Aiberle爱贝源会员</div>
  242. <div class="mui-table-cell mui-text-right join-vip">
  243. <span class="vip-title"><span class="vip-l vip-note" type="3">会员权益</span></span>
  244. <img class="vip-arrow" src="images/arrow-1.png" />
  245. </div>
  246. </div>
  247. </div>
  248. <!-- <div class="sign-in">
  249. <img src="images/qiandao-1.png" />
  250. <span>签到</span>
  251. </div> -->
  252. </div>
  253. <div class="center-content">
  254. <div class="mui-table mui-text-center my-count">
  255. <div class="mui-table-cell go-integral-center">
  256. <strong class="user_surplus_integral">0</strong>
  257. <p>积分</p>
  258. </div>
  259. <div class="mui-table-cell coupon_list" >
  260. <strong class="coupon_num">0</strong>
  261. <p>券包</p>
  262. </div>
  263. <div class="mui-table-cell amount-div">
  264. <strong id="uables-amount">¥0.00</strong>
  265. <p>返现</p>
  266. </div>
  267. </div>
  268. <div class="order-box">
  269. <ul class="mui-table-view">
  270. <li class="mui-table-view-cell">
  271. <a class="mui-navigate-right go_order_list">
  272. <strong>我的订单</strong><span class="mui-badge">查看全部订单</span>
  273. </a>
  274. </li>
  275. </ul>
  276. <div id="menu-nav" class="mui-segmented-control">
  277. <a class="mui-control-item" name="1">
  278. <div class="iconfont icon-daifukuan">
  279. </div>
  280. 待付款
  281. </a>
  282. <a class="mui-control-item" name="2">
  283. <div class="iconfont icon-daifahuo"></div>
  284. 待发货
  285. </a>
  286. <a class="mui-control-item" name="5">
  287. <div class="iconfont icon-yifahuo"></div>
  288. 已发货
  289. </a>
  290. <a class="mui-control-item" name="-1">
  291. <div class="iconfont icon-yiwancheng"></div>
  292. 全部
  293. </a>
  294. </div>
  295. </div>
  296. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-center-no" id="center-menu">
  297. <!-- <li class="mui-table-view-cell" href="coupon_list.html">
  298. <div class="mui-table">
  299. <div class="mui-table-cell mui-col-xs-5 table-middle">
  300. <span class="iconfont icon-A-shouhuoxinxi"></span>收货信息
  301. </div>
  302. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  303. <span class="mui-icon mui-icon-arrowright"></span>
  304. </div>
  305. </div>
  306. </li> -->
  307. <li class="mui-table-view-cell" href="vip-info.html">
  308. <div class="mui-table">
  309. <div class="mui-table-cell mui-col-xs-5 table-middle">
  310. <span class="iconfont icon-A-gerenxinxi"></span>个人信息
  311. </div>
  312. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  313. <span class="mui-icon mui-icon-arrowright"></span>
  314. </div>
  315. </div>
  316. </li>
  317. <li class="mui-table-view-cell" href="tel:400-8006692">
  318. <div class="mui-table">
  319. <div class="mui-table-cell mui-col-xs-5">
  320. <span class="iconfont icon-A-kefudianhua"></span>客服电话
  321. </div>
  322. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  323. <a class="tel" href="tel:400-8006692">400-8006692</a> <span class="mui-icon mui-icon-arrowright"></span>
  324. </div>
  325. </div>
  326. </li>
  327. <li class="mui-table-view-cell">
  328. <div class="mui-table">
  329. <div class="mui-table-cell mui-col-xs-5 table-middle">
  330. <span class="iconfont icon-A-zhanghaoanquan"></span>账号与安全
  331. </div>
  332. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  333. <span class="mui-icon mui-icon-arrowright"></span>
  334. </div>
  335. </div>
  336. </li>
  337. <li class="mui-table-view-cell">
  338. <div class="mui-table">
  339. <div class="mui-table-cell mui-col-xs-5 table-middle">
  340. <span class="iconfont icon-A-yijianxiang"></span>会员意见收集
  341. </div>
  342. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  343. <span class="mui-icon mui-icon-arrowright"></span>
  344. </div>
  345. </div>
  346. </li>
  347. </ul>
  348. </div>
  349. </div>
  350. <div class="dalog">
  351. <div>
  352. <div class="tp-box">
  353. <ul>
  354. <li><strong>积分也能当钱花</strong></li>
  355. <li>
  356. <ol>
  357. <li>·注册会员即可获得100积分</li>
  358. <li>·会员专享折扣</li>
  359. <li>·购买产品,享受积分抵扣现金优惠</li>
  360. <li>·积分换购特惠商品权益</li>
  361. <li>·会员专享生日大礼包</li>
  362. </ol>
  363. </li>
  364. <li><button type="button" class="mui-btn btn-see-integral">成为会员</button></li>
  365. </ul>
  366. </div>
  367. <br />
  368. <div class="mui-text-center">
  369. <i class="iconfont icon-guanbicha"></i>
  370. </div>
  371. </div>
  372. </div>
  373. <div class="loading covers">
  374. <div class="loading-bj"></div>
  375. <p>加载中...</p>
  376. </div>
  377. <script src="js/mui.min.js"></script>
  378. <script src="js/jquery-2.1.1.min.js"></script>
  379. <script src="js/main.js"></script>
  380. <script src="js/iconfont.js"></script>
  381. <script>
  382. $(document).on('tap', '.my-btn-cancel', function() {
  383. $(this).hide();
  384. $('#search-hot').hide();
  385. $('#search').autocompleter("close");
  386. $(".autocompleter-list").empty().css("height", "auto");
  387. $('.autocompleter-hint').removeClass('autocompleter-hint-show').empty();
  388. $(".icon-caidan").show();
  389. });
  390. $(document).on('tap', '.icon-caidan', function() {
  391. $("#menu").css("height", $(window).height());
  392. $("#menu>li").addClass("active");
  393. });
  394. $(document).on('tap', '.icon-guanbi', function() {
  395. $("#menu>li").removeClass("active");
  396. $("#menu").css("height", "0px");
  397. });
  398. $(document).on('tap', '.amount-div', function() {
  399. location.href = "my-reward.html";
  400. });
  401. /*菜单跳转*/
  402. $(document).on('tap', '#menu-nav>a', function() {
  403. var status = $(this).attr("name");
  404. location.href = 'order-list.html?salesStatus=' + status;
  405. });
  406. $(document).on('tap', '.go_order_list', function() {
  407. location.href = 'order-list.html?salesStatus=-1';
  408. });
  409. // 弹窗
  410. $(document).on('tap', '.join-vip', function() {
  411. var type = $(".vip-note").attr('type');//1:成为会员 3:会员权益
  412. if(type == 1){
  413. $('.dalog').show();
  414. }else{
  415. location.href='vip-equity.html';
  416. }
  417. });
  418. // 关闭弹窗
  419. $(document).on('tap', '.icon-guanbicha', function() {
  420. $('.dalog').hide();
  421. });
  422. // 成为会员
  423. $(document).on('tap', '.btn-see-integral', function() {
  424. location.href='register-vip.html';
  425. });
  426. mui.ready(function() {
  427. $.ajax(base_path + '/wechat/agent/member?dates=' + new Date().getTime(), {
  428. dataType: 'json',
  429. type: 'post',
  430. xhrFields: {
  431. withCredentials: true
  432. },
  433. crossDomain: true,
  434. timeout: 15000,
  435. success: function(dt) {
  436. if (dt.isRedirect) {
  437. location.href = dt.redirectURL;
  438. } else {
  439. var data = dt.data;
  440. if(dt.status) {
  441. // userIdentity = data.userIdentity;
  442. if(data.userHead != null && typeof(data.userHead) != "undefined" && data.userHead != '') {
  443. //var imgObj = $("<img src='" + data.userHead + "?" + new Date().getTime() + "'/>");
  444. $("#headDiv").attr("src", data.userHead);
  445. } else {
  446. $("#headDiv").attr("src", "images/tx-1.jpg");
  447. }
  448. if(data.userNickname != null && typeof(data.userNickname) != "undefined" && data.userNickname != '') {
  449. $("#userNickname").html(decodeURI(data.userNickname));
  450. } else {
  451. $("#userNickname").html("微信用户");
  452. }
  453. if(data.userIsVip == 1){
  454. $('.vip-l').text('成为会员');
  455. $('.vip-note').attr('type',1);
  456. }
  457. if(isEmpty(data.userSurplusIntegral)){
  458. $('.user_surplus_integral').text(data.userSurplusIntegral);
  459. }
  460. $('.coupon_num').text(data.couponCount);
  461. // $("#userNickname").append('<img class="vip_icon" src="http://static.iamberry.com/images/shop/dl_icon.png" />');
  462. // document.querySelector('.loading-bg').style.display='none';
  463. } else {
  464. // var btnArray = ['否', '是'];
  465. // mui.confirm(dt.message, '爱贝源-提示', btnArray, function(e) {
  466. // if (e.index == 1) {
  467. // location.reload(true);
  468. // }
  469. // });
  470. }
  471. }
  472. },
  473. error: function(xhr, type, errorThrown) {
  474. //异常处理;
  475. console.log(xhr);
  476. }
  477. });
  478. $.ajax(base_path + '/wechat/welfare/getAmount?dates=' + new Date().getTime(), {
  479. dataType: 'json',
  480. type: 'post',
  481. xhrFields: {
  482. withCredentials: true
  483. },
  484. crossDomain: true,
  485. timeout: 15000,
  486. success: function(res) {
  487. if(res.status) {
  488. $("#uables-amount").text((res.data.amonutUsable / 100).toFixed(2));
  489. }
  490. },
  491. error: function(xhr, type, errorThrown) {
  492. //异常处理;
  493. console.log(xhr);
  494. }
  495. });
  496. $(".loading").hide().css("opacity", "0");
  497. });
  498. $(document).on('tap', '#center-menu>li', function(event) {
  499. if(typeof($(this).attr("href")) != "undefined") {
  500. location.href = $(this).attr("href");
  501. } else {
  502. mui.alert("正在建设中!敬请期待")
  503. }
  504. });
  505. $(document).on('tap', '.go-integral-center', function(event) {
  506. location.href = 'integral-center.html';
  507. });
  508. $(document).on('tap', '.coupon_list', function(event) {
  509. location.href = 'coupon_list.html';
  510. });
  511. </script>
  512. </body>
  513. </html>