소스 검색

洗车bug

lilei 4 년 전
부모
커밋
6ecfe8c63b
1개의 변경된 파일39개의 추가작업 그리고 31개의 파일을 삭제
  1. 39 31
      pages/work/index/index.vue

+ 39 - 31
pages/work/index/index.vue

@@ -18,6 +18,8 @@
 					</view>
 					<view class="cirle-three flex-center"></view>
 					<view class="cirle-free" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
+					<view class="cirle-free-1" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
+					<view class="cirle-free-2" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
 					<view class="cirle-sex flex-center" @tap="startWork">
 					 {{ status == 'working' ? '紧急停止' : '点击启动' }}
 					</view>
@@ -34,7 +36,7 @@
 				<view class="work-dtime" v-if="status=='start'">
 					距离订单强制完成还剩
 					<u-count-down
-						@change="changeDtime"
+						@end="endDtime"
 						separator="zh"
 						font-size="36"
 						separator-size="28"
@@ -108,7 +110,7 @@ export default {
 			ldeg: -135, /// 进度条初始角度
 			step: 0, // 进度条增值,共60步
 			interId: null, // 进度时间id
-			status: 'start', // 状态,start 开始启动,working 正在工作,stop急停,reseting 归位中
+			status: 'start', // 状态,start 开始启动,working 正在工作,stop急停,reseting 归位中, success 洗车成功
 			showStart: false ,// 启动弹框提示
 			showStop: false, // 急停提示
 			washCarType: 1, // 洗车服务类型,不同的类型对应的时间不一样
@@ -116,12 +118,9 @@ export default {
 	},
 	onLoad() {},
 	methods: {
-		// 倒计时监听,0 时自动结束订单
-		changeDtime(time) {
-			console.log(time);
-			if(time==0){
-				this.washCarSuccess()
-			}
+		// 倒计时结束时,自动完成洗车订单
+		endDtime() {
+			this.washCarSuccess()
 		},
 		// 启动,急停按钮
 		startWork() {
@@ -137,6 +136,7 @@ export default {
 		},
 		// 开始启动机器洗车
 		startWashCar(){
+			this.step= 0;
 			this.showStart = true;
 			// 启动成功
 			setTimeout(() => {
@@ -144,6 +144,7 @@ export default {
 				this.showStart = false;
 				// 进度条,服务时间根据不同的服务类型而不同
 				let serverTime = 1
+				console.log(this.step,'step')
 				this.interId = setInterval(()=>{
 					// 小于60时说明洗车机正在工作中
 					if(this.step<=60){
@@ -173,11 +174,12 @@ export default {
 		},
 		// 洗车完成
 		washCarSuccess(){
+			this.status = "success";
+			this.resetLoadingStatus();
 			uni.showModal({
 			    title: '提示',
 			    content: '洗车已结束?',
 				showCancel: false,
-				confirmText: "确定并查看订单",
 			    success: function (res) {
 			        if (res.confirm) {
 						uni.redirectTo({
@@ -192,7 +194,6 @@ export default {
 			// 停止进度
 			this.rdeg= -135;
 			this.ldeg= -135;
-			this.step= 0;
 			clearInterval(this.interId);
 		},
 		// 洗车机进度条动画
@@ -266,6 +267,17 @@ export default {
 	border-left: 20rpx solid red;
 	left: 1px;
 }
+// 动画
+@keyframes mymove {
+	0% {
+		transform: scale(1); /*开始为原始大小*/
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.2); /*放大1.1倍*/
+		opacity: 0;
+	}
+}
 
 .work-pages {
 	width: 100%;
@@ -289,12 +301,14 @@ export default {
 				border-radius: 100%;
 				width: 390rpx;
 				height: 390rpx;
+				box-shadow:inset 0rpx 2rpx 10rpx #000;
 				.cirle-one {
-					background-image: linear-gradient(180deg, #555, #333 20%);
+					background-image: linear-gradient(180deg, #666, #333 30%);
 					width: 370rpx;
 					height: 370rpx;
 					border-radius: 100%;
 					position: absolute;
+					box-shadow: 0rpx 2rpx 10rpx #333;
 				}
 				.cirle-two {
 					width: 370rpx;
@@ -305,7 +319,7 @@ export default {
 						transform-origin: center center;
 						width: 350rpx;
 						height: 5rpx;
-						background: #888;
+						background: #777;
 					}
 				}
 				.cirle-three {
@@ -314,34 +328,28 @@ export default {
 					height: 280rpx;
 					border-radius: 100%;
 					position: absolute;
+					box-shadow: inset 0rpx 3rpx 10rpx #000;
 				}
-				.cirle-free {
+				.cirle-free, .cirle-free-1, .cirle-free-2 {
 					width: 230rpx;
 					height: 230rpx;
 					border-radius: 100%;
 					position: absolute;
 					animation: mymove 5s infinite;
 				}
-				@keyframes mymove {
-					0% {
-						transform: scale(1); /*开始为原始大小*/
-						opacity: 1;
-					}
-					25% {
-						transform: scale(1.1); /*放大1.1倍*/
-						opacity: 0.5;
-					}
-					50% {
-						transform: scale(1);
-						opacity: 1;
-					}
-					75% {
-						transform: scale(1.1);
-						opacity: 0.5;
-					}
+				.cirle-free-1{
+					width: 210rpx;
+					height: 210rpx;
+					animation: mymove 4.5s infinite;
+				}
+				.cirle-free-2{
+					width: 190rpx;
+					height: 190rpx;
+					animation: mymove 4s infinite;
 				}
 				.cirle-sex {
 					background-image: linear-gradient(180deg, #888, #333 50%);
+					box-shadow: 0rpx 5rpx 10rpx #333;
 					width: 210rpx;
 					height: 210rpx;
 					border-radius: 100%;
@@ -350,7 +358,7 @@ export default {
 					font-size: 28rpx;
 					color: #eee;
 					&:active {
-						background-image: linear-gradient(180deg, #888, #333 80%);
+						background-image: linear-gradient(-180deg, #666, #333 80%);
 					}
 				}
 				.w-start {