template-10584/src/components/QRLoginButton.tsx

import React from 'react';
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 || '扫码登录失败');
    }
  };

  console.log(onSuccess,'onSuccess')
  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;