zhywpt-sp/pages/loading/loading.vue

<template>
	<view class="loading-content">
		<u-loading mode="circle" color="#01243A" size="40"></u-loading>
		<view
			v-if="state.isGoHome >= 2"
			class="go-home"
			@click="goHome()">
			返回首页
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { getUrlParameters, navTo } from '@/utils/utils'
	
	const routeMap = [
		{type: '1', route: '/pages/order/channel'},
	]
	
	const state = reactive({
		isGoHome: 0
	})
	
	// 二维码地址参数
	interface urlParams {
	  inType?: string; // 跳转类型 1: 渠道订单
	}
	
	// 测试地址： https://qtzl.etcjz.cn/zhywpt-issuer/to_mini.html?inType=1&testCode=66
	onLoad((option) => {
		console.log(option)
		// 如果有q，证明是扫描二维码进入的页面
		if (option.q) {
			let codeUrl = decodeURIComponent(option.q)
			let params: urlParams = getUrlParameters(codeUrl)
			console.log(params)
			if (params && params.inType) {
				let info = routeMap.find(item => item.type == params.inType)
				if (info && info.route) {
					navTo(info.route)
					uni.redirectTo({
						url: info.route
					})
				} else {
					goHome()
				}
			} else {
				goHome()
			}
		} else {
			goHome()
		}
	})
	
	onShow(() => {
		state.isGoHome += 1
	})
	
	const goHome = () => {
		console.log(111)
		navTo('/pages/index/index')
	}
</script>

<style lang="scss" scoped>
	.loading-content{
		// height: 800rpx;
		// display: flex;
		// flex-direction: column;
		// justify-content: center;
		// align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}
	.go-home{
		margin-top: 42rpx;
		width: 240rpx;
		text-algin: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		background: radial-gradient(at 0% 0%, #01243A 0%, #004576 100%);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #fff!important;
		line-height: 88rpx;
	}
</style>