151 lines
4.7 KiB
TypeScript
151 lines
4.7 KiB
TypeScript
import { MyBetaModalFormProps, renderTextHelper } from '@/common';
|
|
import { MyModal } from '@/components/MyModal';
|
|
import { BannersRedirectTypeEnum, BannersTypeEnum } from '@/gen/Enums';
|
|
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
|
|
import { Image, Space, Typography } from 'antd';
|
|
|
|
const { Text } = Typography;
|
|
|
|
export default function info(props: MyBetaModalFormProps) {
|
|
// 根据类型渲染内容
|
|
const renderContent = () => {
|
|
const { type, source } = props?.item || {};
|
|
if (!source || !Array.isArray(source) || source.length === 0) {
|
|
return <Text type="secondary">暂无内容</Text>;
|
|
}
|
|
|
|
switch (type) {
|
|
case 'Text':
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: '12px',
|
|
backgroundColor: '#f5f5f5',
|
|
borderRadius: '6px',
|
|
maxWidth: '100%',
|
|
wordBreak: 'break-word',
|
|
}}
|
|
>
|
|
<Text>{source?.[0]?.text}</Text>
|
|
</div>
|
|
);
|
|
|
|
case 'Image':
|
|
return (
|
|
<Image.PreviewGroup>
|
|
{source.map((res: any, index: number) => (
|
|
<Space key={index} style={{ paddingRight: 10 }}>
|
|
<Image height={80} src={res?.url || ''} />
|
|
</Space>
|
|
))}
|
|
</Image.PreviewGroup>
|
|
);
|
|
|
|
case 'Video':
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: '8px',
|
|
maxWidth: '100%',
|
|
}}
|
|
>
|
|
{source.map((res: any, index: number) => (
|
|
<video
|
|
key={index}
|
|
width={240}
|
|
height={180}
|
|
controls
|
|
style={{
|
|
objectFit: 'cover',
|
|
borderRadius: '6px',
|
|
maxWidth: '100%',
|
|
}}
|
|
>
|
|
<source src={res?.url || ''} />
|
|
您的浏览器不支持视频播放
|
|
</video>
|
|
))}
|
|
</div>
|
|
);
|
|
default:
|
|
return <Text type="secondary">未知内容类型</Text>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<MyModal
|
|
title={props.title || '查看'}
|
|
width="90vw"
|
|
style={{ maxWidth: '1000px' }}
|
|
node={
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
<ProCard bordered>
|
|
<ProDescriptions
|
|
bordered
|
|
column={{ xs: 1, sm: 2, md: 3 }}
|
|
size="small"
|
|
>
|
|
<ProDescriptions.Item label="内容名称" span={3}>
|
|
{props?.item?.name || '-'}
|
|
</ProDescriptions.Item>
|
|
|
|
<ProDescriptions.Item label="展示类型">
|
|
<renderTextHelper.Tag
|
|
Enums={BannersTypeEnum}
|
|
value={props?.item?.type}
|
|
key="type"
|
|
/>
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item label="开始时间">
|
|
{props?.item?.start_time || '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item label="结束时间">
|
|
{props?.item?.end_time || '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item label="排序">
|
|
{props?.item?.sort || '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item label="创建时间">
|
|
{props?.item?.create_at || '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item label="更新时间">
|
|
{props?.item?.updated_at || '-'}
|
|
</ProDescriptions.Item>
|
|
</ProDescriptions>
|
|
</ProCard>
|
|
|
|
<ProCard title="跳转设置" bordered>
|
|
<ProDescriptions
|
|
bordered
|
|
column={{ xs: 1, sm: 2, md: 3 }}
|
|
size="small"
|
|
>
|
|
<ProDescriptions.Item label="跳转类型">
|
|
<renderTextHelper.Tag
|
|
Enums={BannersRedirectTypeEnum}
|
|
value={props?.item?.redirect_type}
|
|
key="redirect_type"
|
|
/>
|
|
</ProDescriptions.Item>
|
|
{props?.item?.redirect_type === 'AnotherMiniProgram' && (
|
|
<ProDescriptions.Item label="小程序AppID" span={2}>
|
|
{props?.item?.app_id || '-'}
|
|
</ProDescriptions.Item>
|
|
)}
|
|
<ProDescriptions.Item label="跳转链接" span={2}>
|
|
{props?.item?.redirect_path || '-'}
|
|
</ProDescriptions.Item>
|
|
</ProDescriptions>
|
|
</ProCard>
|
|
|
|
<ProCard title="广告内容" bordered>
|
|
<div style={{ padding: '16px 0' }}>{renderContent()}</div>
|
|
</ProCard>
|
|
</Space>
|
|
}
|
|
/>
|
|
);
|
|
}
|