GEKE_PHONE/pages/wages/wagesdetails.vue

<template>
	<div>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">薪资查询</block>
		</cu-custom>
		<div class='month'>
			<ul style="list-style-type:none;">
				<li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
				<li class='year-month'>
					<span class='choose-year'>{{ currentYear }}年</span>
					<span class='choose-month'>{{ currentMonth }}月</span>
				</li>
				<li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
			</ul>
			<br>
		</div>
		<div v-for='(item,index) in data'>
		<div style="margin-top: 10px;margin-left: 20px;">
			<strong style="font-size: 16px;" >{{currentYear}}年{{ currentMonth }}月</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.kqWages}}</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.kqCount}}</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.jbCount}}</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.srGwWages}}</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>
				<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.bjCount}}</span>
					<br>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
					<br>
					</li>
					<li class="s">
					<br>
					<strong >扣款合计</strong>	
					<span style="width: 10px;height: 10px;" class="money"></span>
					<span class="money">{{item.kkOther}}</span>
					<br>
					<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>
					
				
				</ul>
			</div>
		</div>
		<br>
		
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				wagesDate:"",
				data:[],
				userUrl:'/salary/salaryCard/querySalary',
				currentMonth: 1,
				currentYear: 1970,
			}
			},
			created(){
				this.querywages()
				this.initData()
			},
			methods:{
				initData: function(cur) {
					// var leftcount = 0 // 存放剩余数量
					var date
					if (cur) {
						date = new Date(cur)
					} else {
						var now = new Date()
						var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
						d.setDate(35)
						date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
					}
					
					this.currentYear = date.getFullYear()
					this.currentMonth = date.getMonth() + 1
					
					var str = this.formatDate(
						this.currentYear,
						this.currentMonth,
						
					)
					
				},
				pickPre: function(year, month) {
					var d = new Date(this.formatDate(year, month, 1))
					d.setDate(0)
					this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
					this.querywages()
				},
				
				pickNext: function(year, month) {
					var d = new Date(this.formatDate(year, month, 1))
					var ds=this.formatDate(year, month, null);
					var nowDate = new Date();
					var dt=this.formatDate(nowDate.getFullYear(),nowDate.getMonth(),null);
					
					if(ds<=dt){
					d.setDate(35)
					this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
					this.querywages()
					}
				},
				
				// 返回 类似 2016-01-02 格式的字符串
				formatDate: function(year, month, day) {
					var y = year
					var m = month
					if (m < 10) m = '0' + m
					var d = day
					if(day!=null &&day !=""){
						if (d < 10) d = '0' + d
						return y + '-' + m + '-' + d
					}else{
						return y + '-' + m 
					}
					
					
				},
				querywages(){
					var id=this.$store.getters.userid;
					var deptid=uni.getStorageSync('id');
					if(deptid!=null&&deptid!=""){
						id=deptid;
					}
					var date=this.formatDate(this.currentYear,this.currentMonth);
					this.$http.get(this.userUrl,{params:{userId:id,date:date}}).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;
				},
				
			}
			}
	
</script>

<style>
	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		height: 35px;
	}
	
	.year-month {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 10px;
	}
	
	.choose-month {
		text-align: center;
		font-size: 12px;
	}
	
	.arrow {
		padding: 15px;
		color: #999999;
	}
	
	.month ul li {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}
	
	#calendar {
		font-size: 12px;
		width: 100%;
		margin: 0 auto;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
			0 1px 5px 0 rgba(0, 0, 0, 0.12);
			
	}
	
	.month {
		width: 100%;
		color: #333333;
		
	}
	.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>