<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>会员中心</title> <link rel="stylesheet" type="text/css" href="css/mui.min.css" /> <link rel="stylesheet" type="text/css" href="css/iconfont.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> <script> //屏蔽分享 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); }); </script> </head> <body> <!--底部菜单开始--> <footer class="mui-bar mui-bar-tab" id="footer-bar-tab"> <a class="mui-tab-item"> <span class="iconfont icon-shouye"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item"> <span class="iconfont icon-liebiao"></span> <span class="mui-tab-label">列表</span> </a> <a class="mui-tab-item"> <span class="iconfont icon-gouwuche"></span> <span class="mui-tab-label">购物车</span> </a> <a class="mui-tab-item mui-active"> <span class="iconfont icon-huiyuan"></span> <span class="mui-tab-label">会员</span> </a> </footer> <!--底部菜单结束--> <div class="mui-content"> <div class="vip-user-box"> <div class="user-middle"> <div class="user-head"> <!--头像--> <!--<img id="headDiv" src="images/tx-1.png" />--> <!--等级图标--> <!--<span class="user-leave"><img src="images/icon-vip-1.png" /></span>--> </div> <!--昵称--> <div class="user-name" id="userNickname"></div> <!--用户身份--> <h6 class="userIdentity"></h6> <!--进度条--> <div id="demo1" class="progressbar-box"> <p class="mui-progressbar mui-progressbar-in" data-progress="100"><span></span></p> <!--<div> <span style="float: left;">磷叶石</span><span class="mui-h5">摩根石</span><span style="float: right;" class="mui-h5">钻石</span> </div>--> </div> <!--<h6 class="my-h6">还差300积分即可升级</h6>--> </div> </div> <div class="jifen-box"> <div id="jifen-menu-nav" class="mui-segmented-control"> <a class="mui-control-item mui-active" status="1">可用积分 <div></div> </a> <a class="mui-control-item" status="3">待入积分 <div></div> </a> <a class="mui-control-item" status="2">累计积分 <div></div> </a> </div> </div> <div class="order-menu-box"> <div id="vip-menu-nav" class="mui-segmented-control"> <a class="mui-control-item" status="1"> <div class="iconfont icon-daifukuan"></div> 待付款 </a> <a class="mui-control-item" status="2"> <div class="iconfont icon-daifahuo"> <!--<span class="mui-badge my-badge-danger"></span>--> </div> 待发货 </a> <a class="mui-control-item" status="5"> <div class="iconfont icon-yifahuo"></div> 已发货 </a> <a class="mui-control-item" status="20"> <div class="iconfont icon-quanbu"></div> 全部 </a> </div> </div> <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-center-no" id="center-menu" > <li class="mui-table-view-cell" id="my-coupon-list"> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-5 table-middle"> <span class="iconfont icon-quanbao"></span>我的券包 </div> <div class="mui-table-cell mui-col-xs-5 mui-text-right"> <span class="mui-icon mui-icon-arrowright"></span> </div> </div> </li> <li class="mui-table-view-cell" id="add-tooth"> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-5"> <span class="iconfont icon-tianjia"></span>添加牙刷 </div> <div class="mui-table-cell mui-col-xs-5 mui-text-right"> <span class="mui-icon mui-icon-arrowright"></span> </div> </div> </li> <li class="mui-table-view-cell" href="my-center.html" id="my-toothbrush"> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-5"> <span class="iconfont icon-yashua"></span>我的牙刷 </div> <div class="mui-table-cell mui-col-xs-5 mui-text-right"> <span class="mui-icon mui-icon-arrowright"></span> </div> </div> </li> <li class="mui-table-view-cell" href="tel:4001234123" id="jifen-shopping"> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-5"> <span class="iconfont icon-jifen"></span>积分商城 </div> <div class="mui-table-cell mui-col-xs-5 mui-text-right"> <i>敬请期待</i> <span class="mui-icon mui-icon-arrowright"></span> </div> </div> </li> </ul> <div class="mui-content-padded mui-text-center">客服电话: <a class="tel" href="tel:4006781860">400-6781860</a> </div> </div> <!-- 加载ing --> <div class="loading covers"> <div class="loading-bj"></div> <p>加载中...</p> </div> <!-- 加载ing END --> <script src="js/mui.min.js"></script> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/main.js"></script> <script> window.addEventListener('pageshow', function(e) { // 通过persisted属性判断是否存在 BF Cache if(e.persisted) { location.reload(); } }); mui.ready(function() { //进度条 // var progressbar1 = mui('#demo1'); // mui(progressbar1).progressbar().setProgress(50); //设置进度条50(单位%) $(".loading").hide().css("opacity", "0");//隐藏loadilng var userIdentity; mask.show(); //显示遮罩层蒙板 }); $.ajax(base_path + '/wechat/userIntegral/getRankRule?dates=' + new Date().getTime(), { data: {},// ajax参数 没有则不写 dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'get', timeout: 15000, success: function(dt) { if(dt.isRedirect) {//先判断isRedirect,然后跳转redirectURL location.href = dt.redirectURL; } else { if(dt.status) {//判断接口返回状态status if(dt.data.memberInfo){//判断用户信息是否为空 $(".mui-backdrop").remove(); //移除遮罩层 var user = document.body.querySelector('.user-head');//头像容器 var head= document.createElement('li'); var userHead=dt.data.memberInfo.userHead; if(userHead == null || userHead == "" || typeof(userHead) == "undefined"){//判断头像是否为空 head.innerHTML='<img id="headDiv" src="images/logo.png" />';//默认头像 }else{ head.innerHTML='<img id="headDiv" src="'+userHead+'" />';//用户头像 } user.appendChild(head);//添加头像 var userNickname=dt.data.memberInfo.userNickname; if(userNickname == null || userNickname == "" || typeof(userNickname) == "undefined") {//判断昵称是否为空 $("#userNickname").text("微信用户"); }else{ $("#userNickname").text(dt.data.memberInfo.userNickname); } if(dt.data.notSendCount){//判断未发货数量 // $(".my-badge-danger").text(dt.data.notSendCount); var daifahuo = document.body.querySelector('.icon-daifahuo'); var s = document.createElement('li');//创建li标签 s.innerHTML ='<span class="mui-badge my-badge-danger">'+dt.data.notSendCount+'</span>'; daifahuo.appendChild(s);//插入代发货数量 } userIdentity=dt.data.memberInfo.userIdentity; if(userIdentity==1){//判断用户身份是否为会员 if(!window.sessionStorage) { mui.alert("您的浏览器不支持sessionStorage"); } else { //自定义json数据 var obj = { userName: dt.data.memberInfo.userName, sex: dt.data.memberInfo.userSex, age: dt.data.memberInfo.userAgeStage, tel: dt.data.memberInfo.userTel }; //json格式化插入 sessionStorage.setItem('user_data', JSON.stringify(obj)); } var table = document.body.querySelector('.progressbar-box');//进度条容器 var div = document.createElement('li');//创建li标签(进度条) var ico= document.createElement('li');//创建li标签(等级图标) ico.innerHTML='<span class="user-leave"><img src="'+dt.data.listRankRule[0].rankIco+'" /></span>'; user.appendChild(ico);//添加图标 var progressbar1 = mui('#demo1'); var lislength=dt.data.listRankRule.length; if(lislength>2){//判断是否有下下级 var poorIntegral=dt.data.listRankRule[0].rankRuleIntegral-dt.data.memberInfo.userIntegral;//距离下一个等级的积分 div.innerHTML ='<div><span style="float: left;">'//插入等级信息 +dt.data.listRankRule[0].rankRuleName+'</span><span class="mui-h5">' +dt.data.listRankRule[1].rankRuleName+'</span><span style="float: right;" class="mui-h5">' +dt.data.listRankRule[2].rankRuleName+'</span></div><h6 class="my-h6">还剩' +poorIntegral+'积分即可升级</h6>'; mui(progressbar1).progressbar().setProgress(dt.data.memberInfo.userIntegral/dt.data.listRankRule[0].rankRuleIntegral*100);//进度条% table.appendChild(div); }else if(lislength==2){//只有下一级的情况 mui(progressbar1).progressbar().setProgress(dt.data.memberInfo.userIntegral/dt.data.listRankRule[0].rankRuleIntegral*100);//进度条% $(".user-leave img").attr("src",dt.data.listRankRule[0].rankIco);//修改图标 var poorIntegral=dt.data.listRankRule[0].rankRuleIntegral-dt.data.memberInfo.userIntegral;//距离下一个等级的积分 div.innerHTML ='<div><span style="float: left;">'//插入等级信息 +dt.data.listRankRule[0].rankRuleName+'</span><span style="float: right;" class="mui-h5">' +dt.data.listRankRule[1].rankRuleName+'</span></div></br><h6 class="my-h6">还剩' +poorIntegral+'积分即可升级</h6>'; table.appendChild(div); }else{//最高级 mui(progressbar1).progressbar().setProgress(dt.data.memberInfo.userIntegral/dt.data.listRankRule[0].rankRuleIntegral*100);//进度条% $(".user-leave img").attr("src",dt.data.listRankRule[0].rankIco);//修改图标 div.innerHTML ='<div><span style="float: center;">'//插入等级信息 +dt.data.listRankRule[0].rankRuleName+'</span></div>'; table.appendChild(div); } var userStayIntegral=dt.data.memberInfo.userStayIntegral; var userSurplusIntegral=dt.data.memberInfo.userSurplusIntegral; var userIntegral=dt.data.memberInfo.userIntegral; //判断积分是否为空 if(userStayIntegral == null || userStayIntegral == "" || typeof(userStayIntegral) == "undefined") { userStayIntegral = 0; } if(userSurplusIntegral == null || userSurplusIntegral == "" || typeof(userSurplusIntegral) == "undefined") { userSurplusIntegral = 0; } if(userIntegral == null || userIntegral == "" || typeof(userIntegral) == "undefined") { userIntegral = 0; } // var table1 = document.body.querySelector('.mui-segmented-control'); // var a = document.createElement('li');//创建li标签 // a.innerHTML ='<a class="mui-control-item mui-active status="1"">可用积分<div>'//插入积分信息 // +userSurplusIntegral+'</div></a><a class="mui-control-item status="3"">待入积分<div>' // +userStayIntegral+'</div></a><a class="mui-control-item status="2"">累计积分<div>' // +userIntegral+'</div></a>'; // table1.appendChild(a); $("#jifen-menu-nav a div").eq(0).text(userSurplusIntegral); $("#jifen-menu-nav a div").eq(1).text(userStayIntegral); $("#jifen-menu-nav a div").eq(2).text(userIntegral); }else{//当为微信用户时 if(userNickname){ $(".userIdentity").text("微信用户");//不是会员时显示微信用户 } $("#my-toothbrush").hide();//隐藏我的牙刷 $(".jifen-box").hide();//隐藏积分 $(".progressbar-box").hide();//隐藏进度条 $(".user-leave").hide();//隐藏会员等级 // $(".my-badge-danger").hide(); } }else{ $(".vip-user-box").hide(); $("#my-toothbrush").hide(); } } else { mui.alert("进入失败!网络错误"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); mui.alert("进入失败!网络错误"); } }); //头像弹窗 $(document).on('tap', '#headDiv', function() { mask.show(); //显示遮罩层蒙板 //判断一下页面上有没有弹窗 // if($(".header-dalog").length == 0) { // $("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>'); // $(".header-dalog").show(); // } else { // $(".header-dalog").show(); // } if(userIdentity==1){ $(".mui-backdrop").remove(); //移除遮罩层 location.href = 'my-vip-message.html'; }else{ $("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>'); $(".header-dalog").show(); } }); /*弹窗按钮状态跳转*/ $(document).on('tap', '#bt-weixin', function() { location.href = 'pro-list.html'; }); //进度条弹窗 $(document).on('tap', '#demo1', function() { mask.show(); //显示遮罩层蒙板 if($(".progressbar-dalog").length == 0) { $("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>'); $(".progressbar-dalog").show(); } else { $(".progressbar-dalog").show(); } }); $(document).on('tap', '#bt-member', function() { $(".mui-backdrop").remove(); //移除遮罩层 $(".progressbar-dalog").hide();//隐藏弹窗 }); //关闭弹窗 $(document).on('tap', '.icon-guanbi', function() { $(".mui-backdrop").remove(); //移除遮罩层 $(".dalog-vip-center").hide();//隐藏弹窗 }); //callback为用户点击蒙版时自动执行的回调; var mask = mui.createMask(function() { $(".dalog-vip-center").hide(); //隐藏弹窗 }); /*订单状态跳转*/ $(document).on('tap', '#vip-menu-nav>a', function() { var status = $(this).attr("status"); //带上选中状态跳转 location.href = 'order-list.html?salesStatus='+status; }); /*积分div跳转积分页面*/ $(document).on('tap', '#jifen-menu-nav>a', function() { var status = $(this).attr("status"); location.href = 'integral-log.html?integralStatus='+status; console.log(status); }); /*我的券包跳转*/ $(document).on('tap', '#my-coupon-list', function() { location.href = 'coupon_list.html'; }); /*我的牙刷跳转*/ $(document).on('tap', '#my-toothbrush', function() { location.href = 'my-tooth.html'; }); /*添加牙刷跳转*/ $(document).on('tap', '#add-tooth', function() { location.href = 'add-tooth.html'; }); /*积分商城跳转*/ $(document).on('tap', '#jifen-shopping', function() { mui.alert("敬请期待!"); }); </script> </body> </html>