GEKE_PHONE/pages/sign/leave.vue

<template>
	<div>
	
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的假期</block>
		</cu-custom>
		<div class="panlen">
			<div class="items">
				<div style="height: 2px;"></div>
				{{datetime}}年度
			</div>
			<div style="text-align: center;margin-top: 10px;">
				<span style="color: #93B5E9;">年假总天数:</span><span style="margin-left:10px ;font-size: 18px;color: #FFFFFF;">{{yearDay/24}}天</span>
				<span style="margin-left:10px;border-left: 2px solid #ccc;"></span>
				<span style="margin-left:10px ;color: #93B5E9;">当前可用年假:</span><span style="margin-left:10px ;font-size: 18px;color: #FFFFFF;">{{availableDay/24}}天</span>
			</div>
		</div>
		<div style="background-color: #FFFFFF;">
			<div >
				<div style="height: 50px;position: relative;">
					
					<text style="position: absolute;top: 30%;margin-left: 10px;">年假申请记录</text>
				<!-- <strong style="position: absolute;top: 30%;font-size: 15px;">年假申请记录</strong> -->
				
				</div>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				
			<view class="cu-list  menu  radius" >
			  <view class="cu-item " v-for="s in data">
			    <navigator class="content"  hover-class="none">
					<text>年假 ({{s.holidayCount/24}}天)</text>
			     <div>
					  <div style="color: #9C9FAA;">
					  	<span >{{s.startDate}}</span>
					
				
					  	<span style="margin-left:5px;">至</span>
					  	<span style="margin-left:5px;">{{s.endDate}}</span>
					  	
					  	<span style="margin-left:5px;" v-if='s.end=="1"'>上午</span>
					  	<span style="margin-left:5px;" v-if='s.end=="2"'>下午</span>
					  </div>
				 </div>
				 <div >
					 <span style="float: right ;margin-top: -30px;color: #D6D6D6;" v-if='s.state=="2" ||s.state==2'>已通过</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="1" ||s.state==1'>审批中</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="3" ||s.state==3'>已驳回</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="4" ||s.state==4'>已撤销</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="5" ||s.state==5'>通过后撤销</span>
					 <span style="float: right ;color: #F09745;margin-top: -30px;" v-if='s.state=="6" ||s.state==6'>已删除</span>
				 </div>
			   </navigator>
			    <!-- <div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div> -->
			  </view> 
			 
						</view>
				
				<!-- <div v-for="s in data">
				<div style="height: 70px;position: relative;">
					<div style="position: absolute;top: 10px;">
					<strong style="font-size: 16px;">年假</strong ><strong style="margin-left:10px;font-size: 16px;">({{s.holidayCount/24}}天)</strong>
					<div style="color: #9C9FAA;">
						<span >{{s.startDate}}</span>
						<span style="margin-left:5px;" v-if='s.start=="1"'>上午</span>
						<span style="margin-left:5px;" v-if='s.start=="2"'>下午</span>
						
						<span style="margin-left:5px;">至</span>
						<span style="margin-left:5px;">{{s.endDate}}</span>
						
						<span style="margin-left:5px;" v-if='s.end=="1"'>上午</span>
						<span style="margin-left:5px;" v-if='s.end=="2"'>下午</span>
					</div>
					
					</div>
					<span style="width: 10px;height: 10px;float: right;" ></span>
					<span style="float: right ;margin-top: 25px;color: #D6D6D6;" v-if='s.state=="2" ||s.state==2'>已通过</span>
					<span style="float: right ;color: #F09745;margin-top: 25px;" v-if='s.state=="1" ||s.state==1'>审批中</span>
					<span style="float: right ;color: #F09745;margin-top: 25px;" v-if='s.state=="3" ||s.state==3'>已驳回</span>
					<span style="float: right ;color: #F09745;margin-top: 25px;" v-if='s.state=="4" ||s.state==4'>已撤销</span>
					<span style="float: right ;color: #F09745;margin-top: 25px;" v-if='s.state=="5" ||s.state==5'>通过后撤销</span>
					<span style="float: right ;color: #F09745;margin-top: 25px;" v-if='s.state=="6" ||s.state==6'>已删除</span>
					
					
				</div>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				</div> -->
				
				
				
			</div>
		</div>
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
			data() {
				return {
				userUrl:'/vacation/vacation/list2',
				datetime:null,
				yearDay:null,
				availableDay:null,
				data:[],
				
				}
			},
			created() {
				
				var date=new Date();
				this.datetime=date.getFullYear();
				this.$http.get(this.userUrl,{params:{userid:this.$store.getters.userid}}).then(res=>{
					console.log(res);
					this.yearDay=res.data.vacations.yearDay;
					this.availableDay=res.data.vacations.availableDay;
					if(""!=res.data.vacationsBody &&res.data.vacationsBody!=null){
						this.data=res.data.vacationsBody;
					}
					
					
					
				}).catch(err => {
					console.log(err);
				}); 
				
			},methods:{
				
					ret(){
						this.$Router.push({name:'index'})
					},
					/* mynoontip(r) {
					      const date = new Date(r);
						  var s=date.getHours();
					      if (date.getHours() >= 0 && date.getHours() < 12) {
					        return "上午";
					      } else if (date.getHours() >= 12 && date.getHours() <= 18) {
					        return "下午";
					      } 
					    }, */
					
				
				}
			}
			
		
</script>

<style>
	.panlen{
		width: 95%;
		height: 100px;
		border-radius:5px 5px 0 0; 
		background-color: #3C7AD8;
		margin:0 auto;
		margin-top: 10px;
	}
	.items{
		width: 70px;
		height: 25px;
		background-color: #EC770C;
		border-radius:5px 0 5px 0;
		text-align: center;
		color: #FFFFFF;
	}
	
	
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
</style>