【类 型】：feat

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

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

App.vue

@@ -63,6 +63,18 @@
 		text-align: right;
 	}
 	
+	.animation {
+	  transition: all 0.2s ease;
+	}
+	//占位 空符
+	.extra-space1 {
+		height: 400rpx;
+	}
+	//占位 空符
+	.extra-space2 {
+		height: 200rpx;
+	}
+
 	.checkBox {
 		weight: 40rpx;
 		height: 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>

package.json

@@ -10,7 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "mqtt": "^2.18.9",
-    "uview-ui": "^2.0.36"
+    "uview-ui": "^2.0.38"
   },
   "repository": {
     "type": "git",

pages/main/order.vue

@@ -1,6 +1,52 @@
 <template>
 	<view>
-		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
+		<!-- topbar -->
+		<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
+			</view>
+		</u-navbar>
+		<!-- tab -->
+		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb">
+			<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
+				:class="current===index?'fb':''">
+				{{tab}}
+			</view>
+		</view>
+		<!-- tabLine -->
+		<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>
 
@@ -8,15 +54,73 @@
 	export default {
 		data() {
 			return {
-				list: [{
+				tabList: ['待支付', '已付款', '退款售后'], // tab标签
-					name: '待收货'
+				current: 0, //当前激活标签
-				}, {
+				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
-					name: '待付款'
+				tabLineLeft: 24 //tabLine 样式表的left值
-				}, {
+			}
-					name: '待评价',
+		},
-					count: 5
+		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
+			},
+			// swiper滑动结束，设置current
+			animationfinish(e) {
+				this.current = e.detail.current
+			}
+		},
+		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 值
+				}
 			}
 		}
 	}
 </script>
+
+<style lang="scss" scoped>
+	.tabListBox {
+		height: 77rpx;
+	}
+
+	.tabBox {
+		width: 200rpx;
+		height: 77rpx;
+	}
+
+	.tabLineBox {
+		width: 200rpx;
+		height: 8rpx;
+		position: absolute;
+		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);