From 9ff4b000b34b794d12e6a0c9223b0b192ce23645 Mon Sep 17 00:00:00 2001
From: hly <2783385703@qq.com>
Date: Tue, 26 Aug 2025 18:20:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B0=B4=E5=B9=B3=E6=BB=9A=E5=8A=A8=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=A0=8F=E5=B9=B6=E6=96=B0=E5=A2=9E"=E5=B7=B2?=
 =?UTF-8?q?=E5=8F=96=E6=B6=88"=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将静态标签栏改为可水平滚动的scroll-view组件
- 新增"已取消"订单状态标签
- 调整标签样式以适配滚动布局
---
 pages_order/order/orderList.vue | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/pages_order/order/orderList.vue b/pages_order/order/orderList.vue
index f9f740d..5ae7d37 100644
--- a/pages_order/order/orderList.vue
+++ b/pages_order/order/orderList.vue
@@ -1,11 +1,16 @@
 <template>
 	<view class="order-list-page">
 		<!-- 顶部标签栏 -->
-		<view class="order-tabs">
-			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: currentTab === tab.value}"
-				@click="switchTab(tab.value)">
-				<text>{{tab.name}}</text>
-			</view>
+		<view class="order-tabs-container">
+			<scroll-view scroll-x class="order-tabs" :scroll-into-view="'tab-' + currentTab">
+				<view class="tabs-wrapper">
+					<view v-for="(tab, index) in tabs" :key="index" :id="'tab-' + tab.value" 
+						class="tab-item" :class="{active: currentTab === tab.value}"
+						@click="switchTab(tab.value)">
+						<text>{{tab.name}}</text>
+					</view>
+				</view>
+			</scroll-view>
 		</view>
 
 		<!-- 订单列表 -->
@@ -189,6 +194,10 @@
 					{
 						name: '已完成',
 						value: 3
+					},
+					{
+						name: '已取消',
+						value: 6
 					}
 				],
 				currentTab: -1,
@@ -501,22 +510,33 @@
 		flex-direction: column;
 	}
 
-	.order-tabs {
-		display: flex;
-		justify-content: space-around;
-		align-items: center;
+	.order-tabs-container {
 		height: 88rpx;
 		background-color: #FFBF60;
 		color: #FFFFFF;
+	}
+
+	.order-tabs {
+		height: 100%;
+		white-space: nowrap;
+	}
+
+	.tabs-wrapper {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		min-width: 100%;
 
 		.tab-item {
-			padding: 0 20rpx;
+			padding: 0 30rpx;
 			height: 100%;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			font-size: 28rpx;
 			position: relative;
+			flex-shrink: 0;
+			min-width: 120rpx;
 
 			&.active {
 				font-weight: bold;