<!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>