H5-frontend/pages/index/welcome.vue

<template>
	<view class="welcome">
		<fs-empty :text="errMsg" v-if="errMsg">
			<fs-button type="primary" @click="handleRefresh">刷新</fs-button>
		</fs-empty>
		<view class="wrap" v-else>
			<view class="circle"></view>
			<view class="circle"></view>
			<view class="circle"></view>
			<view class="shadow"></view>
			<view class="shadow"></view>
			<view class="shadow"></view>
			<text>加载中...</text>
		</view>
	</view>
	<PrivacyAgreement ref="privacyAgreementRef" @change="handleChange"></PrivacyAgreement>
</template>

<script setup>
import { convertUrlParams, convertObjParams } from '@/utils/share'
import { useUserStore } from '@/stores/user'
import PrivacyAgreement from '@/business/PrivacyAgreement'

const user = useUserStore()
const argument = ref({})
const errMsg = ref('')
const privacyAgreementRef = ref(null)
const isShowPopup = ref(true)
const handleChange = (val) => {
	isShowPopup.value = val
	if (val) {
		errMsg.value = '您还没有同意隐私协议哦，请点击刷新重新加载'
	} else {
		tautology()
	}
}
const tautology = async () => {
	errMsg.value = ''
	if (isShowPopup.value) return false
	// uni.switchTab({
	// 	url: `/pages/index/index`
	// })
	try {
		await user.login()
		let shareParamsObj = argument.value
		if (argument.value.sharePath) {
			const codeArr = (argument.value.sharePath || '').replace(/\\u0026/g, '&').split('&')
			codeArr[0] = 'sharePath=' + codeArr[0]
			shareParamsObj = Object.assign({}, argument.value, convertObjParams(codeArr.join('&')))
		}
		getApp().globalData.shareParams = shareParamsObj || {}
		console.log('shareParamsObj', shareParamsObj)
		const params = convertUrlParams(shareParamsObj)
		const sharePath = shareParamsObj.sharePath || ''
		if (sharePath) {
			const data = { url: `${sharePath}${params}` }
			uni.redirectTo(data)
		} else {
			uni.redirectTo({
				url: `/pages/index/index`
			})
		}
	} catch (err) {
		console.log('err', err)
		errMsg.value = err.errMsg || err.msg || '加载失败，请重试'
	}
}

const handleRefresh = () => {
	isShowPopup.value = true
	privacyAgreementRef.value.initGetPrivacySetting()
	tautology()
}

onLoad(async (option) => {
	argument.value = option || {}
	console.log('option', argument.value)
	uni.getSystemInfo({
		success: (info) => {
			user.setSystemInfo(info)
		},
		fail: (err) => {
			user.setSystemInfo({})
		}
	})
	tautology()
})

</script>

<style lang="scss" scoped>
.welcome {
	.wrap {
		width: 200px;
		height: 60px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.circle {
			width: 20px;
			height: 20px;
			position: absolute;
			border-radius: 50%;
			background-color: var(--primary);
			left: 15%;
			transform-origin: 50%;
			animation: circle 0.5s alternate infinite ease;
		}

		@keyframes circle {
			0% {
				top: 60px;
				height: 5px;
				border-radius: 50px 50px 25px 25px;
				transform: scaleX(1.7);
			}

			40% {
				height: 20px;
				border-radius: 50%;
				transform: scaleX(1);
			}

			100% {
				top: 0%;
			}
		}

		.circle:nth-child(2) {
			left: 45%;
			animation-delay: 0.2s;
		}

		.circle:nth-child(3) {
			left: auto;
			right: 15%;
			animation-delay: 0.3s;
		}

		.shadow {
			width: 20px;
			height: 4px;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 62px;
			transform-origin: 50%;
			z-index: -1;
			left: 15%;
			filter: blur(1px);
			animation: shadow 0.5s alternate infinite ease;
		}

		@keyframes shadow {
			0% {
				transform: scaleX(1.5);
			}

			40% {
				transform: scaleX(1);
				opacity: 0.7;
			}

			100% {
				transform: scaleX(0.2);
				opacity: 0.4;
			}
		}

		.shadow:nth-child(4) {
			left: 45%;
			animation-delay: 0.2s;
		}

		.shadow:nth-child(5) {
			left: auto;
			right: 15%;
			animation-delay: 0.3s;
		}

		text {
			position: absolute;
			top: 75px;
			font-family: 'Lato';
			font-size: 18px;
			letter-spacing: 12px;
			color: var(--primary);
			left: 15%;
		}
	}
}
</style>