更新小程序头像选择逻辑,采用绝对定位覆盖原生按钮,避免样式干扰。新增相关最佳实践文档,确保开发一致性和用户体验。优化个人资料页面,提升用户交互流畅性。
This commit is contained in:
@@ -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' })
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user