boschchina-wechat-crm/pages/splash/splash.vue

<template>
	<view class="splash-container">
		<!-- 背景装饰 -->
		<view class="splash-bg-1"></view>
		<view class="splash-bg-2"></view>
		
		<!-- Logo 区域 -->
		<view class="logo-section">
			<view class="logo-wrapper">
				<view class="logo-glow"></view>
				<image class="logo-icon" src="/static/image/public/logo.png" mode="aspectFit"></image>
			</view>
			<text class="app-name">{{appName}}</text>
			<text class="app-slogan">您的客户关系管理助手</text>
		</view>

		<!-- 加载动画 -->
		<view class="loading-section">
			<text class="loading-text">
				正在加载
				<view class="loading-dots">
					<view class="dot dot1"></view>
					<view class="dot dot2"></view>
					<view class="dot dot3"></view>
				</view>
			</text>
		</view>

		<!-- 版本信息 -->
		<view class="version-info">
			<text class="version-text">{{version}}</text>
			<view class="version-text">
				浙江舒博特网络科技有限公司提供技术支持
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		isLogin,
		getToken,
		saveUserInfo,
		clearUserInfo
	} from '@/utils/userCache.js'
	import {
		getUserInfo as fetchUserInfo
	} from '@/api/login.js'
	import {
		getCurrentConfig
	} from '@/config/index.js'
	const loadingText = ref('正在加载...')
	let appName = ref('')
	let version = ref('')
	// 页面加载
	onMounted(async () => {
		const config = await getCurrentConfig()
		console.log(config,"configconfigconfigconfig");
		appName.value = config.appName
		version.value = config.appVersion
		initApp()
	})

	/**
	 * 初始化应用
	 */
	const initApp = async () => {
		try {
			// 模拟加载延迟（提升用户体验）
			await sleep(500)

			loadingText.value = '检查登录状态...'

			// 获取本地 token
			const token = getToken()
			
			// 如果没有 token，直接跳转登录页
			if (!token) {
				console.log('未登录，token 不存在')
				await sleep(800)
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return
			}
			
			// 调用 getUserInfo 接口验证 token
			const res = await fetchUserInfo({})
			
			if (res.code === 200) {
				// token 有效，更新用户信息
				const userInfo = res.data || res
				saveUserInfo(userInfo, token)
				console.log('登录态有效，用户信息已更新')
				// 延迟跳转，让动画更流畅
				await sleep(500)
				// 已登录，跳转首页
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} else {
				// token 失效，清除本地存储
				console.log('登录凭证失效，需要重新登录')
				clearUserInfo()
				await sleep(800)
				// 跳转登录页
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		} catch (error) {
			console.error('验证登录态失败:', error)
			// 接口调用失败，也视为 token 失效
			clearUserInfo()
			
			// 出错时跳转到登录页
			uni.reLaunch({
				url: '/pages/login/login'
			})
		}
	}

	/**
	 * 延时函数
	 * @param {number} ms - 毫秒数
	 */
	const sleep = (ms) => {
		return new Promise(resolve => setTimeout(resolve, ms))
	}
</script>

<style lang="scss" scoped>
	.splash-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #4A90E2 0%, #6FB3F2 50%, #87CEEB 100%);
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 40rpx;
		
		.splash-bg-1 {
			position: absolute;
			top: -20%;
			left: -10%;
			width: 60%;
			height: 60%;
			background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
			border-radius: 50%;
			animation: floatBg1 8s ease-in-out infinite;
		}
		
		.splash-bg-2 {
			position: absolute;
			bottom: -20%;
			right: -10%;
			width: 70%;
			height: 70%;
			background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
			border-radius: 50%;
			animation: floatBg2 10s ease-in-out infinite;
		}
	}

	// Logo 区域
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 120rpx;
		position: relative;
		z-index: 10;
		
		.logo-wrapper {
			position: relative;
			width: 240rpx;
			height: 240rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.logo-glow {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 280rpx;
				height: 280rpx;
				background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
				border-radius: 50%;
				animation: logoGlow 3s ease-in-out infinite;
			}
			
			.logo-icon {
				width: 200rpx;
				height: 200rpx;
				border-radius: 44rpx;
				background: rgba(255, 255, 255, 0.95);
				box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15),
							0 0 40rpx rgba(255, 255, 255, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
				animation: logoFloat 3s ease-in-out infinite;
				position: relative;
				z-index: 2;
			}
		}

		.app-name {
			font-size: 48rpx;
			font-weight: 600;
			color: #ffffff;
			margin-top: 48rpx;
			letter-spacing: 3rpx;
			text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		}

		.app-slogan {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.85);
			margin-top: 20rpx;
			letter-spacing: 1rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}

	// 加载动画
	.loading-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 10;

		.loading-text {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.95);
			letter-spacing: 2rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.15);
			padding: 20rpx 40rpx;
			border-radius: 40rpx;
			backdrop-filter: blur(10rpx);
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
			
			.loading-dots {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 8rpx;
				height: 20rpx;

				.dot {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #ffffff;
					margin: 0 4rpx;
					opacity: 0.4;
					box-shadow: 0 0 15rpx rgba(255, 255, 255, 0.5);
				}

				.dot1 {
					animation: loadingDot 1.4s ease-in-out infinite;
				}

				.dot2 {
					animation: loadingDot 1.4s ease-in-out 0.2s infinite;
				}

				.dot3 {
					animation: loadingDot 1.4s ease-in-out 0.4s infinite;
				}
			}
		}
	}

	// 版本信息
	.version-info {
		position: absolute;
		bottom: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 10;
		background: rgba(255, 255, 255, 0.1);
		padding: 20rpx 40rpx;
		border-radius: 32rpx;
		backdrop-filter: blur(10rpx);
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.2);

		.version-text {
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.7);
			text-align: center;
			line-height: 1.6;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}

	// 动画
	@keyframes logoFloat {
		0%, 100% {
			transform: translateY(0) scale(1);
		}
		50% {
			transform: translateY(-15rpx) scale(1.02);
		}
	}
	
	@keyframes logoGlow {
		0%, 100% {
			opacity: 0.5;
			transform: translate(-50%, -50%) scale(1);
		}
		50% {
			opacity: 0.8;
			transform: translate(-50%, -50%) scale(1.1);
		}
	}

	@keyframes loadingDot {
		0%, 80%, 100% {
			transform: scale(0.8);
			opacity: 0.4;
		}
		40% {
			transform: scale(1.2);
			opacity: 1;
		}
	}
	
	@keyframes floatBg1 {
		0%, 100% {
			transform: translate(0, 0) scale(1);
		}
		50% {
			transform: translate(30rpx, -30rpx) scale(1.05);
		}
	}
	
	@keyframes floatBg2 {
		0%, 100% {
			transform: translate(0, 0) scale(1);
		}
		50% {
			transform: translate(-30rpx, 30rpx) scale(1.08);
		}
	}
</style>