vf_react/src/components/MiniProgramLauncher/QRCodeDisplay.js

/**
 * 小程序码显示组件
 * 用于 PC 端显示小程序码供用户扫描
 */
import React from 'react';
import {
  Box,
  VStack,
  Text,
  Image,
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Icon,
} from '@chakra-ui/react';
import { Smartphone } from 'lucide-react';

// 默认小程序码图片（可替换为实际的小程序码）
// 注意：需要在微信公众平台生成小程序码图片
const DEFAULT_QR_CODE = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=weixin://dl/business/?t=placeholder';

/**
 * PC 端小程序码显示组件
 * @param {Object} props
 * @param {string} [props.path] - 小程序页面路径（用于显示提示）
 * @param {string} [props.qrCodeUrl] - 小程序码图片 URL
 * @param {React.ReactNode} props.children - 按钮内容
 * @param {string} [props.title] - 弹窗标题
 * @param {string} [props.description] - 描述文案
 * @param {Object} [props.buttonProps] - 按钮属性
 */
const QRCodeDisplay = ({
  path = '',
  qrCodeUrl,
  children,
  title = '扫码打开小程序',
  description = '请使用微信扫描下方二维码',
  buttonProps = {},
}) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  // 使用传入的二维码或默认二维码
  const qrCode = qrCodeUrl || DEFAULT_QR_CODE;

  return (
    <>
      <Button
        onClick={onOpen}
        colorScheme="green"
        leftIcon={<Icon as={Smartphone} />}
        {...buttonProps}
      >
        {children || '打开小程序'}
      </Button>

      <Modal isOpen={isOpen} onClose={onClose} isCentered size="sm">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader textAlign="center">{title}</ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            <VStack spacing={4}>
              {/* 小程序码图片 */}
              <Box
                p={4}
                bg="white"
                borderRadius="xl"
                boxShadow="lg"
                border="1px solid"
                borderColor="gray.100"
              >
                <Image
                  src={qrCode}
                  alt="小程序码"
                  boxSize="200px"
                  objectFit="contain"
                  fallback={
                    <Box
                      boxSize="200px"
                      display="flex"
                      alignItems="center"
                      justifyContent="center"
                      bg="gray.100"
                      borderRadius="md"
                    >
                      <Text color="gray.500" fontSize="sm">
                        加载中...
                      </Text>
                    </Box>
                  }
                />
              </Box>

              {/* 说明文案 */}
              <VStack spacing={1}>
                <Text color="gray.700" fontWeight="medium">
                  {description}
                </Text>
                <Text color="gray.500" fontSize="sm">
                  打开微信，扫一扫即可访问
                </Text>
              </VStack>

              {/* 提示信息 */}
              <Box
                w="100%"
                p={3}
                bg="green.50"
                borderRadius="md"
                border="1px solid"
                borderColor="green.100"
              >
                <VStack spacing={1} align="start">
                  <Text fontSize="xs" color="green.700" fontWeight="medium">
                    温馨提示
                  </Text>
                  <Text fontSize="xs" color="green.600">
                    • 请确保手机已安装微信 App
                  </Text>
                  <Text fontSize="xs" color="green.600">
                    • 扫码后点击"打开小程序"按钮
                  </Text>
                  {path && (
                    <Text fontSize="xs" color="green.600">
                      • 将跳转到: {path}
                    </Text>
                  )}
                </VStack>
              </Box>
            </VStack>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
};

export default QRCodeDisplay;