feat(订单列表): 添加水平滚动标签栏并新增"已取消"状态

- 将静态标签栏改为可水平滚动的scroll-view组件
- 新增"已取消"订单状态标签
- 调整标签样式以适配滚动布局

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;