building-sign/pages/director/expenditure/expenditure.vue

<template>
	<view class="pad-x120">
		<!-- 头部 -->
		<status-nav :ifReturn="false" :ifHome="true" navBarTitle="工地支出"></status-nav>
		<view class="content" :style="{'padding-top':statusHeight+50+'px'}">
			<!-- 筛选 -->
			<view class="screen-box pay-screen-box">
				<view class="item">
					<picker class="font24" mode="date" :range="date" fields="month" @change="bindDateChange" :start="startDate" :end="endDate">
						<view class="name">
							<text :class="showDate==''?'color-99':''">{{showDate!==''?showDate.split('-')[0]+'年'+showDate.split('-')[1]+'月':'请选择时间'}}</text>
							<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
				<view class="item">
					<picker class="font24" mode="selector" :range="cateList" @change="bindCateChange" :value="cateIndex">
						<view class="name">
							<text class="clips1" :class="cateIndex==0?'color-99':''">{{cateList[cateIndex]}}</text>
							<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
			</view>
			<!-- 支出信息 -->
			<view class="pay-info font26">
				<view class="item font30">
					<text>工资总金额</text>
					<text>合计：{{payInfo.amount>0?payInfo.amount:0}}元</text>
				</view>
				<view class="item">
					<text>基本工资</text>
					<text>{{payInfo.base_amount>0?payInfo.base_amount:0}}元</text>
				</view>
				<view class="item">
					<text>加班工资</text>
					<text>{{payInfo.overtime_amount>0?payInfo.overtime_amount:0}}元</text>
				</view>
				<view class="item">
					<text>待发工资</text>
					<text>{{payInfo.not_amount>0?payInfo.not_amount:0}}元</text>
				</view>
				<view class="item">
					<text>已发工资</text>
					<text>{{payInfo.done_amount>0?payInfo.done_amount:0}}元</text>
				</view>
			</view>
			<!-- 工资记录 -->
			<view class="sign-record sign-record-other bg-white">
				<view class="item font26" v-for="(item,index) in payList" :key="index">
					<view class="info info-other">
						<text>姓名：{{item.name}}-{{item.date}}</text>
						<text>月份：{{item.date}}</text>
						<text class="color-66" v-if="item.status==2">部分发放：{{item.paid_amount}}元</text>
						<text :class="item.status==0?'color-blue':'color-66'" v-else>{{item.status==0?'待发放':'已发放'}}</text>
					</view>
					<view class="wages-info">
						<view class="text">基本工资：{{item.base_amount}}元</view>
						<view class="text">加班工资：{{item.overtime_amount}}元</view>
						<view class="text">合计：<text class="font32">{{item.amount}}</text>元</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<view class="more-tips font24">{{payList.length==total?'没有更多数据了':'下滑获取更多'}}</view>
		</view>
		<!-- 尾部 -->
		<tabbar :userType="userType" current="1"></tabbar>
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar/tabbar';
	function getDate(type) {
	    const date = new Date();
	    let year = date.getFullYear();
	    let month = date.getMonth() + 1;
	    let day = date.getDate();
	    if (type === 'start') {
	        year = year - 2;
	    }
		if (type === 'end') {
		    year = year + 1;
		}
	    month = month > 9 ? month : '0' + month;
	    day = day > 9 ? day : '0' + day;
	    return `${year}-${month}-${day}`;
	}
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				userType:'director', //账户类型 工人：worker 负责人：director  工作台：workbench
				payInfo:{}, //支出总额
				payList:[], //工资列表
				date: getDate({format: true}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				showDate:'', //显示时间
				cateList:['全部','待发放','全部发放','部分发放'], //分类列表
				cateIndex:0, //当前选择
				page:1,
				size:10,
				total:0,
			}
		},
		onLoad(op) {
			if(op.userType){
				this.userType = op.userType;
			}
			// 获取工资列表
			this.getPayList();
		},
		onShow() {
			
		},
		onReachBottom() {
			if(this.payList.length<this.total){
				this.page++;
				// 获取工资列表
				this.getPayList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 获取工资列表
			this.getPayList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			// 选择日期
			bindDateChange(e) {
				this.showDate = e.detail.value;
				this.page = 1;
				// 获取工资列表
				this.getPayList();
			},
			
			// 选择分类
			bindCateChange(e) {
				this.cateIndex = e.detail.value;
				// 获取工资列表
				this.getPayList();
			},
			
			// 获取工资列表
			getPayList(){
				let params = {
					page:this.page,
					size:this.size,
					date:this.showDate,
					status:this.cateIndex-1
				}
				if(this.page==1) this.payList = [];
				this.$requst.post('/api/v1/manager/pay-list',params).then(res=>{
					if(res.code==0){
						console.log(res,'工资列表');
						this.total = res.data.total;
						this.payInfo = res.data.info;
						this.payList = this.payList.concat(res.data.list);
					}
				})
			},
		}
	}
</script>
<style scoped>
	
</style>