Kaynağa Gözat

冲突修改

1004749546@qq.com 4 yıl önce
ebeveyn
işleme
35bb42f458

+ 2 - 2
components/uni-nav-bar/uni-nav-bar.vue

@@ -154,7 +154,7 @@
 		width: 750rpx;
 		height: $nav-height;
 		line-height: $nav-height;
-		font-size: 16px;
+		font-size: 14px;
 		// background-color: #ffffff;
 	}
 
@@ -173,7 +173,7 @@
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
-		width: 160rpx;
+		width: 300rpx;
 		justify-content: flex-start;
 	}
 

+ 7 - 1
pages.json

@@ -52,7 +52,13 @@
 				"navigationBarTitleText": "准备洗车"
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/work/success/success",
+            "style" : {
+				"navigationBarTitleText": "归位成功"
+			}
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

+ 45 - 18
pages/coupon/couponTpl.vue

@@ -2,17 +2,34 @@
 	<view class="coupon-list">
 		<view class="coupon-box">
 			<view class="coupon-head" @click="checked">
-				<view class="coupon-sel"></view>
+				<view class="coupon-sel coupon-checked" v-if="showCheck"></view>
+				<view class="coupon-sel" v-else></view>
 				<view class="coupon-title">
 					<view class="coupon-title-1">满100减50</view>
-					<view class="coupon-title-time">有效期至:2020-05-12</view>
 				</view>
 				<view class="coupon-price">
 					¥<text>100</text>
 				</view>
 			</view>
 			<view class="coupon-desc">
-				优惠卷使用说明
+				<view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:2020-05-12</view>
+				<view><u-icon class="icon" size="30" name="info-circle"></u-icon> 优惠卷使用说明优惠卷使用说明优惠卷使用说明优惠卷使用说明</view>
+			</view>
+		</view>
+		<view class="coupon-box diabled">
+			<view class="coupon-head" @click="checked">
+				<view class="coupon-sel coupon-checked" v-if="false"></view>
+				<view class="coupon-sel" v-else></view>
+				<view class="coupon-title">
+					<view class="coupon-title-1">满100减50</view>
+				</view>
+				<view class="coupon-price">
+					¥<text>100</text>
+				</view>
+			</view>
+			<view class="coupon-desc">
+				<view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:2020-05-12</view>
+				<view><u-icon class="icon" size="30" name="info-circle"></u-icon> 优惠卷使用说明</view>
 			</view>
 		</view>
 	</view>
@@ -24,7 +41,7 @@
 		props: {
 			showCheck: {
 				type: Boolean,
-				default: false
+				default: true
 			},
 			list:{
 				type: Array,
@@ -48,47 +65,57 @@
 	.coupon-list{
 		padding: 25rpx;
 	}
+	.coupon-box.diabled{
+		background: #999;
+	}
 	.coupon-box{
-		background: #fff7f5;
-		border-radius: 10rpx;
-		box-shadow: 1rpx 1rpx 5rpx #eee;
+		margin-bottom: 30rpx;
+		border-radius: 15rpx;
+		box-shadow: 2rpx 2rpx 10rpx #ddd;
+		background: #ff0000;
+		color: #FFFFFF;
 		.coupon-head{
 			display: flex;
 			align-items: center;
 			padding: 20rpx 30rpx;
 			position: relative;
+			border-bottom: 15rpx dotted #FFFFFF;
+			margin-bottom: -8rpx;
 			.coupon-sel{
 				position: absolute;
-				width: 60rpx;
-				height: 60rpx;
+				width: 56rpx;
+				height: 46rpx;
 				right: 0;
 				top: 0;
 			}
 			.coupon-checked{
-				background: url(../../static/img/select.png) no-repeat center;
+				background: url(/static/img/select.png) no-repeat center;
 				background-size: 100% 100%;
 			}
 			.coupon-title{
 				flex-grow: 1;
 				font-size: 32rpx;
-				.coupon-title-time{
-					color: #999;
-					padding-top: 15rpx;
-					font-size: 28rpx;
-				}
 			}
 			.coupon-price{
 				padding: 0 15rpx;
-				color: red;
+				color: #FFFFFF;
 				text{
 					font-size: 60rpx;
 				}
 			}
 		}
 		.coupon-desc{
-			border-top: 1rpx dashed #ffcfcd;
-			padding: 18rpx 30rpx;
+			padding: 10rpx 30rpx;
 			color: #666;
+			background: #FFFFFF;
+			border-bottom-left-radius:10rpx;
+			border-bottom-right-radius: 10rpx;
+			>view{
+				padding: 5rpx 0;
+			}
+			.icon{
+				margin-right: 10rpx;
+			}
 		}
 	}
 </style>

+ 11 - 9
pages/index/index.vue

@@ -3,12 +3,13 @@
 		<!-- 顶部导航 -->
 		<uni-nav-bar 
 		:border="false" 
-		@click-left="toUserCenter" 
+		@clickLeft="toUserCenter" 
 		leftIcon="person-filled" 
 		 background-color="#fff" 
 		 :status-bar="true" 
 		 :fixed="true" 
 		 color="rgb(255,0,0)">
+		  <view slot="left">个人中心</view>
 		</uni-nav-bar>
 		<!-- 页面主体 -->
 		<view class="pageContent">
@@ -25,10 +26,10 @@
 							<cover-image class="img" src="/static/img/index-call.png"></cover-image>
 							<cover-view>联系客服</cover-view>
 						</cover-view>
-						<cover-view class="flex-item">
+						<!-- <cover-view class="flex-item">
 							<cover-image class="img" src="/static/img/index-discount.png"></cover-image>
 							<cover-view>优惠活动</cover-view>
-						</cover-view>
+						</cover-view> -->
 					</view>
 				</view>
 				<!-- 地图移动后返回原位置控件 -->
@@ -235,7 +236,7 @@
 					latitude: latitude,
 					longitude: longitude,
 					width: 30,
-					height: 30,
+					height: 49,
 					callout: {
 						content: point.name,
 						fontSize: 14,
@@ -267,12 +268,11 @@
 				.flex-wrp {
 					display: flex;
 					flex-direction: column;
+					background: rgba(0, 0, 0, 0.3);
+					border-radius: 10rpx;
+					padding: 10rpx 0;
 				}
-
 				.flex-item {
-					background: rgba(0, 0, 0, 0.6);
-					margin-bottom: 10rpx;
-					border-radius: 10rpx;
 					width: 110rpx;
 					height: 110rpx;
 					font-size: 24rpx;
@@ -287,7 +287,6 @@
 						margin-bottom: 10rpx;
 					}
 				}
-				
 			}
 			.cover-location{
 				position: absolute;
@@ -303,6 +302,9 @@
 				bottom: calc(60rpx);
 				width: 80%;
 				left: calc(9%);
+				uni-button[type=warn]{
+					background: red;
+				}
 			}
 
 		}

+ 8 - 21
pages/store/StoreList.vue

@@ -2,7 +2,7 @@
 	<view class="content">
 		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom" @scroll="scroll">
 			<view class="list" @click="intoDetail" v-for="item in storeList" :key="item.id">
-				<image class="list-img" :src="item.icon?item.icon:'../../static/img/mddef.jpg'"></image>
+				<u-image width="160rpx" height="160rpx" :border-radius="10" :src="item.icon?item.icon:'/static/img/mddef.jpg'"></u-image>
 				<view class="store-info">
 					<view class="name">
 						{{item.name}}
@@ -49,7 +49,7 @@
 					{
 						id: 10,
 						icon: '',
-						addrDetail: '陕西省西安市未央区北二环贞观路',
+						addrDetail: '陕西省西安市未央区北二环贞观路二环贞观路',
 						name: '贞观路站',
 						distance: 0.1,
 						time: '8:00-22:00',
@@ -147,13 +147,13 @@
 			getStoreStatus(item) {
 				switch (item.status) {
 					case 0:
-						return '../../static/img/ygb.png'
+						return '/static/img/ygb.png'
 						break;
 					case 1:
-						return '../../static/img/yyz.png'
+						return '/static/img/yyz.png'
 						break;
 					case 2:
-						return '../../static/img/dky.png'
+						return '/static/img/dky.png'
 						break;
 					default:
 						break;
@@ -185,30 +185,20 @@
 			.list {
 				padding: 20rpx 0;
 				display: flex;
-				width: 100%;
-				height: 200rpx;
 				border-bottom: 1px solid #eee;
-
-				.list-img {
-					width: 20%;
-					height: 100%;
-					margin-right: 10rpx;
-				}
-
 				.store-info {
-					height: 100%;
 					display: flex;
 					flex: 1;
 					flex-direction: column;
 					justify-content: space-between;
-					margin-right: 10rpx;
-
+					padding: 0 20rpx;
 					.name {
 						font-size: 32rpx;
 						color: #000;
 					}
 					.address{
 						font-size: 26rpx;
+						padding: 10rpx 0;
 					}
 					.location {
 						display: flex;
@@ -217,17 +207,14 @@
 						.left {
 							margin-right: 20rpx;
 						}
-
 						.icon {
 							color: #999;
-							margin-right: 10rpx;
+							margin-right: 5rpx;
 						}
 					}
 				}
 
 				.list-right {
-					width: 20%;
-					height: 100%;
 					display: flex;
 					justify-content: center;
 					align-items: center;

+ 5 - 16
pages/store/storeDetail.vue

@@ -2,13 +2,13 @@
 	<view class="content">
 		<view class="page-content">
 			<view class="header">
-				<image class="list-img" :src="'../../static/img/mddef.jpg'"></image>
+				<u-image width="160rpx" height="160rpx" :border-radius="10" src="/static/img/mddef.jpg"></u-image>
 				<view class="store-info">
 					<view class="name">
 						贞观路站
 					</view>
 					<view class="address">
-						陕西省西安市未央区北二环贞观路
+						陕西省西安市未央区北二环贞观路陕西省西安市未央区北二环贞观路
 					</view>
 					<view class="location">
 						<view class="left">
@@ -54,7 +54,7 @@
 			<button type="warn" @click="openLocation">立刻导航</button>
 		</view>
 		<u-popup v-model="showPop" mode="center" width="90%" height="60%" closeable>
-			<image class="pop-img" :src="'../../static/img/mddef.jpg'"></image>
+			<image class="pop-img" :src="'/static/img/mddef.jpg'"></image>
 		</u-popup>
 	</view>
 </template>
@@ -116,22 +116,12 @@
 		.header {
 			padding: 20rpx 0;
 			display: flex;
-			width: 100%;
-			height: 200rpx;
-			.list-img {
-				width: 20%;
-				height: 100%;
-				margin-right: 10rpx;
-			}
-		
 			.store-info {
-				height: 100%;
 				display: flex;
 				flex: 1;
 				flex-direction: column;
 				justify-content: space-between;
-				margin-right: 10rpx;
-		
+				padding: 0 20rpx;
 				.name {
 					font-size: 32rpx;
 					color: #000;
@@ -146,10 +136,9 @@
 					.left {
 						margin-right: 20rpx;
 					}
-		
 					.icon {
 						color: #999;
-						margin-right: 10rpx;
+						margin-right: 5rpx;
 					}
 				}
 			}

+ 1 - 1
pages/userCenter/index.vue

@@ -13,7 +13,7 @@
 				<u-cell-item icon="gift" index="0" @click="toPage" title="我的优惠卷"></u-cell-item>
 				<u-cell-item icon="order" index="1" @click="toPage" title="我的订单"></u-cell-item>
 				<u-cell-item icon="file-text" index="2" @click="toPage" title="服务协议"></u-cell-item>
-				<u-cell-item icon="info-circle" index="3" @click="toPage" title="关于我们"></u-cell-item>
+				<!-- <u-cell-item icon="info-circle" index="3" @click="toPage" title="关于我们"></u-cell-item> -->
 			</u-cell-group>
 		</view>
 		<!-- 退出 -->

+ 265 - 196
pages/work/index/index.vue

@@ -6,24 +6,19 @@
 			<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 class="wrapper right"><view class="circle rightcircle" :style="{ transform: `rotate(${rdeg}deg)` }"></view></view>
+						<view class="wrapper left"><view class="circle leftcircle" :style="{ transform: `rotate(${ldeg}deg)` }"></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 class="cirle-two flex-center" v-for="item in 60" :key="item">
+						<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 class="cirle-free" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
+					<view class="cirle-sex flex-center">{{ status == 'working' ? '紧急停止' : '点击启动' }}</view>
 				</view>
 				<!-- 状态提示 -->
 				<view class="work-button-tips">设备准备就绪</view>
@@ -32,221 +27,295 @@
 		<!-- 说明提示 -->
 		<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>
+				距离订单强制完成还剩
+				<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分钟后自动完成。
+					支付完成后
+					<text class="red">请尽快启动洗车服务</text>
+					,否则订单将在5分钟后自动完成。
 				</view>
 			</view>
 		</view>
+
+		<!-- 正在启动,归位弹框提示 -->
+		<u-popup v-model="showStart" :mask-close-able="false" border-radius="10" mode="center" width="500rpx" height="400rpx">
+			<view style="padding: 30rpx;display: flex;justify-content: center;text-align: center;">
+				<!-- 启动中 -->
+				<view v-if="status == 'start'">
+					<u-image width="216px" height="120px" src="/static/img/start.png"></u-image>
+					<view style="padding: 15rpx;">洗车机正在启动...</view>
+				</view>
+				<!-- 归位中 -->
+				<view v-if="status == 'reseting'">
+					<u-image width="216px" height="120px" src="/static/img/reset.png"></u-image>
+					<view style="padding: 15rpx;">洗车机正在归位中...</view>
+				</view>
+			</view>
+		</u-popup>
+		<!-- 急停提示弹框 -->
+		<u-popup v-model="showStop" :mask-close-able="false" border-radius="10" mode="center" width="80%">
+			<view style="padding: 30rpx;text-align: center;">
+				<view>
+					<view style="font-weight: bold;">设备提示</view>
+					<view style="display: flex;justify-content: center;padding: 10rpx 0;">
+						<u-image width="165px" height="138px" src="/static/img/sbts.png"></u-image>
+					</view>
+					<u-divider>可能原因</u-divider>
+					<view style="padding: 15rpx;text-align: left;">
+						<view>1、洗车机紧急停止,本次服务结束</view>
+						<view>2、因设备故障无法继续为您服务,所支付金额将退至您的支付账户</view>
+						<view>3、如需再次服务,请退出车辆重新进入,再扫码支付洗车</view>
+						<view>4、如需帮助请联系客服</view>
+					</view>
+					<view style="display: flex;padding: 20rpx 0;">
+						<u-button @click="callPhone" style="width: 45%;border-radius: 0;">联系客服</u-button>
+						<u-button @click="resetRabt" style="width: 45%;" type="error">洗车机归位</u-button>
+					</view>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				timestamp: 300
-			};
+export default {
+	data() {
+		return {
+			timestamp: 300,
+			rdeg: -135,
+			ldeg: -135,
+			step: 0,
+			interId: null,
+			status: 'start', // 状态,start 开始启动,working 正在工作,reseting 归位中
+			showStart: false ,// 启动弹框提示
+			showStop: false, // 急停提示
+		};
+	},
+	onLoad() {},
+	methods: {
+		// 电话客服
+		callPhone () {
+			uni.makePhoneCall({
+			    phoneNumber: '114' 
+			})
+		},
+		// 倒计时监听,0 时自动结束订单
+		changeDtime(time) {
+			console.log(time);
+		},
+		// 归位机器
+		resetRabt(){
+			this.status = 'reseting';
+			this.showStart = true;
+			this.showStop = false;
+			// 归位结束后
+		},
+		// 启动,急停按钮
+		startWork() {
+			// this.interId = setInterval(()=>{
+			// 	this.loading(this.step++)
+			// },1000)
+
+			// 启动
+			if (this.status == 'start') {
+				this.showStart = true;
+				// 启动成功
+				setTimeout(() => {
+					this.status = 'working';
+					this.showStart = false;
+				}, 3000);
+			}
+			// 急停
+			if (this.status == 'working') {
+				// 显示急停提示弹框
+				this.showStop = true;
+			}
 		},
-		methods:{
-			// 倒计时监听,0 时自动结束订单
-			changeDtime(time){
-				console.log(time)
-			},
-			// 启动按钮
-			startWork(){
-				
-			},
-			// 进度条动画
-			loading(){
-				
+		// 进度条动画
+		loading(second) {
+			if (second <= 30) {
+				this.rdeg = -135 + 6 * second;
+				this.ldeg = -135;
+			} else {
+				this.rdeg = 45;
+				this.ldeg = -135 + 6 * (second - 30);
 			}
 		}
 	}
+};
 </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);
-		}
+// 扇形圆环
+.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;
+}
+.circle_process .leftcircle {
+	border-bottom: 20rpx solid red;
+	border-left: 20rpx solid red;
+	left: 0;
+}
+
+.work-pages {
+	width: 100%;
+	.flex-center {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
-	 
-	.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;
+	.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%;
-					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
-						}
+					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-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;
+				}
+				.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;
 					}
-					.w-start{
-						background: #ffcc00;
+					25% {
+						transform: scale(1.1); /*放大1.1倍*/
+						opacity: 0.5;
 					}
-					.w-stop{
-						background: #ff0000;
+					50% {
+						transform: scale(1);
+						opacity: 1;
 					}
-					&:active{
-						.cirle-sex{
-							background-image: linear-gradient(180deg, #888, #333 80%);
-						}
+					75% {
+						transform: scale(1.1);
+						opacity: 0.5;
 					}
 				}
-				.work-button-tips{
+				.cirle-sex {
+					background-image: linear-gradient(180deg, #888, #333 50%);
+					width: 210rpx;
+					height: 210rpx;
+					border-radius: 100%;
+					position: absolute;
+					color: #ffffff;
+					font-size: 28rpx;
 					color: #eee;
-					text-align: center;
-					padding-top: 30rpx;
+				}
+				.w-start {
+					background: #ffcc00;
+				}
+				.w-stop {
+					background: #ff0000;
+				}
+				&:active {
+					.cirle-sex {
+						background-image: linear-gradient(180deg, #888, #333 80%);
+					}
 				}
 			}
-		}
-		.work-tips{
-			padding: 45rpx;
-			.work-dtime{
+			.work-button-tips {
+				color: #eee;
 				text-align: center;
-				font-weight: bold;
-				font-size: 34rpx;
+				padding-top: 30rpx;
 			}
-			.work-remarks{
-				padding-top: 50rpx;
-				.red{
-					color: red;
-				}
-				.title{
-					font-weight: bold;
-				}
+		}
+	}
+	.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>

+ 80 - 0
pages/work/success/success.vue

@@ -0,0 +1,80 @@
+<template>
+	<view class="s-pages">
+		<vew class="heads">
+			<view><u-icon name="checkmark-circle-fill" size="200" color="red"></u-icon></view>
+			<view>洗车机归位成功</view>
+			<view class="s-butoon">
+				<u-button @click="toWork" type="error">重新扫码洗车</u-button>
+				<u-button @click="toHome">返回首页</u-button>
+			</view>
+		</vew>
+		<view class="infos">
+			<view>操作说明:</view>
+			<view>【重新扫码洗车】需要再次支付洗车费用,如果遇到非个人原因导致洗车机中途归位,客服会在7个工作日内核实情况后,将已付费用按原支付渠道退款给付款账户。带来不便,敬请谅解。</view>
+			<view @click="callPhone">如有疑问,请联系客服:<text>400-xxx-xxx</text> </view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			// 电话客服
+			callPhone () {
+				uni.makePhoneCall({
+				    phoneNumber: '114' 
+				})
+			},
+			// 返回首页
+			toHome () {
+				uni.navigateTo({
+					url: "/pages/index/index"
+				})
+			},
+			// 再次洗车
+			toWork(){
+				uni.navigateTo({
+					url: "/pages/work/index/index"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.s-pages{
+		width: 100%;
+		.heads{
+			text-align: center;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			padding: 50rpx 50rpx 20rpx;
+			.s-butoon{
+				padding: 50rpx 0 0 0;
+				.u-btn{
+					margin-bottom: 35rpx;
+				}
+			}
+		}
+		.infos{
+			padding:0 50rpx;
+			> view{
+				padding: 10rpx 0;
+				text-indent: 24px;
+				line-height: 22px;
+				&:first-child{
+					text-indent: 0;
+				}
+				text{
+					color: red;
+				}
+			}
+		}
+	}
+</style>

BIN
static/img/reset.png


BIN
static/img/select.png


BIN
static/img/store-dky.png


BIN
static/img/store-zt.png


BIN
static/img/store.png