<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>代理中心</title>
		<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="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="//css.iamberry.com/tooth/css/style.css" />
		<style>
		.vip-tt {position: relative;width:100%;height:150px;background:url(//s.iamberry.com/tooth/images/shop/gift-card-tit-bg3.png) center center /100% 100% no-repeat;}
		.vip-tt>img {width: 100%;}
		.tx {position: absolute;left:1em;top: 50%;width: 4.5em;height: 4.5em;display: inline-block;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-radius: 50%;background-color: #88d9eb;padding: 3px;}
		.tx>img {width: 100%;border-radius: 50%;}
		.nikname {position: absolute;left:6.5em;width:68%;top: 50%;color: #fff;-webkit-transform: translateY(-52%);transform: translateY(-52%);line-height: 1.5;}
		.nikname>div{padding:3px 0;}
		.nikname>div:first-child{position: relative;width: 100%;overflow: hidden;text-overflow: ellipsis;}
		.mui-table-view-chevron .mui-badge{display:none;}
		.btn_share{background: #fff;border-radius:6px;padding:3px 10px;float: right;margin-right: 10px;color: #e9004c;font-size: 13px;}
 .center-middle{font-size: 12px;    position: absolute;
    left: 90px;
    top: 50%;
    -webkit-transform: translateY(-50%);}
    .my-btn-line{border: 1px solid #fff; background: transparent;color: #fff;padding: 3px 10px;margin-right:8px;}
    .icon-daifahuo{font-size: 15px;padding-left:30px;}
    .icon-daifahuo:before{font-size: 19px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
    .my-div{padding: 5px 0;border-bottom: 1px solid rgba(0,0,0,.1);margin-bottom: 5px;}
    .mui-table-view.mui-grid-view .mui-table-view-cell {
    font-size: 17px;
    display: inline-block;
    margin-right: -3px;
    padding: 0 0 0 8px;
    text-align: center;
    vertical-align: middle;
    background: 0 0;
}
.mui-table-view.mui-grid-view {
    font-size: 0;
    display: block;
    width: 100%;
    padding: 0 8px 8px 0;
    white-space: normal;
}
.mui-card-link{color: #70d8eb;}
.mui-card-link.active{color: #e2e2e2;}
.mui-card-footer:after{content: '';position: absolute;left: 50%;top: 20%;width: 1px;height: 60%;background: #70D8EB;-webkit-transform: scaleX(.5);}
.mui-card-footer, .mui-card-header {min-height: 30px;padding: 6px 6px;}
.mui-card {
    box-shadow: 0 0 0 rgba(1,1,1,0);
    border: 1px solid rgba(110,214,235,.5);
}
.mui-card{font-size: 12px;}
.mui-card-footer .mui-card-link, .mui-card-header .mui-card-link {
    line-height: 34px;
    height: 34px;
    }
.bgcolor-1{height:32vw;background:url(//s.iamberry.com/tooth/images/shop/gift-card-list-1.jpg) top center no-repeat;background-size: 100% 100%;}
.bgcolor-2{height:32vw;background:url(//s.iamberry.com/tooth/images/shop/gift-card-list-2.jpg) top center no-repeat;background-size: 100% 100%;}
.h6-vip{font-size: 12px;color: #F0F0F0;text-align: left;}
.mui-btn-link{font-size: 12px;color: #fff;position: absolute;right: 10px;bottom: 0;}
.card-password{padding: 5px 0;
    font-size: 26px;
    -webkit-user-select: text;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;-webkit-transform: translateY(-50%);}
.mui-col-xs-6 .mui-card-header{-webkit-user-select:text !important;}
.ul-desc{padding:10px 10px 10px 15px;background: #fff;color: #666;font-size: 12px;}
.icon-gift.active:before{content: '\e71e';}
.my-card-list{padding:8px 8px 8px 0 !important;}
.more-view{padding: 0 0 10px 0;}
.more-view:before,.my-card-list:after{display:none;}
.mui-icon-info{font-size:20px;}
.my-select {border: 1px solid #6fd7eb !important;
    color: #6fd7eb;
    width: auto;
    margin-bottom: 0;
    padding: 3px 4px;
    text-align: center;
    position: absolute;
    -webkit-appearance: menulist;
    right: 10px;
    top: 8px;}
    .time-card{position:absolute;left:10px;bottom:5px;font-size: 14px;}
    .cl-gray{color:#8794a7;}
		</style>
		<script>
			// 屏蔽分享
			window.hiddenAllWechatMenu = true;
		</script>
	</head>
	<body style="background: #fff;">
	<div class="loading-bg">
			<div class="mui-loading">
				<div class="mui-spinner">
				</div>
				&nbsp;&nbsp;加载中...
			</div>
	</div>
			<div class="mui-content">
				<div class="vip-tt">
				<div class="tx bg-orange" id="headDiv">
					<img src="//s.iamberry.com/tooth/images/image-12.jpg" id="userHead">
				</div>
				<div class="nikname">
					<div>
						<span id="userNickname">水时代watero</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>代理商<span class="mui-icon mui-icon-info" id="btn_go_explain"></span></span>
					</div>
					<div>
						<button type="button" class="my-btn-line" id="my-zeng">我的赠品</button><button type="button" class="my-btn-line" id="my-xiaxian">继续代理</button>
					</div>
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span class="iconfont icon-daifahuo">提货卡</span><select class="my-select">
					<option value="4" id="btn-all">全部</option>
					<option value="1" id="btn-sales">待提货</option>
					<option value="2" id="btn-waitExchange">已提货</option>
					<option value="3" id="btn-exchange">已兑现</option>
				</select>
				</li>
			</ul>
			<ul class="mui-table-view mui-grid-view my-card-list">	
			</ul>
			<div class="mui-content-padded">
				<ul class="mui-pager">
					<li class="mui-disabled">
						<!-- <span class="my_prev">上一页 </span> -->
					</li>
					<li>
						<a class="my_next">
							下一页
						</a>
					</li>
				</ul>
			</div>
<!-- 			<ul class="mui-table-view more-view">
			<li class="mui-text-center">
					<span class="iconfont icon-gift" id="gift-more" style="padding: 3px 15px;"></span>
				</li>
			</ul> -->
			<ul class="ul-desc">
				<li>使用说明：</li>
				<li>1、提货卡在获取一年后方可兑现，每张提货卡兑现1250元；</li>
				<li>2、每次销售完8张提货卡以后，系统自动赠送一台净水机。</li>
			</ul>
		</div>
	<script src="//s.iamberry.com/tooth/js/mui.min.js?v=2016101701"></script>
	<script src="//s.iamberry.com/tooth/js/jquery-2.1.1.min.js"></script>
	<script src="//s.iamberry.com/tooth/js/shop/main.js"></script>
	<script src="//s.iamberry.com/tooth/js/shop/wechat-utils-1.0.js"></script>
	<script type="text/javascript">
	 var pageNumber = 0,pageSize=10;
	 mui.ready(function(){
		mui.ajax(base_path + '/agent_pay/agent_info?dates=' + new Date().getTime(), {
			data: {},
			dataType: 'json',
			type: 'post',
			timeout: 15000,
			success: function(dt) {
				if(dt.isRedirect) {
					location.href = dt.redirectURL;
				} else {
					if(dt.status){
						if(dt.data.agentHead != null && typeof(dt.data.agentHead) != "undefined" && dt.data.agentHead != '') {
							$("#userHead").prop('src',dt.data.agentHead);
						}
						if(dt.data.agentNickname != null && typeof(dt.data.agentNickname) != "undefined" && dt.data.agentNickname != '') {
							var name=decodeURI(dt.data.agentNickname);
							if(name.length>9){
								name=name.substring(0,8)+"..."
							}
							$("#userNickname").html(name);
						}
						document.querySelector('.loading-bg').style.display='none';
					}else{
						mui.alert(dt.message,'',function(){
							mui.openWindow({url:'/tooth/view/gift_card_to_agent.html'});
						});
					}
				}
			},
			error: function(xhr, type, errorThrown) {
				//异常处理；
				console.log(xhr);
			}
		});
		getGiftList(4);
		//$(".hide").addClass('mui-hidden');
	});
	function getGiftList(obj){
		
		++pageNumber;
		mui.ajax(base_path + '/giftCard/card/selectCardList?dates=' + new Date().getTime(), {
			data: {
				"status":obj,"pageNO":pageNumber,"pageSize":pageSize
			},
			dataType: 'json',
			type: 'post',
			timeout: 15000,
			success: function(dt) {
				console.log(dt)
				if(dt.isRedirect) {
					location.href = dt.redirectURL;
				} else {
					if(dt.status) {
						var table = document.body.querySelector('.my-card-list');
						//table.innerHTML='';
						var gift_data = [];
						gift_data = dt.data.list;
						$("#btn-all").text("全部"+dt.data.count+"张");
                        $("#btn-sales").text("待提货"+dt.data.salesNum+"张");
                        $("#btn-waitExchange").text("已提货"+dt.data.waitExchangeNum+"张");
                        $("#btn-exchange").text("已兑现"+dt.data.exchangeNum+"张");

						mui(gift_data).each(function(index) {
							var status='',salesStatus='',cl='',ft_cl='';
							if (this.cardStatus == 2) {
								status='已提货';cl='bgcolor-2';ft_cl='cl-gray';
							} else if (this.cardStatus == 1) {
								status='待提货';cl='bgcolor-1';
							} else if (this.cardStatus == 3){
								status='已兑';cl='bgcolor-2';ft_cl='cl-gray';
							}
						/* if(this.cardSalesStatus==1 || (this.cardSalesStatus==2 && this.cardStatus == 3)){
							salesStatus='<a class="mui-card-link btn-details" name="'+this.cardPassword+'" id="'+this.cardId+'">查看详情</a>';
						} else if (this.cardSalesStatus==2 && this.cardStatus == 1) {
							salesStatus='<a class="mui-card-link myactive"  name="'+this.cardPassword+'" id="'+this.cardId+'">待售/赠</a>';
						} */
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-media mui-col-xs-12 btn-details';
						li.setAttribute('name',this.cardPassword);
						li.setAttribute('id',this.cardId);
						li.innerHTML = '<div class="mui-card"><div class="mui-card-header mui-card-media '+cl+'"><div class="ft-12 mui-text-left"></div><div class="card-password '+ft_cl+'" name="'+this.cardPassword+'">'+this.cardPassword+'</div><span class="time-card">'+formatDate(this.cardCreateDate)+'</span><a class="mui-btn-link my-link">'+status+'</a></div></div>';
						table.appendChild(li);
						});
					} else {
						mui.alert(dt.message);
					}
				}
			},
			error: function(xhr, type, errorThrown) {
				//异常处理；
				console.log(xhr);
			}
		});
	}
	$(document).on('tap', '.my_next', function() {
		getGiftList($(".my-select").find("option:selected").val());
	});
	mui('body').on('tap', '#btn_go_explain', function() {
		mui.openWindow({
			url: '/tooth/view/gift_card_agent_explain.html'
		});
	});
	mui('body').on('tap', '#my-zeng', function() {
		mui.openWindow({
			url: '/tooth/view/gift_card_give_order_list.html'
		});
	});
	mui('body').on('tap', '#my-xiaxian', function() {
		mui.openWindow({
			url: '/tooth/view/gift_card_renew_agent.html'
		});
	});
	mui('body').on('tap', '#gift-more', function() {
		getGiftList();
	});
/* 	$(document).on('tap', '.see', function() {
		if($(this).hasClass('icon-biyan')){
			$(this).parent().next().text($(this).parent().next().attr('name'));
			$(this).removeClass('icon-biyan').addClass('icon-yanjing');
		}else{
			$(this).removeClass('icon-yanjing').addClass('icon-biyan');
			$(this).parent().next().prop('name',$(this).parent().next().text());
			$(this).parent().next().text("*******");
		}
	}); */
	$(document).on('change', '.my-select', function() {
		$(".my-card-list").empty();
		pageNumber=0;
		getGiftList($(this).val());
	});
	mui('body').on('tap', '.btn-details', function() {
		var th=this;
		mui.openWindow({
			url: '/tooth/view/gift_card_exchange_details.html?name='+th.getAttribute("id")+'&psw='+th.getAttribute("name")
		});
	});
	</script>
	</body>
</html>
