UI优化:我的页面和设置页面

1. 我的页面:
   - 头像可点击修改(支持修改头像和昵称)
   - 用户ID截短显示
   - 创业伙伴标签移到用户名旁边,不再拥挤
   - 整体布局更加舒适

2. 设置页面:
   - 去掉"联系客服"
   - 去掉"清除缓存"
   - 去掉"当前版本"
   - 只保留账号绑定和退出登录
This commit is contained in:
卡若
2026-01-29 11:20:12 +08:00
parent 395501e961
commit 8b2c3f4661
4 changed files with 188 additions and 45 deletions

View File

@@ -73,9 +73,14 @@ Page({
title: `章节 ${id}` title: `章节 ${id}`
})) }))
// 截短用户ID显示
const userId = userInfo.id || ''
const userIdShort = userId.length > 20 ? userId.slice(0, 10) + '...' + userId.slice(-6) : userId
this.setData({ this.setData({
isLoggedIn: true, isLoggedIn: true,
userInfo, userInfo,
userIdShort,
purchasedCount: hasFullBook ? this.data.totalSections : (purchasedSections?.length || 0), purchasedCount: hasFullBook ? this.data.totalSections : (purchasedSections?.length || 0),
referralCount: userInfo.referralCount || 0, referralCount: userInfo.referralCount || 0,
earnings: userInfo.earnings || 0, earnings: userInfo.earnings || 0,
@@ -87,6 +92,7 @@ Page({
this.setData({ this.setData({
isLoggedIn: false, isLoggedIn: false,
userInfo: null, userInfo: null,
userIdShort: '',
purchasedCount: 0, purchasedCount: 0,
referralCount: 0, referralCount: 0,
earnings: 0, earnings: 0,
@@ -95,6 +101,77 @@ Page({
}) })
} }
}, },
// 编辑用户资料(头像和昵称)
editProfile() {
wx.showActionSheet({
itemList: ['修改头像', '修改昵称'],
success: (res) => {
if (res.tapIndex === 0) {
this.chooseAvatar()
} else if (res.tapIndex === 1) {
this.editNickname()
}
}
})
},
// 选择头像
chooseAvatar() {
wx.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album', 'camera'],
success: async (res) => {
const tempFilePath = res.tempFiles[0].tempFilePath
wx.showLoading({ title: '上传中...', mask: true })
try {
// 更新本地显示
const userInfo = this.data.userInfo
userInfo.avatar = tempFilePath
this.setData({ userInfo })
app.globalData.userInfo = userInfo
wx.setStorageSync('userInfo', userInfo)
// TODO: 上传到服务器
wx.hideLoading()
wx.showToast({ title: '头像已更新', icon: 'success' })
} catch (e) {
wx.hideLoading()
wx.showToast({ title: '上传失败', icon: 'none' })
}
}
})
},
// 修改昵称
editNickname() {
wx.showModal({
title: '修改昵称',
editable: true,
placeholderText: '请输入新昵称',
success: async (res) => {
if (res.confirm && res.content) {
const newNickname = res.content.trim()
if (newNickname.length < 1 || newNickname.length > 20) {
wx.showToast({ title: '昵称1-20个字符', icon: 'none' })
return
}
// 更新本地
const userInfo = this.data.userInfo
userInfo.nickname = newNickname
this.setData({ userInfo })
app.globalData.userInfo = userInfo
wx.setStorageSync('userInfo', userInfo)
// TODO: 上传到服务器
wx.showToast({ title: '昵称已更新', icon: 'success' })
}
}
})
},
// 切换Tab // 切换Tab
switchTab(e) { switchTab(e) {

View File

@@ -26,17 +26,29 @@
<!-- 用户卡片 - 已登录状态 --> <!-- 用户卡片 - 已登录状态 -->
<view class="user-card card-gradient" wx:else> <view class="user-card card-gradient" wx:else>
<view class="user-header"> <view class="user-header-row">
<view class="avatar"> <!-- 头像可点击修改 -->
<text class="avatar-text">{{userInfo.nickname[0] || 'U'}}</text> <view class="avatar-wrapper" bindtap="editProfile">
<view class="avatar">
<image class="avatar-img" wx:if="{{userInfo.avatar}}" src="{{userInfo.avatar}}" mode="aspectFill"/>
<text class="avatar-text" wx:else>{{userInfo.nickname[0] || '微'}}</text>
</view>
<view class="avatar-edit-hint">
<text class="edit-icon">✎</text>
</view>
</view> </view>
<view class="user-info">
<text class="user-name">{{userInfo.nickname || '用户'}}</text> <!-- 用户信息 -->
<text class="user-id">ID: {{userInfo.id}}</text> <view class="user-info-block">
</view> <view class="user-name-row">
<view class="user-badge"> <text class="user-name">{{userInfo.nickname || '微信用户'}}</text>
<text class="badge-icon">⭐</text> <!-- 创业伙伴标签 -->
<text class="badge-text">创业伙伴</text> <view class="user-badge-small">
<text class="badge-star">⭐</text>
<text class="badge-label">创业伙伴</text>
</view>
</view>
<text class="user-id">ID: {{userIdShort}}</text>
</view> </view>
</view> </view>

View File

@@ -61,23 +61,53 @@
border: 2rpx solid rgba(0, 206, 209, 0.2); border: 2rpx solid rgba(0, 206, 209, 0.2);
} }
.user-header { /* ===== 新版用户头部布局 ===== */
.user-header-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24rpx; gap: 28rpx;
margin-bottom: 32rpx; margin-bottom: 36rpx;
}
.avatar-wrapper {
position: relative;
flex-shrink: 0;
} }
.avatar { .avatar {
width: 128rpx; width: 120rpx;
height: 128rpx; height: 120rpx;
border-radius: 50%; border-radius: 50%;
border: 4rpx solid #00CED1; border: 4rpx solid #00CED1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: linear-gradient(135deg, rgba(0, 206, 209, 0.2) 0%, transparent 100%); background: linear-gradient(135deg, rgba(0, 206, 209, 0.2) 0%, transparent 100%);
flex-shrink: 0; overflow: hidden;
}
.avatar-img {
width: 100%;
height: 100%;
}
.avatar-edit-hint {
position: absolute;
bottom: 0;
right: 0;
width: 36rpx;
height: 36rpx;
background: #00CED1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3rpx solid #000;
}
.edit-icon {
font-size: 20rpx;
color: #000;
} }
.avatar-empty { .avatar-empty {
@@ -91,11 +121,63 @@
} }
.avatar-text { .avatar-text {
font-size: 48rpx; font-size: 44rpx;
font-weight: 700; font-weight: 700;
color: #00CED1; color: #00CED1;
} }
.user-info-block {
flex: 1;
display: flex;
flex-direction: column;
gap: 8rpx;
}
.user-name-row {
display: flex;
align-items: center;
gap: 16rpx;
flex-wrap: wrap;
}
.user-name {
font-size: 34rpx;
font-weight: 600;
color: #ffffff;
}
.user-badge-small {
display: inline-flex;
align-items: center;
gap: 6rpx;
padding: 6rpx 14rpx;
background: rgba(0, 206, 209, 0.15);
border: 1rpx solid rgba(0, 206, 209, 0.3);
border-radius: 20rpx;
}
.badge-star {
font-size: 18rpx;
}
.badge-label {
font-size: 20rpx;
color: #00CED1;
}
.user-id {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.35);
}
/* 兼容旧样式 */
.user-header {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 32rpx;
}
.user-info { .user-info {
flex: 1; flex: 1;
} }

View File

@@ -73,34 +73,6 @@
<text class="tip-text">提示:绑定至少一个支付方式(微信或支付宝)才能使用提现功能</text> <text class="tip-text">提示:绑定至少一个支付方式(微信或支付宝)才能使用提现功能</text>
</view> </view>
<!-- 其他设置 -->
<view class="settings-group">
<view class="settings-item" bindtap="contactService">
<view class="item-left">
<text class="item-icon">💬</text>
<text class="item-title">联系客服</text>
</view>
<text class="item-arrow">→</text>
</view>
<view class="settings-item" bindtap="clearCache">
<view class="item-left">
<text class="item-icon">🗑️</text>
<text class="item-title">清除缓存</text>
</view>
<text class="item-arrow">→</text>
</view>
</view>
<view class="settings-group">
<view class="settings-item">
<view class="item-left">
<text class="item-icon"></text>
<text class="item-title">当前版本</text>
</view>
<text class="item-value">v{{version}}</text>
</view>
</view>
<view class="logout-btn" wx:if="{{isLoggedIn}}" bindtap="handleLogout">退出登录</view> <view class="logout-btn" wx:if="{{isLoggedIn}}" bindtap="handleLogout">退出登录</view>
</view> </view>