fix: ui

pages/order-list/order-list.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="container">
 		<view class="filter-tabs">
+			<view class="filter-tab-indicator" :style="filterIndicatorStyle"></view>
 			<view
 				v-for="(item, index) in filterOptions"
 				:key="index"
@@ -9,11 +10,18 @@
 				@tap="onFilterChange(index)"
 			>
 				{{ item.label }}
-				<view v-if="filterIndex === index" class="tab-line"></view>
 			</view>
 		</view>
 
-		<scroll-view scroll-y class="scroll-container" :style="scrollViewStyle" @scrolltolower="loadMore">
+		<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" :style="scrollViewStyle" @scrolltolower="loadMore">
 			<view v-if="orderList.length === 0 && !loading" class="empty-state">
 				<image class="empty-icon" src="/static/order.png" mode="aspectFit" alt="我的订单"></image>
 				<view class="empty-title">暂无订单</view>
@@ -66,7 +74,9 @@
 					<text v-else>上拉加载更多</text>
 				</view>
 			</view>
-		</scroll-view>
+			</scroll-view>
+			</swiper-item>
+		</swiper>
 
 		<RenewalPaymentPopup ref="renewalPopupRef" :identifier="userStore.state.identifier"
 			paymentRefreshTarget="order-list" @completed="resetOrderListAndLoad" />
@@ -106,6 +116,9 @@
 	const scrollViewStyle = computed(() => scrollViewHeight.value > 0
 		? { height: `${scrollViewHeight.value}px`, flex: 'none' }
 		: {});
+	const filterIndicatorStyle = computed(() => ({
+		left: `calc(${filterIndex.value * 20}% + 8rpx)`
+	}));
 
 	const updateScrollViewHeight = () => {
 		const windowInfo = typeof uni.getWindowInfo === 'function'
@@ -154,10 +167,18 @@
 	};
 
 	const onFilterChange = (index) => {
+		if (filterIndex.value === index) return;
 		filterIndex.value = index;
 		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;
 
@@ -238,6 +259,10 @@
 	const showOrderPaymentMethods = (order) => {
 		if (!order?.order_id) return;
 		const packageNames = Array.isArray(order.package_names) ? order.package_names : [];
+		if (String(order.payment_method || '').toLowerCase() === 'wallet') {
+			renewalPopupRef.value?.payOrderDirectly(order.order_id, 'wallet');
+			return;
+		}
 		renewalPopupRef.value?.openOrderPayment(order.order_id, packageNames);
 	};
 
@@ -532,6 +557,59 @@
 		border-radius: 8rpx;
 	}
 
+	.container .filter-tabs {
+		position: relative;
+		margin-top: 0;
+		padding: 8rpx;
+		background: #fff;
+		border: 0;
+		border-radius: 16rpx;
+		overflow: hidden;
+	}
+
+	.container .filter-tabs .tab-item {
+		position: relative;
+		z-index: 1;
+		min-width: 0;
+		padding: 20rpx 4rpx;
+		color: var(--text-tertiary);
+		font-size: 26rpx;
+		transition: color 0.3s;
+	}
+
+	.container .filter-tabs .tab-item.active {
+		background: transparent;
+		color: #fff;
+		font-size: 26rpx;
+		font-weight: 600;
+	}
+
+	.filter-tab-indicator {
+		position: absolute;
+		top: 8rpx;
+		width: calc(20% - 16rpx);
+		height: calc(100% - 16rpx);
+		background: var(--primary);
+		border-radius: 12rpx;
+		transition: left 0.3s ease;
+		z-index: 0;
+	}
+
+	.order-swiper,
+	.order-swiper-item {
+		width: 100%;
+		min-height: 0;
+	}
+
+	.order-swiper {
+		flex: 1;
+		height: 0;
+	}
+
+	.order-swiper-item {
+		height: 100%;
+	}
+
 	.scroll-container {
 		flex: 1 1 0;
 		height: auto;