fix: ui

pages/order-list/order-list.vue

@@ -22,7 +22,10 @@
 		>
 			<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="orderList.length === 0 && !loading" class="empty-state">
+			<view v-if="!ordersLoaded || (loading && orderList.length === 0)" class="loading-state">
+				<up-loading-icon text="加载中" size="30"></up-loading-icon>
+			</view>
+			<view v-else-if="orderList.length === 0" class="empty-state">
 				<image class="empty-icon" src="/static/order.png" mode="aspectFit" alt="我的订单"></image>
 				<view class="empty-title">暂无订单</view>
 				<view class="empty-desc">当前账号下暂无订单信息</view>
@@ -33,10 +36,7 @@
 					<view class="card-header">
 						<view class="order-number" @tap.stop="copyOrderNo(item.order_no)">
 							<text class="order-no">{{ item.order_no || '-' }}</text>
-							<view class="copy-icon">
-								<view class="copy-back"></view>
-								<view class="copy-front"></view>
-							</view>
+							<image class="copy-icon" src="/static/复制.png" mode="aspectFit"></image>
 						</view>
 						<view class="status-badge" :class="getStatusClass(item.payment_status)">
 							{{ item.payment_status_name }}
@@ -99,6 +99,7 @@
 
 	const orderList = reactive([]);
 	const loading = ref(false);
+	const ordersLoaded = ref(false);
 	const noMore = ref(false);
 	const page = ref(1);
 	const renewalPopupRef = ref(null);
@@ -203,6 +204,7 @@
 		}
 
 		loading.value = false;
+		ordersLoaded.value = true;
 	};
 
 	const loadMore = () => {
@@ -282,7 +284,7 @@
 		border-radius: 20rpx;
 		z-index: 100;
 		flex-shrink: 0;
-		margin-top: 20rpx;
+		margin: 20rpx 24rpx 0;
 		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
 
 		.tab-item {
@@ -488,6 +490,13 @@
 		font-size: 24rpx;
 	}
 
+	.loading-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 500rpx;
+	}
+
 	/* Screenshot-aligned order list skin */
 	.container {
 		top: var(--window-top);
@@ -640,26 +649,12 @@
 	}
 
 	.copy-icon {
-		position: relative;
 		width: 30rpx;
 		height: 30rpx;
 		margin-left: 14rpx;
 		flex-shrink: 0;
 	}
 
-	.copy-back,
-	.copy-front {
-		position: absolute;
-		width: 15rpx;
-		height: 15rpx;
-		border: 3rpx solid #717782;
-		border-radius: 4rpx;
-		box-sizing: border-box;
-	}
-
-	.copy-back { top: 3rpx; left: 3rpx; }
-	.copy-front { right: 2rpx; bottom: 2rpx; background: #fff; }
-
 	.order-card .card-body {
 		padding: 0 0 28rpx;
 	}