优化报销功能

uniapp/pages/approval/index.vue

@@ -15,19 +15,23 @@
 			</view>
 		</view>
 
-		<!-- 状态下拉面板 -->
-			<view
-				v-for="tab in statusTabs"
-				:key="String(tab.value)"
-				class="dropdown-option"
-				:class="{ active: currentStatus === tab.value }"
-				hover-class="dropdown-option-active"
-				@tap="onStatusChange(tab.value)"
-			>
-				<text class="dropdown-option-text">{{ tab.label }}</text>
-				<FaIcon v-if="currentStatus === tab.value" name="check" color="#2563eb" :size="14" />
+		<!-- 状态筛选 -->
+		<scroll-view class="tab-scroll" scroll-x :show-scrollbar="false">
+			<view class="tab-list">
+				<view
+					v-for="tab in statusTabs"
+					:key="String(tab.value)"
+					class="tab-item"
+					:class="{ active: currentStatus === tab.value }"
+					@tap="onStatusChange(tab.value)"
+				>
+					<text>{{ tab.label }}</text>
+				</view>
 			</view>
-		</view>
+		</scroll-view>
+
+		<!-- 说明：审批单据由各业务模块提交后进入此处，这里不提供新增 -->
+		<text class="page-tip">审批由各业务模块提交后在此查看与处理</text>
 
 		<!-- 列表 -->
 		<scroll-view class="list-scroll" scroll-y :show-scrollbar="false" @scrolltolower="loadMore">
@@ -79,7 +83,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, onMounted } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import {
 	fetchApprovalList,
@@ -104,68 +108,18 @@ const finished = ref(false)
 const keyword = ref('')
 const currentStatus = ref('')
 
-/** 当前展开的下拉:'status' | '' */
-const openDropdown = ref('')
-
-/** filter-bar 的底部坐标（用于下拉面板 fixed 定位） */
-const filterBarBottom = ref(0)
-
-const bizTypes = ref([])
-
-/** 当前状态下拉框展示文案 */
-const currentStatusLabel = computed(() => {
-	const hit = statusTabs.find(s => s.value === currentStatus.value)
-	return hit ? hit.label : '全部'
-})
-
-/** 下拉面板顶部偏移（紧贴 filter-bar 底部 + 8px 间隙） */
-const panelTopStyle = computed(() => ({
-	top: (filterBarBottom.value + 8) + 'px'
-}))
-
-function toggleDropdown(name) {
-	openDropdown.value = openDropdown.value === name ? '' : name
-	if (openDropdown.value) {
-		// 打开后下一帧再取位置（filter-bar 还未渲染完成则取到 0）
-		nextTick(() => measureFilterBar())
-	}
-}
-
-function closeDropdown() {
-	openDropdown.value = ''
-}
-
-/** 动态获取 filter-bar 在视口中的底部坐标 */
-function measureFilterBar() {
-	uni.createSelectorQuery()
-		.select('.filter-bar')
-		.boundingClientRect(rect => {
-			if (rect && typeof rect.bottom === 'number') {
-				filterBarBottom.value = Math.round(rect.bottom)
-			}
-		})
-		.exec()
-}
-
 onMounted(() => {
 	if (!isLoggedIn()) {
 		uni.reLaunch({ url: '/pages/login/login' })
 		return
 	}
 	refresh()
-	// 取 filter-bar 位置供下拉面板定位用
-	nextTick(() => measureFilterBar())
 })
 
 onShow(() => {
 	if (isLoggedIn()) refresh()
 })
 
-async function loadBizTypes() {
-	// 类型筛选已移除，保留此函数以避免潜在依赖
-	bizTypes.value = [{ value: '', label: '全部' }]
-}
-
 async function refresh() {
 	page.value = 1
 	finished.value = false
@@ -213,7 +167,6 @@ function clearKeyword() {
 
 function onStatusChange(value) {
 	currentStatus.value = value
-	closeDropdown()
 	refresh()
 }
 
@@ -268,107 +221,40 @@ function openDetail(id) {
 	}
 }
 
-/* ====== 筛选条（顶部下拉触发器） ====== */
-.filter-bar {
+/* ====== 状态筛选 tab ====== */
+.tab-scroll {
 	flex-shrink: 0;
-	display: flex;
-	gap: 16rpx;
-	padding: 12rpx $page-padding-x;
-	background: $color-card;
-}
-
-.filter-trigger {
-	flex: 1;
-	min-width: 0;
-	display: flex;
-	align-items: center;
-	gap: 8rpx;
-	height: 72rpx;
-	padding: 0 20rpx;
-	border-radius: $radius-md;
-	background: $color-bg-page;
-	border: 1rpx solid transparent;
-	transition: background 0.2s, border-color 0.2s;
-
-	&.open {
-		background: $color-primary-bg;
-		border-color: $color-primary;
-	}
-}
-
-.filter-trigger-active {
-	background: #e2e8f0;
-}
-
-.filter-label {
-	font-size: 26rpx;
-	color: $color-text-muted;
-	flex-shrink: 0;
-}
-
-.filter-value {
-	flex: 1;
-	min-width: 0;
-	font-size: 26rpx;
-	color: $color-text;
-	font-weight: 500;
-	overflow: hidden;
-	text-overflow: ellipsis;
 	white-space: nowrap;
-}
-
-.filter-trigger.open .filter-value {
-	color: $color-primary;
-}
-
-/* ====== 下拉面板 ====== */
-.dropdown-mask {
-	position: fixed;
-	top: 0; left: 0; right: 0; bottom: 0;
-	background: transparent;
-	z-index: 50;
-}
-
-.dropdown-panel {
-	position: absolute;
-	left: $page-padding-x;
-	right: $page-padding-x;
 	background: $color-card;
-	border-radius: $radius-lg;
-	box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.16);
-	z-index: 60;
-	max-height: 480rpx;
-	overflow-y: auto;
-	padding: 8rpx 0;
+	padding: 0 $page-padding-x 12rpx;
 }
 
-.dropdown-option {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12rpx;
-	padding: 20rpx 28rpx;
-	font-size: 28rpx;
-	color: $color-text;
-	transition: background 0.15s;
+.tab-list {
+	display: inline-flex;
+	gap: 16rpx;
+	padding: 16rpx 0 4rpx;
+}
+
+.tab-item {
+	padding: 10rpx 28rpx;
+	border-radius: $radius-full;
+	background: $color-bg-page;
+	font-size: 26rpx;
+	color: $color-text-secondary;
+	box-shadow: $shadow-card;
 
 	&.active {
-		color: $color-primary;
+		background: $color-primary;
+		color: #ffffff;
 		font-weight: 500;
-		background: $color-primary-bg;
 	}
 }
 
-.dropdown-option-active {
-	background: $color-bg-page;
-}
-
-.dropdown-option-text {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.page-tip {
+	display: block;
+	padding: 12rpx $page-padding-x 0;
+	font-size: 22rpx;
+	color: $color-text-muted;
 }
 
 /* ====== 列表 ====== */