pet-system-merchant-app/pages/login/review.vue

<template>
	<view class="review-page">
		<nav-bar title="申请审核" bgColor="transparent" color="#fff" :showBack="false"></nav-bar>
		
		<!-- 头部渐变背景 -->
		<view class="hero-bg">
			<view class="deco-circle c1"></view>
			<view class="deco-circle c2"></view>
			<view class="deco-circle c3"></view>
		</view>

		<!-- 审核状态卡片 -->
		<view class="status-card">
			<view class="status-icon-wrap">
				<uni-icons type="spinner-cycle" size="48" color="#ff9500" class="spinner"></uni-icons>
			</view>
			<text class="status-title">资料审核中</text>
			<text class="status-desc">系统已收到您的注册申请，正在为您全力审核</text>
			
			<!-- 审核时间轴 -->
			<view class="timeline">
				<view class="timeline-item active">
					<view class="timeline-dot">
						<uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
					</view>
					<view class="timeline-content">
						<text class="time-title">提交申请</text>
						<text class="time-desc">注册资料已成功提交</text>
					</view>
				</view>
				
				<view class="timeline-item active processing">
					<view class="timeline-dot">
						<view class="inner-dot"></view>
					</view>
					<view class="timeline-content">
						<text class="time-title">平台审核中</text>
						<text class="time-desc">预计在 1-2 个工作日内完成审核</text>
					</view>
				</view>
				
				<view class="timeline-item">
					<view class="timeline-dot"></view>
					<view class="timeline-content">
						<text class="time-title">审核通过 & 开户</text>
						<text class="time-desc">开通后台登录账户</text>
					</view>
				</view>
			</view>
			
			<!-- 详情划分线 -->
			<view class="divider"></view>
			
			<!-- 注册申请详情信息 -->
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">企业名称</text>
					<text class="info-val">{{ merchantName || '好萌友' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">提交时间</text>
					<text class="info-val">{{ submitTime || '刚刚' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">当前状态</text>
					<text class="info-val status-text">正在审核</text>
				</view>
			</view>
			
			<!-- 按钮区 -->
			<button class="back-login-btn" @click="goToLogin">返回登录</button>
		</view>
		
		<!-- 底部页脚 -->
		<view class="footer-hint">
			<text>好萌友 APP 运营中心 提供技术支持</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import navBar from '@/components/nav-bar/index.vue'

const merchantName = ref('')
const submitTime = ref('')

onMounted(() => {
	merchantName.value = uni.getStorageSync('registered_merchant') || ''
	submitTime.value = uni.getStorageSync('registered_time') || ''
})

const goToLogin = () => {
	uni.reLaunch({
		url: '/pages/login/index'
	})
}
</script>

<style lang="scss" scoped>
.review-page {
	min-height: 100vh;
	background: #f5f6fa;
	display: flex;
	flex-direction: column;
}

:deep(.nav-bar) {
	position: absolute !important;
}

.hero-bg {
	background: linear-gradient(150deg, #ffd53f 0%, #ff9500 100%);
	height: 380rpx;
	position: relative;
	overflow: hidden;
}

.deco-circle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.c1 {
	width: 300rpx;
	height: 300rpx;
	top: -120rpx;
	right: -80rpx;
}

.c2 {
	width: 200rpx;
	height: 200rpx;
	top: 60rpx;
	left: -80rpx;
}

.c3 {
	width: 120rpx;
	height: 120rpx;
	bottom: 40rpx;
	right: 40rpx;
}

.status-card {
	background: #ffffff;
	border-radius: 40rpx;
	margin: -140rpx 40rpx 40rpx;
	padding: 64rpx 48rpx;
	box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.05);
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.status-icon-wrap {
	width: 160rpx;
	height: 160rpx;
	background: rgba(255, 149, 0, 0.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32rpx;
}

.spinner {
	animation: spin 3s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.status-title {
	font-size: 40rpx;
	font-weight: 800;
	color: #1a1a1a;
	margin-bottom: 12rpx;
}

.status-desc {
	font-size: 26rpx;
	color: #888;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 60rpx;
}

.timeline {
	width: 100%;
	padding: 0 10rpx;
	margin-bottom: 60rpx;
}

.timeline-item {
	display: flex;
	position: relative;
	padding-bottom: 48rpx;
	
	&:last-child {
		padding-bottom: 0;
		&::after {
			display: none;
		}
	}
	
	&::after {
		content: '';
		position: absolute;
		left: 22rpx;
		top: 40rpx;
		bottom: -10rpx;
		width: 4rpx;
		background: #eef2f6;
		z-index: 1;
	}
	
	&.active {
		&::after {
			background: #ff9500;
		}
		
		.timeline-dot {
			background: #ff9500;
			border-color: #ff9500;
		}
		
		.time-title {
			color: #1a1a1a;
			font-weight: 700;
		}
	}
	
	&.processing {
		&::after {
			background: repeating-linear-gradient(0deg, #eef2f6, #eef2f6 8rpx, #ff9500 8rpx, #ff9500 16rpx);
		}
		
		.timeline-dot {
			background: #fff;
			border-color: #ff9500;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.inner-dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #ff9500;
				animation: pulse 1.6s infinite;
			}
		}
	}
}

@keyframes pulse {
	0% { transform: scale(0.8); opacity: 0.5; }
	50% { transform: scale(1.2); opacity: 1; }
	100% { transform: scale(0.8); opacity: 0.5; }
}

.timeline-dot {
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	background: #f5f6fa;
	border: 4rpx solid #eef2f6;
	z-index: 2;
	margin-right: 28rpx;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timeline-content {
	flex: 1;
}

.time-title {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 6rpx;
}

.time-desc {
	display: block;
	font-size: 24rpx;
	color: #999;
}

.divider {
	width: 100%;
	height: 2rpx;
	background: #f2f3f7;
	margin-bottom: 40rpx;
}

.info-list {
	width: 100%;
	margin-bottom: 64rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
	font-size: 26rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.info-label {
	color: #999;
}

.info-val {
	color: #333;
	font-weight: 500;
}

.status-text {
	color: #ff9500;
	font-weight: bold;
}

.back-login-btn {
	width: 100%;
	height: 96rpx;
	line-height: 96rpx;
	font-size: 32rpx;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	border: none;
	border-radius: 48rpx;
	letter-spacing: 2rpx;
	box-shadow: 0 8rpx 20rpx rgba(255, 149, 0, 0.15);
	&::after { border: none; }
}

.footer-hint {
	text-align: center;
	font-size: 22rpx;
	color: #ccc;
	padding: 40rpx 0 60rpx;
	margin-top: auto;
}
</style>