GEKE_PHONE/pages/sign/leaves.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}}天</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}}天</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.startDates}}</span>  	
					  	<span style="margin-left:5px;">至</span>
					  	<span style="margin-left:5px;">{{s.endDates}}</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>
			  </view> 
			 
						</view>
				
			</div>
		</div>
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
			data() {
				return {
				userUrl:'/sys/weixin/myVacation',
				datetime:null,
				yearDay:null,
				availableDay:null,
				data:[],
				}
			},
			created() {
				var date=new Date();
				this.datetime=date.getFullYear();
				var id=this.$store.getters.userid;
				var deptid=uni.getStorageSync('id');
				if(deptid!=null&&deptid!=""){
					id=deptid;
				}
				
				this.$http.get(this.userUrl,{params:{userid:id}}).then(res=>{
					console.log(res);
					this.yearDay=res.data.vacations.nVacRete;
					this.availableDay=res.data.vacations.nTotal;
					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'})
					},
				
					
				
				}
			}
			
		
</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>