UI优化:我的页面和设置页面
1. 我的页面: - 头像可点击修改(支持修改头像和昵称) - 用户ID截短显示 - 创业伙伴标签移到用户名旁边,不再拥挤 - 整体布局更加舒适 2. 设置页面: - 去掉"联系客服" - 去掉"清除缓存" - 去掉"当前版本" - 只保留账号绑定和退出登录
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user