WashingCar-frontend-Ver3.0/pages/complete/complete.vue

<template>
	<navigationStyle :titles="titles" :color="color"></navigationStyle>
	<view class="operation">
		<view class="tops">
			
		</view>
		<view class="headers">
			<img class="a" src="" alt="" />
		</view>
		<view class="miaoshu">
			正在进行({{currentOrder.goodsName}})自助洗车服务
		</view>
		<view class="miaoshu1">
			请在服务结束后点击“洗车完成”或者点击设备“结束“按钮
		</view>
		<view class="miaoshu2">
			谢谢您的使用！
		</view>
		<!-- <view class="miaoshu">
			您正在进行<text class="color">6元10分钟套餐</text>的自助服务，请在服务结束后点击“洗车完成”按钮或者点击设备上的结束按钮，谢谢您的使用!
		</view> -->
	<!-- 	<view class="headersa">
			暂无进行中的订单...
		</view> -->
		<view class="btn" @click="goOrder">
			洗车完成
		</view>
		<!-- <view class="btns" @click="goback">
			返回
		</view> -->
	</view>
		<view class="queding" v-if="que==1">
			<view class="content">
				<view class="hear">
			确定结束洗车?
				</view>
				<view class="queding-bottom">
					<view class="queding-bottom-left" @click="quedingsa">
						确定
					</view>
					<view class="queding-bottom-right" @click="quedinga">
						取消
					</view>
				</view>
			</view>
		</view>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import {onBackPress,onLoad} from '@dcloudio/uni-app'
import { ref } from 'vue';
const que =ref(0)
	const titles = ref('当前订单')
	const color = ref('#2264dc')
	onLoad(() => {
		titles.value = '当前订单'
		color.value = '#2264dc'
	})
onBackPress((options)=>{
	console.log('--------------------------------------------');
	if (options.from === 'navigateBack') {
		console.log('--------------------------------------------');
			return false;
		}
})
const msg = ref('')
msg.value = uni.getStorageSync('msg')
	// 洗车时的页面
	import {operation} from '../../stor/operation/operation.js'
	const o = operation()
	o.getCurrentOrderApi()
	const {close,currentOrder} = storeToRefs(o)
	
	const isshow = ref(0)
	const goOrder = () => {
		que.value=1
		
	}
	const goback = ()=>{
		uni.navigateBack()
	}
	const quedingsa = ()=>{
		o.getClose()
	}
	const quedinga=()=>{
		que.value=0
	}
</script>

<style lang="scss">
	.operation {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #ffffff;
		.tops{
			width: 100%;
			height: 11%;
		}
		.headers{
			width: 494rpx;
			height: 380rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url("https://www.jiubaotongxue.love/image/demo75.png");
			transform: translateX(-50%);
			margin-left: 50%;
			.a{
				width: 100%;
				height: 100%;
			}
		}
		.miaoshu{
			width: 510rpx;
			text-align: center;
			margin-left: 50%;
			transform: translateX(-50%);
			font-size: 28rpx;
			line-height: 80rpx;
			// letter-spacing: 6rpx;
			margin-top: 30rpx;
			color: #57aff7;
		}
		.miaoshu1{
			width: 100%;
			height: 42rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #222222;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-top: 20rpx;
		}
		.miaoshu2{
			width:100%;
			height: 42rpx;
			font-weight: 700;
			font-size: 26rpx;
			color: #222222;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-top: 30rpx;
		}
		.btn{
			margin-top: 40rpx;
			width: 540rpx;
			height: 90rpx;
			background-color: #57aff7;
			margin-left: 50%;
			transform: translateX(-50%);
			text-align: center;
			line-height: 90rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			color: white;
			font-size: 28rpx;
			letter-spacing: 5rpx;
		}
		.headersa{
			width: 550rpx;
			height: 200rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			// border: 1rpx solid #57aff7;
			text-align: center;
			line-height: 200rpx;
		}
		.btns{
			margin-top: 70rpx;
			width: 540rpx;
			height: 90rpx;
			background-color: #57aff7;
			margin-left: 50%;
			transform: translateX(-50%);
			text-align: center;
			line-height: 90rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			color: white;
			font-size: 28rpx;
			letter-spacing: 5rpx;
		}
	}
	
		.queding {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 100;
			background-color: rgba(0, 0, 0, 0.7);
	
			.content {
				position: absolute;
				width: 500rpx;
				min-height: 220rpx;
				background-color: white;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
	
				.hear {
					width: 96%;
					// height: 100rpx;
					text-align: center;
					margin-top: 50rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					// background-color: saddlebrown;
					margin-top: 50rpx
				}
	
				.queding-bottom {
					width: 100%;
					height: 80rpx;
					// background-color: red;
					// position: absolute;
					// bottom: 22rpx;
					margin-top: 30rpx;
					display: flex;
					justify-content:center;
	
					.queding-bottom-left {
						width:165rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background-color: #70b6f2;
						color: white;
						margin-right: 20rpx;
						letter-spacing: 5rpx;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
	
					.queding-bottom-right {
						width: 165rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background-color: #70b6f2;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
						margin-left: 20rpx;
						letter-spacing: 5rpx;
					}
				}
	
			}
		}
</style>