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

简化授权登录页面， requires_approval

Browse Source
This commit is contained in:
H1d3rOne committed 2026-03-09 17:19:45 +08:00
1 parent 7eb1ae7f52
commit d5ea80766f
1 file changed
+152 -126
Download Patch File Download Diff File Expand all files Collapse all files
xuan-deduct-uniapp/src/pages/auth/auth.vue
+152 -126
View File
@@ -1,34 +1,29 @@
<template>
<view class="container">
<view class="auth-content">
<view class="logo-section">
<text class="logo-icon">🔮</text>
<text class="app-name">玄机排盘</text>
<text class="app-desc">专业命理测算工具</text>
<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">
<button class="auth-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<text class="auth-btn-text">微信授权登录</text>
</button>
<view class="auth-section">
<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>
<button class="cancel-btn" @click="cancelAuth">
<text class="cancel-btn-text">取消登录</text>
</button>
</view>
<view class="tips-card">
<text class="tips-title">💡 授权说明</text>
<text class="tips-content">• 点击"微信授权登录"按钮
• 选择微信头像或从相册选择
• 输入或获取微信昵称
• 完成授权即可使用完整功能</text>
</view>
</view>
</template>
@@ -41,28 +36,39 @@ export default {
return {
avatarUrl: '',
nickname: '',
loading: false,
defaultAvatar: '/static/default-avatar.png'
}
},
computed: {
canSubmit() {
return this.avatarUrl && this.nickname
loading: false
}
},
methods: {
onChooseAvatar(e) {
console.log('选择头像:', e)
const { avatarUrl } = e.detail
if (avatarUrl) {
this.avatarUrl = avatarUrl
this.showNicknameInput()
}
},
onNicknameInput(e) {
const value = e.detail.value
if (value) {
this.nickname = value
}
showNicknameInput() {
uni.showModal({
title: '设置昵称',
editable: true,
placeholderText: '请输入昵称',
success: (res) => {
if (res.confirm && res.content) {
this.nickname = res.content
this.doAuth()
} else if (res.confirm) {
uni.showToast({
title: '请输入昵称',
icon: 'none'
})
setTimeout(() => {
this.showNicknameInput()
}, 1500)
}
}
})
},
async doAuth() {
@@ -80,13 +86,18 @@ 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,
@@ -94,6 +105,8 @@ 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)
@@ -101,29 +114,38 @@ 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) {
uni.showToast({ title: err.message || '授权失败', icon: 'none' })
console.error('登录失败:', err)
uni.showToast({
title: err.message || '授权失败，请重试',
icon: 'none',
duration: 3000
})
} finally {
this.loading = false
}
},
skipAuth() {
cancelAuth() {
uni.showModal({
title: '提示',
content: '暂不授权将无法使用完整功能',
confirmText: '去授权',
cancelText: '稍后再说',
content: '取消登录将无法使用完整功能，确定要取消吗？',
confirmText: '确定取消',
cancelText: '继续登录',
success: (res) => {
if (res.cancel) {
if (res.confirm) {
uni.switchTab({ url: '/pages/index/index' })
}
}
@@ -135,123 +157,127 @@ export default {
<style>
page {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%);
min-height: 100vh;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
}
.auth-content {
width: 100%;
padding: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.logo-section {
.header-card {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
border-radius: 32rpx;
padding: 48rpx 32rpx;
text-align: center;
margin-bottom: 80rpx;
margin-bottom: 32rpx;
box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.25);
width: 100%;
}
.logo-icon {
font-size: 120rpx;
display: block;
margin-bottom: 24rpx;
.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;
}
.app-name {
.icon-text {
font-size: 48rpx;
font-weight: bold;
}
.header-title {
font-size: 44rpx;
font-weight: 700;
color: #ffffff;
display: block;
margin-bottom: 12rpx;
}
.app-desc {
.header-subtitle {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
}
.auth-section {
width: 100%;
.auth-card {
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 32rpx;
background: transparent;
border: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.auth-avatar-btn::after {
border: none;
}
.avatar-img {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
border: 4rpx solid #667eea;
}
.avatar-tip {
font-size: 22rpx;
color: #667eea;
margin-top: 12rpx;
}
.nickname-input {
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%;
height: 88rpx;
background: #f5f5f5;
border-radius: 16rpx;
padding: 0 24rpx;
font-size: 28rpx;
margin-bottom: 32rpx;
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;
}
.auth-btn::after {
border: none;
}
.auth-btn[loading] {
opacity: 0.7;
.auth-btn-text {
font-size: 32rpx;
color: #ffffff;
font-weight: 600;
}
.auth-btn-disabled {
opacity: 0.5;
.cancel-btn {
background: transparent;
border-radius: 24rpx;
padding: 32rpx;
text-align: center;
border: 2rpx solid #D1D5DB;
width: 100%;
}
.skip-section {
margin-top: 40rpx;
padding: 20rpx;
.cancel-btn::after {
border: none;
}
.skip-text {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
.cancel-btn-text {
font-size: 32rpx;
color: #6B7280;
font-weight: 600;
}
.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;
}
</style>