forked from gxwebsoft/mp-10550
feat(admin): 实现管理员模式切换和扫码登录功能
- 新增管理员模式切换方案,统一管理所有管理员功能 - 实现扫码登录功能,支持用户通过小程序扫描网页端二维码快速登录 - 添加管理员面板组件,集中展示所有管理员功能 - 开发扫码登录按钮和扫描器组件,方便集成到不同页面 - 优化用户界面设计,提高管理员用户的使用体验
This commit is contained in:
87
src/components/QRLoginButton.tsx
Normal file
87
src/components/QRLoginButton.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import { Button } from '@nutui/nutui-react-taro';
|
||||
import { Scan } from '@nutui/icons-react-taro';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { useQRLogin } from '@/hooks/useQRLogin';
|
||||
|
||||
export interface QRLoginButtonProps {
|
||||
/** 按钮类型 */
|
||||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'default';
|
||||
/** 按钮大小 */
|
||||
size?: 'large' | 'normal' | 'small';
|
||||
/** 按钮文本 */
|
||||
text?: string;
|
||||
/** 是否显示图标 */
|
||||
showIcon?: boolean;
|
||||
/** 自定义样式类名 */
|
||||
className?: string;
|
||||
/** 点击成功回调 */
|
||||
onSuccess?: (result: any) => void;
|
||||
/** 点击失败回调 */
|
||||
onError?: (error: string) => void;
|
||||
/** 是否使用页面模式(跳转到专门页面) */
|
||||
usePageMode?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 扫码登录按钮组件
|
||||
*/
|
||||
const QRLoginButton: React.FC<QRLoginButtonProps> = ({
|
||||
type = 'primary',
|
||||
size = 'normal',
|
||||
text = '扫码登录',
|
||||
showIcon = true,
|
||||
className = '',
|
||||
onSuccess,
|
||||
onError,
|
||||
usePageMode = false
|
||||
}) => {
|
||||
const { startScan, isLoading, canScan } = useQRLogin();
|
||||
|
||||
// 处理点击事件
|
||||
const handleClick = async () => {
|
||||
if (usePageMode) {
|
||||
// 跳转到专门的扫码登录页面
|
||||
if (canScan()) {
|
||||
Taro.navigateTo({
|
||||
url: '/pages/qr-login/index'
|
||||
});
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '请先登录小程序',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接执行扫码登录
|
||||
try {
|
||||
await startScan();
|
||||
// 成功回调会在Hook内部处理
|
||||
} catch (error: any) {
|
||||
onError?.(error.message || '扫码登录失败');
|
||||
}
|
||||
};
|
||||
|
||||
const disabled = !canScan() || isLoading;
|
||||
|
||||
return (
|
||||
<Button
|
||||
type={type}
|
||||
size={size}
|
||||
loading={isLoading}
|
||||
disabled={disabled}
|
||||
onClick={handleClick}
|
||||
className={className}
|
||||
>
|
||||
{showIcon && !isLoading && (
|
||||
<Scan className="mr-1" />
|
||||
)}
|
||||
{isLoading ? '扫码中...' : (disabled && !canScan() ? '请先登录' : text)}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default QRLoginButton;
|
||||
Reference in New Issue
Block a user