赵忠林
92bd00ea44
feat(components): 调整 QRLoginButton 默认属性并优化用户卡片布局 - 修改 QRLoginButton 组件的默认 type 为 'default'，size为 'small' - 在 UserCard 组件中注释掉 QRLoginButton 的引入和使用- 使用 Space 组件优化用户卡片中的按钮布局 - 替换原有条件渲染逻辑，统一使用按钮展示“扫码核销”功能 - 样式微调与代码格式化```
90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@nutui/nutui-react-taro';
|
|
import {View} from '@tarojs/components'
|
|
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 = 'default',
|
|
size = 'small',
|
|
text = '扫码登录',
|
|
showIcon = true,
|
|
onSuccess,
|
|
onError,
|
|
usePageMode = false
|
|
}) => {
|
|
const { startScan, isLoading, canScan } = useQRLogin();
|
|
|
|
// 处理点击事件
|
|
const handleClick = async () => {
|
|
console.log('处理点击事件handleClick', usePageMode)
|
|
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 || '扫码登录失败');
|
|
}
|
|
};
|
|
|
|
console.log(onSuccess,'onSuccess')
|
|
const disabled = !canScan() || isLoading;
|
|
|
|
return (
|
|
<Button
|
|
type={type}
|
|
size={size}
|
|
loading={isLoading}
|
|
disabled={disabled}
|
|
onClick={handleClick}
|
|
>
|
|
<View className="flex items-center justify-center">
|
|
{showIcon && !isLoading && (
|
|
<Scan className="mr-1" />
|
|
)}
|
|
{isLoading ? '扫码中...' : (disabled && !canScan() ? '请先登录' : text)}
|
|
</View>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default QRLoginButton;
|