xinlong-shop-taro/src/passport/qr-login/index.tsx

import React, { useState } from 'react';
import { View, Text } from '@tarojs/components';
import { Card, Divider, Button } from '@nutui/nutui-react-taro';
import { Scan, Success, Failure, Tips } from '@nutui/icons-react-taro';
import Taro from '@tarojs/taro';
import QRLoginScanner from '@/components/QRLoginScanner';
import { useUser } from '@/hooks/useUser';

/**
 * 扫码登录页面
 */
const QRLoginPage: React.FC = () => {
  const [loginHistory, setLoginHistory] = useState<any[]>([]);
  const { getDisplayName } = useUser();

  // 处理扫码成功
  const handleScanSuccess = (result: any) => {
    // 添加到登录历史
    const newRecord = {
      id: Date.now(),
      time: new Date().toLocaleString(),
      userInfo: result.userInfo,
      success: true
    };
    setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); // 只保留最近5条记录

    // 显示成功提示
    Taro.showToast({
      title: '登录确认成功',
      icon: 'success',
      duration: 2000
    });
  };

  // 处理扫码失败
  const handleScanError = (error: string) => {
    console.error('扫码登录失败:', error);

    // 添加到登录历史
    const newRecord = {
      id: Date.now(),
      time: new Date().toLocaleString(),
      error,
      success: false
    };
    setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]);
  };

  // 返回上一页
  // const handleBack = () => {
  //   Taro.navigateBack();
  // };

  // 清除历史记录
  const clearHistory = () => {
    setLoginHistory([]);
    Taro.showToast({
      title: '已清除历史记录',
      icon: 'success'
    });
  };

  return (
    <View className='qr-login-page min-h-screen bg-gray-50'>
      {/* 导航栏 */}
      {/*<NavBar*/}
      {/*  title="扫码登录"*/}
      {/*  leftShow*/}
      {/*  onBackClick={handleBack}*/}
      {/*  leftText={<ArrowLeft />}*/}
      {/*  className="bg-white"*/}
      {/*/>*/}

      {/* 主要内容 */}
      <View className='p-4'>
        {/* 用户信息卡片 */}
        <Card className='bg-white rounded-lg shadow-sm'>
          <View className='p-4'>
            <View className='flex items-center mb-4'>
              <View className='w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3'>
                <Scan className='text-blue-500' size='24' />
              </View>
              <View>
                <Text className='text-lg font-bold text-gray-800'>
                  {getDisplayName()}
                </Text>
                <Text className='text-sm text-gray-500'>
                  使用小程序扫码快速登录网页端
                </Text>
              </View>
            </View>

            {/* 扫码登录组件 */}
            <QRLoginScanner
              onSuccess={handleScanSuccess}
              onError={handleScanError}
              buttonText='开始扫码登录'
              showStatus
            />
          </View>
        </Card>

        {/* 使用说明 */}
        <Card className='bg-white rounded-lg shadow-sm'>
          <View className='p-4'>
            <View className='flex items-center mb-3'>
              <Tips className='text-orange-500 mr-2' />
              <Text className='font-medium text-gray-800'>使用说明</Text>
            </View>
            <View className='text-sm text-gray-600'>
              <Text className='block'>1. 在电脑或其他设备上打开网页端登录页面</Text>
              <Text className='block'>2. 点击"扫码登录"按钮，显示登录二维码</Text>
              <Text className='block'>3. 使用此功能扫描二维码即可快速登录</Text>
              <Text className='block'>4. 扫码成功后，网页端将自动完成登录</Text>
            </View>
          </View>
        </Card>

        {/* 登录历史 */}
        {loginHistory.length > 0 && (
          <Card className='bg-white rounded-lg shadow-sm'>
            <View className='p-4'>
              <View className='flex items-center justify-between mb-3'>
                <Text className='font-medium text-gray-800'>最近登录记录</Text>
                <Button
                  size='small'
                  type='default'
                  onClick={clearHistory}
                  className='text-xs'
                >
                  清除
                </Button>
              </View>

              <View>
                {loginHistory.map((record, index) => (
                  <View key={record.id}>
                    <View className='flex items-center justify-between'>
                      <View className='flex items-center'>
                        {record.success ? (
                          <Success className='text-green-500 mr-2' size='16' />
                        ) : (
                          <Failure className='text-red-500 mr-2' size='16' />
                        )}
                        <View>
                          <Text className='text-sm text-gray-800'>
                            {record.success ? '登录成功' : '登录失败'}
                          </Text>
                          {record.error && (
                            <Text className='text-xs text-red-500'>
                              {record.error}
                            </Text>
                          )}
                        </View>
                      </View>
                      <Text className='text-xs text-gray-500'>
                        {record.time}
                      </Text>
                    </View>
                    {index < loginHistory.length - 1 && (
                      <Divider className='my-2' />
                    )}
                  </View>
                ))}
              </View>
            </View>
          </Card>
        )}

        {/* 安全提示 */}
        <Card className='bg-yellow-50 border border-yellow-200 rounded-lg'>
          <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'>
                  安全提示
                </Text>
                <Text className='text-xs text-yellow-700'>
                  请确保只扫描来自官方网站的登录二维码，避免扫描来源不明的二维码，保护账户安全。
                </Text>
              </View>
            </View>
          </View>
        </Card>
      </View>
    </View>
  );
};

export default QRLoginPage;