更新小程序头像选择逻辑,采用绝对定位覆盖原生按钮,避免样式干扰。新增相关最佳实践文档,确保开发一致性和用户体验。优化个人资料页面,提升用户交互流畅性。

This commit is contained in:
Alex-larget
2026-03-19 19:18:50 +08:00
parent 588dad2518
commit 181f092402
8 changed files with 89 additions and 18 deletions

View File

@@ -409,6 +409,8 @@ Page({
wx.hideLoading()
this.setData({ receivingAll: false })
this.loadPendingConfirm()
this.loadMyEarnings()
this.loadWalletBalance()
}
},
@@ -914,6 +916,7 @@ Page({
wx.hideLoading()
wx.showToast({ title: '提现申请已提交', icon: 'success' })
this.loadMyEarnings()
this.loadWalletBalance()
} catch (e) {
wx.hideLoading()
wx.showToast({ title: e.message || '提现失败', icon: 'none' })

View File

@@ -23,16 +23,15 @@
<view class="profile-card" wx:else>
<view class="profile-card-inner">
<view class="profile-top-row">
<button class="avatar-wrap-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
<view class="avatar-wrap">
<view class="avatar-inner {{isVip ? 'avatar-vip' : ''}}">
<image wx:if="{{userInfo.avatar}}" class="avatar-img" src="{{userInfo.avatar}}" mode="aspectFill"/>
<text wx:else class="avatar-text">{{userInfo.nickname ? userInfo.nickname[0] : '?'}}</text>
</view>
<view class="vip-badge" wx:if="{{isVip}}">VIP</view>
<view class="vip-badge vip-badge-gray" wx:else>VIP</view>
<view class="avatar-wrap">
<view class="avatar-inner {{isVip ? 'avatar-vip' : ''}}">
<image wx:if="{{userInfo.avatar}}" class="avatar-img" src="{{userInfo.avatar}}" mode="aspectFill"/>
<text wx:else class="avatar-text">{{userInfo.nickname ? userInfo.nickname[0] : '?'}}</text>
</view>
</button>
<view class="vip-badge" wx:if="{{isVip}}">VIP</view>
<view class="vip-badge vip-badge-gray" wx:else>VIP</view>
<button class="avatar-overlay-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"></button>
</view>
<view class="profile-meta">
<view class="profile-name-row">
<text class="user-name" bindtap="editNickname">{{userInfo.nickname || '点击设置昵称'}}</text>

View File

@@ -41,15 +41,22 @@
border: 1rpx solid rgba(75,85,99,0.5);
}
.profile-top-row { display: flex; align-items: flex-start; gap: 32rpx; }
/* 头像按钮:透明无边框,宽高与头像一致,点击直接唤起微信选择器(微信头像/相册/拍照) */
.avatar-wrap-btn {
width: 40rpx; height: 130rpx;
padding: 0; margin: 0; background: transparent; border: none;
display: flex; align-items: center; justify-content: center;
/* 头像区域view 负责展示button 绝对定位覆盖其上,避免原生样式影响 */
.avatar-wrap {
position: relative;
width: 130rpx; height: 130rpx;
flex-shrink: 0;
}
.avatar-wrap-btn::after { border: none; }
.avatar-wrap { position: relative; flex-shrink: 0; }
/* 绝对定位的按钮覆盖在头像上,透明无样式,点击唤起微信选择器(微信头像/相册/拍照) */
.avatar-overlay-btn {
position: absolute;
left: 0; top: 0;
width: 130rpx; height: 130rpx;
padding: 0; margin: 0;
background: transparent; border: none;
display: block;
}
.avatar-overlay-btn::after { border: none; }
.avatar-inner {
width: 130rpx; height: 130rpx; border-radius: 50%; overflow: hidden;
background: #1C2524; border: 5rpx solid #374151;