fix: ui

pages/order-list/order-list.vue

@@ -13,15 +13,6 @@
 			</view>
 		</view>
 
-		<swiper
-			class="order-swiper"
-			:current="filterIndex"
-			:circular="false"
-			:acceleration="true"
-			@change="onFilterSwiperChange"
-		>
-			<swiper-item v-for="(item, index) in filterOptions" :key="item.value ?? 'all'" class="order-swiper-item">
-			<scroll-view v-if="filterIndex === index" scroll-y class="scroll-container" @scrolltolower="loadMore">
 			<view v-if="!ordersLoaded || (loading && orderList.length === 0)" class="loading-state">
 				<up-loading-icon text="加载中" size="30"></up-loading-icon>
 			</view>
@@ -74,9 +65,6 @@
 					<text v-else>上拉加载更多</text>
 				</view>
 			</view>
-			</scroll-view>
-			</swiper-item>
-		</swiper>
 
 		<RenewalPaymentPopup ref="renewalPopupRef" :identifier="userStore.state.identifier"
 			paymentRefreshTarget="order-list" @completed="resetOrderListAndLoad" />
@@ -85,7 +73,7 @@
 
 <script setup>
 	import { ref, reactive, computed, onMounted } from 'vue';
-	import { onShow } from '@dcloudio/uni-app';
+	import { onReachBottom, onShow } from '@dcloudio/uni-app';
 	import { orderApi } from '@/api/index.js';
 	import RenewalPaymentPopup from '@/components/RenewalPaymentPopup.vue';
 	import { useUserStore } from '@/store/index.js';
@@ -153,13 +141,6 @@
 		resetOrderListAndLoad();
 	};
 
-	const onFilterSwiperChange = (event) => {
-		const nextIndex = Number(event?.detail?.current);
-		if (Number.isInteger(nextIndex) && nextIndex >= 0 && nextIndex < filterOptions.length) {
-			onFilterChange(nextIndex);
-		}
-	};
-
 	const loadOrderList = async (append = false) => {
 		if (loading.value || (append && noMore.value)) return;
 
@@ -259,23 +240,24 @@
 	onMounted(() => {
 		loadOrderList();
 	});
+
+	onReachBottom(() => {
+		loadMore();
+	});
 </script>
 
 <style lang="scss" scoped>
 	.container {
-		position: fixed;
-		top: var(--window-top);
-		left: 0;
-		right: 0;
-		bottom: 0;
 		display: flex;
 		flex-direction: column;
+		gap: 0;
 		background: var(--bg-secondary);
 		max-width: 750rpx;
 		margin: 0 auto;
 		width: 100%;
 		box-sizing: border-box;
-		padding-top: 0;
+		min-height: 100vh;
+		padding: 0 0 48rpx;
 	}
 
 	.filter-tabs {
@@ -590,31 +572,6 @@
 		z-index: 0;
 	}
 
-	.order-swiper,
-	.order-swiper-item {
-		width: 100%;
-		min-height: 0;
-	}
-
-	.order-swiper {
-		/* 固定页面提供确定高度，轮播填充 Tab 下方的全部可用空间。 */
-		flex: 1 1 0;
-		height: auto;
-		overflow: hidden;
-	}
-
-	.order-swiper-item {
-		height: 100%;
-	}
-
-	.scroll-container {
-		flex: none;
-		height: 100%;
-		min-height: 0;
-		width: 100%;
-		box-sizing: border-box;
-	}
-
 	.order-list {
 		padding: 20rpx 24rpx 48rpx;
 		box-sizing: border-box;