refactor(qr-confirm): 简化二维码确认登录页面逻辑
- 移除未使用的组件和图标导入，减少包大小 - 注释掉登录卡片相关样式和元素，隐藏界面内容 - 删除手动确认登录函数及相关按钮渲染逻辑 - 去除状态图标、标题、描述和用户信息的渲染函数 - 删除所有操作按钮和安全提示组件渲染 - 取消整体页面布局，仅直接渲染授权页面部分 - 修改品牌文本首字母小写，统一风格
This commit is contained in:
@@ -1,7 +1,6 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { View, Text } from '@tarojs/components';
|
import { View, Text } from '@tarojs/components';
|
||||||
import { Loading, Card, Button } from '@nutui/nutui-react-taro';
|
import { Button } from '@nutui/nutui-react-taro';
|
||||||
import { Success, Failure, Tips, User } 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';
|
||||||
import { loginByOpenId } from '@/api/passport/wx-login';
|
import { loginByOpenId } from '@/api/passport/wx-login';
|
||||||
@@ -321,13 +320,6 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* 手动确认登录（主动扫码场景）
|
|
||||||
*/
|
|
||||||
const handleManualConfirm = () => {
|
|
||||||
handleConfirmLogin();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 取消登录
|
* 取消登录
|
||||||
*/
|
*/
|
||||||
@@ -545,7 +537,7 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
WebkitTextFillColor: 'transparent',
|
WebkitTextFillColor: 'transparent',
|
||||||
backgroundClip: 'text',
|
backgroundClip: 'text',
|
||||||
marginBottom: '8px',
|
marginBottom: '8px',
|
||||||
}}>WebSopy</Text>
|
}}>websopy</Text>
|
||||||
|
|
||||||
{/* 标语 */}
|
{/* 标语 */}
|
||||||
<Text style={{
|
<Text style={{
|
||||||
@@ -565,55 +557,55 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 登录卡片 */}
|
{/* 登录卡片 */}
|
||||||
<View style={{
|
{/*<View style={{*/}
|
||||||
width: '100%',
|
{/* width: '100%',*/}
|
||||||
maxWidth: '320px',
|
{/* maxWidth: '320px',*/}
|
||||||
background: 'rgba(255, 255, 255, 0.05)',
|
{/* background: 'rgba(255, 255, 255, 0.05)',*/}
|
||||||
backdropFilter: 'blur(20px)',
|
{/* backdropFilter: 'blur(20px)',*/}
|
||||||
WebkitBackdropFilter: 'blur(20px)',
|
{/* WebkitBackdropFilter: 'blur(20px)',*/}
|
||||||
borderRadius: '20px',
|
{/* borderRadius: '20px',*/}
|
||||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
{/* border: '1px solid rgba(255, 255, 255, 0.1)',*/}
|
||||||
padding: '24px',
|
{/* padding: '24px',*/}
|
||||||
marginBottom: '24px',
|
{/* marginBottom: '24px',*/}
|
||||||
}}>
|
{/*}}>*/}
|
||||||
{/* 提示图标 */}
|
{/* /!* 提示图标 *!/*/}
|
||||||
<View style={{
|
{/* <View style={{*/}
|
||||||
display: 'flex',
|
{/* display: 'flex',*/}
|
||||||
alignItems: 'center',
|
{/* alignItems: 'center',*/}
|
||||||
justifyContent: 'center',
|
{/* justifyContent: 'center',*/}
|
||||||
marginBottom: '16px',
|
{/* marginBottom: '16px',*/}
|
||||||
}}>
|
{/* }}>*/}
|
||||||
<View style={{
|
{/* <View style={{*/}
|
||||||
width: '48px',
|
{/* width: '48px',*/}
|
||||||
height: '48px',
|
{/* height: '48px',*/}
|
||||||
borderRadius: '50%',
|
{/* borderRadius: '50%',*/}
|
||||||
background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3))',
|
{/* background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3))',*/}
|
||||||
display: 'flex',
|
{/* display: 'flex',*/}
|
||||||
alignItems: 'center',
|
{/* alignItems: 'center',*/}
|
||||||
justifyContent: 'center',
|
{/* justifyContent: 'center',*/}
|
||||||
border: '1px solid rgba(168, 85, 247, 0.4)',
|
{/* border: '1px solid rgba(168, 85, 247, 0.4)',*/}
|
||||||
}}>
|
{/* }}>*/}
|
||||||
<Text style={{ fontSize: '24px' }}>📱</Text>
|
{/* <Text style={{ fontSize: '24px' }}>📱</Text>*/}
|
||||||
</View>
|
{/* </View>*/}
|
||||||
</View>
|
{/* </View>*/}
|
||||||
|
|
||||||
{/* 标题 */}
|
{/* /!* 标题 *!/*/}
|
||||||
<Text style={{
|
{/* <Text style={{*/}
|
||||||
textAlign: 'center',
|
{/* textAlign: 'center',*/}
|
||||||
color: '#fff',
|
{/* color: '#fff',*/}
|
||||||
fontSize: '18px',
|
{/* fontSize: '18px',*/}
|
||||||
fontWeight: '600',
|
{/* fontWeight: '600',*/}
|
||||||
marginBottom: '8px',
|
{/* marginBottom: '8px',*/}
|
||||||
}}>授权登录</Text>
|
{/* }}>授权登录</Text>*/}
|
||||||
|
|
||||||
{/* 描述 */}
|
{/* /!* 描述 *!/*/}
|
||||||
<Text style={{
|
{/* <Text style={{*/}
|
||||||
textAlign: 'center',
|
{/* textAlign: 'center',*/}
|
||||||
color: 'rgba(255, 255, 255, 0.6)',
|
{/* color: 'rgba(255, 255, 255, 0.6)',*/}
|
||||||
fontSize: '13px',
|
{/* fontSize: '13px',*/}
|
||||||
lineHeight: '1.5',
|
{/* lineHeight: '1.5',*/}
|
||||||
}}>点击下方按钮，使用微信手机号快速登录</Text>
|
{/* }}>点击下方按钮，使用微信手机号快速登录</Text>*/}
|
||||||
</View>
|
{/*</View>*/}
|
||||||
|
|
||||||
{/* 主按钮 - 渐变发光按钮 */}
|
{/* 主按钮 - 渐变发光按钮 */}
|
||||||
<View
|
<View
|
||||||
@@ -737,255 +729,10 @@ const QRConfirmPage: React.FC = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 渲染状态图标
|
|
||||||
const renderStatusIcon = () => {
|
|
||||||
if (loading || authLoading) return (
|
|
||||||
<View className="mb-6">
|
|
||||||
<View className="w-16 h-16 mx-auto flex items-center justify-center">
|
|
||||||
<Loading className="text-blue-500" />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (confirmed) return (
|
|
||||||
<View className="mb-6">
|
|
||||||
<View className="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center">
|
|
||||||
<Success className="text-green-500" size="32" />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (error && !needAuth) return (
|
|
||||||
<View className="mb-6">
|
|
||||||
<View className="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center">
|
|
||||||
<Failure className="text-red-500" size="32" />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (needAuth) {
|
|
||||||
// 需要授权时显示授权页面
|
|
||||||
return renderAuthPage();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View className="mb-6">
|
|
||||||
<View className="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center">
|
|
||||||
<User size="32" className="text-blue-500" />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取标题
|
|
||||||
const getTitle = () => {
|
|
||||||
if (loading || authLoading) return '正在处理...';
|
|
||||||
if (confirmed) return '登录确认成功';
|
|
||||||
if (needAuth) return ''; // 授权页面有自己的标题
|
|
||||||
if (error) return '登录确认失败';
|
|
||||||
return loginMethod === 'url' ? '扫码登录确认' : '确认登录';
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取描述
|
|
||||||
const getDescription = () => {
|
|
||||||
if (loading) return '请稍候，正在为您确认登录';
|
|
||||||
if (authLoading) return '正在授权登录...';
|
|
||||||
if (confirmed) return '您已成功确认登录，网页端将自动登录';
|
|
||||||
if (needAuth) return ''; // 授权页面有自己的描述
|
|
||||||
if (error) return error;
|
|
||||||
if (loginMethod === 'url') {
|
|
||||||
return '检测到登录请求，是否确认登录？';
|
|
||||||
}
|
|
||||||
const displayName = userInfo?.nickname || userInfo?.username || '当前用户';
|
|
||||||
return `确认使用 ${displayName} 登录网页端？`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 渲染操作按钮
|
|
||||||
const renderActions = () => {
|
|
||||||
// 需要授权登录时，按钮在授权页面内部渲染
|
|
||||||
if (needAuth) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
className="w-full h-12 bg-gray-300 text-white text-base font-medium rounded-lg flex items-center justify-center"
|
|
||||||
>
|
|
||||||
确认中...
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (confirmed) {
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
className="w-full h-12 bg-green-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
|
|
||||||
onClick={handleCancel}
|
|
||||||
>
|
|
||||||
完成
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<View className="space-y-3">
|
|
||||||
<View
|
|
||||||
className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
|
|
||||||
onClick={handleRetry}
|
|
||||||
>
|
|
||||||
重试
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
className="w-full h-12 bg-gray-100 text-gray-700 text-base font-medium rounded-lg flex items-center justify-center"
|
|
||||||
onClick={handleScan}
|
|
||||||
>
|
|
||||||
扫码其他二维码
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
className="w-full h-10 text-gray-500 text-sm flex items-center justify-center"
|
|
||||||
onClick={handleCancel}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loginMethod === 'scan') {
|
|
||||||
return (
|
|
||||||
<View className="space-y-3">
|
|
||||||
<View
|
|
||||||
className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
|
|
||||||
onClick={handleManualConfirm}
|
|
||||||
>
|
|
||||||
确认登录
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
className="w-full h-12 text-gray-500 text-base flex items-center justify-center"
|
|
||||||
onClick={handleCancel}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
|
|
||||||
onClick={handleManualConfirm}
|
|
||||||
>
|
|
||||||
确认登录
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 如果是授权页面，直接返回授权页面
|
// 如果是授权页面，直接返回授权页面
|
||||||
if (needAuth) {
|
return renderAuthPage();
|
||||||
return renderAuthPage();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
|
|
||||||
<View className="p-4">
|
|
||||||
{/* Logo/品牌区域 */}
|
|
||||||
<View className="text-center pt-8 pb-6">
|
|
||||||
<View className="w-20 h-20 mx-auto bg-white rounded-2xl shadow-lg flex items-center justify-center mb-4">
|
|
||||||
<Text className="text-3xl">🔐</Text>
|
|
||||||
</View>
|
|
||||||
<Text className="text-gray-400 text-sm">WebSoft Platform</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 主要内容卡片 */}
|
|
||||||
<Card className="bg-white rounded-2xl shadow-xl -mt-4">
|
|
||||||
<View className="p-6 text-center">
|
|
||||||
{/* 状态图标 */}
|
|
||||||
{renderStatusIcon()}
|
|
||||||
|
|
||||||
{/* 标题 */}
|
|
||||||
{getTitle() && (
|
|
||||||
<Text className="text-xl font-bold text-gray-800 mb-2 block">
|
|
||||||
{getTitle()}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 描述 */}
|
|
||||||
{getDescription() && (
|
|
||||||
<Text className="text-gray-600 mb-6 block text-sm">
|
|
||||||
{getDescription()}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 用户信息 */}
|
|
||||||
{!loading && !confirmed && !error && !needAuth && userInfo && (
|
|
||||||
<View className="bg-gray-50 rounded-xl p-4 mb-6">
|
|
||||||
<View className="flex items-center justify-center">
|
|
||||||
{userInfo.avatar ? (
|
|
||||||
<View
|
|
||||||
className="w-12 h-12 rounded-full bg-blue-100 mr-3 overflow-hidden"
|
|
||||||
style={{ backgroundImage: `url(${userInfo.avatar})`, backgroundSize: 'cover' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3">
|
|
||||||
<User className="text-blue-500" size="20" />
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
<View className="text-left">
|
|
||||||
<Text className="text-sm font-medium text-gray-800 block">
|
|
||||||
{userInfo.nickname || userInfo.username || '用户'}
|
|
||||||
</Text>
|
|
||||||
<Text className="text-xs text-gray-500 block">
|
|
||||||
ID: {userInfo.userId}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Token 信息 */}
|
|
||||||
{token && !loading && !confirmed && !needAuth && (
|
|
||||||
<View className="bg-blue-500 rounded-lg p-3 mb-4">
|
|
||||||
<Text className="text-xs text-blue-600">
|
|
||||||
登录令牌：{token.substring(0, 20)}...{token.substring(token.length - 10)}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 操作按钮 */}
|
|
||||||
{renderActions()}
|
|
||||||
</View>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 安全提示 */}
|
|
||||||
{!needAuth && (
|
|
||||||
<Card className="bg-yellow-50 border border-yellow-200 rounded-xl mt-4">
|
|
||||||
<View className="p-4">
|
|
||||||
<View className="flex items-start">
|
|
||||||
<Tips className="text-yellow-600 mr-2 mt-1" size="16" />
|
|
||||||
<View>
|
|
||||||
<Text className="text-sm font-medium text-yellow-800 mb-1 block">
|
|
||||||
安全提示
|
|
||||||
</Text>
|
|
||||||
<Text className="text-xs text-yellow-700 block">
|
|
||||||
请确认这是您本人的登录操作。如果不是，请点击取消并检查账户安全。
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 底部说明 */}
|
|
||||||
<View className="text-center mt-6 pb-8">
|
|
||||||
<Text className="text-xs text-gray-400">
|
|
||||||
如有问题，请联系管理员
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default QRConfirmPage;
|
export default QRConfirmPage;
|
||||||
|
|||||||
Reference in New Issue
Block a user