<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-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">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/xuekewang/preview.css" />
		<link rel="stylesheet" type="text/css" href="../../../js/v-viewer/viewer.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.extend.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/oneSub/common/imageviewer.css" />
	
		<link rel="stylesheet" href="../../css/oneSub/common/oneSubCommon.css" />

		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/sf/htmlFont.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/layer_mobile/layer.js"></script>
		<style>
			.youhuiquan{
				 display: flex;
				 width: 100%;
				 height: 100%;
				 margin-top: 5px;
				 background: gainsboro;
			}
			
			.left{
				width: 100%;
				height: 80px;
				flex: 3;
				/* border: 1px solid gainsboro; */
				box-shadow: 0 0 3px #999;
				border-radius: 10px;
				text-align: left;
				font-size: 10px;
				padding-top: 5px;
			}
			
			.youhuiquan_name{
				display: block;
				color: black;
				font-size: 20px;
				padding-left: 15px;
				padding-top: 5px;
			
			}
			
			.youhuiquan_name2{
				
				display: block;
				font-size: 20px;
				padding-left: 15px;
				padding-top: 5px;
			}
			
			.youhuiquan_endtime{
				display: block;
				margin-left: 15px;
				font-size: 10px;
			}
		
			
			.shuoming{
				display: block;
				margin-left: 15px;
				margin-bottom: 1px;
				padding-top: 8px;
				color: gainsboro;
			}
			
			.shuoming2{
				display: block;
				margin-left: 15px;
				margin-bottom: 1px;
				padding-top: 8px;
				color: ghostwhite;
			}
			
			.right{
				width: 100%;
				height: 80px;
				flex: 1;
				box-shadow: 0 0 4px #999;
				/* border: 1px solid gainsboro; */
				border-radius: 10px;
				text-align: center;
				padding: 15px;
			}
			
			.youhuiquan_money{
				font-size: 30px;
				color: #FFFFFF;"
			}
			
			.right input{
				border: 0px;
				border-radius: 5px;
				font-size: 10px;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
			<div id="body">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF; padding-left: 4%;"></a>
					<h1 class="mui-title" style="font-size: 0.16rem;font-weight:bold;">我的红包</h1>
				</header>
				<div class="mui-content" >
					<!-- 主界面具体展示内容 -->
					<div class="mui-content-padded" style="margin: 0rem;">
						<div id="slider" class="mui-slider">
							<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
								<div id="tabDiv">
									<a class="mui-control-item mui-active" href="javaScript:void(0);" @click="changeCheckbox('weishiyong')">
										未使用({{weishiyongyouhuiquanCount}})
									</a>
									<a class="mui-control-item" href="javaScript:void(0);" @click="changeCheckbox('yishiyong')">
										已使用({{yishiyongyouhuiquanCount}})
									</a>
									<a class="mui-control-item" href="javaScript:void(0);" @click="changeCheckbox('yiguoqi')">
										已过期({{yiguoqiyouhuiquanCount}})
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="mui-content-padded datika charts" style="margin: 20px;" v-show="weishiyongyouhuiquanCount>0">
						<div id="item1Str">
							<div class="youhuiquan" v-for="(item,index) in weishiyongyouhuiquanList">
								<div class="left" style="background: ghostwhite;" @click="shiyong($event)">
									<span class="youhuiquan_name">{{item.youhuiquan_name}}</span>
									<span class="youhuiquan_endtime" >有效期至:{{item.youhuiquan_endtime}}</span>
									<span  class="shuoming">仅在支付页面可见及可用</span>
								</div>
								<div class="right" style="background: orange;">
									<span class="youhuiquan_money"><span style="font-size: 15px;">￥</span>{{item.youhuiquan_money}}</span>
									<span><input type="button" value="立即使用" @click="shiyong($event)"></span>
								</div>
							</div>
							
						</div>
					</div>
					<div class="mui-content-padded shijuan charts" style="margin: 20px;" v-show="yishiyongyouhuiquanCount>0">
						<div id="item2Str">
							<div class="youhuiquan" v-for="(item,index) in yishiyongyouhuiquanList">
								<div class="left" style="background: gainsboro;">
									<span class="youhuiquan_name2">{{item.youhuiquan_name}}</span>
									<span class="youhuiquan_endtime">有效期至:{{item.youhuiquan_endtime}}</span>
									<span class="shuoming2">仅在支付页面可见及可用</span>
								</div>
								<div class="right" style="background:gainsboro;">
									<span class="youhuiquan_money"><span style="font-size: 15px;">￥</span>{{item.youhuiquan_money}}</span>
									<span><input type="button" value="已使用" disabled></span>
								</div>
							</div>
						</div>
					</div>
					<div class="mui-content-padded biaozhun charts" style="margin: 20px;" v-show="yiguoqiyouhuiquanCount>0">
						<!-- 主界面具体展示内容 -->
						<div id="item3Str">
							<div class="youhuiquan" v-for="(item,index) in yiguoqiyouhuiquanList">
								<div class="left" style="background: gainsboro;">
									<span class="youhuiquan_name2">{{item.youhuiquan_name}}</span>
									<span class="youhuiquan_endtime">有效期至:{{item.youhuiquan_endtime}}</span>
									<span  class="shuoming2">仅在支付页面可见及可用</span>
								</div>
								<div class="right" style="background:gainsboro;">
									<span class="youhuiquan_money"><span style="font-size: 15px;">￥</span>{{item.youhuiquan_money}}</span>
									<span><input type="button" value="已过期" disabled></span>
								</div>
							</div>
						</div>
					</div>
				</div>
					
			</div>
			
	</body>
	<script src="../../js/jquery-ui.min.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.extend.js"></script>
	<script src="../../js/overhang.min.js"></script>
	<script src="../../js/vue-2.6.12.js"></script>
	<script>
		$(function(){
			
			// var payUrl = plus.storage.getItem('payUrl');
			// var systemid = plus.storage.getItem('systemid');
			// var user_id = plus.storage.getItem('xuejihao');
			// var login_username = plus.storage.getItem('username');

				var vue = new Vue({
					el:"#body",
					data:{
						weishiyongyouhuiquanList:[],
						yishiyongyouhuiquanList:[],
						yiguoqiyouhuiquanList:[],
						weishiyongyouhuiquanCount:'',
						yishiyongyouhuiquanCount:'',
						yiguoqiyouhuiquanCount:'',
					},
					created:function() {
						$("#item1Str").show();
						$("#item2Str").hide();
						$("#item3Str").hide();
					},
					methods: {
						changeCheckbox:function(item){
							if(item=="weishiyong"){
								$("#item1Str").show();
								$("#item2Str").hide();
								$("#item3Str").hide();
							}else if(item=="yishiyong"){
								$("#item1Str").hide();
								$("#item2Str").show();
								$("#item3Str").hide();
							}else if(item=="yiguoqi"){
								$("#item1Str").hide();
								$("#item2Str").hide();
								$("#item3Str").show();
							}
							
						},
						shiyong:function(e){
							mui.openWindow({
								url: '../sf/productAll.html',
								id: 'productAll'
							});
						}
					},
				});
				
				

			mui.plusReady(function() {
				
				var that=this;
				$.newAjax({
					url:plus.storage.getItem('payUrl')+"/youhuiquan/query/getUserYouhuiquan",
					data:{
						systemid:plus.storage.getItem("systemid"),
						user_id:plus.storage.getItem("xuejihao"),
						login_username:plus.storage.getItem("username"),
					},
					success:function(data){
						
						vue.weishiyongyouhuiquanList=data[0];
						vue.yishiyongyouhuiquanList=data[1];
						vue.yiguoqiyouhuiquanList=data[2];
						vue.weishiyongyouhuiquanCount=data[0].length;
						vue.yishiyongyouhuiquanCount=data[1].length;
						vue.yiguoqiyouhuiquanCount=data[2].length;
					},
					error:function (XMLHttpRequest, textStatus, errorThrown) {
						$("#item1Str").html("<li class='mui-table-view-cell' style='text-align: center;margin-top:0.50rem;background:#f0f0f0;border:0rem'>收费服务器关闭或异常,请联系管理员</li>");
					}
				})

			});
			
		
		})
	</script>

</html>