GEKE_PHONE/pages/wages/wagesdetails2.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 v-for='(item,index) in data'>
		<div style="margin-top: 10px;margin-left: 20px;">
			<strong style="font-size: 16px;" >{{wagesDate}}</strong>
			<br>
			<br>
			<span style="color: #A3A7B1;">应发:&nbsp{{item.yingfa}}</span>
			<span class="items">实发:&nbsp{{item.shifa}}</span>
		</div>
		<br>
		<div style="background-color: #FFFFFF;">
			<div>
				<br>
				<strong style="margin-left: 20px;">收入明细</strong>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
			</div>
			
			<div>
				<ul>
					<li class="s">
					<div style="width: 10;height: 10px;"></div>
					<span class="fontColr">当月基本工资</span>
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srWages}}</span>
			
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">绩效工资</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srJxWages}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">奖金提成</span>
						<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srBonus}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">补贴</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srSubsidy}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">加班费</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srJbWages}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">离职补偿金</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srQuit}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">固定奖金</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srGdBonus}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">年终奖</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srYearBonus}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">其他</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.srOther}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<br>
					</li>
				</ul>
			</div>
		</div>
		<br>
		<div style="background-color: #FFFFFF;">
			<div>
				<br>
				<strong style="margin-left: 20px;">扣款明细</strong>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
			</div>
			
			<div>
				<ul>
					<li class="s">
					<div style="width: 10;height: 10px;"></div>
					<span class="fontColr">缺勤扣款</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.kkLack}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">其他扣款</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.kkOther}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<br>
					</li>
				</ul>
			</div>
		</div>
		<br>
		<div style="background-color: #FFFFFF;">
			<div>
				<br>
				<strong style="margin-left: 20px;">当月五险一金&nbsp;(个人缴纳部分)</strong>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
			</div>
			
			<div>
				<ul>
					<li class="s">
					<div style="width: 10;height: 10px;"></div>
					<span class="fontColr">养老个人缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.grPension}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">失业个人缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.grCause}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">医疗个人缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.grMedical}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">公积金个人缴纳部分</span>
						<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.grFund}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<br>
					</li>
				</ul>
			</div>
		</div>
		<br>
		<div style="background-color: #FFFFFF;">
			<div>
				<br>
				<strong style="margin-left: 20px;">当月五险一金&nbsp;(公司缴纳部分)</strong>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
			</div>
			
			<div>
				<ul>
					<li class="s">
					<div style="width: 10;height: 10px;"></div>
					<span class="fontColr">养老金公司缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.gsPension}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">失业公司缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.gsCause}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">医疗公司缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.gsMedical}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">公积金公司缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.gsFund}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">工伤险公司缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.gsInjury}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">生育险公司缴纳部分</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.gsBirth}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<br>
					</li>
				</ul>
			</div>
		</div>
		<br>
		<div style="background-color: #FFFFFF;">
			<div>
				<br>
				<strong style="margin-left: 20px;">税单</strong>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
			</div>
			
			<div>
				<ul>
					<li class="s">
					<div style="width: 10;height: 10px;"></div>
					<span class="fontColr">个税</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.sdPersonal}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">奖金税</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.sdBonus}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
					<li class="s">
					<span class="fontColr">其他</span>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span style="float: right;">{{item.sdOther}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<div style="width: 10;height: 10px;"></div>
					</li>
				
				</ul>
			</div>
		</div>
		<br>
		<div style="background-color: #FFFFFF;">
			
			<div>
				<ul>
					<li class="s">
					<br>
					<strong >实发工资</strong>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.shifa}}</span>
					<br>
					<br>
					</li>
					
				</ul>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				wagesDate:"",
				data:[],
				userUrl:'/salary/salaryCard/querySalary'
			}
			},
			created(){
				this.querywages()
			},
			methods:{
				querywages(){
					this.$http.get(this.userUrl,{params:{userId:this.$store.getters.wagesId,date:this.$store.getters.wagesDate}}).then(res=>{
						console.log("res",res)
						 this.data=res.data.data;
						this.wagesDate=this.formatt(this.data[0].wagesDate);
						
					}).catch(err => {
						console.log(err);
					});
					
				},
				formatt:function(e){
					 var date = new Date(e);
					 var n="年";
					 var year=date.getFullYear();
					  var seperator1 = "月";
					  var month = date.getMonth() + 1;
					  
					  var currentdate = year +n+ month + seperator1;
					  return currentdate;
				},
				ret(){
					this.$Router.push({name:'wagesdetail2'})
				}
			}
			}
	
</script>

<style>
	.items{
		margin-left: 20px;
		color: #A3A7B1;
	}
	
	.s{
		list-style-type:none;
		margin-left: -20px;
	}
	.fontColr{
		color: #A3A7B1;
	}
	.money{
		float: right;
		color: #0081FF;
	}
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
</style>