yunzerwebsiteallinone/uniapp/pages/oa/compensation/index.vue

<template>
	<view class="page">
		<view class="toolbar">
			<picker mode="date" fields="month" :value="month || currentMonth" @change="onMonthChange">
				<view class="month-picker">
					<FaIcon name="calendar-days" color="#2563eb" :size="16" />
					<text class="month-text">{{ month || '全部月份' }}</text>
					<FaIcon name="chevron-right" color="#8a94ad" :size="12" />
				</view>
			</picker>
			<view v-if="month" class="clear-btn" @tap="clearMonth">查看全部</view>
		</view>

		<scroll-view class="list-scroll" scroll-y :show-scrollbar="false">
			<view v-if="loading" class="state-box">
				<text class="state-text">加载中...</text>
			</view>
			<u-empty
				v-else-if="list.length === 0"
				mode="list"
				:icon-size="80"
				text="暂无工资单记录"
			/>
			<view v-else class="pay-list">
				<view v-for="item in list" :key="item.id" class="pay-card" @tap="openDetail(item.id)">
					<view class="pay-head">
						<text class="pay-month">{{ item.payroll_month }}</text>
						<text class="status-tag" :class="'st-' + item.status">{{ getPayrollStatusLabel(item.status) }}</text>
					</view>
					<view class="pay-amount">
						<text class="amount-label">实发</text>
						<text class="amount-value">¥{{ money(item.net_salary) }}</text>
					</view>
					<view class="pay-meta">
						<text>{{ item.employee_name || '本人' }}</text>
						<text v-if="item.department">· {{ item.department }}</text>
						<text v-if="item.position">· {{ item.position }}</text>
					</view>
				</view>
			</view>
			<view class="bottom-space" />
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { fetchPayrolls, getPayrollStatusLabel } from '@/api/oa.js'
import { isLoggedIn } from '@/utils/auth.js'
import { pad } from '@/utils/date.js'

const month = ref('')
const list = ref([])
const loading = ref(false)

const now = new Date()
const currentMonth = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`

onMounted(() => {
	if (!isLoggedIn()) {
		uni.reLaunch({ url: '/pages/login/login' })
		return
	}
	loadPayrolls()
})

async function loadPayrolls() {
	loading.value = true
	try {
		const res = await fetchPayrolls({ payrollMonth: month.value, pageSize: 50 })
		list.value = res.list
	} catch (e) {
		uni.showToast({ title: '加载失败', icon: 'none' })
	} finally {
		loading.value = false
	}
}

function onMonthChange(e) {
	month.value = e.detail.value
	loadPayrolls()
}

function clearMonth() {
	month.value = ''
	loadPayrolls()
}

function money(value) {
	return (Number(value) || 0).toFixed(2)
}

function openDetail(id) {
	uni.navigateTo({ url: `/pages/oa/compensation/detail?id=${id}` })
}
</script>

<style lang="scss" scoped>
@import '@/src/styles/page-common.scss';

.page {
	min-height: 100vh;
	background: $color-bg-page;
	display: flex;
	flex-direction: column;
}

.toolbar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20rpx;
	padding: 20rpx $page-padding-x;
	background: $color-card;
	box-shadow: $shadow-header;
}

.month-picker {
	display: flex;
	align-items: center;
	gap: 12rpx;
	height: 72rpx;
	padding: 0 24rpx;
	background: $color-bg-page;
	border-radius: $radius-full;
}

.month-text {
	font-size: 28rpx;
	color: $color-text;
}

.clear-btn {
	font-size: 26rpx;
	color: $color-primary;
}

.list-scroll {
	flex: 1;
	height: 0;
}

.pay-list {
	padding: 24rpx $page-padding-x 0;
}

.pay-card {
	@include card;
	padding: 26rpx 24rpx;
	margin-bottom: 18rpx;

	&:active {
		background: $color-bg-page;
	}
}

.pay-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pay-month {
	font-size: 30rpx;
	font-weight: 600;
	color: $color-text;
}

.status-tag {
	padding: 2rpx 14rpx;
	font-size: 21rpx;
	border-radius: $radius-sm;
	color: $color-text-muted;
	background: $color-bg-page;

	&.st-1 {
		color: $color-primary;
		background: $color-primary-bg;
	}

	&.st-2 {
		color: $color-success;
		background: #eafaf1;
	}
}

.pay-amount {
	display: flex;
	align-items: baseline;
	gap: 12rpx;
	margin-top: 18rpx;
}

.amount-label {
	font-size: 24rpx;
	color: $color-text-muted;
}

.amount-value {
	font-size: 44rpx;
	font-weight: 600;
	color: $color-primary;
}

.pay-meta {
	margin-top: 12rpx;
	font-size: 23rpx;
	color: $color-text-muted;
}

.state-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 160rpx 48rpx;
	gap: 20rpx;
}

.state-text {
	font-size: 26rpx;
	color: $color-text-muted;
	text-align: center;
}

.bottom-space {
	height: 40rpx;
}
</style>