123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- import React, { useState } from 'react';
- import { Modal, Descriptions, Space, Button, Tooltip, message, Table } from 'antd';
- import { GzhPlanDataType, GzhPlanType } from '../../hooks/useGzhPlanList';
- import { CopyOutlined, PlayCircleOutlined, DownloadOutlined, LinkOutlined, QrcodeOutlined } from '@ant-design/icons';
- import { VideoItem } from '../types';
- import VideoPlayModal from '@src/views/publishContent/weCom/components/videoPlayModal';
- import modal from 'antd/es/modal';
- import http from '@src/http';
- import { getShareQrPic } from '@src/http/api';
- import copy from 'copy-to-clipboard';
- import { Typography } from 'antd';
- const { Text } = Typography;
- interface PunlishPlanDetailModalProps {
- visible: boolean;
- onCancel: () => void;
- planData: GzhPlanDataType;
- }
- const PunlishPlanDetailModal: React.FC<PunlishPlanDetailModalProps> = ({
- visible,
- onCancel,
- planData,
- }) => {
- const [isVideoPlayModalVisible, setIsVideoPlayModalVisible] = useState(false);
- const [activeVideo, setActiveVideo] = useState<VideoItem | null>(null);
- const columns = [
- {
- title: '视频标题',
- dataIndex: 'title',
- key: 'title',
- render: (title: string) => (
- <Space>
- <Text style={{ maxWidth: 200 }} ellipsis={{ tooltip: title }}>{title}</Text>
- <Tooltip title="复制标题">
- <Button
- type="text"
- icon={<CopyOutlined />}
- onClick={() => {
- if (copy(title)) {
- message.success('标题已复制');
- } else {
- message.error('复制失败');
- }
- }}
- size="small"
- />
- </Tooltip>
- </Space>
- ),
- },
- {
- title: '操作',
- key: 'action',
- render: (_: any, record: VideoItem) => (
- <Space wrap size="small">
- <Button type="link" icon={<PlayCircleOutlined />} onClick={() => playVideo(record)} size="small">播放</Button>
- <Button type="link" icon={<DownloadOutlined />} onClick={() => downloadCover(record)} size="small">下载封面</Button>
- <Button type="link" icon={<LinkOutlined />} onClick={() => copyPushLink(record)} size="small">复制推送链接</Button>
- <Button type="link" icon={<QrcodeOutlined />} onClick={() => showQRCode(record)} size="small">二维码</Button>
- </Space>
- ),
- },
- ];
- const playVideo = (video: VideoItem) => {
- setActiveVideo(video);
- setIsVideoPlayModalVisible(true);
- };
- const downloadCover = (video: VideoItem) => {
- if (video.cover) {
- const link = document.createElement('a');
- link.href = video.cover;
- // Attempt to infer filename, might need refinement
- const filename = video.cover.substring(video.cover.lastIndexOf('/') + 1) || `cover_${video.videoId}.jpg`;
- link.download = filename;
- link.target = '_blank'; // Open in new tab might be safer for some browsers
- link.rel = 'noopener noreferrer';
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- } else {
- message.warning('No cover image URL available.');
- }
- };
-
- const copyPushLink = (video: VideoItem) => {
- // Assuming video object might have a 'pushLink' property added by the parent component
- const linkToCopy = video.pageUrl || 'Push link not available'; // Updated placeholder
- if (video.pageUrl && copy(linkToCopy)) {
- message.success('推送链接已复制');
- } else if (!video.pageUrl) {
- message.warning('没有可复制的推送链接');
- } else {
- message.error('复制失败');
- }
- };
-
- const showQRCode = (video: VideoItem) => {
- http.get<string>(getShareQrPic, {
- params: {
- pageUrl: video.pageUrl,
- }
- }).then(res => {
- modal.info({
- title: '二维码',
- content: <img src={res.data} alt="二维码" />,
- });
- }).catch(err => {
- message.error(err.msg || '获取二维码失败');
- });
- };
- return (
- planData && visible && <Modal
- title="发布计划详情"
- open={true}
- destroyOnClose
- onCancel={onCancel}
- footer={null}
- width={800}
- >
- <Descriptions column={1} className='mb-4'>
- <Descriptions.Item label="发布计划类型">{planData.type.toString() === GzhPlanType.自动回复 ? '自动回复' : '服务号推送'}</Descriptions.Item>
- { planData.type.toString() === GzhPlanType.自动回复 && <Descriptions.Item label="场景">关注回复</Descriptions.Item> }
- <Descriptions.Item label="发布方式">{planData?.publishStage === 0 ? '平台发布' : '用户获取路径'}</Descriptions.Item>
- <Descriptions.Item label="视频选取方式">{planData?.selectVideoType === 0 ? '手动选取' : '自动选取'}</Descriptions.Item>
- <Descriptions.Item label="公众号名称">{planData.accountName}</Descriptions.Item>
- {
- planData.videoList?.length > 0 ?
- <Descriptions.Item label="发布内容" >
- <Table
- columns={columns}
- dataSource={planData.videoList?.map(v => ({ ...v, key: v.videoId }))} // Ensure each item has a unique key
- pagination={false} // Disable pagination if the list is expected to be short
- size="small"
- />
- <VideoPlayModal
- visible={isVideoPlayModalVisible}
- onClose={() => setIsVideoPlayModalVisible(false)}
- videoUrl={activeVideo?.video || ''}
- title={activeVideo?.title || ''}
- />
- </Descriptions.Item>
- : <Descriptions.Item label="发布内容">
- <Text className='text-gray-500'>视频由系统自动选取</Text>
- </Descriptions.Item>
- }
- </Descriptions>
- </Modal>
- );
- };
- export default PunlishPlanDetailModal;
|