zianxin/xuan-deduct
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

简化授权登录页面，一键授权获取微信昵称和头像

Browse Source 
优化内容：
1. 简化页面布局
   - 移除复杂的步骤引导
   - 采用居中卡片式设计
   - 紫色渐变背景，更加美观

2. 精简交互流程
   - 头像选择：点击头像按钮直接选择
   - 昵称输入：点击输入框自动获取微信昵称
   - 一键授权：填写完成后点击按钮即可

3. 优化视觉效果
   - Logo图标：🔮水晶球
   - 应用名称：玄机排盘
   - 白色卡片配紫色渐变背景
   - 圆形头像带紫色边框

4. 简化代码
   - 移除冗余的提示文字
   - 精简样式代码
   - 优化错误处理逻辑

页面特点：
- 简洁美观的界面设计
- 一键授权的便捷流程
- 良好的用户体验
This commit is contained in:
H1d3rOne committed 2026-03-09 17:11:54 +08:00
1 parent e0446bffc8
commit 7eb1ae7f52
1 file changed
+75 -190
Download Patch File Download Diff File Expand all files Collapse all files
xuan-deduct-uniapp/src/pages/auth/auth.vue
+75 -190
View File
@@ -1,52 +1,34 @@
<template>
<view class="container">
<view class="header-card">
<view class="header-icon">
<text class="icon-text">🔐</text>
</view>
<text class="header-title">授权登录</text>
<text class="header-subtitle">获取微信头像和昵称</text>
</view>
<view class="auth-card">
<view class="auth-section">
<text class="section-label">第一步：选择头像</text>
<button class="auth-avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar-img" :src="avatarUrl || defaultAvatar" mode="aspectFill" />
<text class="auth-tip">{{ avatarUrl ? '已选择' : '点击选择头像' }}</text>
</button>
<view class="auth-content">
<view class="logo-section">
<text class="logo-icon">🔮</text>
<text class="app-name">玄机排盘</text>
<text class="app-desc">专业命理测算工具</text>
</view>
<view class="auth-section">
<text class="section-label">第二步：输入昵称</text>
<view class="auth-nickname">
<input
class="nickname-input"
type="nickname"
v-model="nickname"
placeholder="点击输入或获取微信昵称"
@blur="onNicknameInput"
@confirm="onNicknameInput"
/>
<text class="nickname-hint">点击输入框可获取微信昵称</text>
</view>
<button class="auth-avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar-img" :src="avatarUrl || defaultAvatar" mode="aspectFill" />
<text class="avatar-tip">点击选择头像</text>
</button>
<input
class="nickname-input"
type="nickname"
v-model="nickname"
placeholder="点击输入昵称"
@blur="onNicknameInput"
/>
<button class="auth-btn" :class="{ 'auth-btn-disabled': !canSubmit }" :loading="loading" @click="doAuth">
{{ loading ? '授权中...' : '立即授权' }}
</button>
</view>
<view class="skip-section" @click="skipAuth">
<text class="skip-text">暂不授权</text>
</view>
</view>
<view class="tips-card">
<text class="tips-title">💡 授权说明</text>
<text class="tips-content">• 点击头像按钮选择微信头像或从相册选择
• 点击昵称输入框可自动获取微信昵称
• 您也可以手动输入自定义昵称
• 信息仅用于显示用户资料</text>
</view>
<button class="auth-btn" :class="{ 'auth-btn-disabled': !canSubmit }" :loading="loading" @click="doAuth">
<text class="auth-btn-text">{{ loading ? '授权中...' : '确认授权' }}</text>
</button>
<view class="skip-auth" @click="skipAuth">
<text class="skip-text">暂不授权，稍后再说</text>
</view>
</view>
</template>
@@ -70,31 +52,22 @@ export default {
},
methods: {
onChooseAvatar(e) {
console.log('选择头像:', e)
const { avatarUrl } = e.detail
if (avatarUrl) {
this.avatarUrl = avatarUrl
console.log('头像URL:', avatarUrl)
uni.showToast({
title: '头像已选择',
icon: 'success',
duration: 1500
})
}
},
onNicknameInput(e) {
console.log('输入昵称:', e)
const value = e.detail.value
if (value) {
this.nickname = value
console.log('昵称:', value)
}
},
async doAuth() {
if (!this.avatarUrl) {
uni.showToast({ title: '请先选择头像', icon: 'none' })
uni.showToast({ title: '请选择头像', icon: 'none' })
return
}
@@ -107,18 +80,13 @@ export default {
try {
const loginRes = await new Promise((resolve, reject) => {
uni.login({
success: resolve,
fail: reject
})
uni.login({ success: resolve, fail: reject })
})
if (!loginRes.code) {
throw new Error('获取授权失败')
}
console.log('获取code成功:', loginRes.code)
const res = await api.userApi.loginOrRegister({
code: loginRes.code,
nickname: this.nickname,
@@ -126,8 +94,6 @@ export default {
})
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)
@@ -135,25 +101,16 @@ export default {
uni.setStorageSync('username', res.data.username || res.data.nickname)
uni.setStorageSync('userAvatar', res.data.avatarUrl)
uni.showToast({
title: '授权成功',
icon: 'success',
duration: 2000
})
uni.showToast({ title: '授权成功', icon: 'success' })
setTimeout(() => {
uni.switchTab({ url: '/pages/index/index' })
}, 2000)
}, 1500)
} else {
throw new Error(res.error || '登录失败')
}
} catch (err) {
console.error('登录失败:', err)
uni.showToast({
title: err.message || '授权失败，请重试',
icon: 'none',
duration: 3000
})
uni.showToast({ title: err.message || '授权失败', icon: 'none' })
} finally {
this.loading = false
}
@@ -162,14 +119,11 @@ export default {
skipAuth() {
uni.showModal({
title: '提示',
content: '暂不授权将无法使用完整功能，您可以稍后在"我的"页面进行授权',
content: '暂不授权将无法使用完整功能',
confirmText: '去授权',
cancelText: '稍后再说',
success: (res) => {
if (res.confirm) {
console.log('用户选择去授权')
} else {
console.log('用户选择稍后再说')
if (res.cancel) {
uni.switchTab({ url: '/pages/index/index' })
}
}
@@ -181,86 +135,61 @@ export default {
<style>
page {
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
min-height: 100vh;
padding: 32rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
}
.auth-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.header-card {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
border-radius: 32rpx;
padding: 48rpx 32rpx;
.logo-section {
text-align: center;
margin-bottom: 32rpx;
box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.25);
width: 100%;
margin-bottom: 80rpx;
}
.header-icon {
width: 96rpx;
height: 96rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24rpx;
.logo-icon {
font-size: 120rpx;
display: block;
margin-bottom: 24rpx;
}
.icon-text {
.app-name {
font-size: 48rpx;
}
.header-title {
font-size: 44rpx;
font-weight: 700;
font-weight: bold;
color: #ffffff;
display: block;
margin-bottom: 12rpx;
}
.header-subtitle {
.app-desc {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
}
.auth-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
border: 2rpx solid rgba(16, 185, 129, 0.1);
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;
width: 100%;
background: rgba(255, 255, 255, 0.95);
border-radius: 32rpx;
padding: 48rpx 32rpx;
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
}
.auth-avatar-btn {
width: 160rpx;
height: 200rpx;
margin: 0 auto;
margin: 0 auto 32rpx;
background: transparent;
border: none;
padding: 0;
@@ -277,73 +206,35 @@ page {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
border: 4rpx solid #10B981;
border: 4rpx solid #667eea;
}
.auth-tip {
.avatar-tip {
font-size: 22rpx;
color: #10B981;
background: rgba(16, 185, 129, 0.1);
padding: 8rpx 24rpx;
border-radius: 16rpx;
margin-top: 16rpx;
}
.auth-nickname {
display: flex;
flex-direction: column;
gap: 12rpx;
color: #667eea;
margin-top: 12rpx;
}
.nickname-input {
width: 100%;
padding: 24rpx;
background: #ECFDF5;
height: 88rpx;
background: #f5f5f5;
border-radius: 16rpx;
padding: 0 24rpx;
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 {
background: rgba(255, 255, 255, 0.95);
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
border: 2rpx solid rgba(16, 185, 129, 0.1);
width: 100%;
}
.tips-title {
font-size: 28rpx;
font-weight: 600;
color: #065F46;
display: block;
margin-bottom: 16rpx;
}
.tips-content {
font-size: 24rpx;
color: #374151;
line-height: 1.8;
text-align: center;
}
.auth-btn {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
border-radius: 24rpx;
padding: 32rpx;
text-align: center;
margin-bottom: 24rpx;
box-shadow: 0 12rpx 32rpx rgba(16, 185, 129, 0.3);
border: none;
width: 100%;
height: 88rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16rpx;
color: #ffffff;
font-size: 32rpx;
font-weight: bold;
border: none;
}
.auth-btn[loading] {
@@ -354,19 +245,13 @@ page {
opacity: 0.5;
}
.auth-btn-text {
font-size: 32rpx;
color: #ffffff;
font-weight: 600;
}
.skip-auth {
text-align: center;
padding: 16rpx;
.skip-section {
margin-top: 40rpx;
padding: 20rpx;
}
.skip-text {
font-size: 26rpx;
color: #6B7280;
color: rgba(255, 255, 255, 0.8);
}
</style>