refactor(passport): 优化二维码确认登录页面流程和界面
- 移除根据扫码参数自动确认登录逻辑,改为统一显示授权登录界面 - 简化用户登录判断,统一走手机号授权登录流程,提升用户体验 - 替换按钮组件由 TaroButton 改为 NutUI Button,统一样式风格 - 更新授权登录页面 UI,调整背景、品牌名和标语内容 - 优化手机号授权登录按钮样式,使用渐变色背景和中心对齐
This commit is contained in:
@@ -13,5 +13,5 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"lastUpdated": 1775585206027
|
"lastUpdated": 1775586324678
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { View, Text, Button as TaroButton } from '@tarojs/components';
|
import { View, Text } from '@tarojs/components';
|
||||||
import { Loading, Card } from '@nutui/nutui-react-taro';
|
import { Loading, Card, Button } from '@nutui/nutui-react-taro';
|
||||||
import { Success, Failure, Tips, User, Checklist } from '@nutui/icons-react-taro';
|
import { Success, Failure, Tips, User, Checklist } from '@nutui/icons-react-taro';
|
||||||
import Taro, { useRouter } from '@tarojs/taro';
|
import Taro, { useRouter } from '@tarojs/taro';
|
||||||
import { confirmQRLogin } from '@/api/passport/qr-login';
|
import { confirmQRLogin } from '@/api/passport/qr-login';
|
||||||
@@ -95,20 +95,10 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
setLoginMethod('url');
|
setLoginMethod('url');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (loginToken) {
|
// 扫码场景:直接显示授权登录界面
|
||||||
setToken(loginToken);
|
console.log('[QRConfirm] 显示授权登录界面');
|
||||||
console.log('[QRConfirm] 获取到 token:', loginToken);
|
setToken(loginToken);
|
||||||
|
setNeedAuth(true);
|
||||||
// 扫码场景:自动确认登录
|
|
||||||
if (params.scene || params.token || params.qrCodeKey || params.q) {
|
|
||||||
console.log('[QRConfirm] 检测到扫码参数,自动确认登录');
|
|
||||||
setTimeout(() => {
|
|
||||||
handleAutoConfirm(loginToken);
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setError('无效的登录链接');
|
|
||||||
}
|
|
||||||
}, [router.params]);
|
}, [router.params]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -136,32 +126,11 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
|
|
||||||
console.log('[QRConfirm] loginByOpenId 结果:', wxLoginResult);
|
console.log('[QRConfirm] loginByOpenId 结果:', wxLoginResult);
|
||||||
|
|
||||||
// 3. 判断用户是否存在
|
// 3. 统一显示授权登录界面,让用户一键授权完成登录
|
||||||
if (wxLoginResult.success && wxLoginResult.data && wxLoginResult.data.user) {
|
// 无论用户是否注册、是否绑定手机号,都走授权登录流程
|
||||||
// 用户已注册,检查是否绑定手机号
|
console.log('[QRConfirm] 显示手机号授权登录界面');
|
||||||
const user = wxLoginResult.data.user;
|
setNeedAuth(true);
|
||||||
console.log('[QRConfirm] 用户已注册:', user);
|
setLoading(false);
|
||||||
|
|
||||||
// 如果用户没有手机号,需要授权绑定
|
|
||||||
if (!user.phone || user.phone === '') {
|
|
||||||
console.log('[QRConfirm] 用户未绑定手机号,显示授权界面');
|
|
||||||
setNeedAuth(true);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户已绑定手机号,保存用户信息并继续确认登录
|
|
||||||
console.log('[QRConfirm] 用户已绑定手机号,开始确认登录...');
|
|
||||||
setUserInfo(user);
|
|
||||||
|
|
||||||
// 调用确认登录
|
|
||||||
await handleConfirmLogin(loginToken, user);
|
|
||||||
} else {
|
|
||||||
// 用户未注册,显示手机号授权界面
|
|
||||||
console.log('[QRConfirm] 用户未注册,显示手机号授权界面');
|
|
||||||
setNeedAuth(true);
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
console.error('[QRConfirm] 自动确认登录失败:', err);
|
console.error('[QRConfirm] 自动确认登录失败:', err);
|
||||||
setError(err.message || '自动确认登录失败');
|
setError(err.message || '自动确认登录失败');
|
||||||
@@ -468,12 +437,12 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
<Text className="block mb-2">5. 协议修改</Text>
|
<Text className="block mb-2">5. 协议修改</Text>
|
||||||
<Text className="block mb-2">我们有权在必要时修改本协议,修改后的协议将在公布时立即生效。</Text>
|
<Text className="block mb-2">我们有权在必要时修改本协议,修改后的协议将在公布时立即生效。</Text>
|
||||||
</View>
|
</View>
|
||||||
<TaroButton
|
<Button
|
||||||
className="mt-4 bg-orange-500 text-white rounded-full"
|
className="mt-4 bg-orange-500 text-white rounded-full"
|
||||||
onClick={closeAgreement}
|
onClick={closeAgreement}
|
||||||
>
|
>
|
||||||
我知道了
|
我知道了
|
||||||
</TaroButton>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -497,12 +466,12 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
<Text className="block mb-2">5. 联系我们</Text>
|
<Text className="block mb-2">5. 联系我们</Text>
|
||||||
<Text className="block mb-2">如有任何隐私相关问题,请联系我们。</Text>
|
<Text className="block mb-2">如有任何隐私相关问题,请联系我们。</Text>
|
||||||
</View>
|
</View>
|
||||||
<TaroButton
|
<Button
|
||||||
className="mt-4 bg-orange-500 text-white rounded-full"
|
className="mt-4 bg-orange-500 text-white rounded-full"
|
||||||
onClick={closeAgreement}
|
onClick={closeAgreement}
|
||||||
>
|
>
|
||||||
我知道了
|
我知道了
|
||||||
</TaroButton>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -513,50 +482,38 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
// 授权登录页面(参考权大师风格)
|
// 授权登录页面(参考权大师风格)
|
||||||
const renderAuthPage = () => {
|
const renderAuthPage = () => {
|
||||||
return (
|
return (
|
||||||
<View className="min-h-screen bg-white flex flex-col">
|
<View className="min-h-screen bg-gray-50 flex flex-col">
|
||||||
{/* 顶部导航 */}
|
|
||||||
<View className="flex items-center justify-between px-4 py-3">
|
|
||||||
<View className="w-8" />
|
|
||||||
<Text className="text-lg font-medium text-gray-800">请登录</Text>
|
|
||||||
<View className="w-8" />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Logo 区域 */}
|
{/* Logo 区域 */}
|
||||||
<View className="flex-1 flex flex-col items-center justify-center px-8 -mt-20">
|
<View className="flex-1 flex flex-col items-center justify-center px-8 -mt-20">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<View className="w-20 h-20 mb-4">
|
<View className="w-20 h-20 mb-4">
|
||||||
<svg viewBox="0 0 100 100" className="w-full h-full">
|
|
||||||
<circle cx="50" cy="50" r="45" fill="#FF6B00" />
|
|
||||||
<path
|
|
||||||
d="M35 35 L50 65 L65 35"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="6"
|
|
||||||
fill="none"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 品牌名 */}
|
{/* 品牌名 */}
|
||||||
<Text className="text-2xl font-bold text-gray-900 mb-2">权大师</Text>
|
<Text className="text-2xl font-bold text-gray-900 mb-2">websopy</Text>
|
||||||
|
|
||||||
{/* 标语 */}
|
{/* 标语 */}
|
||||||
<Text className="text-sm text-gray-500 tracking-widest">让知识产权更简单</Text>
|
<Text className="text-sm text-gray-500 tracking-widest">构建下一代 AI 应用</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 底部操作区域 */}
|
{/* 底部操作区域 */}
|
||||||
<View className="px-6 pb-12">
|
<View className="px-6 pb-12">
|
||||||
{/* 主按钮 - 手机号授权登录 */}
|
{/* 主按钮 - 手机号授权登录 */}
|
||||||
<TaroButton
|
<div className={'flex flex-col w-full text-white rounded-full justify-between items-center my-2'} style={{ background: 'linear-gradient(to right, #7e22ce, #9333ea)'}}>
|
||||||
className="w-full h-12 bg-orange-500 text-white text-base font-medium rounded-lg flex items-center justify-center mb-4"
|
<Button open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
|
||||||
openType="getPhoneNumber"
|
授权手机号登录
|
||||||
onGetPhoneNumber={handleGetPhoneNumber}
|
</Button>
|
||||||
disabled={authLoading}
|
</div>
|
||||||
style={{ backgroundColor: '#FF6B00', border: 'none' }}
|
{/*<button*/}
|
||||||
>
|
{/* className="w-full h-12 bg-orange-500 text-white text-base font-medium rounded-lg flex items-center justify-center mb-4 border-0"*/}
|
||||||
{authLoading ? '授权中...' : '手机号授权登录'}
|
{/* open-type="getPhoneNumber"*/}
|
||||||
</TaroButton>
|
{/* onGetPhoneNumber={handleGetPhoneNumber}*/}
|
||||||
|
{/* disabled={authLoading}*/}
|
||||||
|
{/*>*/}
|
||||||
|
{/* {authLoading ? '授权中...' : '手机号授权登录'}*/}
|
||||||
|
{/*</button>*/}
|
||||||
|
|
||||||
{/* 取消按钮 */}
|
{/* 取消按钮 */}
|
||||||
<View
|
<View
|
||||||
|
|||||||
Reference in New Issue
Block a user