yunzerwebsiteallinone/uniapp/pages/tools/expense/index.vue

<template>
	<view class="page">
		<!-- 搜索 + 状态筛选 -->
		<view class="filter-bar">
			<view class="search-box">
				<FaIcon name="magnifying-glass" color="#94a3b8" :size="16" />
				<input
					class="search-input"
					v-model="keyword"
					placeholder="搜索报销说明"
					confirm-type="search"
					@confirm="onSearch"
				/>
				<text v-if="keyword" class="search-clear" @tap="clearKeyword">清空</text>
			</view>
			<scroll-view class="tab-scroll" scroll-x :show-scrollbar="false">
				<view class="tab-list">
					<view
						v-for="tab in tabs"
						:key="String(tab.value)"
						class="tab-item"
						:class="{ active: currentStatus === tab.value }"
						@tap="onTabChange(tab.value)"
					>
						<text>{{ tab.label }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 报销单列表 -->
		<view v-if="loading && !list.length" class="state-box">
			<text class="state-text">加载中...</text>
		</view>
		<view v-else-if="!list.length" class="state-box">
			<u-empty mode="list" text="暂无报销单" />
		</view>
		<template v-else>
			<view
				v-for="row in list"
				:key="row.id"
				class="expense-card"
				@tap="openDetail(row)"
			>
				<view class="card-top">
					<text class="card-amount">¥{{ moneyText(row.total_amount) }}</text>
					<u-tag
						:text="getExpenseStatusLabel(row.status)"
						:type="getExpenseStatusType(row.status)"
						size="mini"
					/>
				</view>
				<text class="card-desc">{{ descText(row) }}</text>
				<view class="card-meta">
					<text>申请日期 {{ row.apply_date }}</text>
					<FaIcon name="chevron-right" color="#cbd5e1" :size="14" />
				</view>
			</view>
			<view v-if="finished" class="load-done">
				<text>{{ list.length ? '没有更多了' : '' }}</text>
			</view>
		</template>

		<!-- 新建入口 -->
		<view class="fab" @tap="openCreate">
			<FaIcon name="plus" color="#ffffff" :size="22" />
			<text>新建报销</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
import {
	fetchExpenses,
	getExpenseStatusLabel,
	getExpenseStatusType,
	moneyText,
	EXPENSE_STATUS_OPTIONS
} from '@/api/expense.js'

const PAGE_SIZE = 20

// -1 为「待我审批」约定值（后端按当前用户运行中审批待办过滤）
const tabs = [{ value: -1, label: '待我审批' }, { value: '', label: '全部' }, ...EXPENSE_STATUS_OPTIONS]

const list = ref([])
const total = ref(0)
const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const keyword = ref('')
const currentStatus = ref('')

onShow(() => {
	refresh()
})

onReachBottom(() => {
	if (finished.value || loading.value) return
	loadMore()
})

async function refresh() {
	page.value = 1
	finished.value = false
	list.value = []
	await loadPage()
}

async function loadMore() {
	page.value += 1
	await loadPage()
}

async function loadPage() {
	loading.value = true
	try {
		const data = await fetchExpenses({
			page: page.value,
			pageSize: PAGE_SIZE,
			keyword: keyword.value.trim(),
			status: currentStatus.value
		})
		const rows = data.list || []
		list.value = page.value === 1 ? rows : [...list.value, ...rows]
		total.value = data.total || 0
		finished.value = list.value.length >= total.value
	} catch (e) {
		if (page.value > 1) page.value -= 1
		uni.showToast({ title: '加载失败', icon: 'none' })
	} finally {
		loading.value = false
	}
}

function onSearch() {
	refresh()
}

function clearKeyword() {
	keyword.value = ''
	refresh()
}

function onTabChange(value) {
	if (currentStatus.value === value) return
	currentStatus.value = value
	refresh()
}

function descText(row) {
	const desc = (row.description || '').trim()
	return desc || '无报销说明'
}

function openDetail(row) {
	uni.navigateTo({ url: `/pages/tools/expense/detail?id=${row.id}` })
}

function openCreate() {
	uni.navigateTo({ url: '/pages/tools/expense/edit' })
}
</script>

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

.page {
	min-height: 100vh;
	background: $color-bg-page;
	padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}

.filter-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: $color-bg-page;
	padding: 20rpx $page-padding-x 8rpx;
}

.search-box {
	display: flex;
	align-items: center;
	gap: 12rpx;
	height: 72rpx;
	padding: 0 24rpx;
	background: $color-card;
	border-radius: $radius-full;
	box-shadow: $shadow-card;

	.search-input {
		flex: 1;
		font-size: 26rpx;
		color: $color-text;
	}

	.search-clear {
		font-size: 24rpx;
		color: $color-text-muted;
	}
}

.tab-scroll {
	margin-top: 20rpx;
	white-space: nowrap;
}

.tab-list {
	display: inline-flex;
	gap: 16rpx;
	padding: 4rpx 0 12rpx;
}

.tab-item {
	padding: 10rpx 28rpx;
	border-radius: $radius-full;
	background: $color-card;
	font-size: 26rpx;
	color: $color-text-secondary;
	box-shadow: $shadow-card;

	&.active {
		background: #2563eb;
		color: #ffffff;
		font-weight: 500;
	}
}

.expense-card {
	@include card;
	margin: 0 $page-padding-x 24rpx;
	padding: 28rpx;

	&:active {
		opacity: 0.85;
	}
}

.card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14rpx;
}

.card-amount {
	font-size: 36rpx;
	font-weight: 600;
	color: $color-text;
}

.card-desc {
	display: block;
	font-size: 26rpx;
	color: $color-text-secondary;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16rpx;
	font-size: 24rpx;
	color: $color-text-muted;
}

.state-box {
	display: flex;
	justify-content: center;
	padding: 140rpx 0;
}

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

.load-done {
	display: flex;
	justify-content: center;
	padding: 8rpx 0 24rpx;
	font-size: 24rpx;
	color: $color-text-muted;
}

.fab {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(48rpx + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	gap: 10rpx;
	height: 88rpx;
	padding: 0 48rpx;
	border-radius: $radius-full;
	background: #2563eb;
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 500;
	box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.4);

	&:active {
		opacity: 0.85;
	}
}
</style>