【类 型】：feat

【原  因】：
【过  程】：订单页 tab标签 swiper容器 功能 和 ui
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

App.vue

@@ -66,6 +66,14 @@
 	.animation {
 	  transition: all 0.2s ease;
 	}
+	//占位 空符
+	.extra-space1 {
+		height: 400rpx;
+	}
+	//占位 空符
+	.extra-space2 {
+		height: 200rpx;
+	}
 
 	.checkBox {
 		weight: 40rpx;

components/orderItem/orderItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-t-24 p-24 bg-w boxshadow">
+	<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-b-24 p-24 bg-w boxshadow">
 		<view class="flex">
 			<view class="flex3 ofh">
 				<view class="fz24 fcb m-t-12">订单号：{{order.order_sn}}</view>

pages/main/order.vue

@@ -14,9 +14,39 @@
 			</view>
 		</view>
 		<!-- tabLine -->
-		<view class="tabLineBox flex mac mc" :style="{ left: tabLineLeft + 'rpx' }">
+		<view class="tabLineBox flex mac mc z-top" :style="{ left: tabLineLeft + 'rpx' }">
 			<view class="tabLine rad8 bg-m"></view>
 		</view>
+		<!-- 订单页 swiper -->
+		<swiper class="swiperClass m-t-12" :current="current" @animationfinish="animationfinish">
+			<swiper-item class="swiperClass">
+				<scroll-view scroll-y class="swiperClass">
+					<view v-if="orderList_unpaid.length>0">
+						<orderItem v-for="order in orderList_unpaid" :order=order :key="order.id"></orderItem>
+						<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
+						<view class="extra-space2"></view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item>
+				<view v-if="orderList_paid.length>0">
+					<orderItem v-for="order in orderList_paid" :order=order :key="order.id"></orderItem>
+					<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
+					<view class="extra-space2"></view>
+				</view>
+			</swiper-item>
+			<swiper-item>
+				<view v-if="orderList_refund.length>0">
+					<orderItem v-for="order in orderList_refund" :order=order :key="order.id"></orderItem>
+					<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
+					<view class="extra-space2"></view>
+				</view>
+			</swiper-item>
+		</swiper>
+		<!-- tabbar -->
+		<view>
+			<tabbar></tabbar>
+		</view>
 	</view>
 </template>
 
@@ -26,17 +56,43 @@
 			return {
 				tabList: ['待支付', '已付款', '退款售后'], // tab标签
 				current: 0, //当前激活标签
+				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
 				tabLineLeft: 24 //tabLine 样式表的left值
 			}
 		},
+		computed: {
+			//未付款订单
+			orderList_unpaid() {
+				return this.$store.state.orderList.filter(item => item.main_status === '未付款')
+			},
+			//已付款 并且没有申请退款的订单
+			orderList_paid(){
+				return this.$store.state.orderList.filter(item => item.main_status === '已付款' && item.refund_status === '未申请')
+			},
+			//已经申请退款的订单
+			orderList_refund(){
+				return this.$store.state.orderList.filter(item => item.refund_status !== '未申请')
+			}
+		},
 		methods: {
+			//点击tab标签时 设置current
 			handlerTab(index) {
 				this.current = index
-				// 计算每个 tabLine 的left值
+			},
-				const tabWidth = 200
+			// swiper滑动结束，设置current
-				const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
+			animationfinish(e) {
-				1) // 750是屏幕宽度，48是左右边距
+				this.current = e.detail.current
-				this.tabLineLeft = 24 + index * (tabWidth + spacing) // 计算新的 left 值
+			}
+		},
+		watch: {
+			current: {
+				handler(val) {
+					// 计算每个 tabLine 的left值
+					const tabWidth = 200
+					const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
+						1) // 750是屏幕宽度，48是左右边距
+					this.tabLineLeft = 24 + val * (tabWidth + spacing) // 计算新的 left 值
+				}
 			}
 		}
 	}
@@ -56,11 +112,15 @@
 		width: 200rpx;
 		height: 8rpx;
 		position: absolute;
-		transition: all .5s ease;
+		transition: all .2s ease;
 	}
 
 	.tabLine {
 		width: 70rpx;
 		height: 8rpx;
 	}
+
+	.swiperClass {
+		height: calc(100vh - 297rpx);
+	}
 </style>

pages/shop/list.vue

@@ -127,16 +127,6 @@
 			this.$store.commit('setTabbarCurrent', 1)
 		},
 		watch: {
-			// 'spuList': {
-			// 	handler(newVal, oldVal) {
-			// 		console.log("spuList 发生变化")
-			// 		console.log("新值:", newVal)
-			// 		console.log("旧值:", oldVal)
-			// 		// 更新其他状态或执行其他操作
-			// 		// this.someOtherFunction()
-			// 	},
-			// 	deep: true // 如果需要深度监视对象或数组的变化，则需要设置为true
-			// }
 		},
 		computed: {
 			//站点信息
@@ -349,14 +339,6 @@
 		background-color: $uni-color-error;
 	}
 
-	.extra-space1 {
-		height: 400rpx;
-	}
-
-	.extra-space2 {
-		height: 200rpx;
-	}
-
 	.cartBox {
 		z-index: 10071;
 		width: calc(100vw - 48rpx);