496 lines
11 KiB
Vue
496 lines
11 KiB
Vue
<template>
|
||
<view class="my">
|
||
<!-- 用户信息区域 -->
|
||
<view class="user-info">
|
||
<view class="background">
|
||
|
||
</view>
|
||
<view class="info-content">
|
||
<view class="top-user-name" :style="{'height': topHeight, 'line-height': topHeight}">
|
||
{{userInfo.nickName}}
|
||
</view>
|
||
<view class="avatars">
|
||
<image class="avatar-img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://pic.rmb.bdstatic.com/bjh/down/1742bc3845cbbcf0c78c01eb59bb1c1a.jpeg'" @click="updateAvatar"></image>
|
||
</view>
|
||
<view class="hello-text">
|
||
<p>你好，{{userInfo.nickName}}</p>
|
||
<p>欢迎使用计分小程序</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数据统计区域 -->
|
||
<view class="data-section">
|
||
<view class="data-item" @click="navigateToHistory">
|
||
<text class="data-label">总对局数</text>
|
||
<text class="data-number">{{totalGames || 0}}</text>
|
||
</view>
|
||
<view class="data-divider"></view>
|
||
<view class="data-item" @click="navigateToHistory">
|
||
<text class="data-label">胜利局数</text>
|
||
<text class="data-number">{{totalWins || 0}}</text>
|
||
</view>
|
||
<view class="data-divider"></view>
|
||
<view class="data-item" @click="navigateToHistory">
|
||
<text class="data-label">胜率</text>
|
||
<text class="data-number">{{winRate || '0%'}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能菜单区域 -->
|
||
<view class="menu-section">
|
||
<!-- 第一组菜单 -->
|
||
<view class="menu-group">
|
||
|
||
<view class="menu-item" @click="navigateToFavorites">
|
||
<view class="menu-left">
|
||
<image src="/static/favorites.png" alt="收藏的对局" class="menu-icon" mode="aspectFit"></image>
|
||
<text class="menu-text">收藏的对局</text>
|
||
</view>
|
||
<uni-icons type="right" size="24" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 第二组菜单 -->
|
||
<view class="menu-group">
|
||
<view class="menu-item" @click="openSettings">
|
||
<view class="menu-left">
|
||
<image src="/static/setting.png" alt="设置" class="menu-icon" mode="aspectFit"></image>
|
||
<text class="menu-text">设置</text>
|
||
</view>
|
||
<uni-icons type="right" size="24" color="#999"></uni-icons>
|
||
</view>
|
||
|
||
<view class="menu-item" @click="openFeedback">
|
||
<view class="menu-left">
|
||
<image src="/static/feedback.png" alt="帮助与反馈" class="menu-icon" mode="aspectFit"></image>
|
||
<text class="menu-text">帮助与反馈</text>
|
||
</view>
|
||
<uni-icons type="right" size="24" color="#999"></uni-icons>
|
||
</view>
|
||
|
||
<view class="menu-item" @click="aboutUs">
|
||
<view class="menu-left">
|
||
<image src="/static/about.png" alt="关于我们" class="menu-icon" mode="aspectFit"></image>
|
||
<text class="menu-text">关于我们</text>
|
||
</view>
|
||
<uni-icons type="right" size="24" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 版本信息 -->
|
||
<view class="version-info">
|
||
<text>版本 {{version || '1.0.0'}}</text>
|
||
</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 totalGames = ref(0);
|
||
const totalWins = ref(0);
|
||
const winRate = ref('0%');
|
||
const unreadCount = ref(0);
|
||
const version = ref('1.0.0');
|
||
|
||
// 获取用户信息
|
||
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);
|
||
// 获取用户统计数据
|
||
fetchUserStats();
|
||
});
|
||
});
|
||
} else {
|
||
// 已登录，获取用户统计数据
|
||
fetchUserStats();
|
||
}
|
||
}
|
||
|
||
// 获取用户统计数据
|
||
const fetchUserStats = () => {
|
||
// 实际项目中应该调用API获取真实数据
|
||
// 这里使用模拟数据
|
||
totalGames.value = 42;
|
||
totalWins.value = 28;
|
||
winRate.value = '66.7%';
|
||
unreadCount.value = 2;
|
||
|
||
// 实际API调用示例：
|
||
// getUserStats(userInfo.value.userId).then(res => {
|
||
// totalGames.value = res.data.totalGames;
|
||
// totalWins.value = res.data.totalWins;
|
||
// winRate.value = res.data.winRate;
|
||
// unreadCount.value = res.data.unreadCount;
|
||
// });
|
||
}
|
||
|
||
// 更新头像
|
||
const updateAvatar = () => {
|
||
/* #ifdef MP-WEIXIN */
|
||
wx.chooseMedia({
|
||
count: 1,
|
||
mediaType: ['image'],
|
||
sourceType: ['album', 'camera'],
|
||
sizeType: ['compressed'],
|
||
success: (res) => {
|
||
if (res.tempFiles && res.tempFiles.length > 0) {
|
||
const tempFilePath = res.tempFiles[0].tempFilePath;
|
||
|
||
// 预览选择的头像
|
||
wx.previewImage({
|
||
urls: [tempFilePath],
|
||
success: () => {
|
||
// 更新头像
|
||
userInfo.value.avatarUrl = tempFilePath;
|
||
// 在实际项目中应该上传头像到服务器
|
||
proxy.$StaticValue.setUserInfo(userInfo.value);
|
||
|
||
uni.showToast({
|
||
title: '头像更新成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('选择头像失败', err);
|
||
if (err.errMsg !== 'chooseMedia:fail cancel') {
|
||
uni.showToast({
|
||
title: '选择头像失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
/* #endif */
|
||
|
||
/* #ifndef MP-WEIXIN */
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
||
userInfo.value.avatarUrl = res.tempFilePaths[0];
|
||
proxy.$StaticValue.setUserInfo(userInfo.value);
|
||
uni.showToast({
|
||
title: '头像更新成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
/* #endif */
|
||
}
|
||
|
||
// 导航到历史对局页面
|
||
const navigateToHistory = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/history-game/history-game'
|
||
});
|
||
}
|
||
|
||
// 导航到收藏对局页面
|
||
const navigateToFavorites = () => {
|
||
// 如果收藏页面不存在，可以创建一个或跳转到历史页面并筛选
|
||
uni.navigateTo({
|
||
url: '/pages/my/favorites'
|
||
});
|
||
}
|
||
|
||
// 打开设置页面
|
||
const openSettings = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/my/setting'
|
||
});
|
||
}
|
||
|
||
// 打开帮助与反馈
|
||
const openFeedback = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/my/feedback'
|
||
});
|
||
}
|
||
|
||
// 关于我们
|
||
const aboutUs = () => {
|
||
uni.showModal({
|
||
title: '关于计分小程序',
|
||
content: '计分小程序 v' + version.value + '\n\n一款便捷的计分工具，支持多种游戏模式。\n\n© 2023 计分小程序团队',
|
||
showCancel: false,
|
||
confirmText: '确定'
|
||
});
|
||
}
|
||
|
||
// 退出登录
|
||
const logout = () => {
|
||
uni.showModal({
|
||
title: '确认退出',
|
||
content: '确定要退出登录吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 清除本地存储的用户信息
|
||
proxy.$StaticValue.clearUserInfo();
|
||
// 重置用户信息
|
||
userInfo.value = {};
|
||
totalGames.value = 0;
|
||
totalWins.value = 0;
|
||
winRate.value = '0%';
|
||
|
||
// 重新获取用户信息（会自动重新登录）
|
||
getUserInfo();
|
||
|
||
uni.showToast({
|
||
title: '已退出登录',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
onMounted(() => {
|
||
getUserInfo();
|
||
// 获取版本信息
|
||
/* #ifdef MP-WEIXIN */
|
||
const appInfo = wx.getAccountInfoSync();
|
||
version.value = appInfo.miniProgram.version || '1.0.0';
|
||
/* #endif */
|
||
});
|
||
|
||
onShow(() => {
|
||
// 每次显示页面时刷新数据
|
||
fetchUserStats();
|
||
});
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.my {
|
||
width: 750rpx;
|
||
margin: 0;
|
||
padding: 0;
|
||
min-height: 100vh;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
/* 用户信息区域样式 */
|
||
.user-info {
|
||
--user-height: 500rpx;
|
||
width: 750rpx;
|
||
height: var(--user-height);
|
||
position: relative;
|
||
.background {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: linear-gradient(rgb(87, 255, 87), rgb(144, 251, 144));
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 0;
|
||
}
|
||
.info-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-top: calc(var(--top-margin) + 20rpx);
|
||
.top-user-name {
|
||
width: 100%;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
ttext-align: center;
|
||
}
|
||
.avatars {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20rpx;
|
||
.avatar-img {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 75rpx;
|
||
border: 4rpx solid #ffffff;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
// 添加点击效果
|
||
&:active {
|
||
opacity: 0.8;
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
}
|
||
.hello-text {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
p {
|
||
margin: 5rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 数据统计区域样式 */
|
||
.data-section {
|
||
width: 100%;
|
||
height: 160rpx;
|
||
background-color: #ffffff;
|
||
margin-top: -30rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding: 0 40rpx;
|
||
margin-bottom: 30rpx;
|
||
.data-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
.data-number {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.data-label {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
// 添加点击效果
|
||
&:active {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
.data-divider {
|
||
width: 1rpx;
|
||
height: 80rpx;
|
||
background-color: #eee;
|
||
}
|
||
}
|
||
|
||
/* 功能菜单区域样式 */
|
||
.menu-section {
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
.menu-group {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 30rpx;
|
||
overflow: hidden;
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
height: 100rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
// 最后一个菜单项不需要底边框
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.menu-left {
|
||
display: flex;
|
||
align-items: center;
|
||
.menu-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
vertical-align: middle;
|
||
}
|
||
.menu-text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.menu-right {
|
||
display: flex;
|
||
align-items: center;
|
||
.menu-badge {
|
||
background-color: #FF3B30;
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 10rpx;
|
||
min-width: 20rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
// 添加点击效果
|
||
&:active {
|
||
background-color: #f8f8f8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 退出登录按钮样式 */
|
||
.logout-section {
|
||
width: 100%;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 40rpx;
|
||
.logout-btn {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: 45rpx;
|
||
font-size: 34rpx;
|
||
background-color: #ffffff;
|
||
color: #FF3B30;
|
||
border: 1rpx solid #FF3B30;
|
||
}
|
||
}
|
||
|
||
/* 版本信息样式 */
|
||
.version-info {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding-bottom: 60rpx;
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
/* 安全区域适配 */
|
||
/* #ifdef MP-WEIXIN */
|
||
.my {
|
||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
||
}
|
||
/* #endif */
|
||
</style>
|