123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434 |
- <!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" style="font-size: 20px;"></div>
- <!--用户身份-->
- <div class="userIdentity"></div>
-
- <!--进度条-->
- <div id="demo1" class="progressbar-box">
- <div class="user_rank_name"></div>
- <h6 id="distanceNextLevelIntegral" class="mui-h6" style="padding: 5px 0;"></h6>
-
- <!--<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 id="userSurplusIntegral">0</div>
- </a>
- <a class="mui-control-item" status="3">待入账
- <div>0</div>
- </a>
- <a class="mui-control-item" status="2">成长值
- <div>0</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>
- <!--<li class="mui-table-view-cell" id="receive-charger">
- <div class="mui-table">
- <div class="mui-table-cell mui-col-xs-5">
- <span class="iconfont icon-mianfeilingqu"></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>-->
- </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
- //console.log(dt)
- 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);//插入代发货数量
- }
- if(typeof(dt.data.distanceNextLevelIntegral)!="undefined"){
- if(dt.data.distanceNextLevelIntegral>0){
- $("#distanceNextLevelIntegral").text('需'+dt.data.distanceNextLevelIntegral+'积分可升级');
- }else{
- $("#distanceNextLevelIntegral").hide();
- }
- }
- 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,
- userBirthDate: dt.data.memberInfo.userBirthDate,
- tel: dt.data.memberInfo.userTel
- };
- //json格式化插入
- sessionStorage.setItem('user_data', JSON.stringify(obj));
- }
- if(typeof(dt.data.currentRankRule) != "undefined" && dt.data.currentRankRule != null ){
- $(".user_rank_name").html(dt.data.currentRankRule.rankRuleName);
- }
-
-
- // 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);//进度条%
-
- $(".mui-progressbar").hide();
-
- $(".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;
- });
-
- /*我的券包跳转*/
- $(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() {
- location.href = 'index.html?nav=2';
- });
- $(document).on('tap', '#receive-charger', function() {
- location.href = 'receive-charger.html';
- });
-
- </script>
- </body>
- </html>
|