DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/wages/list.vue

<template>
	<view class="page">
		<view class="wagesSec1">
			<view class="wagesSec1Top">
				<view class="text-xxl cuIcon cuIcon-back" @click="tapTime(0)"></view>
				<text>{{ today.y }} 年 {{ today.m }} 月</text> 
				<view class="text-xxl cuIcon cuIcon-right" @click="tapTime(1)"></view>
			</view>
			<view class="wagesSec1T">￥{{ fsalary }}</view>
			<view class="wagesSec1Txt">{{ today.y }}年{{ today.m }}月实发工资</view>
		</view>
		<view class="wagesSec2">
			<view v-for="(item, i) in wagesData" :key="i">
				<view v-show="num == i">
					<view class="wagesSec2T">应发金额 <text class="span"></text></view>
					<view class="wagesSec2List">
						<view class="wagesSec2ListLi">基本工资<text class="span">￥ {{ item.BaseSalary }} </text></view>
						<view class="wagesSec2ListLi">职位补贴<text class="span">￥ {{ item.JobSubsidies }} </text></view>
						<view class="wagesSec2ListLi">绩效工资<text class="span">￥ {{ item.PerformanceBonus }} </text></view>
						<view class="wagesSec2ListLi">手机费<text class="span">￥ {{ item.MobilePhoneFee }} </text></view>
						<view class="wagesSec2ListLi">交通费<text class="span">￥ {{ item.TransportationFee }} </text></view>
						<view class="wagesSec2ListLi">全勤奖<text class="span">￥ {{ item.AttendanceBonus }} </text></view>
						<view class="wagesSec2ListLi">应发金额<text class="span">￥ {{ item.SSalary }} </text></view>
					</view>
					<view class="wagesSec2T">扣款金额 <text class="span"></text></view>
					<view class="wagesSec2List">
						<view class="wagesSec2ListLi">养老金保险<text class="span">￥ {{ item.PensionInsurance }} </text></view>
						<view class="wagesSec2ListLi">个人所得税<text class="span">￥ {{ item.PersonalIncomeTax }} </text></view>
						<view class="wagesSec2ListLi">事假<text class="span">￥ {{ item.PersonalLeave }} </text></view>
						<view class="wagesSec2ListLi">迟到<text class="span">￥ {{ item.Late }} </text></view>
						<view class="wagesSec2ListLi">病假<text class="span">￥ {{ item.Sick }} </text></view>
						<view class="wagesSec2ListLi">个人所得税<text class="span">￥ {{ item.PersonalIncomeTax }} </text></view>
					</view>
				</view>
			</view>
			<view style="text-align: center;padding: 10px 0;" v-show="num == -1"> 暂无数据!</view>
		</view>
	</view>
</template>

<script>
import common from '@/common/js/common.js';
export default{
	data() {
		return {
			today: null,
			wagesData: null,
			num: -1,
			fsalary: 0
		}
	},
	methods:{
		init() {
			let _this = this;
			_this.LOADING('加载数据中…');
			// _this.HIDE_LOADING();
			_this.HTTP_GET('Learun/EducationalAdministration/SalarySheet/list', '', '加载数据时出错').then(res => {
				_this.HIDE_LOADING();
				console.log(res);
				if (res) {
				    // console.log(res);
				    _this.wagesData = res;
					_this.jisuan()
				}
			});
		},
		tapTime(num) {
			if (num == 0) {
			    if (this.today.m == 1) { this.today.y = this.today.y - 1, this.today.m = 12 } 
				else { this.today.y = this.today.y, this.today.m = this.today.m - 1 }
			} else {
			    if (this.today.m == 12) { this.today.y = this.today.y + 1, this.today.m = 1 } 
				else { this.today.y = this.today.y, this.today.m = this.today.m + 1 }
			}
			this.jisuan()
		},
		jisuan() {
			let _this = this;
			this.num = -1;
			this.fsalary = 0;
			this.wagesData.forEach((n, i) => {
				if(n.year == _this.today.y && n.month == parseInt(_this.today.m)){
					_this.num = i;
					_this.fsalary = n.Fsalary;
				}
			})
			// console.log(this.num)
		}
	},
	created() {
		let today = common.fmtDate().split('-');
		this.today = {
			y: today[0],
			m: today[1],
			d: today[2]
		};
		this.init()
	}
}
</script>

<style lang="less" scoped>
.wagesSec1 {
	padding: 14px 12px 30px;
	text-align: center;
	background: #0c86d8;
}
.wagesSec1Top {
	font-size: 0;
}
.wagesSec1Top > * {
	display: inline-block;
	vertical-align: middle;
	color: #bbdefb;
}
.wagesSec1Top text {
	width: 185px;
	font-size: 14px;
}
.wagesSec1T {
	margin-top: 20px;
	font-size: 28px;
	text-align: center;
	color: #fff;
}
.wagesSec1Txt {
	font-size: 12px;
	color: #bbdefb;
	text-align: center;
	margin-top: 5px;
}
.wagesSec2 {
	background: #fff;
}
.wagesSec2List {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.wagesSec2ListLi {
	list-style: none;
}
.wagesSec2T {
	font-size: 15px;
	color: #a0a0a0;
	padding: 0 12px;
	line-height: 40px;
	border-bottom: 1px solid #f0f3f5;
}
.wagesSec2T .span {
	display: inline-block;
	width: 5px;
	height: 5px;
	background: #ffba00;
	vertical-align: middle;
	border-radius: 50%;
	margin-left: 5px;
	position: relative;
	top: -2px;
}
.wagesSec2ListLi {
	line-height: 40px;
	border-bottom: 1px solid #f0f3f5;
	font-size: 13px;
	color: #646464;
	padding: 0 12px;
}
.wagesSec2ListLi .span {
	float: right;
	color: #8a8a8a;
}
</style>