2025-11-11 18:39:32 +08:00
|
|
|
|
<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}">
|
2025-11-12 18:25:07 +08:00
|
|
|
|
{{userInfo?.nickName}}
|
2025-11-11 18:39:32 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
|
|
|
|
<view class="main-content">
|
|
|
|
|
|
<!-- 头像区域 -->
|
|
|
|
|
|
<view class="avatar-section">
|
|
|
|
|
|
<view class="avatar-wrapper">
|
2025-11-12 18:25:07 +08:00
|
|
|
|
<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>
|
2025-11-11 18:39:32 +08:00
|
|
|
|
<view class="avatar-glow"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 欢迎文字区域 - 确保这个区域不被遮挡 -->
|
|
|
|
|
|
<view class="welcome-section">
|
|
|
|
|
|
<view class="welcome-card">
|
|
|
|
|
|
<view class="welcome-icon">🎯</view>
|
|
|
|
|
|
<view class="welcome-text">
|
2025-11-12 18:25:07 +08:00
|
|
|
|
<text class="greeting">你好，{{userInfo?.nickName}}</text>
|
2025-11-11 18:39:32 +08:00
|
|
|
|
<text class="welcome-message">欢迎使用计分小程序</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2025-11-12 18:25:07 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 新增菜单区域 -->
|
|
|
|
|
|
<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>
|
2025-11-11 18:39:32 +08:00
|
|
|
|
</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 {
|
2025-11-12 18:25:07 +08:00
|
|
|
|
--user-height: 1500rpx; /* 增加整体高度确保内容不被遮挡 */
|
2025-11-11 18:39:32 +08:00
|
|
|
|
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 {
|
2025-11-12 18:25:07 +08:00
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
2025-11-11 18:39:32 +08:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-11-12 18:25:07 +08:00
|
|
|
|
|
|
|
|
|
|
/* 新增菜单区域样式 */
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-11-11 18:39:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@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 {
|
2025-11-12 18:25:07 +08:00
|
|
|
|
--user-height: 800rpx; /* 增加高度以容纳菜单 */
|
2025-11-11 18:39:32 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
