my-center.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="format-detection" content="telephone=no">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <title>会员中心</title>
  10. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  11. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  12. <link rel="stylesheet" type="text/css" href="css/main.css" />
  13. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  14. <script>
  15. //屏蔽分享
  16. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  17. WeixinJSBridge.call('hideOptionMenu');
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <!--底部菜单开始-->
  23. <footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
  24. <a class="mui-tab-item">
  25. <span class="iconfont icon-shouye"></span>
  26. <span class="mui-tab-label">首页</span>
  27. </a>
  28. <a class="mui-tab-item">
  29. <span class="iconfont icon-liebiao"></span>
  30. <span class="mui-tab-label">列表</span>
  31. </a>
  32. <a class="mui-tab-item">
  33. <span class="iconfont icon-gouwuche"></span>
  34. <span class="mui-tab-label">购物车</span>
  35. </a>
  36. <a class="mui-tab-item mui-active">
  37. <span class="iconfont icon-huiyuan"></span>
  38. <span class="mui-tab-label">会员</span>
  39. </a>
  40. </footer>
  41. <!--底部菜单结束-->
  42. <div class="mui-content">
  43. <div class="vip-user-box">
  44. <div class="user-middle">
  45. <div class="user-head">
  46. <!--头像-->
  47. <!--<img id="headDiv" src="images/tx-1.png" />-->
  48. <!--等级图标-->
  49. <!--<span class="user-leave"><img src="images/icon-vip-1.png" /></span>-->
  50. </div>
  51. <!--昵称-->
  52. <div class="user-name" id="userNickname"></div>
  53. <!--用户身份-->
  54. <div class="userIdentity"></div>
  55. <h6 class="mui-h6" style="padding: 5px 0;">需300积分可升级</h6>
  56. <!--进度条-->
  57. <div id="demo1" class="progressbar-box">
  58. <p class="mui-progressbar mui-progressbar-in" data-progress="100"><span></span></p>
  59. <!--<div>
  60. <span style="float: left;">磷叶石</span><span class="mui-h5">摩根石</span><span style="float: right;" class="mui-h5">钻石</span>
  61. </div>-->
  62. </div>
  63. <!--<h6 class="my-h6">还差300积分即可升级</h6>-->
  64. </div>
  65. </div>
  66. <div class="jifen-box">
  67. <div id="jifen-menu-nav" class="mui-segmented-control">
  68. <a class="mui-control-item mui-active" status="1">朵粉币
  69. <div>0</div>
  70. </a>
  71. <a class="mui-control-item" status="3">待入账
  72. <div>0</div>
  73. </a>
  74. <a class="mui-control-item" status="2">成长值
  75. <div>0</div>
  76. </a>
  77. </div>
  78. </div>
  79. <div class="order-menu-box">
  80. <div id="vip-menu-nav" class="mui-segmented-control">
  81. <a class="mui-control-item" status="1">
  82. <div class="iconfont icon-daifukuan"></div>
  83. 待付款
  84. </a>
  85. <a class="mui-control-item" status="2">
  86. <div class="iconfont icon-daifahuo">
  87. <!--<span class="mui-badge my-badge-danger"></span>-->
  88. </div>
  89. 待发货
  90. </a>
  91. <a class="mui-control-item" status="5">
  92. <div class="iconfont icon-yifahuo"></div>
  93. 已发货
  94. </a>
  95. <a class="mui-control-item" status="20">
  96. <div class="iconfont icon-quanbu"></div>
  97. 全部
  98. </a>
  99. </div>
  100. </div>
  101. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-center-no" id="center-menu" >
  102. <li class="mui-table-view-cell" id="my-coupon-list">
  103. <div class="mui-table">
  104. <div class="mui-table-cell mui-col-xs-5 table-middle">
  105. <span class="iconfont icon-quanbao"></span>我的券包
  106. </div>
  107. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  108. <span class="mui-icon mui-icon-arrowright"></span>
  109. </div>
  110. </div>
  111. </li>
  112. <li class="mui-table-view-cell" id="add-tooth">
  113. <div class="mui-table">
  114. <div class="mui-table-cell mui-col-xs-5">
  115. <span class="iconfont icon-tianjia"></span>产品注册
  116. </div>
  117. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  118. <span class="mui-icon mui-icon-arrowright"></span>
  119. </div>
  120. </div>
  121. </li>
  122. <li class="mui-table-view-cell" href="my-center.html" id="my-toothbrush">
  123. <div class="mui-table">
  124. <div class="mui-table-cell mui-col-xs-5">
  125. <span class="iconfont icon-yashua"></span>我的牙刷
  126. </div>
  127. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  128. <span class="mui-icon mui-icon-arrowright"></span>
  129. </div>
  130. </div>
  131. </li>
  132. <li class="mui-table-view-cell" href="tel:4001234123" id="jifen-shopping">
  133. <div class="mui-table">
  134. <div class="mui-table-cell mui-col-xs-5">
  135. <span class="iconfont icon-jifen"></span>积分商城
  136. </div>
  137. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  138. <i>敬请期待</i> <span class="mui-icon mui-icon-arrowright"></span>
  139. </div>
  140. </div>
  141. </li>
  142. <!--<li class="mui-table-view-cell" id="receive-charger">
  143. <div class="mui-table">
  144. <div class="mui-table-cell mui-col-xs-5">
  145. <span class="iconfont icon-mianfeilingqu"></span>免费领取充电器
  146. </div>
  147. <div class="mui-table-cell mui-col-xs-5 mui-text-right">
  148. <span class="mui-icon mui-icon-arrowright"></span>
  149. </div>
  150. </div>
  151. </li>-->
  152. </ul>
  153. <div class="mui-content-padded mui-text-center">客服电话:
  154. <a class="tel" href="tel:4006781860">400-6781860</a>
  155. </div>
  156. </div>
  157. <!-- 加载ing -->
  158. <div class="loading covers">
  159. <div class="loading-bj"></div>
  160. <p>加载中...</p>
  161. </div>
  162. <!-- 加载ing END -->
  163. <script src="js/mui.min.js"></script>
  164. <script src="js/jquery-2.1.1.min.js"></script>
  165. <script src="js/main.js"></script>
  166. <script>
  167. window.addEventListener('pageshow', function(e) {
  168. // 通过persisted属性判断是否存在 BF Cache
  169. if(e.persisted) {
  170. location.reload();
  171. }
  172. });
  173. mui.ready(function() {
  174. //进度条
  175. // var progressbar1 = mui('#demo1');
  176. // mui(progressbar1).progressbar().setProgress(50); //设置进度条50(单位%)
  177. $(".loading").hide().css("opacity", "0");//隐藏loadilng
  178. var userIdentity;
  179. //mask.show(); //显示遮罩层蒙板
  180. });
  181. $.ajax(base_path + '/wechat/userIntegral/getRankRule?dates=' + new Date().getTime(), {
  182. data: {},// ajax参数 没有则不写
  183. dataType: 'json',
  184. xhrFields: {
  185. withCredentials: true
  186. },
  187. crossDomain: true,
  188. type: 'get',
  189. timeout: 15000,
  190. success: function(dt) {
  191. if(dt.isRedirect) {//先判断isRedirect,然后跳转redirectURL
  192. location.href = dt.redirectURL;
  193. } else {
  194. if(dt.status) {//判断接口返回状态status
  195. if(dt.data.memberInfo){//判断用户信息是否为空
  196. $(".mui-backdrop").remove(); //移除遮罩层
  197. var user = document.body.querySelector('.user-head');//头像容器
  198. var head= document.createElement('li');
  199. var userHead=dt.data.memberInfo.userHead;
  200. if(userHead == null || userHead == "" || typeof(userHead) == "undefined"){//判断头像是否为空
  201. head.innerHTML='<img id="headDiv" src="images/logo.png" />';//默认头像
  202. }else{
  203. head.innerHTML='<img id="headDiv" src="'+userHead+'" />';//用户头像
  204. }
  205. user.appendChild(head);//添加头像
  206. var userNickname=dt.data.memberInfo.userNickname;
  207. if(userNickname == null || userNickname == "" || typeof(userNickname) == "undefined") {//判断昵称是否为空
  208. $("#userNickname").text("微信用户");
  209. }else{
  210. $("#userNickname").text(dt.data.memberInfo.userNickname);
  211. }
  212. if(dt.data.notSendCount){//判断未发货数量
  213. // $(".my-badge-danger").text(dt.data.notSendCount);
  214. var daifahuo = document.body.querySelector('.icon-daifahuo');
  215. var s = document.createElement('li');//创建li标签
  216. s.innerHTML ='<span class="mui-badge my-badge-danger">'+dt.data.notSendCount+'</span>';
  217. daifahuo.appendChild(s);//插入代发货数量
  218. }
  219. userIdentity=dt.data.memberInfo.userIdentity;
  220. if(userIdentity==1){//判断用户身份是否为会员
  221. if(!window.sessionStorage) {
  222. mui.alert("您的浏览器不支持sessionStorage");
  223. } else {
  224. //自定义json数据
  225. var obj = {
  226. userName: dt.data.memberInfo.userName,
  227. sex: dt.data.memberInfo.userSex,
  228. age: dt.data.memberInfo.userAgeStage,
  229. tel: dt.data.memberInfo.userTel
  230. };
  231. //json格式化插入
  232. sessionStorage.setItem('user_data', JSON.stringify(obj));
  233. }
  234. var table = document.body.querySelector('.progressbar-box');//进度条容器
  235. var div = document.createElement('li');//创建li标签(进度条)
  236. var ico= document.createElement('li');//创建li标签(等级图标)
  237. ico.innerHTML='<span class="user-leave"><img src="'+dt.data.listRankRule[0].rankIco+'" /></span>';
  238. user.appendChild(ico);//添加图标
  239. var progressbar1 = mui('#demo1');
  240. var lislength=dt.data.listRankRule.length;
  241. if(lislength>2){//判断是否有下下级
  242. var poorIntegral=dt.data.listRankRule[0].rankRuleIntegral-dt.data.memberInfo.userIntegral;//距离下一个等级的积分
  243. div.innerHTML ='<div><span style="float: left;">'//插入等级信息
  244. +dt.data.listRankRule[0].rankRuleName+'</span><span class="mui-h5">'
  245. +dt.data.listRankRule[1].rankRuleName+'</span><span style="float: right;" class="mui-h5">'
  246. +dt.data.listRankRule[2].rankRuleName+'</span></div><h6 class="my-h6">还剩'
  247. +poorIntegral+'积分即可升级</h6>';
  248. mui(progressbar1).progressbar().setProgress(dt.data.memberInfo.userIntegral/dt.data.listRankRule[0].rankRuleIntegral*100);//进度条%
  249. table.appendChild(div);
  250. }else if(lislength==2){//只有下一级的情况
  251. mui(progressbar1).progressbar().setProgress(dt.data.memberInfo.userIntegral/dt.data.listRankRule[0].rankRuleIntegral*100);//进度条%
  252. $(".user-leave img").attr("src",dt.data.listRankRule[0].rankIco);//修改图标
  253. var poorIntegral=dt.data.listRankRule[0].rankRuleIntegral-dt.data.memberInfo.userIntegral;//距离下一个等级的积分
  254. div.innerHTML ='<div><span style="float: left;">'//插入等级信息
  255. +dt.data.listRankRule[0].rankRuleName+'</span><span style="float: right;" class="mui-h5">'
  256. +dt.data.listRankRule[1].rankRuleName+'</span></div></br><h6 class="my-h6">还剩'
  257. +poorIntegral+'积分即可升级</h6>';
  258. table.appendChild(div);
  259. }else{//最高级
  260. mui(progressbar1).progressbar().setProgress(dt.data.memberInfo.userIntegral/dt.data.listRankRule[0].rankRuleIntegral*100);//进度条%
  261. $(".user-leave img").attr("src",dt.data.listRankRule[0].rankIco);//修改图标
  262. div.innerHTML ='<div><span style="float: center;">'//插入等级信息
  263. +dt.data.listRankRule[0].rankRuleName+'</span></div>';
  264. table.appendChild(div);
  265. }
  266. var userStayIntegral=dt.data.memberInfo.userStayIntegral;
  267. var userSurplusIntegral=dt.data.memberInfo.userSurplusIntegral;
  268. var userIntegral=dt.data.memberInfo.userIntegral;
  269. //判断积分是否为空
  270. if(userStayIntegral == null || userStayIntegral == "" || typeof(userStayIntegral) == "undefined") {
  271. userStayIntegral = 0;
  272. }
  273. if(userSurplusIntegral == null || userSurplusIntegral == "" || typeof(userSurplusIntegral) == "undefined") {
  274. userSurplusIntegral = 0;
  275. }
  276. if(userIntegral == null || userIntegral == "" || typeof(userIntegral) == "undefined") {
  277. userIntegral = 0;
  278. }
  279. // var table1 = document.body.querySelector('.mui-segmented-control');
  280. // var a = document.createElement('li');//创建li标签
  281. // a.innerHTML ='<a class="mui-control-item mui-active status="1"">可用积分<div>'//插入积分信息
  282. // +userSurplusIntegral+'</div></a><a class="mui-control-item status="3"">待入积分<div>'
  283. // +userStayIntegral+'</div></a><a class="mui-control-item status="2"">累计积分<div>'
  284. // +userIntegral+'</div></a>';
  285. // table1.appendChild(a);
  286. $("#jifen-menu-nav a div").eq(0).text(userSurplusIntegral);
  287. $("#jifen-menu-nav a div").eq(1).text(userStayIntegral);
  288. $("#jifen-menu-nav a div").eq(2).text(userIntegral);
  289. }else{//当为微信用户时
  290. if(userNickname){
  291. $(".userIdentity").text("微信用户");//不是会员时显示微信用户
  292. }
  293. $("#my-toothbrush").hide();//隐藏我的牙刷
  294. //$(".jifen-box").hide();//隐藏积分
  295. $(".progressbar-box").hide();//隐藏进度条
  296. $(".user-leave").hide();//隐藏会员等级
  297. // $(".my-badge-danger").hide();
  298. }
  299. }else{
  300. $(".vip-user-box").hide();
  301. $("#my-toothbrush").hide();
  302. }
  303. } else {
  304. mui.alert("进入失败!网络错误");
  305. }
  306. }
  307. },
  308. error: function(xhr, type, errorThrown) {
  309. console.log(xhr);
  310. mui.alert("进入失败!网络错误");
  311. }
  312. });
  313. //头像弹窗
  314. $(document).on('tap', '#headDiv', function() {
  315. //mask.show(); //显示遮罩层蒙板
  316. //判断一下页面上有没有弹窗
  317. // if($(".header-dalog").length == 0) {
  318. // $("body").append('<div class="dalog-vip-center header-dalog"><div><img width="100%" src="images/to-vip.png" /></div><button type="button">立即购买</button><span class="iconfont icon-guanbi"></span></div>');
  319. // $(".header-dalog").show();
  320. // } else {
  321. // $(".header-dalog").show();
  322. // }
  323. if(userIdentity==1){
  324. //$(".mui-backdrop").remove(); //移除遮罩层
  325. location.href = 'my-vip-message.html';
  326. }else{
  327. // $("body").append('<div class="dalog-vip-center header-dalog"><div><img width="100%" src="images/to-vip.png" /></div><button id="bt-weixin" type="button">立即购买</button><span class="iconfont icon-guanbi"></span></div>');
  328. // $(".header-dalog").show();
  329. }
  330. });
  331. /*弹窗按钮状态跳转*/
  332. $(document).on('tap', '#bt-weixin', function() {
  333. location.href = 'pro-list.html';
  334. });
  335. //进度条弹窗
  336. $(document).on('tap', '#demo1', function() {
  337. //mask.show(); //显示遮罩层蒙板
  338. if($(".progressbar-dalog").length == 0) {
  339. $("body").append('<div class="dalog-vip-center progressbar-dalog"><div><img width="100%" src="images/to-press.png" /></div><button id="bt-member" type="button">我知道了</button><span class="iconfont icon-guanbi"></span></div>');
  340. //$(".progressbar-dalog").show();
  341. } else {
  342. //$(".progressbar-dalog").show();
  343. }
  344. });
  345. $(document).on('tap', '#bt-member', function() {
  346. $(".mui-backdrop").remove(); //移除遮罩层
  347. $(".progressbar-dalog").hide();//隐藏弹窗
  348. });
  349. //关闭弹窗
  350. $(document).on('tap', '.icon-guanbi', function() {
  351. $(".mui-backdrop").remove(); //移除遮罩层
  352. $(".dalog-vip-center").hide();//隐藏弹窗
  353. });
  354. //callback为用户点击蒙版时自动执行的回调;
  355. var mask = mui.createMask(function() {
  356. $(".dalog-vip-center").hide(); //隐藏弹窗
  357. });
  358. /*订单状态跳转*/
  359. $(document).on('tap', '#vip-menu-nav>a', function() {
  360. var status = $(this).attr("status");
  361. //带上选中状态跳转
  362. location.href = 'order-list.html?salesStatus='+status;
  363. });
  364. /*积分div跳转积分页面*/
  365. $(document).on('tap', '#jifen-menu-nav>a', function() {
  366. var status = $(this).attr("status");
  367. location.href = 'integral-log.html?integralStatus='+status;
  368. });
  369. /*我的券包跳转*/
  370. $(document).on('tap', '#my-coupon-list', function() {
  371. location.href = 'coupon_list.html';
  372. });
  373. /*我的牙刷跳转*/
  374. $(document).on('tap', '#my-toothbrush', function() {
  375. location.href = 'my-tooth.html';
  376. });
  377. /*添加牙刷跳转*/
  378. $(document).on('tap', '#add-tooth', function() {
  379. location.href = 'add-tooth.html';
  380. });
  381. /*积分商城跳转*/
  382. $(document).on('tap', '#jifen-shopping', function() {
  383. mui.alert("敬请期待!");
  384. });
  385. $(document).on('tap', '#receive-charger', function() {
  386. location.href = 'receive-charger.html';
  387. });
  388. </script>
  389. </body>
  390. </html>