From dfc7472ad9e9faa29dee5dd611da1ddcebd3e29e Mon Sep 17 00:00:00 2001
From: luo <luo@qq.com>
Date: Thu, 13 Aug 2026 15:54:06 +0800
Subject: [PATCH] fix: ui

---
 pages/order-list/order-list.vue       | 59 +++----------------
 pages/package-order/package-order.vue | 83 ++++++++++-----------------
 2 files changed, 37 insertions(+), 105 deletions(-)

diff --git a/pages/order-list/order-list.vue b/pages/order-list/order-list.vue
index 5684af4..6569987 100644
--- a/pages/order-list/order-list.vue
+++ b/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;
diff --git a/pages/package-order/package-order.vue b/pages/package-order/package-order.vue
index ceaad46..167e96e 100644
--- a/pages/package-order/package-order.vue
+++ b/pages/package-order/package-order.vue
@@ -14,40 +14,38 @@
 				</view>
 			</view>
 
-			<view class="package-scroll-area">
-				<scroll-view scroll-y class="package-scroll">
-					<view v-if="!packagesLoaded || (loading && packageList.length === 0)" class="loading-state">
-						<up-loading-icon text="加载中" size="30"></up-loading-icon>
-					</view>
-					<view v-else-if="packageList.length === 0" class="empty-state">
-						<image class="empty-icon" src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
-						<view class="empty-title">暂无{{ activePackageType === 'formal' ? '正式套餐' : '加油包' }}</view>
-						<view class="empty-desc">当前资产暂无适用的套餐</view>
-					</view>
+			<view class="package-content">
+				<view v-if="!packagesLoaded || (loading && packageList.length === 0)" class="loading-state">
+					<up-loading-icon text="加载中" size="30"></up-loading-icon>
+				</view>
+				<view v-else-if="packageList.length === 0" class="empty-state">
+					<image class="empty-icon" src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
+					<view class="empty-title">暂无{{ activePackageType === 'formal' ? '正式套餐' : '加油包' }}</view>
+					<view class="empty-desc">当前资产暂无适用的套餐</view>
+				</view>
 
-					<view v-else class="package-list">
-						<view class="package-card" v-for="item in packageList" :key="item.package_id">
-							<view class="package-info">
-								<view class="package-name">{{ item.package_name }}</view>
-								<view class="package-meta">
-									<view class="package-meta-item">
-										<image class="package-meta-icon" src="/static/有效期.png" mode="aspectFit" />
-										<text>{{ formatValidity(item.validity_days) }}</text>
-									</view>
-									<view class="package-meta-item">
-										<image class="package-meta-icon" src="/static/流量.png" mode="aspectFit" />
-										<text>{{ formatData(item.data_allowance, item.data_unit) }}</text>
-									</view>
+				<view v-else class="package-list">
+					<view class="package-card" v-for="item in packageList" :key="item.package_id">
+						<view class="package-info">
+							<view class="package-name">{{ item.package_name }}</view>
+							<view class="package-meta">
+								<view class="package-meta-item">
+									<image class="package-meta-icon" src="/static/有效期.png" mode="aspectFit" />
+									<text>{{ formatValidity(item.validity_days) }}</text>
+								</view>
+								<view class="package-meta-item">
+									<image class="package-meta-icon" src="/static/流量.png" mode="aspectFit" />
+									<text>{{ formatData(item.data_allowance, item.data_unit) }}</text>
 								</view>
-								<view class="package-description">高速流量 · 全国通用 · 不限速</view>
-							</view>
-							<view class="package-side">
-								<view class="package-price"><text class="price-symbol">¥</text>{{ formatPackagePrice(item.retail_price) }}</view>
-								<button class="btn-apple btn-primary package-buy-button" @tap="buyPackage(item)">立即订购</button>
 							</view>
+							<view class="package-description">高速流量 · 全国通用 · 不限速</view>
+						</view>
+						<view class="package-side">
+							<view class="package-price"><text class="price-symbol">¥</text>{{ formatPackagePrice(item.retail_price) }}</view>
+							<button class="btn-apple btn-primary package-buy-button" @tap="buyPackage(item)">立即订购</button>
 						</view>
 					</view>
-				</scroll-view>
+				</view>
 			</view>
 		</view>
 
@@ -709,30 +707,17 @@
 
 	/* Screenshot-aligned package list skin */
 	.container {
-		position: fixed;
-		/* Keep the page below the platform navigation bar on every screen size. */
-		top: var(--window-top);
-		right: 0;
-		bottom: var(--window-bottom);
-		left: 0;
 		display: flex;
 		flex-direction: column;
-		gap: 18rpx;
 		padding: 20rpx 24rpx 48rpx;
-		height: auto;
-		min-height: 0;
+		min-height: 100vh;
 		background: #f8f9fb;
 		box-sizing: border-box;
-		overflow: hidden;
 	}
 
 	.tab-section {
-		flex: 1;
-		height: 100%;
-		min-height: 0;
 		display: flex;
 		flex-direction: column;
-		overflow: hidden;
 	}
 
 	.tab-header {
@@ -836,18 +821,8 @@
 		z-index: 0;
 	}
 
-	.package-scroll-area {
-		flex: 1 1 0;
-		min-height: 0;
+	.package-content {
 		margin-top: 20rpx;
-		display: flex;
-	}
-
-	.package-scroll {
-		width: 100%;
-		height: 100%;
-		min-height: 0;
-		box-sizing: border-box;
 	}
 
 	.package-list {