lanan-repair/pages/myReservation/reservationSuccess.vue

<template>
	<view class="container">
		<v-navigation-bar background-color="rgba(0,0,0,0)" title-color="#333" title="预约成功"></v-navigation-bar>
		<view class="body">
			<view class="card">
				<view class="success">
					<image class="successIcon" src="../../static/icons/success.png" mode="aspectFit"></image>
					<text>预约成功</text>
				</view>

				<view class="orderInfo">
					<view class="shopName">顺捷汽车维修搭电救援补胎中心</view>
					<view class="baseInfo">
						<image class="baseInfoIcon" src="../../static/icons/order-icon1.png" mode=""></image>
						济南市历下区福瑞达历下护理院东南门旁
					</view>
					<view class="baseInfo">
						<image class="baseInfoIcon" src="../../static/icons/order-icon2.png" mode=""></image>
						15726506879
					</view>
					<view class="baseInfo">
						<image class="baseInfoIcon" src="../../static/icons/order-icon3.png" mode=""></image>
						汽车维修
					</view>
				</view>
			</view>
			
			<view class="footer">
				<view class="showOrder" @click="showOrder">查看订单</view>
				
				<view class="back" @click="back">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'

	export default {
		components: {
			VNavigationBar,
		},
		data() {
			return {

			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showOrder() {
				uni.redirectTo({
					url: '/pages/myReservation/myReservation'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;

		background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
		background-size: 100% 500rpx;
		background-repeat: no-repeat;

		display: flex;
		flex-direction: column;

		.body {
			flex: 1;
			height: 0;
			overflow: auto;
			position: relative;
			z-index: 1;
			background: linear-gradient(180deg, rgba(193, 222, 255, 0) 0%, #f1f1f1 100%);
		
		}

		.card {
			margin: 40rpx 32rpx;
			padding: 60rpx 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.success {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			padding-bottom: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 30rpx;
			border-bottom: 1rpx solid #DDDDDD;
		}

		.successIcon {
			width: 120rpx;
			height: 120rpx;
		}

		.orderInfo {
			padding: 40rpx 0 60rpx;
		}

		.shopName {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.baseInfo {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			margin-top: 30rpx;

			display: flex;
			align-items: center;
			column-gap: 12rpx;

			.baseInfoIcon {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.footer {
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 40rpx;
			
			.showOrder, .back {
				width: 510rpx;
				height: 76rpx;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.showOrder {
				background: #0174F6;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.back {
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				border: 2rpx solid #0174F6;
				font-weight: bold;
				font-size: 32rpx;
				color: #0174F6;
			}
		}
	}
</style>