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

<template>
	<view class="splash-container">
		<view class="logo-section">
			<view class="logo-wrapper">
				<image class="logo-icon" src="/static/image/public/logo.png" mode="aspectFit"></image>
				<view class="shine"></view>
				<view class="spin-dot"></view>
			</view>
			<text class="app-name">{{appName}}</text>
		</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'
	let appName = ref('')
	// 页面加载

	onMounted(async () => {
		const config = await getCurrentConfig()
		appName.value = config.appName
	})
	onLoad((options) => {
		initApp(options?.userId)
	})

	/**
	 * 初始化应用
	 */
	const initApp = async (userId = null) => {
		try {
			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'
				})
			} 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-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 35vh;
	}

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

		.logo-wrapper {
			position: relative;
			width: 125rpx;
			height: 125rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #F1F1F1;
			&::after {
				content: '';
				position: absolute;
				top: -6rpx;
				left: -6rpx;
				right: -6rpx;
				bottom: -6rpx;
				border-radius: 50%;
				background: linear-gradient(135deg,
					rgba(255, 255, 255, 0.6) 0%,
					rgba(255, 255, 255, 0) 40%,
					rgba(255, 255, 255, 0) 60%,
					rgba(255, 255, 255, 0.2) 100%);
				pointer-events: none;
				z-index: 2;
			}

			// 亮光扫过动效
			.shine {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
				z-index: 3;
				pointer-events: none;

				&::before {
					content: '';
					position: absolute;
					top: -50%;
					left: -50%;
					width: 200%;
					height: 200%;
					background: linear-gradient(
						135deg,
						transparent 0%,
						transparent 35%,
						rgba(255, 255, 255, 0.5) 45%,
						transparent 55%,
						transparent 100%
					);
					animation: shineSweep 2s ease-in-out infinite;
				}
			}

			// 小圆点沿边框转圈
			.spin-dot {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				z-index: 4;
				pointer-events: none;
				animation: spinDotRotate 2s linear infinite;

				&::before {
					content: '';
					position: absolute;
					top: -8rpx;
					left: 50%;
					width: 12rpx;
					height: 12rpx;
					background: #4080FF;
					border-radius: 50%;
					transform: translateX(-50%);
				}
			}

			.logo-icon {
				border-radius: 50%;
				width: 88rpx;
				height: 88rpx;
				position: relative;
				z-index: 1;
			}
		}

		.app-name {
			font-size: 28rpx;
			color: #333333;
			margin-top: 28rpx;
		}
	}

	// 亮光扫过动效
	// 小圆点沿圆边旋转
	@keyframes spinDotRotate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes shineSweep {
		0% {
			transform: translateX(-100%) translateY(-100%) rotate(-20deg);
		}
		20% {
			transform: translateX(0%) translateY(0%) rotate(-20deg);
		}
		40% {
			transform: translateX(100%) translateY(100%) rotate(-20deg);
		}
		100% {
			transform: translateX(100%) translateY(100%) rotate(-20deg);
		}
	}

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