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

<template>
	<view class="splash-container">
		<!-- Logo 区域 -->
		<view class="logo-section">
			<image class="logo-icon" src="/static/image/public/logo.png" mode="aspectFill"></image>
			<text class="app-name">{{appName}}</text>
			<text class="app-slogan">您的客户关系管理助手</text>
		</view>

		<!-- 加载动画 -->
		<view class="loading-section">
			<view class="loading-dots">
				<view class="dot dot1"></view>
				<view class="dot dot2"></view>
				<view class="dot dot3"></view>
			</view>
			<text class="loading-text">{{ loadingText }}</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
	} from '@/utils/userCache.js'
	import {
		getCurrentConfig
	} from '@/config/index.js'
	const loadingText = ref('正在加载...')
	let appName = ref('')
	let version = ref('')
	// 页面加载
	onMounted(async () => {
		const config = await getCurrentConfig()
		appName.value = config.appName
		version.value = config.appVersion
		initApp()
	})

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

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

			// 检查登录状态
			// const loggedIn = isLogin() 

			// 再延迟一点，让动画更流畅
			// await sleep(800)

			if (true) {
				// 已登录，跳转首页
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} else {
				// 未登录，跳转登录页
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		} catch (error) {
			console.error('初始化失败:', error)

			// 出错时跳转到登录页
			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, #1890ff 0%, #096dd9 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 40rpx;
	}

	// Logo 区域
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 120rpx;

		.logo-icon {
			width: 200rpx;
			height: 200rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			animation: logoFloat 2s ease-in-out infinite;
		}

		.app-name {
			font-size: 48rpx;
			font-weight: 600;
			color: #ffffff;
			margin-top: 40rpx;
			letter-spacing: 2rpx;
		}

		.app-slogan {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: 16rpx;
		}
	}

	// 加载动画
	.loading-section {
		display: flex;
		flex-direction: column;
		align-items: center;

		.loading-dots {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 24rpx;

			.dot {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #ffffff;
				margin: 0 8rpx;
				opacity: 0.3;
			}

			.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;
			}
		}

		.loading-text {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.9);
		}
	}

	// 版本信息
	.version-info {
		position: absolute;
		bottom: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.version-text {
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	// 动画
	@keyframes logoFloat {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-20rpx);
		}
	}

	@keyframes loadingDot {

		0%,
		80%,
		100% {
			transform: scale(0.6);
			opacity: 0.3;
		}

		40% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>