diff --git a/xuan-deduct-uniapp/src/pages/auth/auth.vue b/xuan-deduct-uniapp/src/pages/auth/auth.vue index 681ca27..7c7748e 100644 --- a/xuan-deduct-uniapp/src/pages/auth/auth.vue +++ b/xuan-deduct-uniapp/src/pages/auth/auth.vue @@ -9,35 +9,44 @@ - + + + + - - + + + + + 点击输入框可获取微信昵称 + - 授权说明 - • 获取您的微信头像和昵称用于显示用户信息 -• 我们不会收集与功能无关的个人信息 -• 您的信息将被安全保存在服务器上 + 💡 授权说明 + • 点击头像按钮选择微信头像或从相册选择 +• 点击昵称输入框可自动获取微信昵称 +• 您也可以手动输入自定义昵称 +• 信息仅用于显示用户资料 - - 暂不授权 + 暂不授权,稍后再说 @@ -54,6 +63,11 @@ export default { defaultAvatar: '/static/default-avatar.png' } }, + computed: { + canSubmit() { + return this.avatarUrl && this.nickname + } + }, methods: { onChooseAvatar(e) { console.log('选择头像:', e) @@ -61,6 +75,11 @@ export default { if (avatarUrl) { this.avatarUrl = avatarUrl console.log('头像URL:', avatarUrl) + uni.showToast({ + title: '头像已选择', + icon: 'success', + duration: 1500 + }) } }, @@ -75,7 +94,12 @@ export default { async doAuth() { if (!this.avatarUrl) { - uni.showToast({ title: '请选择头像', icon: 'none' }) + uni.showToast({ title: '请先选择头像', icon: 'none' }) + return + } + + if (!this.nickname) { + uni.showToast({ title: '请输入昵称', icon: 'none' }) return } @@ -97,12 +121,13 @@ export default { const res = await api.userApi.loginOrRegister({ code: loginRes.code, - nickname: this.nickname || '微信用户', + nickname: this.nickname, avatarUrl: this.avatarUrl }) if (res.success) { console.log('登录成功:', res.data) + uni.setStorageSync('userId', res.data.userId) uni.setStorageSync('userInfo', JSON.stringify(res.data)) uni.setStorageSync('userCoins', res.data.coins || 10) @@ -110,19 +135,24 @@ export default { uni.setStorageSync('username', res.data.username || res.data.nickname) uni.setStorageSync('userAvatar', res.data.avatarUrl) - uni.showToast({ title: '登录成功', icon: 'success' }) + uni.showToast({ + title: '授权成功', + icon: 'success', + duration: 2000 + }) setTimeout(() => { uni.switchTab({ url: '/pages/index/index' }) - }, 1500) + }, 2000) } else { throw new Error(res.error || '登录失败') } } catch (err) { console.error('登录失败:', err) uni.showToast({ - title: err.message || '网络错误', - icon: 'none' + title: err.message || '授权失败,请重试', + icon: 'none', + duration: 3000 }) } finally { this.loading = false @@ -211,11 +241,26 @@ page { width: 100%; } +.auth-section { + margin-bottom: 32rpx; +} + +.auth-section:last-child { + margin-bottom: 0; +} + +.section-label { + font-size: 28rpx; + font-weight: 600; + color: #065F46; + display: block; + margin-bottom: 16rpx; +} + .auth-avatar-btn { width: 160rpx; - height: 160rpx; - margin: 0 auto 24rpx; - position: relative; + height: 200rpx; + margin: 0 auto; background: transparent; border: none; padding: 0; @@ -232,30 +277,38 @@ page { width: 160rpx; height: 160rpx; border-radius: 50%; + border: 4rpx solid #10B981; } .auth-tip { font-size: 22rpx; color: #10B981; - background: rgba(255, 255, 255, 0.9); - padding: 4rpx 16rpx; + background: rgba(16, 185, 129, 0.1); + padding: 8rpx 24rpx; border-radius: 16rpx; - margin-top: 10rpx; + margin-top: 16rpx; } .auth-nickname { display: flex; - align-items: center; - gap: 16rpx; + flex-direction: column; + gap: 12rpx; } .nickname-input { - flex: 1; - padding: 20rpx 24rpx; + width: 100%; + padding: 24rpx; background: #ECFDF5; border-radius: 16rpx; font-size: 28rpx; color: #065F46; + border: 2rpx solid rgba(16, 185, 129, 0.2); +} + +.nickname-hint { + font-size: 22rpx; + color: #6B7280; + padding-left: 8rpx; } .tips-card { @@ -297,6 +350,10 @@ page { opacity: 0.7; } +.auth-btn-disabled { + opacity: 0.5; +} + .auth-btn-text { font-size: 32rpx; color: #ffffff; @@ -305,6 +362,7 @@ page { .skip-auth { text-align: center; + padding: 16rpx; } .skip-text {