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

1. 我的页面： - 头像可点击修改（支持修改头像和昵称） - 用户ID截短显示 - 创业伙伴标签移到用户名旁边，不再拥挤 - 整体布局更加舒适 2. 设置页面： - 去掉"联系客服" - 去掉"清除缓存" - 去掉"当前版本" - 只保留账号绑定和退出登录
2026-01-29 11:20:12 +08:00
parent 395501e961
commit 8b2c3f4661
4 changed files with 188 additions and 45 deletions
--- a/miniprogram/pages/my/my.js
+++ b/miniprogram/pages/my/my.js
@@ -73,9 +73,14 @@ Page({
        title: `章节 ${id}`
      }))
      
+      // 截短用户ID显示
+      const userId = userInfo.id || ''
+      const userIdShort = userId.length > 20 ? userId.slice(0, 10) + '...' + userId.slice(-6) : userId
+      
      this.setData({
        isLoggedIn: true,
        userInfo,
+        userIdShort,
        purchasedCount: hasFullBook ? this.data.totalSections : (purchasedSections?.length || 0),
        referralCount: userInfo.referralCount || 0,
        earnings: userInfo.earnings || 0,
@@ -87,6 +92,7 @@ Page({
      this.setData({
        isLoggedIn: false,
        userInfo: null,
+        userIdShort: '',
        purchasedCount: 0,
        referralCount: 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
  switchTab(e) {
--- a/miniprogram/pages/my/my.wxml
+++ b/miniprogram/pages/my/my.wxml
@@ -26,17 +26,29 @@

  <!-- 用户卡片 - 已登录状态 -->
  <view class="user-card card-gradient" wx:else>
-    <view class="user-header">
-      <view class="avatar">
-        <text class="avatar-text">{{userInfo.nickname[0] || 'U'}}</text>
+    <view class="user-header-row">
+      <!-- 头像可点击修改 -->
+      <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 class="user-info">
-        <text class="user-name">{{userInfo.nickname || '用户'}}</text>
-        <text class="user-id">ID: {{userInfo.id}}</text>
-      </view>
-      <view class="user-badge">
-        <text class="badge-icon">⭐</text>
-        <text class="badge-text">创业伙伴</text>
+      
+      <!-- 用户信息 -->
+      <view class="user-info-block">
+        <view class="user-name-row">
+          <text class="user-name">{{userInfo.nickname || '微信用户'}}</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>
    
--- a/miniprogram/pages/my/my.wxss
+++ b/miniprogram/pages/my/my.wxss
@@ -61,23 +61,53 @@
  border: 2rpx solid rgba(0, 206, 209, 0.2);
 }

-.user-header {
+/* ===== 新版用户头部布局 ===== */
+.user-header-row {
  display: flex;
  align-items: center;
-  gap: 24rpx;
-  margin-bottom: 32rpx;
+  gap: 28rpx;
+  margin-bottom: 36rpx;
+}
+
+.avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
 }

 .avatar {
-  width: 128rpx;
-  height: 128rpx;
+  width: 120rpx;
+  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #00CED1;
  display: flex;
  align-items: center;
  justify-content: center;
  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 {
@@ -91,11 +121,63 @@
 }

 .avatar-text {
-  font-size: 48rpx;
+  font-size: 44rpx;
  font-weight: 700;
  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 {
  flex: 1;
 }
--- a/miniprogram/pages/settings/settings.wxml
+++ b/miniprogram/pages/settings/settings.wxml
@@ -73,34 +73,6 @@
      <text class="tip-text">提示：绑定至少一个支付方式（微信或支付宝）才能使用提现功能</text>
    </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>