316 lines
7.3 KiB
Vue
316 lines
7.3 KiB
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 class="menu-section">
|
||
<view class="menu-list">
|
||
<view class="menu-item">
|
||
<text class="menu-text">账号与安全</text>
|
||
<view class="menu-arrow">›</view>
|
||
</view>
|
||
<view class="menu-item">
|
||
<text class="menu-text">会员管理</text>
|
||
<view class="menu-arrow">›</view>
|
||
</view>
|
||
<view class="menu-item">
|
||
<text class="menu-text">个人收藏</text>
|
||
<view class="menu-arrow">›</view>
|
||
</view>
|
||
<view class="menu-item">
|
||
<text class="menu-text">设置</text>
|
||
<view class="menu-arrow">›</view>
|
||
</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: 1500rpx; /* 增加整体高度确保内容不被遮挡 */
|
||
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.9);
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 新增菜单区域样式 */
|
||
.menu-section {
|
||
margin-top: 60rpx;
|
||
width: 100%;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
|
||
.menu-list {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
backdrop-filter: blur(10rpx);
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 40rpx;
|
||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.menu-text {
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.menu-arrow {
|
||
font-size: 40rpx;
|
||
color: #999999;
|
||
font-weight: 300;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@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: 800rpx; /* 增加高度以容纳菜单 */
|
||
}
|
||
}
|
||
</style> |