颜色切换延缓

pages/index/index.vue

@@ -25,7 +25,7 @@
 					<text>
 						{{item.name}}
 					</text>
-					<text class="radius" :class="{'show': titleCurrent===2}" v-if="item.count>0">{{item.count}}</text>
+					<text class="radius" :class="{'show': changeColor,'disaper':item.count==0}" >{{item.count}}</text>
 				</view>
 			</view>
 		</view>
@@ -107,6 +107,7 @@
 		data() {
 			return {
 				offset: [5, 0],
+				changeColor:false,
 				btnStyle: {
 					background: "#7D5AFC",
 					color: '#FFFFFF'
@@ -120,14 +121,15 @@
 				titleCurrent: 0,
 				titleTabs: [{
 						name: "待报价",
-						count: ''
+						count: 0
 					},
 					{
-						name: "进行中"
+						name: "进行中",
+						count: 0
 					},
 					{
 						name: "已完成",
-						count: ''
+						count: 0
 					}
 				],
 				subTabs: [{
@@ -331,6 +333,7 @@
 							}
 							that.checkPageState()
 							that.sfview()
+							
 						} else {
 							console.log("出现错误", res)
 						}
@@ -341,11 +344,6 @@
 					//查询订单信息
 					this.sfview()
 				}
-				if (this.titleCurrent == 2) {
-					console.log(2)
-					this.checkPageState()
-					this.$store.state.loading = true
-				}
 			},
 			navigator(url) {
 				uni.navigateTo({
@@ -389,6 +387,11 @@
 							console.log(Object.values(res.data.result)[0])
 							that.orderData = Object.values(res.data.result)[0]
 							that.setCount()
+							if(that.titleCurrent == 2){
+								that.changeColor=true
+							}else{
+								that.changeColor=false
+							}
 						} else {
 							console.log(Object.values(res.data.result)[0])
 							that.orderData = Object.values(res.data.result)[0]
@@ -418,7 +421,7 @@
 
 			clearCount() {
 				for (let i in this.titleTabs) {
-					this.titleTabs[i].count = ''
+					this.titleTabs[i].count = 0
 				}
 			}
 		}
@@ -479,6 +482,7 @@
 		position: relative;
 		top: 2px;
 	}
+
 	.defa {
 		/* 		width: 250rpx; */
 		position: relative;
@@ -488,36 +492,40 @@
 		flex: 1;
 		margin-bottom: 5rpx;
 	}
-	
+
 	.active {
 		/* 		width: 250rpx; */
 		border-bottom: 2px solid #f7f8f9;
-		}
-		.radius {
-			font-size: 20rpx;
-			position: absolute;
-			top: -20;
-			right: -20;
-			display: inline-block;
-			width: 30rpx;
-			height: 30rpx;
-			border: 3rpx none #ff9900;
-			background-color: #ff9900;
-			color: white;
-			border-radius: 50%;
-		}
-		
-		.show {
-			background-color: #00ff00
-		}
-		.deom-flex {
-			padding-top: 15rpx;
-			text-align: center;
-			vertical-align: middle;
-			display: flex;
-			flex-direction: row;
-			font-size: 30rpx;
-			background-color: #7D5AFC;
-			color:#ffffff;
-		}
+	}
+
+	.radius {
+		font-size: 20rpx;
+		position: absolute;
+		top: -20;
+		right: -20;
+		display: inline-block;
+		width: 30rpx;
+		height: 30rpx;
+		border: 3rpx none #ff9900;
+		background-color: #ff9900;
+		color: white;
+		border-radius: 50%;
+	}
+
+	.show {
+		background-color: #00ff00
+	}
+	.disaper{
+		display: none;
+	}
+	.deom-flex {
+		padding-top: 15rpx;
+		text-align: center;
+		vertical-align: middle;
+		display: flex;
+		flex-direction: row;
+		font-size: 30rpx;
+		background-color: #7D5AFC;
+		color: #ffffff;
+	}
 </style>