Kaynağa Gözat

洗车服务页面

lilei 5 yıl önce
ebeveyn
işleme
8ad555f7ca
2 değiştirilmiş dosya ile 258 ekleme ve 0 silme
  1. 6 0
      pages.json
  2. 252 0
      pages/work/index/index.vue

+ 6 - 0
pages.json

@@ -40,6 +40,12 @@
 				"navigationBarTitleText": "订单详情"
 			}
         }
+        ,{
+            "path" : "pages/work/index/index",
+            "style" : {
+				"navigationBarTitleText": "洗车服务中"
+			}
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 252 - 0
pages/work/index/index.vue

@@ -0,0 +1,252 @@
+<template>
+	<view class="work-pages">
+		<!-- 工作控制按钮及进度 -->
+		<view class="work-cons flex-center">
+			<!-- 操作按钮组件 -->
+			<view class="work-button-wrap">
+				<!-- 按钮 -->
+				<view class="work-button flex-center" @click="startWork">
+					<!-- 扇形 -->
+					<view class="circle_process">
+					    <view class="wrapper right">
+					        <view class="circle rightcircle"></view>
+					    </view>
+					    <view class="wrapper left">
+					        <view class="circle leftcircle" id="leftcircle"></view>
+					    </view>
+					</view>
+					<view class="cirle-one"></view>
+					<view class="cirle-two flex-center" v-for="item in 60" >
+						<view class="sector" :style="{transform: `rotate(${item*6}deg)`}"></view>
+					</view>
+					<view class="cirle-three flex-center"></view>
+					<view class="cirle-free w-start"></view>
+					<view class="cirle-sex flex-center">
+						点击启动
+					</view>
+				</view>
+				<!-- 状态提示 -->
+				<view class="work-button-tips">设备准备就绪</view>
+			</view>
+		</view>
+		<!-- 说明提示 -->
+		<view class="work-tips">
+			<view class="work-dtime">
+				距离订单强制完成还剩 
+				<u-count-down @change="changeDtime" separator="zh" font-size="36" separator-size="28" color="#ff0000" :timestamp="timestamp" :show-days="false" :show-hours="false"></u-count-down>
+			</view>
+			<view class="work-remarks">
+				<view class="title">说明:</view>
+				<view>
+					支付完成后<text class="red">请尽快启动洗车服务</text>,否则订单将在5分钟后自动完成。
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				timestamp: 300
+			};
+		},
+		methods:{
+			// 倒计时监听,0 时自动结束订单
+			changeDtime(time){
+				console.log(time)
+			},
+			// 启动按钮
+			startWork(){
+				
+			},
+			// 进度条动画
+			loading(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	// 扇形圆环
+	.circle_process{
+		position: absolute;
+		width: 380rpx;
+		height : 380rpx;
+	}
+	.circle_process .wrapper{
+		width: 190rpx;
+		height: 380rpx;
+		position: absolute;
+		top:0;
+		overflow: hidden;
+	}
+	.circle_process .right{
+		right:0;
+	}
+	.circle_process .left{
+		left:0;
+	}
+	.circle_process .circle{
+		width: 380rpx;
+		height: 380rpx;
+		border:20rpx solid transparent;
+		border-radius: 50%;
+		position: absolute;
+		top:0;
+		transform : rotate(-135deg);
+	}
+	.circle_process .rightcircle{
+		border-top:20rpx solid red;
+		border-right:20rpx solid red;
+		right:0;
+		-webkit-animation: circle_right 25s linear infinite;
+	}
+	.circle_process .leftcircle{
+		border-bottom:20rpx solid red;
+		border-left:20rpx solid red;
+		left:0;
+		-webkit-animation: circle_left 25s linear infinite;
+	}
+	@-webkit-keyframes circle_right{
+		0%{
+			-webkit-transform: rotate(-135deg);
+		}
+		50%,100%{
+			-webkit-transform: rotate(45deg);
+		}
+	}
+	@-webkit-keyframes circle_left{
+		0%,50%{
+			-webkit-transform: rotate(-135deg);
+		}
+		100%{
+			-webkit-transform: rotate(45deg);
+		}
+	}
+	 
+	.work-pages{
+		width: 100%;
+		.flex-center{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.work-cons{
+			height: 60vh;
+			background-image: linear-gradient(0deg, #666, #333);
+			border-bottom-left-radius: 300rpx 30rpx;
+			border-bottom-right-radius: 300rpx 30rpx;
+			position: relative;
+			// 按钮
+			.work-button-wrap{
+				width: 400rpx;
+				margin-top: -50rpx;
+				.work-button{
+					background: #aaa;
+					border-radius: 100%;
+					width: 380rpx;
+					height: 380rpx;
+					cursor: pointer;
+					.cirle-one{
+						background: #444;
+						width: 370rpx;
+						height: 370rpx;
+						border-radius: 100%;
+						position: absolute;
+					}
+					.cirle-two{
+						width: 370rpx;
+						height: 370rpx;
+						border-radius: 100%;
+						position: absolute;
+						.sector {
+							transform-origin:center center;
+							width: 350rpx;
+							height: 5rpx;
+							background: #aaa;
+						}
+					}
+					.cirle-three{
+						background: #444;
+						width: 280rpx;
+						height: 280rpx;
+						border-radius: 100%;
+						position: absolute;
+					}
+					.cirle-free{
+						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-sex{
+						background-image: linear-gradient(-180deg, #888, #333 80%);
+						width: 210rpx;
+						height: 210rpx;
+						border-radius: 100%;
+						position: absolute;
+						color: #FFFFFF;
+						font-size: 28rpx;
+						color: #eee;
+					}
+					.w-start{
+						background: #ffcc00;
+					}
+					.w-stop{
+						background: #ff0000;
+					}
+					&:active{
+						.cirle-sex{
+							background-image: linear-gradient(180deg, #888, #333 80%);
+						}
+					}
+				}
+				.work-button-tips{
+					color: #eee;
+					text-align: center;
+					padding-top: 30rpx;
+				}
+			}
+		}
+		.work-tips{
+			padding: 45rpx;
+			.work-dtime{
+				text-align: center;
+				font-weight: bold;
+				font-size: 34rpx;
+			}
+			.work-remarks{
+				padding-top: 50rpx;
+				.red{
+					color: red;
+				}
+				.title{
+					font-weight: bold;
+				}
+			}
+		}
+	}
+</style>