molong/account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui更新

Browse Source
This commit is contained in:
molong
2026-01-18 19:00:13 +08:00
parent 9259bda54b
commit 7e05f5e76f
34 changed files with 4200 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

563
resources/mobile/pages/ucenter/index/index.vue
View File

@@ -9,43 +9,135 @@
<view class="page-content">
<!-- 用户信息头部 -->
<view class="user-header">
<view class="header-bg"></view>
<view class="user-avatar">
<uni-icons type="person-filled" size="60" color="#fff"></uni-icons>
<uni-icons type="person-filled" size="70" color="#fff"></uni-icons>
<view class="vip-badge" v-if="isLogin">
<text>VIP</text>
</view>
</view>
<view class="user-info">
<text class="user-name">{{ userInfo.nickname || '未登录' }}</text>
<text class="user-desc">{{ userInfo.username || '点击登录' }}</text>
<text class="user-name">{{ userInfo.nickname || userInfo.username || '未登录' }}</text>
<text class="user-desc" v-if="isLogin">{{ userInfo.email || '暂无邮箱' }}</text>
<text class="user-desc" v-else>点击登录体验更多功能</text>
</view>
<view class="edit-profile" @tap="handleEditProfile" v-if="isLogin">
<uni-icons type="compose" size="18" color="rgba(255,255,255,0.8)"></uni-icons>
</view>
</view>
<!-- 数据统计卡片 -->
<view class="stats-section" v-if="isLogin">
<view class="stat-item">
<text class="stat-value">{{ stats.billCount || 0 }}</text>
<text class="stat-label">账单数</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-value">{{ stats.days || 0 }}</text>
<text class="stat-label">记账天数</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-value">{{ stats.familyMembers || 0 }}</text>
<text class="stat-label">家庭成员</text>
</view>
</view>
<!-- 快捷功能 -->
<view class="quick-section">
<view class="section-title">快捷功能</view>
<view class="quick-grid">
<view class="quick-item" @tap="navigateTo('/pages/account/bill/add')">
<view class="quick-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="plus" size="24" color="#fff"></uni-icons>
</view>
<text class="quick-text">记一笔</text>
</view>
<view class="quick-item" @tap="navigateTo('/pages/family/index')">
<view class="quick-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<text class="emoji-icon">👥</text>
</view>
<text class="quick-text">家庭管理</text>
</view>
<view class="quick-item" @tap="navigateTo('/pages/account/statistics/index')">
<view class="quick-icon" style="background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);">
<uni-icons type="chart" size="24" color="#fff"></uni-icons>
</view>
<text class="quick-text">统计分析</text>
</view>
<view class="quick-item" @tap="handleExport">
<view class="quick-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="download" size="24" color="#fff"></uni-icons>
</view>
<text class="quick-text">数据导出</text>
</view>
</view>
</view>
<!-- 功能菜单 -->
<view class="menu-section">
<view class="menu-item" @tap="navigateTo('/pages/ucenter/profile')">
<view class="menu-left">
<uni-icons type="gear" size="20" color="#667eea"></uni-icons>
<text class="menu-text">个人设置</text>
<view class="section-title">设置</view>
<view class="menu-list">
<view class="menu-item" @tap="navigateTo('/pages/ucenter/profile')">
<view class="menu-left">
<view class="menu-icon-wrapper">
<uni-icons type="gear" size="20" color="#667eea"></uni-icons>
</view>
<view class="menu-content">
<text class="menu-text">个人设置</text>
<text class="menu-desc">修改个人信息</text>
</view>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
<view class="menu-item" @tap="navigateTo('/pages/ucenter/help')">
<view class="menu-left">
<uni-icons type="help" size="20" color="#667eea"></uni-icons>
<text class="menu-text">帮助中心</text>
<view class="menu-item" @tap="navigateTo('/pages/ucenter/help')">
<view class="menu-left">
<view class="menu-icon-wrapper">
<uni-icons type="help" size="20" color="#667eea"></uni-icons>
</view>
<view class="menu-content">
<text class="menu-text">帮助中心</text>
<text class="menu-desc">常见问题解答</text>
</view>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
<view class="menu-item" @tap="navigateTo('/pages/ucenter/about')">
<view class="menu-left">
<uni-icons type="info" size="20" color="#667eea"></uni-icons>
<text class="menu-text">关于我们</text>
<view class="menu-item" @tap="navigateTo('/pages/ucenter/about')">
<view class="menu-left">
<view class="menu-icon-wrapper">
<uni-icons type="info" size="20" color="#667eea"></uni-icons>
</view>
<view class="menu-content">
<text class="menu-text">关于我们</text>
<text class="menu-desc">版本信息</text>
</view>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
<view class="menu-item" @tap="handleClearCache">
<view class="menu-left">
<view class="menu-icon-wrapper">
<uni-icons type="trash" size="20" color="#667eea"></uni-icons>
</view>
<view class="menu-content">
<text class="menu-text">清除缓存</text>
<text class="menu-desc">释放存储空间</text>
</view>
</view>
<text class="cache-size">{{ cacheSize }}</text>
</view>
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
</view>
</view>
<!-- 退出登录按钮 -->
<view class="logout-section" v-if="isLogin">
<button class="logout-btn" @tap="handleLogout">退出登录</button>
<!-- 登录/退出按钮 -->
<view class="auth-section">
<button class="auth-btn login-btn" @tap="handleLogin" v-if="!isLogin">
立即登录
</button>
<button class="auth-btn logout-btn" @tap="handleLogout" v-else>
退出登录
</button>
</view>
</view>
</un-pages>
@@ -58,11 +150,18 @@ export default {
data() {
return {
userInfo: {},
isLogin: false
isLogin: false,
stats: {
billCount: 0,
days: 0,
familyMembers: 0
},
cacheSize: '0 MB'
}
},
onLoad() {
this.checkLoginStatus()
this.calculateCacheSize()
},
onShow() {
this.checkLoginStatus()
@@ -72,10 +171,58 @@ export default {
checkLoginStatus() {
this.isLogin = isLogin()
this.userInfo = uni.getStorageSync('userInfo') || {}
if (this.isLogin) {
this.loadUserStats()
}
},
// 加载用户统计数据
loadUserStats() {
// 这里应该调用API获取实际数据
// 暂时使用模拟数据
this.stats = {
billCount: 128,
days: 45,
familyMembers: 3
}
},
// 计算缓存大小
calculateCacheSize() {
try {
const info = uni.getStorageInfoSync()
const size = (info.currentSize / 1024).toFixed(2)
this.cacheSize = `${size} MB`
} catch (e) {
this.cacheSize = '0 MB'
}
},
// 页面跳转
navigateTo(url) {
if (!this.isLogin && url !== '/pages/ucenter/login/index') {
uni.navigateTo({
url: '/pages/ucenter/login/index'
})
return
}
// 功能开发中提示
uni.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
},
// 编辑个人资料
handleEditProfile() {
this.navigateTo('/pages/ucenter/profile')
},
// 数据导出
handleExport() {
if (!this.isLogin) {
uni.navigateTo({
url: '/pages/ucenter/login/index'
@@ -90,6 +237,38 @@ export default {
})
},
// 清除缓存
handleClearCache() {
uni.showModal({
title: '提示',
content: '确定要清除缓存吗？',
success: (res) => {
if (res.confirm) {
try {
uni.clearStorageSync()
this.calculateCacheSize()
uni.showToast({
title: '缓存已清除',
icon: 'success'
})
} catch (e) {
uni.showToast({
title: '清除失败',
icon: 'none'
})
}
}
}
})
},
// 登录
handleLogin() {
uni.navigateTo({
url: '/pages/ucenter/login/index'
})
},
// 退出登录
handleLogout() {
uni.showModal({
@@ -98,6 +277,7 @@ export default {
success: (res) => {
if (res.confirm) {
logout()
this.checkLoginStatus()
}
}
})
@@ -113,92 +293,365 @@ export default {
<style lang="scss" scoped>
.page-content {
padding: 40rpx 30rpx;
padding: 30rpx;
padding-bottom: 150rpx;
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
min-height: 100vh;
position: relative;
&::before {
content: '';
position: absolute;
top: -50rpx;
right: -80rpx;
width: 280rpx;
height: 280rpx;
background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
}
> view {
position: relative;
z-index: 1;
}
}
.user-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20rpx;
border-radius: 24rpx;
padding: 60rpx 40rpx;
margin: 40rpx 0;
margin: 20rpx 0 30rpx;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
animation: fadeInDown 0.6s ease-out;
.header-bg {
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}
.user-avatar {
width: 120rpx;
height: 120rpx;
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.25);
border-radius: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30rpx;
margin-right: 28rpx;
position: relative;
backdrop-filter: blur(10rpx);
border: 3rpx solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
.vip-badge {
position: absolute;
bottom: -6rpx;
right: -6rpx;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
border-radius: 12rpx;
padding: 4rpx 12rpx;
border: 2rpx solid #fff;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
text {
font-size: 18rpx;
color: #fff;
font-weight: bold;
}
}
}
.user-info {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
.user-name {
font-size: 36rpx;
font-weight: bold;
color: #fff;
margin-bottom: 16rpx;
margin-bottom: 12rpx;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.user-desc {
font-size: 28rpx;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
}
.edit-profile {
padding: 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background: rgba(255, 255, 255, 0.3);
}
}
}
.menu-section {
.stats-section {
background: #fff;
border-radius: 20rpx;
overflow: hidden;
border-radius: 24rpx;
padding: 40rpx 30rpx;
margin-bottom: 30rpx;
display: flex;
align-items: center;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
animation: fadeInUp 0.6s ease-out 0.1s both;
.menu-item {
.stat-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30rpx 40rpx;
border-bottom: 1rpx solid #f5f5f5;
transition: transform 0.3s ease;
&:last-child {
border-bottom: none;
&:active {
transform: scale(0.95);
}
.menu-left {
display: flex;
align-items: center;
.stat-value {
font-size: 48rpx;
font-weight: bold;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8rpx;
}
.menu-text {
font-size: 32rpx;
.stat-label {
font-size: 26rpx;
color: #999;
font-weight: 500;
}
}
.stat-divider {
width: 2rpx;
height: 60rpx;
background: #f0f0f0;
margin: 0 20rpx;
}
}
.quick-section {
margin-bottom: 30rpx;
animation: fadeInUp 0.6s ease-out 0.2s both;
.section-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
padding-left: 8rpx;
}
.quick-grid {
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
.quick-item {
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease;
&:active {
transform: translateY(-4rpx);
}
.quick-icon {
width: 96rpx;
height: 96rpx;
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
.emoji-icon {
font-size: 44rpx;
}
}
.quick-text {
font-size: 24rpx;
color: #333;
margin-left: 20rpx;
font-weight: 500;
}
}
}
}
.logout-section {
margin-top: 60rpx;
.menu-section {
margin-bottom: 30rpx;
animation: fadeInUp 0.6s ease-out 0.3s both;
.logout-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
border-radius: 45rpx;
.section-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
padding-left: 8rpx;
}
.menu-list {
background: #fff;
color: #f56c6c;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
transition: all 0.3s ease;
&:last-child {
border-bottom: none;
}
&:active {
background: #f8f8f8;
}
.menu-left {
display: flex;
align-items: center;
flex: 1;
.menu-icon-wrapper {
width: 64rpx;
height: 64rpx;
background: rgba(102, 126, 234, 0.1);
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.menu-content {
display: flex;
flex-direction: column;
.menu-text {
font-size: 30rpx;
color: #333;
font-weight: 500;
margin-bottom: 6rpx;
}
.menu-desc {
font-size: 24rpx;
color: #999;
}
}
}
.cache-size {
font-size: 24rpx;
color: #999;
font-weight: 500;
}
}
}
}
.auth-section {
margin-top: 40rpx;
padding: 0 20rpx;
animation: fadeInUp 0.6s ease-out 0.4s both;
.auth-btn {
width: 100%;
height: 96rpx;
border-radius: 48rpx;
font-size: 32rpx;
border: 2rpx solid #f56c6c;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border: none;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
&::after {
border: none;
}
&:active {
transform: scale(0.98);
}
}
.login-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
}
.logout-btn {
background: #fff;
color: #f56c6c;
border: 2rpx solid #f56c6c;
box-shadow: 0 6rpx 20rpx rgba(245, 108, 108, 0.15);
&:active {
background: #fef0f0;
}
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>