liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
							<!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">可用积分
						<div>999</div>
					</a>
					<a class="mui-control-item">待入积分
						<div>999</div>
					</a>
					<a class="mui-control-item">累计积分
						<div>999</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>
			mui.ready(function() {
				//进度条
//				var progressbar1 = mui('#demo1');
//				mui(progressbar1).progressbar().setProgress(50); //设置进度条50（单位%）
				$(".loading").hide().css("opacity", "0");//隐藏loadilng
				var userIdentity;
			});
			
			$.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){//判断用户信息是否为空
									
									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/tx-1.png" />';//默认头像
									}else{
										head.innerHTML='<img id="headDiv" src="'+userHead+'" />';//用户头像
									}
									
									user.appendChild(head);//添加头像
									$("#userNickname").text(dt.data.memberInfo.userNickname);//昵称
									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');
										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[1].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[1].rankRuleIntegral*100);//进度条%
											table.appendChild(div);
										}else if(lislength==2){//只有下一级的情况
											mui(progressbar1).progressbar().setProgress(dt.data.memberInfo.userIntegral/dt.data.listRankRule[1].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">可用积分<div>'//插入积分信息
										+userSurplusIntegral+'</div></a><a class="mui-control-item">待入积分<div>'
										+userStayIntegral+'</div></a><a class="mui-control-item">累计积分<div>'
										+userIntegral+'</div></a>';
										table1.appendChild(a);
									
										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);//插入代发货数量
										}
									}else{//当为微信用户时
										$(".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', '.jifen-box', function() {
				location.href = 'integral-log.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;
			});
			
			/*我的券包跳转*/
			$(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>