hotelorder_student_h5/pages/p404/p404.vue

<template>
	<div class="auth-fail-page">
		<view class="seal">
			<view class="seal-son">
				<span class="quan">授权失败</span>
				<span class="dt">{{d}} {{t}}</span>
			</view>
		</view>
		<p class="ptxt">{{ message }}</p>
		<p class="error-message ptxt">很抱歉，您的授权未能成功。</p>
		<p class="error-message">请稍后重试或联系客服。</p>
	</div>
</template>

<script>
	export default {
		name: 'p404',
		data() {
			return {
				message: '',
				d: '',
				t: ''
			}
		},
		onLoad(options) {
			// console.log(options.message);
			// 印章中的时间
			this.getDataTime();

			if (!options.hasOwnProperty("message")) {
				uni.showToast({
					title: '未传错误信息',
					duration: 3000
				})
				return;
			} else {
				if (options.message === undefined || options.message === null) {
					uni.showToast({
						title: '未获取错误信息',
						duration: 3000
					})
					return;
				}
			}

			// 错误信息
			this.message = options.message;
		},
		methods: {
			getDataTime() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				const hours = String(currentDate.getHours()).padStart(2, '0');
				const minutes = String(currentDate.getMinutes()).padStart(2, '0');
				const seconds = String(currentDate.getSeconds()).padStart(2, '0');

				this.d = year + '.' + month + '.' + day;
				this.t = hours + ':' + minutes;
			}
		}
	};
</script>

<style>
	.auth-fail-page {
		font-family: Arial, sans-serif;
		background-color: #f8f8f8;
		text-align: center;
		padding: 20px;
		position: relative;
	}

	.seal {
		width: 260rpx;
		height: 260rpx;
		border: solid 6rpx #aa0000;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 245rpx;
		top: 100rpx;
		opacity: 0.8;
	}

	.seal-son {
		width: 245rpx;
		height: 245rpx;
		border: solid 2rpx #aa0000;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		position: relative;
	}

	.quan {
		position: absolute;
		top: 75rpx;
		right: 65rpx;
		text-align: center;
		font-size: 40rpx;
		transform: rotate(-45deg);
		color: #aa0000;
		font-weight: 900;
	}

	/* 竖屏样式 */
	@media (orientation: portrait) {
		/* 在这里添加竖屏时的样式 */
		.dt {
			position: absolute;
			top: 123rpx;
			left: 77rpx;
			text-align: center;
			font-size: 34rpx;
			transform: rotate(-45deg);
			color: #aa0000;
		}
	}

	/* 横屏样式 */
	@media (orientation: landscape) {
		/* 在这里添加横屏时的样式 */
		.dt {
			position: absolute;
			top: 123rpx;
			left: 77rpx;
			line-height: 2.5rem;
			text-align: center;
			font-size: 34rpx;
			transform: rotate(-45deg);
			color: #aa0000;
		}
	}

	.error-message {
		color: #999;
		margin: 30rpx auto;
	}

	.ptxt {
		color: #666;
		font-size: 20px;
		margin: 380rpx auto 0rpx;
	}
</style>