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

<template>
	<view class="splash-container">
		<view class="splash-bg-1"></view>
		<view class="splash-bg-2"></view>
		<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>
	<!-- 隐藏的 Canvas 用于生成名片快照 -->
	<canvas id="posterCanvas" type="2d"
		style="position: fixed; left: -9999px; top: -9999px; width: 750px; height: 780px;"></canvas>
	
	<!-- 隐藏的 Canvas 用于生成二维码海报 -->
	<view class="hidden-canvas-box">
		<canvas id="qrPosterCanvas" type="2d" style="width: 600px; height: 700px;"></canvas>
	</view>
	

	</view>
</template>

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

	import {
		onLoad,
	} from "@dcloudio/uni-app";
	const userStore = useUserStore() || null
	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
	})
	onLoad((options) => {
		initApp(options?.userId)
	})

	/**
	 * 初始化应用
	 */
	const initApp = async (userId = null) => {
		try {
			loadingText.value = '检查登录状态...'
			const loginToggle = isLogin() || !!userId
			if (!loginToggle) {
				console.log('未登录，token 不存在')
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			if (loginToggle) {
				await userStore.queryCardInfo(userId)
				await userStore.queryCompanyInfo(userId)
				// #ifdef MP-WEIXIN
				await userStore.queryCardPoster()
				// #ifdef
				uni.reLaunch({
					url: !!userId ? '/pages/mine/userCard' : '/pages/index/index'
				})
				// await userStore.queryCardQrcode(userId)

			} else {
				clearUserInfo()
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		} catch (error) {
			console.error('验证登录态失败:', error)
			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%);
		// background-color: #fff;
		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);
		}
	}

	// 隐藏的 canvas 容器
	.hidden-canvas-box {
		position: fixed;
		left: -9999px;
		top: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
</style>