medical-mall/pages/user/boot.uvue

<template>
	<view class="page">
		<view class="splash">
			<view class="brand">
				<view class="brand-mark"></view>
				<view class="brand-text">
					<text class="brand-name">Mall</text>
					<text class="brand-slogan">正品保障 · 省心售后</text>
				</view>
			</view>

			<view class="status">
				<view class="spinner"></view>
				<text class="status-text">正在检查登录状态…</text>
				<text class="status-sub">通常数秒内自动进入首页或登录页</text>
			</view>

			<view class="actions">
				<navigator url="/pages/user/login" open-type="reLaunch" class="action primary">前往登录</navigator>
				<navigator url="/pages/user/register" open-type="navigate" class="action ghost">我要注册</navigator>
			</view>
		</view>
	</view>
</template>

<script lang="uts">
	import supa from '@/components/supadb/aksupainstance.uts'
	import { IS_TEST_MODE } from '@/ak/config.uts'

	export default {
		onLoad() {
			// 启动页：根据登录态重定向
			this.checkAndRedirect();
		},
		onShow() {
			// 启动页仅在首次进入时做一次跳转，避免影响 H5 手动输入 URL
		},
		methods: {
			checkAndRedirect() {
				console.log('boot: start redirect check')

				if (IS_TEST_MODE) {
					// 测试阶段：不做强制重定向，保留你手动输入的 URL / 目标页面
					return
				}

				try {
					const sessionInfo = supa.getSession()
					if (sessionInfo != null && sessionInfo.user != null) {
						uni.reLaunch({ url: '/pages/main/index' })
						return
					}
				} catch (e) {
					console.error('boot: error checking session', e)
				}

				uni.reLaunch({ url: '/pages/user/login' })
			}
		}
	};
</script>

<style>
	.page {
		/* min-height: 100vh; UVUE不支持vh */
    flex: 1;
		background-color: #f5f7fa; /* UVUE不支持渐变 */
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 48rpx 32rpx;
	}

	.splash {
		width: 100%;
		max-width: 640rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08); /* 可能也不支持box-shadow, 视版本而定 */
		padding: 48rpx 40rpx;
		display: flex;
    flex-direction: column; /* 添加 flex-direction: column 以兼容 gap polyfill */

		flex-direction: column;
		/* gap: 32rpx; UVUE 不支持 gap */
    justify-content: space-between;
	}

	.brand {
		display: flex;
    flex-direction: row;
		align-items: center;
		/* gap: 20rpx; */
	}

	.brand-mark {
		width: 80rpx;
		height: 80rpx;
		border-radius: 24rpx;
		background-color: #ff6b6b; /* UVUE不支持CSS线性渐变 */
    margin-right: 20rpx; /* 替代 gap */
	}

	.brand-text {
		display: flex;
		flex-direction: column;
		/* gap: 8rpx; */
	}
  /* 替代 gap: 8rpx */
  .brand-name {
    margin-bottom: 8rpx;
  }

	.brand-name {
		font-size: 36rpx;
		font-weight: 700;
		color: #111827;
	}

	.brand-slogan {
		font-size: 26rpx;
		color: #6b7280;
	}

	.status {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* gap: 12rpx; */
		text-align: center;
    margin-top: 32rpx; /* 替代父级 gap */
    margin-bottom: 32rpx;
	}
  /* 替代 gap: 12rpx */
  .status-text {
    margin-top: 12rpx;
  }

	.spinner {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx; /* 如果不支持 50%，可以用 44rpx */
		border-width: 8rpx;
    border-style: solid;
    border-color: #f3f4f6;
		border-top-color: #ff6b6b;
		/* animation: spin 1s linear infinite; UVUE CSS动画需要特定写法或 transform */
    /* transform: rotate(360deg); */
    /* transition-duration: 1000ms; */
 
    /* 简单的无限旋转在原生 CSS 中可能需要写关键帧但 App-UVUE 支持有限，
       这里暂时保留样式但不指望它自动动起来，或者应该用 loading 组件 */
	}

	.status-text {
		font-size: 30rpx;
		color: #111827;
		font-weight: 700; /* 600不支持 -> 700 */
	}

	.status-sub {
		font-size: 24rpx;
		color: #6b7280;
	}

	.actions {
		display: flex;
		flex-direction: column;
		/* gap: 16rpx; */
	}
  /* 替代 gap */
  .action {
    margin-bottom: 16rpx;
  }

	.action {
		width: 100%;
		text-align: center;
		padding: 24rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 700;
	}

	.action.primary {
		background: linear-gradient(135deg, #ff6b6b, #ff9f43);
		color: #ffffff;
	}

	.action.ghost {
		border: 2rpx solid #e5e7eb;
		color: #374151;
		background: #ffffff;
	}

/*
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
*/
</style>