hx123666/scoring/pages/my/my.vue

<template>
	<view class="my">
		<view class="user-info">
			<!-- 背景区域 -->
			<view class="background">
				<view class="bg-decoration bg-circle-1"></view>
				<view class="bg-decoration bg-circle-2"></view>
			</view>
			
			<view class="info-content">
				<!-- 顶部用户名区域 -->
				<view class="top-user-name" :style="{'height': topHeight, 'line-height': topHeight}">
					{{userInfo.nickName}}
				</view>
				
				<!-- 主要内容区域 -->
				<view class="main-content">
					<!-- 头像区域 -->
					<view class="avatar-section">
						<view class="avatar-wrapper">
							<image class="avatar-img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3285889616,2023536093&fm=253&gp=0.jpg'"></image>
							<view class="avatar-glow"></view>
						</view>
					</view>
					
					<!-- 欢迎文字区域 - 确保这个区域不被遮挡 -->
					<view class="welcome-section">
						<view class="welcome-card">
							<view class="welcome-icon">🎯</view>
							<view class="welcome-text">
								<text class="greeting">你好，{{userInfo.nickName}}</text>
								<text class="welcome-message">欢迎使用计分小程序</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { getOpenId } from '@/utils/wxutils.js'
import { register, login } from '@/api/user.js'

const proxy = getCurrentInstance().proxy;

// 小程序胶囊高度
const topHeight = ref(proxy.$StaticValue.getTopHeight()); 

// 用户信息相关
const userInfo = ref({});
const getUserInfo = async () => {
	// 从本地获取用户信息
	userInfo.value = proxy.$StaticValue.getUserInfo();
	if(!userInfo.value?.userId) {
		// 如果没有登录, 获取到当前用户的openid
		const openIdRes = await getOpenId();
		const openId = openIdRes.openid;
		userInfo.value = {
			openId: openId,
			nickName: '用户'+openId.substring(0, 6)
		};
		register(userInfo.value).then(res => {
			// 注册成功就执行登录
			login(userInfo.value).then(loginRes => {
				userInfo.value = loginRes.data;
				// 存储用户信息到本地
				proxy.$StaticValue.setUserInfo(userInfo.value);
			});
		});
	}
}
onMounted(() => {
	getUserInfo();
});

</script>

<style lang="less" scoped>
.my {
	width: 750rpx;
	margin: 0;
	padding: 0;
}

.user-info {
	--user-height: 1000rpx; /* 增加整体高度确保内容不被遮挡 */
	width: 750rpx;
	height: var(--user-height);
	background-color: #f5f5f5;
	position: relative;
	overflow: hidden;
	
	.background {
		width: 750rpx;
		height: var(--user-height);
		background: linear-gradient(135deg, 
			rgba(74, 144, 226, 0.95) 0%, 
			rgba(103, 198, 243, 0.9) 50%, 
			rgba(135, 206, 250, 0.85) 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		
		.bg-decoration {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.1);
		}
		
		.bg-circle-1 {
			width: 300rpx;
			height: 300rpx;
			top: -150rpx;
			right: -100rpx;
		}
		
		.bg-circle-2 {
			width: 200rpx;
			height: 200rpx;
			bottom: -80rpx;
			left: -50rpx;
		}
	}
	
	.info-content {
		width: 750rpx;
		height: var(--user-height);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		
		.top-user-name {
			width: 750rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
			padding: 0 40rpx;
			box-sizing: border-box;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		
		.main-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start; /* 确保内容从顶部开始排列 */
			height: calc(100% - v-bind('topHeight'));
			padding-top: 40rpx; /* 增加顶部内边距 */
			
			.avatar-section {
				margin-top: 20rpx; /* 减少头像区域的上边距 */
				
				.avatar-wrapper {
					position: relative;
					
					.avatar-img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						border: 6rpx solid rgba(255, 255, 255, 0.8);
						box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
						position: relative;
						z-index: 2;
					}
					
					.avatar-glow {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 180rpx;
						height: 180rpx;
						border-radius: 50%;
						background: linear-gradient(135deg, 
							rgba(255, 255, 255, 0.4) 0%, 
							rgba(255, 255, 255, 0.1) 100%);
						z-index: 1;
						animation: glow 3s ease-in-out infinite alternate;
					}
				}
			}
			
			.welcome-section {
				margin-top: 40rpx; /* 调整欢迎文字区域的上边距 */
				width: 100%;
				padding: 0 40rpx;
				box-sizing: border-box;
				
				.welcome-card {
					background: rgba(255, 255, 255, 0.95);
					border-radius: 24rpx;
					padding: 40rpx 32rpx;
					box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.1);
					position: relative;
					overflow: hidden;
					backdrop-filter: blur(10rpx);
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					
					.welcome-icon {
						font-size: 48rpx;
						margin-bottom: 20rpx;
					}
					
					.welcome-text {
						display: flex;
						flex-direction: column;
						gap: 12rpx;
						
						.greeting {
							font-size: 36rpx;
							font-weight: 600;
							color: #000000;
							line-height: 1.4;
						}
						
						.welcome-message {
							font-size: 40rpx;
							color: #55aa7f;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}
}

@keyframes glow {
	0% {
		opacity: 0.6;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1.05);
	}
}

/* 响应式调整 */
@media (max-width: 750rpx) {
	.user-info {
		--user-height: 560rpx;
	}
}
</style>