GEKE_PHONE/pages/wages/wagesdetail2.vue

<template>
	<div>
		<!-- <div class="top" @click="ret()">
			<div style="width: 10%;height: 5px;"></div>
			<div style="margin-left: 10px;">
			<span style="float: left;width: 20px;height: 20px;">
				<image src="../../static/icon/fanhui3.png" style="width: 18px;height: 18px;"></image>
			</span>	
			<div style="margin-top: 5px;">
			<span style="color: #FFFFFF;">返回</span>
			</div>
			</div>
			<div style="text-align: center;margin-top: -22px;">
			<span style="color: #FFFFFF;">薪资查询</span>
			</div>
		</div> -->
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">薪资查询</block>
		</cu-custom>
		<div class="head"  v-for='(cd,index) in card'>
			<div style="margin-left: 20px;">
				<br>
				
				<strong class="yhCode">{{cd.name}}</strong>
				<br>
				<br>
				<div style="margin-top: -10px;">
				
				<strong style="font-size: 20px; color: #F5F8FC; " v-show='cd.del5=="1"'>****</strong>
				<strong class="yhCodes" v-show='cd.del5=="1"'>****</strong>
				<strong class="yhCodes" v-show='cd.del5=="1"'>****</strong>
				<strong class="yhCodes" v-show='cd.del5=="1"'>{{cd.del4}}</strong>
				<strong style="font-size: 20px; color: #F5F8FC; " v-show='cd.del5=="0"'>{{cd.del}}</strong>
				<strong class="yhCodes" v-show='cd.del5=="0"'>{{cd.del2}}</strong>
				<strong class="yhCodes" v-show='cd.del5=="0"'>{{cd.del3}}</strong>
				<strong class="yhCodes" v-show='cd.del5=="0"'>{{cd.del4}}</strong>
				
				 <span style="margin-left: 5%;margin-top: 5px;" v-show='cd.del5=="1"' @click='ats(cd)'>
					<image src="../../static/icon/xians3.png" style="width: 25px;height: 25px;"></image>
				</span> 
				<span style="margin-left: 7%" v-show='cd.del5=="0"' @click='acs(cd)'>
					<image src="../../static/icon/yc4.png" style="width: 20px;height: 20px;"></image>
				</span>
				</div>
			</div>
		</div>
		<div class="item" v-for='(item,index) in data'>
			<div style="width: 100%;height: 15px;"></div>
			<div style="margin-left: 10px;">
			<strong style="font-size: 15px;">{{item.wagesDate}}</strong>
			<span style="width: 10px;height: 10px; float: right;" ></span>
			<strong style="font-size: 15px;float: right;color: #0081FF;" @click="jump(item.wagesDate)" >￥{{item.shifa}}</strong>
			</div>
		</div>
		
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				card:[],
				data:[],
				userUrl:'/salary/salaryCard/querySalary',
				
			}
			},
			created(){
			this.querywages()	
			},
			methods:{
				querywages(){
					var da=new Date();
					var date=this.formats(da);
					this.$http.get(this.userUrl,{params:{userId:this.$store.getters.wagesId,date:date}}).then(res=>{
						console.log("res",res)
						 this.data=res.data.data;
						 this.card=res.data.card;
						
					}).catch(err => {
						console.log(err);
					});
					
				},
				jump(s){
					this.$store.commit('SET_WAGESDATE',s);
					this.$Router.push({name:'wagesdetails2'})
				},
				ats(s){
					s.del5="0";
					
				},
				acs(s){
					s.del5="1";
				},
				ret(){
					this.$Router.push({name:'wagesuser'})
				},
				formats:function(e){
					 var date = new Date(e);
					  var seperator1 = "-";
					  var year = date.getFullYear();
					  var month = date.getMonth() + 1;
					 
					  
					  var currentdate = year + seperator1 + month;
					  return currentdate;
				},
			}
			}
	
</script>

<style>
	.head{
		width: 90%;
		height: 100px;
		background-color: #4681DA;
		margin:0 auto;
		margin-top: 10px;
		border-radius:5px 5px 5px 5px;
		  box-shadow:0 5px 5px #BAD2F5; 
		 
	}
	.item{
		width: 90%;
		height: 50px;
		background-color: #FFFFFF;
		border-radius:5px 5px 5px 5px;
		margin:0 auto;
		margin-top: 20px;
	}
	.yhCode{
		font-size: 15px;
		color: #F5F8FC;
		
	}
	.yhCodes{
		font-size: 20px;
		color: #F5F8FC;
		margin-left: 5%;
	}
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
</style>