App.vue

@@ -63,18 +63,6 @@
 		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-b-24 p-24 bg-w boxshadow">
+	<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-t-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.38"
+    "uview-ui": "^2.0.36"
   },
   "repository": {
     "type": "git",

pages/main/order.vue

@@ -1,52 +1,6 @@
 <template>
 	<view>
-		<!-- topbar -->
+		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
-		<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>
 
@@ -54,73 +8,15 @@
 	export default {
 		data() {
 			return {
-				tabList: ['待支付', '已付款', '退款售后'], // tab标签
+				list: [{
-				current: 0, //当前激活标签
+					name: '待收货'
-				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
+				}, {
-				tabLineLeft: 24 //tabLine 样式表的left值
+					name: '待付款'
-			}
+				}, {
-		},
+					name: '待评价',
-		computed: {
+					count: 5
-			//未付款订单
+				}],
-			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,6 +127,16 @@
 			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: {
 			//站点信息
@@ -339,6 +349,14 @@
 		background-color: $uni-color-error;
 	}
 
+	.extra-space1 {
+		height: 400rpx;
+	}
+
+	.extra-space2 {
+		height: 200rpx;
+	}
+
 	.cartBox {
 		z-index: 10071;
 		width: calc(100vw - 48rpx);