修复chooseAvatar取消错误

问题:
- 用户点击取消选择头像时出现错误
- 错误信息:chooseAvatar:fail cancel

解决方案:
- 添加@error事件处理
- 新增onChooseAvatarError方法
- 区分用户取消和其他错误
- 用户取消时不显示错误提示
- 其他错误显示友好提示

改进:
- 更好的错误处理
- 避免控制台报错
- 提升用户体验
This commit is contained in:
H1d3rOne committed 2026-03-09 21:37:44 +08:00
1 parent ad47ee11e6
commit a537fc0b23
2 files changed
+121 -11

No files matched your search

@@ -5,14 +5,14 @@
<view class="modal-icon">
<text class="icon-text">🔐</text>
</view>
<text class="modal-title">授权登录</text>
<text class="modal-title">微信授权登录</text>
<text class="modal-subtitle">获取微信头像和昵称</text>
</view>
<view class="modal-content">
<button class="wechat-auth-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<button class="wechat-auth-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" @error="onChooseAvatarError">
<view class="btn-icon">
<image class="wechat-icon" src="/static/wechat-icon.png" mode="aspectFit" />
<text class="wechat-icon-text">👤</text>
</view>
<text class="btn-text">微信授权登录</text>
</button>
@@ -73,6 +73,19 @@ export default {
}
},
onChooseAvatarError(e) {
console.log('选择头像错误:', e)
const { errMsg } = e.detail
if (errMsg && errMsg.includes('cancel')) {
console.log('用户取消了选择头像')
} else {
uni.showToast({
title: '选择头像失败,请重试',
icon: 'none'
})
}
},
showNicknameInput() {
uni.showModal({
title: '设置昵称',
@@ -137,6 +150,7 @@ export default {
uni.setStorageSync('vipLevel', res.data.vipLevel || 0)
uni.setStorageSync('username', res.data.username || res.data.nickname)
uni.setStorageSync('userAvatar', res.data.avatarUrl)
uni.setStorageSync('isLoggedIn', true)
uni.showToast({
title: '授权成功',
@@ -190,7 +204,7 @@ export default {
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
align-items: flex-end;
justify-content: center;
animation: fadeIn 0.3s ease;
}
@@ -205,12 +219,12 @@ export default {
}
.auth-modal {
width: 600rpx;
width: 100%;
background: #ffffff;
border-radius: 32rpx;
border-radius: 32rpx 32rpx 0 0;
overflow: hidden;
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
transform: translateY(-100vh);
box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.2);
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@@ -277,11 +291,13 @@ export default {
width: 48rpx;
height: 48rpx;
margin-right: 16rpx;
display: flex;
align-items: center;
justify-content: center;
}
.wechat-icon {
width: 48rpx;
height: 48rpx;
.wechat-icon-text {
font-size: 36rpx;
}
.btn-text {
+94
View File
@@ -0,0 +1,94 @@
const authCheck = {
isLoggedIn() {
const isLoggedIn = uni.getStorageSync('isLoggedIn')
const userInfo = uni.getStorageSync('userInfo')
return !!(isLoggedIn && userInfo)
},
requireLogin(callback) {
if (this.isLoggedIn()) {
if (callback && typeof callback === 'function') {
callback()
}
return true
} else {
uni.showModal({
title: '未登录',
content: '该功能需要登录后才能使用,是否前往登录?',
confirmText: '去登录',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.$emit('showAuthModal')
}
}
})
return false
}
},
requireLoginAsync() {
return new Promise((resolve, reject) => {
if (this.isLoggedIn()) {
resolve(true)
} else {
uni.showModal({
title: '未登录',
content: '该功能需要登录后才能使用,是否前往登录?',
confirmText: '去登录',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.$emit('showAuthModal')
reject(new Error('需要登录'))
} else {
reject(new Error('用户取消登录'))
}
}
})
}
})
},
getUserInfo() {
if (!this.isLoggedIn()) {
return null
}
try {
const userInfoStr = uni.getStorageSync('userInfo')
return userInfoStr ? JSON.parse(userInfoStr) : null
} catch (e) {
console.error('解析用户信息失败:', e)
return null
}
},
getUserId() {
const userInfo = this.getUserInfo()
return userInfo ? userInfo.userId : null
},
logout() {
uni.removeStorageSync('isLoggedIn')
uni.removeStorageSync('userInfo')
uni.removeStorageSync('userId')
uni.removeStorageSync('userCoins')
uni.removeStorageSync('vipLevel')
uni.removeStorageSync('username')
uni.removeStorageSync('userAvatar')
uni.showToast({
title: '已退出登录',
icon: 'success'
})
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
}, 1500)
}
}
export default authCheck