xinlong-shop-taro/src_bak/components/QRLoginScanner.tsx

import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Button, Loading } from '@nutui/nutui-react-taro'
import { Failure, Scan, Success } from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import { confirmWechatQRLogin, parseQRContent } from '@/api/passport/qr-login'

export interface QRLoginScannerProps {
  onSuccess?: (result: any) => void
  onError?: (error: string) => void
  className?: string
  buttonText?: string
  showStatus?: boolean
}

type ScanState = 'idle' | 'scanning' | 'confirming' | 'success' | 'error'

const QRLoginScanner: React.FC<QRLoginScannerProps> = ({
  onSuccess,
  onError,
  className = '',
  buttonText = '开始扫码登录',
  showStatus = true,
}) => {
  const [state, setState] = useState<ScanState>('idle')
  const [error, setError] = useState('')
  const [result, setResult] = useState<any>(null)

  const reset = () => {
    setState('idle')
    setError('')
    setResult(null)
  }

  const startScan = async () => {
    try {
      setState('scanning')
      setError('')

      const scanRes = await Taro.scanCode({ onlyFromCamera: false, scanType: ['qrCode'] })
      const rawContent = scanRes.result || ''
      const token = parseQRContent(rawContent)
      const userId = Number(Taro.getStorageSync('UserId'))

      if (!token) {
        throw new Error('未识别到有效的登录二维码')
      }

      if (!userId) {
        throw new Error('当前用户未登录')
      }

      setState('confirming')
      const confirmRes = await confirmWechatQRLogin(token, userId)
      setResult(confirmRes)
      setState('success')
      onSuccess?.(confirmRes)
    } catch (err: any) {
      const message = err?.errMsg?.includes('cancel')
        ? '已取消扫码'
        : err?.message || '扫码登录失败'
      setError(message)
      setState('error')
      onError?.(message)
    }
  }

  const renderStatus = () => {
    switch (state) {
      case 'scanning':
        return (
          <View className="flex items-center justify-center text-blue-500">
            <Loading className="mr-2" />
            <Text>请扫描登录二维码...</Text>
          </View>
        )
      case 'confirming':
        return (
          <View className="flex items-center justify-center text-orange-500">
            <Loading className="mr-2" />
            <Text>正在确认登录...</Text>
          </View>
        )
      case 'success':
        return (
          <View className="flex items-center justify-center text-green-500">
            <Success className="mr-2" />
            <Text>登录确认成功</Text>
          </View>
        )
      case 'error':
        return (
          <View className="flex items-center justify-center text-red-500">
            <Failure className="mr-2" />
            <Text>{error || '扫码登录失败'}</Text>
          </View>
        )
      default:
        return null
    }
  }

  const loading = state === 'scanning' || state === 'confirming'

  return (
    <View className={`qr-login-scanner ${className}`}>
      <Button
        type="primary"
        size="large"
        loading={loading}
        onClick={state === 'success' ? reset : startScan}
        className="w-full"
      >
        {!loading && <Scan className="mr-2" />}
        {state === 'success' ? '重新扫码' : state === 'error' ? '重试' : buttonText}
      </Button>

      {showStatus && <View className="mt-4 text-center">{renderStatus()}</View>}

      {state === 'success' && result && (
        <View className="mt-4 rounded-lg bg-green-50 p-4">
          <Text className="text-sm text-green-700">扫码登录已确认，请返回网页端查看登录结果。</Text>
        </View>
      )}

      {state === 'idle' && (
        <View className="mt-4 text-center">
          <Text className="text-xs text-gray-500">扫描网页端展示的登录二维码，即可完成登录确认。</Text>
        </View>
      )}
    </View>
  )
}

export default QRLoginScanner