jobslink-user-clent/pageMy/my/sala.vue

<template>
	<view class="body">
		<!-- <v-tabs :tabs="['已发放','未发放']" height="45px" v-model="activeTab" color="#999" activeColor="#000" fontSize="36rx"
		 activeFontSize="36rpx" @change='changeTab' /> -->
		<view class="list" v-for="item in data" :key="item.missionNo">
			<view class="list_head">
				<view class="list_head_left">
					{{item.title}}
				</view>
				<!--<view class="list_head_right">
					{{moneyFormat(item.wageReal)}}元
				</view>-->

				 	<view class="list_head_right" v-if="item.payType === 1 || item.payType === 0">{{moneyComdify(item.wageReal)}}元</view>
                    <view class="list_head_right" v-if="item.payType === 2">申报个税：<view class="price">{{moneyComdify(item.wageReal)}}元</view></view> 
			</view>
			<view class="allName">
				{{item.companyName}}
			</view>
			<view class="timeBox" v-if="activeTab === 0">
				<view class="time">发放日期：{{dateFormat(item.accountTime,'yyyy年MM月dd日')}}</view>
				 	<view class="list_head_right" v-if="item.payType === 1">预扣个税：<view class="price">{{moneyComdify(item.tax)}}元</view></view>
                    <view class="list_head_right" v-if="item.payType === 2">个税补发：<view class="price">{{moneyComdify(item.tax)}}元</view></view> 
			</view>
		</view>
		<view class="nothing" v-if="data.length === 0">
			<image src="../../static/img/pic.svg" mode=""></image>
			<view class="nothingText">
				暂无工资信息
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getList,userOrderList
	} from '@/api/wage.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		moneyFormat,
		moneyComdify,
		dateFormat
	} from '@/untils/format.js'

	export default {
		data() {
			return {
				tabs: ['已发放', '未发放'],
				dataDepository: [
					[],
					[]
				],
				page: [{
					current: 0,
					size: 20,
					maxPage: 1,
					loading: false,
					status: 1
				}, {
					current: 0,
					size: 20,
					maxPage: 1,
					loading: false,
					status: 0
				}],
				activeTab: 0,
			}
		},
		created() {
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		/*页面滚动到底部 换页*/
		onReachBottom: function() {
			const page = this.page[this.activeTab]
			const activeTab = this.activeTab
			const current = page.current + 1
			if (page.current <= Math.ceil(page.maxPage / page.size)) {
				this.getData();
			} else {
				uni.showToast({
					icon: "none",
					title: '已经是最后一页',
				})
			}
		},
		/*下拉刷新*/
		onPullDownRefresh:function(){			
			const page = this.page[this.activeTab]
			page.current = 0
			this.dataDepository[this.activeTab] = []
			this.getData()

		},
		methods: {
			changeTab: function(e) {
				this.activeTab = e;
			},
			getData() {
				const page = this.page[this.activeTab]
				const activeTab = this.activeTab
				const current = page.current + 1
				if (page.loading || current > page.maxPage) {
					return
				}
				page.loading = true
				/* getList(this.userInfo.user_id, current, page.size, page.status).then((resp) => {
					uni.stopPullDownRefresh();
					const data = resp.data.data
					this.$set(this.dataDepository, activeTab, this.dataDepository[activeTab].concat(data.records))
					page.maxPage = parseInt(data.total / data.size) + 1
					page.current = current
					page.loading = false
				}) */
				 var params = {
				 	current: current,
				 	size: page.size
				 }
				
				 userOrderList(params).then((resp) => {
				 	uni.stopPullDownRefresh();
				 	const data = resp.data.data
				 	this.$set(this.dataDepository, activeTab, this.dataDepository[activeTab].concat(data.records))
				 	page.maxPage = parseInt(data.total / data.size) + 1
				 	page.current = current
				 	page.loading = false
				 }) 
			},
			refrush() {
				this.page = {
					current: 1,
					size: 20,
					maxPage: 1,
				}
				this.getData()
			},
			moneyComdify,
			moneyFormat,
			dateFormat
		},
		watch: {
			activeTab(val) {
				this.getData()
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			data() {
				return this.dataDepository[this.activeTab]
			}
		}
	}
</script>

<style>
	.nothingText {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		margin-top: 20rpx;
	}

	.nothing image {
		width: 400rpx;
		height: 200rpx;
		display: block;
		padding-top: 50%;
		margin: 0 auto;
	}

	.nothing {
		width: 100%;
		height: 100%;

		background-color: #fefefe;
	}

	.timeBox {

		display: flex;
		justify-content: space-between;
	}
	.time{
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #6D6D6D;
	}

	.allName {
		width: 280rpx;
		height: 76rpx;
		line-height: 76rpx;
		overflow: hidden;
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
	}

	.list_head_right {
		display: flex;
		font-size: 24rpx;
		font-weight: 500;
		color: #F46161;
	}

	.price{
		width: 137rpx;text-align: right;
	}

	.list_head_left {
		width: 347rpx;
		overflow: hidden;
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}

	.list_head {

		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.list {
		/* height: 132rpx; */
		/* line-height: 50rpx; */
		padding: 30rpx 30rpx 32rpx 30rpx;
		border-bottom: 20rpx solid #f6f6f6;
		background-color: #fefefe;
	}

	.body {
		width: 100%;
		height: 100%;
	}

	page {
		background-color: #f6f6f6;
		width: 100%;
		height: 100%;
	}
</style>