refactor(passport): 优化二维码确认登录页面流程和界面

- 移除根据扫码参数自动确认登录逻辑,改为统一显示授权登录界面
- 简化用户登录判断,统一走手机号授权登录流程,提升用户体验
- 替换按钮组件由 TaroButton 改为 NutUI Button,统一样式风格
- 更新授权登录页面 UI,调整背景、品牌名和标语内容
- 优化手机号授权登录按钮样式,使用渐变色背景和中心对齐
This commit is contained in:
2026-04-08 02:35:17 +08:00
parent 43f5bee5b1
commit d87e9d3f13
2 changed files with 33 additions and 76 deletions

View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { View, Text, Button as TaroButton } from '@tarojs/components';
import { Loading, Card } from '@nutui/nutui-react-taro';
import { View, Text } from '@tarojs/components';
import { Loading, Card, Button } from '@nutui/nutui-react-taro';
import { Success, Failure, Tips, User, Checklist } from '@nutui/icons-react-taro';
import Taro, { useRouter } from '@tarojs/taro';
import { confirmQRLogin } from '@/api/passport/qr-login';
@@ -95,20 +95,10 @@ const QRConfirmPage: React.FC = () => {
setLoginMethod('url');
}
if (loginToken) {
setToken(loginToken);
console.log('[QRConfirm] 获取到 token:', loginToken);
// 扫码场景:自动确认登录
if (params.scene || params.token || params.qrCodeKey || params.q) {
console.log('[QRConfirm] 检测到扫码参数,自动确认登录');
setTimeout(() => {
handleAutoConfirm(loginToken);
}, 500);
}
} else {
setError('无效的登录链接');
}
// 扫码场景:直接显示授权登录界面
console.log('[QRConfirm] 显示授权登录界面');
setToken(loginToken);
setNeedAuth(true);
}, [router.params]);
/**
@@ -136,32 +126,11 @@ const QRConfirmPage: React.FC = () => {
console.log('[QRConfirm] loginByOpenId 结果:', wxLoginResult);
// 3. 判断用户是否存在
if (wxLoginResult.success && wxLoginResult.data && wxLoginResult.data.user) {
// 用户已注册,检查是否绑定手机号
const user = wxLoginResult.data.user;
console.log('[QRConfirm] 用户已注册:', user);
// 如果用户没有手机号,需要授权绑定
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);
}
// 3. 统一显示授权登录界面,让用户一键授权完成登录
// 无论用户是否注册、是否绑定手机号,都走授权登录流程
console.log('[QRConfirm] 显示手机号授权登录界面');
setNeedAuth(true);
setLoading(false);
} catch (err: any) {
console.error('[QRConfirm] 自动确认登录失败:', err);
setError(err.message || '自动确认登录失败');
@@ -468,12 +437,12 @@ const QRConfirmPage: React.FC = () => {
<Text className="block mb-2">5. </Text>
<Text className="block mb-2"></Text>
</View>
<TaroButton
<Button
className="mt-4 bg-orange-500 text-white rounded-full"
onClick={closeAgreement}
>
</TaroButton>
</Button>
</View>
);
}
@@ -497,12 +466,12 @@ const QRConfirmPage: React.FC = () => {
<Text className="block mb-2">5. </Text>
<Text className="block mb-2"></Text>
</View>
<TaroButton
<Button
className="mt-4 bg-orange-500 text-white rounded-full"
onClick={closeAgreement}
>
</TaroButton>
</Button>
</View>
);
}
@@ -513,50 +482,38 @@ const QRConfirmPage: React.FC = () => {
// 授权登录页面(参考权大师风格)
const renderAuthPage = () => {
return (
<View className="min-h-screen bg-white 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>
<View className="min-h-screen bg-gray-50 flex flex-col">
{/* Logo 区域 */}
<View className="flex-1 flex flex-col items-center justify-center px-8 -mt-20">
{/* Logo */}
<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>
{/* 品牌名 */}
<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 className="px-6 pb-12">
{/* 主按钮 - 手机号授权登录 */}
<TaroButton
className="w-full h-12 bg-orange-500 text-white text-base font-medium rounded-lg flex items-center justify-center mb-4"
openType="getPhoneNumber"
onGetPhoneNumber={handleGetPhoneNumber}
disabled={authLoading}
style={{ backgroundColor: '#FF6B00', border: 'none' }}
>
{authLoading ? '授权中...' : '手机号授权登录'}
</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)'}}>
<Button open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
</Button>
</div>
{/*<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"*/}
{/* open-type="getPhoneNumber"*/}
{/* onGetPhoneNumber={handleGetPhoneNumber}*/}
{/* disabled={authLoading}*/}
{/*>*/}
{/* {authLoading ? '授权中...' : '手机号授权登录'}*/}
{/*</button>*/}
{/* 取消按钮 */}
<View