Browse Source

洗车归位成功页面

lilei 4 years ago
parent
commit
9a8e813cff
6 changed files with 214 additions and 34 deletions
  1. 7 1
      pages.json
  2. 45 18
      pages/coupon/couponTpl.vue
  3. 82 15
      pages/work/index/index.vue
  4. 80 0
      pages/work/success/success.vue
  5. BIN
      static/img/reset.png
  6. BIN
      static/img/select.png

+ 7 - 1
pages.json

@@ -47,7 +47,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>

+ 82 - 15
pages/work/index/index.vue

@@ -14,8 +14,8 @@
 					<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 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>
@@ -45,6 +45,44 @@
 				</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>
 
@@ -56,31 +94,60 @@ export default {
 			rdeg: -135,
 			ldeg: -135,
 			step: 0,
-			interId:null
+			interId: null,
+			status: 'start', // 状态,start 开始启动,working 正在工作,reseting 归位中
+			showStart: false ,// 启动弹框提示
+			showStop: false, // 急停提示
 		};
 	},
-	onLoad() {
-		
-	},
+	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)
+			// 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;
+			}
 		},
 		// 进度条动画
 		loading(second) {
 			if (second <= 30) {
-				this.rdeg = -135 + 6 * second
-				this.ldeg = -135
+				this.rdeg = -135 + 6 * second;
+				this.ldeg = -135;
 			} else {
-				this.rdeg = 45
-				this.ldeg = -135 + 6 * (second - 30)
+				this.rdeg = 45;
+				this.ldeg = -135 + 6 * (second - 30);
 			}
 		}
 	}
@@ -202,7 +269,7 @@ export default {
 					}
 				}
 				.cirle-sex {
-					background-image: linear-gradient(-180deg, #888, #333 80%);
+					background-image: linear-gradient(180deg, #888, #333 50%);
 					width: 210rpx;
 					height: 210rpx;
 					border-radius: 100%;

+ 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