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

<template>
	<view class="splash-container">
		<!-- Logo 区域 -->
		<view class="logo-section">
			<view class="logo-icon">
				<!-- 蓝色圆角正方形 logo -->
			</view>
			<text class="app-name">布尔销销乐</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">v1.0.0</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { isLogin } from '@/utils/userCache.js'

const loadingText = ref('正在加载...')

// 页面加载
onMounted(() => {
	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;
		background: linear-gradient(135deg, #ffffff 0%, #e6f7ff 100%);
		border-radius: 40rpx;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
		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;
	
	.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>