|
@@ -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 {
|