my-center.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  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 icon-shouye"></span>
  189. <span class="mui-tab-label">首页</span>
  190. </a>
  191. <a class="mui-tab-item">
  192. <span class="iconfont icon-gouwuche"></span>
  193. <span class="mui-tab-label">购物车</span>
  194. </a>
  195. <a class="mui-tab-item">
  196. <span class="iconfont icon-dingdan"></span>
  197. <span class="mui-tab-label">订单</span>
  198. </a>
  199. <a class="mui-tab-item mui-active">
  200. <span class="iconfont icon-wode"></span>
  201. <span class="mui-tab-label">我的</span>
  202. </a>
  203. </footer>
  204. <div class="mui-content">
  205. <div class="center-header">
  206. <div class="wecat-head">
  207. <div class="user-head">
  208. <img id="headDiv" src="images/tx-1.jpg" />
  209. </div>
  210. <div id="userNickname">微信用户</div>
  211. <!--<div class="mui-table" style="padding-top: 15px;">
  212. <div class="mui-table-cell amount-div">
  213. <h5 style="font-size: 14px;padding-bottom: 10px;">待入帐</h5>
  214. <div class="cl-red" style="font-size: 20px;">¥<span id="await-amount">0</span></div>
  215. </div>
  216. <div class="mui-table-cell amount-div">
  217. <h5 style="font-size: 14px;padding-bottom: 10px;">可提现</h5>
  218. <div class="cl-red" style="font-size: 20px;">¥<span id="uables-amount">0</span></div>
  219. <div style="width: 1px;height: 30px;background: #ccc;-webkit-transform: scaleX(.3);position: absolute;right: 0;bottom: 5px;"></div>
  220. </div>
  221. </div>-->
  222. </div>
  223. <div class="bottom-vip">
  224. <div class="mui-table">
  225. <div class="mui-table-cell "><img class="vip-icon" src="images/vip-1.png" />&nbsp;&nbsp;Aiberle爱贝源会员</div>
  226. <div class="mui-table-cell mui-text-right join-vip">
  227. <span class="vip-title"><span class="vip-l vip-note" type="3">会员权益</span></span>
  228. <img class="vip-arrow" src="images/arrow-1.png" />
  229. </div>
  230. </div>
  231. </div>
  232. <!-- <div class="sign-in">
  233. <img src="images/qiandao-1.png" />
  234. <span>签到</span>
  235. </div> -->
  236. </div>
  237. <div class="center-content">
  238. <div class="mui-table mui-text-center my-count">
  239. <div class="mui-table-cell go-integral-center">
  240. <strong class="user_surplus_integral">0</strong>
  241. <p>积分</p>
  242. </div>
  243. <div class="mui-table-cell coupon_list" >
  244. <strong class="coupon_num">0</strong>
  245. <p>券包</p>
  246. </div>
  247. <div class="mui-table-cell amount-div">
  248. <strong id="uables-amount">¥0.00</strong>
  249. <p>返现</p>
  250. </div>
  251. </div>
  252. <div class="order-box">
  253. <ul class="mui-table-view">
  254. <li class="mui-table-view-cell">
  255. <a class="mui-navigate-right go_order_list">
  256. <strong>我的订单</strong><span class="mui-badge">查看全部订单</span>
  257. </a>
  258. </li>
  259. </ul>
  260. <div id="menu-nav" class="mui-segmented-control">
  261. <a class="mui-control-item" name="1">
  262. <div class="iconfont icon-daifukuan">
  263. </div>
  264. 待付款
  265. </a>
  266. <a class="mui-control-item" name="2">
  267. <div class="iconfont icon-daifahuo"></div>
  268. 待发货
  269. </a>
  270. <a class="mui-control-item" name="5">
  271. <div class="iconfont icon-yifahuo"></div>
  272. 已发货
  273. </a>
  274. <a class="mui-control-item" name="-1">
  275. <div class="iconfont icon-yiwancheng"></div>
  276. 全部
  277. </a>
  278. </div>
  279. </div>
  280. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-center-no" id="center-menu">
  281. <!-- <li class="mui-table-view-cell" href="coupon_list.html">
  282. <div class="mui-table">
  283. <div class="mui-table-cell mui-col-xs-5 table-middle">
  284. <span class="iconfont icon-A-shouhuoxinxi"></span>收货信息
  285. </div>
  286. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  287. <span class="mui-icon mui-icon-arrowright"></span>
  288. </div>
  289. </div>
  290. </li> -->
  291. <li class="mui-table-view-cell" href="vip-info.html">
  292. <div class="mui-table">
  293. <div class="mui-table-cell mui-col-xs-5 table-middle">
  294. <span class="iconfont icon-A-gerenxinxi"></span>个人信息
  295. </div>
  296. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  297. <span class="mui-icon mui-icon-arrowright"></span>
  298. </div>
  299. </div>
  300. </li>
  301. <li class="mui-table-view-cell" href="tel:400-8006692">
  302. <div class="mui-table">
  303. <div class="mui-table-cell mui-col-xs-5">
  304. <span class="iconfont icon-A-kefudianhua"></span>客服电话
  305. </div>
  306. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  307. <a class="tel" href="tel:400-8006692">400-8006692</a> <span class="mui-icon mui-icon-arrowright"></span>
  308. </div>
  309. </div>
  310. </li>
  311. <li class="mui-table-view-cell">
  312. <div class="mui-table">
  313. <div class="mui-table-cell mui-col-xs-5 table-middle">
  314. <span class="iconfont icon-A-zhanghaoanquan"></span>账号与安全
  315. </div>
  316. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  317. <span class="mui-icon mui-icon-arrowright"></span>
  318. </div>
  319. </div>
  320. </li>
  321. <li class="mui-table-view-cell">
  322. <div class="mui-table">
  323. <div class="mui-table-cell mui-col-xs-5 table-middle">
  324. <span class="iconfont icon-A-yijianxiang"></span>会员意见收集
  325. </div>
  326. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  327. <span class="mui-icon mui-icon-arrowright"></span>
  328. </div>
  329. </div>
  330. </li>
  331. </ul>
  332. </div>
  333. </div>
  334. <div class="dalog">
  335. <div>
  336. <div class="tp-box">
  337. <ul>
  338. <li><strong>积分也能当钱花</strong></li>
  339. <li>
  340. <ol>
  341. <li>·注册会员即可获得100积分</li>
  342. <li>·会员专享折扣</li>
  343. <li>·购买产品,享受积分抵扣现金优惠</li>
  344. <li>·积分换购特惠商品权益</li>
  345. <li>·会员专享生日大礼包</li>
  346. </ol>
  347. </li>
  348. <li><button type="button" class="mui-btn btn-see-integral">成为会员</button></li>
  349. </ul>
  350. </div>
  351. <br />
  352. <div class="mui-text-center">
  353. <i class="iconfont icon-guanbicha"></i>
  354. </div>
  355. </div>
  356. </div>
  357. <div class="loading covers">
  358. <div class="loading-bj"></div>
  359. <p>加载中...</p>
  360. </div>
  361. <script src="js/mui.min.js"></script>
  362. <script src="js/jquery-2.1.1.min.js"></script>
  363. <script src="js/main.js"></script>
  364. <script>
  365. $(document).on('tap', '.my-btn-cancel', function() {
  366. $(this).hide();
  367. $('#search-hot').hide();
  368. $('#search').autocompleter("close");
  369. $(".autocompleter-list").empty().css("height", "auto");
  370. $('.autocompleter-hint').removeClass('autocompleter-hint-show').empty();
  371. $(".icon-caidan").show();
  372. });
  373. $(document).on('tap', '.icon-caidan', function() {
  374. $("#menu").css("height", $(window).height());
  375. $("#menu>li").addClass("active");
  376. });
  377. $(document).on('tap', '.icon-guanbi', function() {
  378. $("#menu>li").removeClass("active");
  379. $("#menu").css("height", "0px");
  380. });
  381. $(document).on('tap', '.amount-div', function() {
  382. location.href = "my-reward.html";
  383. });
  384. /*菜单跳转*/
  385. $(document).on('tap', '#menu-nav>a', function() {
  386. var status = $(this).attr("name");
  387. location.href = 'order-list.html?salesStatus=' + status;
  388. });
  389. $(document).on('tap', '.go_order_list', function() {
  390. location.href = 'order-list.html?salesStatus=-1';
  391. });
  392. // 弹窗
  393. $(document).on('tap', '.join-vip', function() {
  394. var type = $(".vip-note").attr('type');//1:成为会员 3:会员权益
  395. if(type == 1){
  396. $('.dalog').show();
  397. }else{
  398. location.href='vip-equity.html';
  399. }
  400. });
  401. // 关闭弹窗
  402. $(document).on('tap', '.icon-guanbicha', function() {
  403. $('.dalog').hide();
  404. });
  405. // 成为会员
  406. $(document).on('tap', '.btn-see-integral', function() {
  407. location.href='register-vip.html';
  408. });
  409. mui.ready(function() {
  410. $.ajax(base_path + '/wechat/agent/member?dates=' + new Date().getTime(), {
  411. dataType: 'json',
  412. type: 'post',
  413. xhrFields: {
  414. withCredentials: true
  415. },
  416. crossDomain: true,
  417. timeout: 15000,
  418. success: function(dt) {
  419. if (dt.isRedirect) {
  420. location.href = dt.redirectURL;
  421. } else {
  422. var data = dt.data;
  423. if(dt.status) {
  424. // userIdentity = data.userIdentity;
  425. if(data.userHead != null && typeof(data.userHead) != "undefined" && data.userHead != '') {
  426. //var imgObj = $("<img src='" + data.userHead + "?" + new Date().getTime() + "'/>");
  427. $("#headDiv").attr("src", data.userHead);
  428. } else {
  429. $("#headDiv").attr("src", "images/tx-1.jpg");
  430. }
  431. if(data.userNickname != null && typeof(data.userNickname) != "undefined" && data.userNickname != '') {
  432. $("#userNickname").html(decodeURI(data.userNickname));
  433. } else {
  434. $("#userNickname").html("微信用户");
  435. }
  436. if(data.userIsVip == 1){
  437. $('.vip-l').text('成为会员');
  438. $('.vip-note').attr('type',1);
  439. }
  440. if(isEmpty(data.userSurplusIntegral)){
  441. $('.user_surplus_integral').text(data.userSurplusIntegral);
  442. }
  443. $('.coupon_num').text(data.couponCount);
  444. // $("#userNickname").append('<img class="vip_icon" src="http://static.iamberry.com/images/shop/dl_icon.png" />');
  445. // document.querySelector('.loading-bg').style.display='none';
  446. } else {
  447. // var btnArray = ['否', '是'];
  448. // mui.confirm(dt.message, '爱贝源-提示', btnArray, function(e) {
  449. // if (e.index == 1) {
  450. // location.reload(true);
  451. // }
  452. // });
  453. }
  454. }
  455. },
  456. error: function(xhr, type, errorThrown) {
  457. //异常处理;
  458. console.log(xhr);
  459. }
  460. });
  461. $.ajax(base_path + '/wechat/welfare/getAmount?dates=' + new Date().getTime(), {
  462. dataType: 'json',
  463. type: 'post',
  464. xhrFields: {
  465. withCredentials: true
  466. },
  467. crossDomain: true,
  468. timeout: 15000,
  469. success: function(res) {
  470. if(res.status) {
  471. $("#uables-amount").text((res.data.amonutUsable / 100).toFixed(2));
  472. }
  473. },
  474. error: function(xhr, type, errorThrown) {
  475. //异常处理;
  476. console.log(xhr);
  477. }
  478. });
  479. $(".loading").hide().css("opacity", "0");
  480. });
  481. $(document).on('tap', '#center-menu>li', function(event) {
  482. if(typeof($(this).attr("href")) != "undefined") {
  483. location.href = $(this).attr("href");
  484. } else {
  485. mui.alert("正在建设中!敬请期待")
  486. }
  487. });
  488. $(document).on('tap', '.go-integral-center', function(event) {
  489. location.href = 'integral-center.html';
  490. });
  491. $(document).on('tap', '.coupon_list', function(event) {
  492. location.href = 'coupon_list.html';
  493. });
  494. </script>
  495. </body>
  496. </html>