|
@@ -1,5 +1,10 @@
|
|
import React from "react"
|
|
import React from "react"
|
|
-import { Image, Popover, Space } from "antd"
|
|
|
|
|
|
+import { Space, Typography } from "antd"
|
|
|
|
+import style from '../tencentAdPutIn/create/index.less'
|
|
|
|
+import styles from '../tencentAdPutIn/create/Material/index.less'
|
|
|
|
+import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews";
|
|
|
|
+
|
|
|
|
+const { Text, Title } = Typography;
|
|
|
|
|
|
function cpTableConfig(): any {
|
|
function cpTableConfig(): any {
|
|
return [
|
|
return [
|
|
@@ -7,7 +12,7 @@ function cpTableConfig(): any {
|
|
title: '品牌形象',
|
|
title: '品牌形象',
|
|
dataIndex: 'brand',
|
|
dataIndex: 'brand',
|
|
key: 'brand',
|
|
key: 'brand',
|
|
- width: 110,
|
|
|
|
|
|
+ width: 120,
|
|
ellipsis: true,
|
|
ellipsis: true,
|
|
render: (a: any[]) => {
|
|
render: (a: any[]) => {
|
|
return a?.length > 0 ? <Space>
|
|
return a?.length > 0 ? <Space>
|
|
@@ -17,98 +22,104 @@ function cpTableConfig(): any {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '文本标题',
|
|
|
|
- dataIndex: 'title',
|
|
|
|
- key: 'title',
|
|
|
|
- width: 140,
|
|
|
|
|
|
+ title: '创意素材',
|
|
|
|
+ dataIndex: 'dynamicGroup',
|
|
|
|
+ key: 'dynamicGroup',
|
|
|
|
+ width: 400,
|
|
ellipsis: true,
|
|
ellipsis: true,
|
|
- render: (a: any[]) => {
|
|
|
|
- return a?.length > 0 ? a.map((item, index) => `标题${index + 1}:${item?.value?.content}`)?.toString() : '--'
|
|
|
|
|
|
+ render: (_: any, b: any) => {
|
|
|
|
+ let deliveryMode = b?.deliveryMode
|
|
|
|
+ if (b?.image || b?.video || b?.shortVideo || b?.elementStory || b?.imageList) {
|
|
|
|
+ if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
|
|
|
|
+ return <>
|
|
|
|
+ <div className={style.detail_body_m}>
|
|
|
|
+ {(b?.video || b?.shortVideo) ? <>
|
|
|
|
+ <div className={style.video}>
|
|
|
|
+ <VideoNews src={b?.video?.[0]?.value?.videoUrl || b?.shortVideo?.[0]?.value?.videoUrl} />
|
|
|
|
+ </div>
|
|
|
|
+ </> : b?.image ? <>
|
|
|
|
+ <div className={style.cover_image}>
|
|
|
|
+ <img src={b?.image?.[0]?.value?.imageUrl} />
|
|
|
|
+ </div>
|
|
|
|
+ </> : (b?.elementStory || b?.imageList) ? <>
|
|
|
|
+ {b?.[b?.imageList ? 'imageList' : 'elementStory']?.[0]?.value?.list?.map((item: { imageUrl: string }, index: undefined) => <div className={style.cover_image} key={index} style={{ width: 30, height: 24, minWidth: 32 }}>
|
|
|
|
+ <img src={item?.imageUrl} />
|
|
|
|
+ </div>)}
|
|
|
|
+ </> : null}
|
|
|
|
+ </div>
|
|
|
|
+ </>
|
|
|
|
+ } else {
|
|
|
|
+ return <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
|
|
|
|
+ {b?.imageList && b?.imageList.map((item: any, index: number) => {
|
|
|
|
+ return <div className={styles.boxList_body_item} key={'list' + index} style={{ width: 60, height: 60 }}>
|
|
|
|
+ <div className={styles.content} style={{ width: 60, height: 60 }}>
|
|
|
|
+ {item?.value?.list?.map((u: { imageUrl: string }, i: number, data: any[]) => <img src={u?.imageUrl} key={i} style={{ width: data.length === 6 ? 9.999 : 14.999 }} />)}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ })}
|
|
|
|
+ {b?.video && b?.video.map((item: any, index: number) => {
|
|
|
|
+ return <div className={styles.boxList_body_item} key={'video' + index} style={{ width: 60, height: 60 }}>
|
|
|
|
+ <div className={styles.content} style={{ width: 60, height: 60 }}>
|
|
|
|
+ <VideoNews src={item?.value?.videoUrl} style={{ width: 60, height: 60 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ })}
|
|
|
|
+ {b?.image && b?.image.map((item: any, index: number) => {
|
|
|
|
+ return <div className={styles.boxList_body_item} key={'image' + index} style={{ width: 60, height: 60 }}>
|
|
|
|
+ <div className={styles.content} style={{ width: 60, height: 60 }}><img src={item?.value?.imageUrl} /></div>
|
|
|
|
+ </div>
|
|
|
|
+ })}
|
|
|
|
+ </div>
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ return <Text style={{ fontSize: 12 }}>无需配置</Text>
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '文本描述',
|
|
|
|
|
|
+ title: '创意文案',
|
|
dataIndex: 'description',
|
|
dataIndex: 'description',
|
|
key: 'description',
|
|
key: 'description',
|
|
- width: 140,
|
|
|
|
- ellipsis: true,
|
|
|
|
- render: (a: any[]) => {
|
|
|
|
- return a?.length > 0 ? a.map((item, index) => `描述${index + 1}:${item?.value?.content}`)?.toString() : '--'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '单图片',
|
|
|
|
- dataIndex: 'image',
|
|
|
|
- key: 'image',
|
|
|
|
- width: 140,
|
|
|
|
- ellipsis: true,
|
|
|
|
- render: (a: any[]) => {
|
|
|
|
- return <div style={{ minHeight: 50 }}>
|
|
|
|
- {a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
|
|
|
|
- <Image.PreviewGroup>
|
|
|
|
- {a?.map((item, index) => <Image key={item?.componentId + '_' + index} src={item?.value?.imageUrl} height={45} />)}
|
|
|
|
- </Image.PreviewGroup>
|
|
|
|
- </div> : '--'}
|
|
|
|
- </div>
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '图集',
|
|
|
|
- dataIndex: 'imageList',
|
|
|
|
- key: 'imageList',
|
|
|
|
- width: 140,
|
|
|
|
- ellipsis: true,
|
|
|
|
- render: (a: any[]) => {
|
|
|
|
- return a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto', display: 'flex', gap: 10 }}>
|
|
|
|
- {a?.map((item, index) => <Image.PreviewGroup key={index}>
|
|
|
|
- {item?.value?.list?.map((list: any, i: number) => <Image key={i} src={list?.imageUrl} height={45} />)}
|
|
|
|
- </Image.PreviewGroup>)}
|
|
|
|
- </div> : '--'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '视频',
|
|
|
|
- dataIndex: 'video',
|
|
|
|
- key: 'video',
|
|
|
|
- width: 140,
|
|
|
|
- ellipsis: true,
|
|
|
|
- render: (a: any[]) => {
|
|
|
|
- return a?.length > 0 ? < Popover
|
|
|
|
- placement='right'
|
|
|
|
- content={< div >
|
|
|
|
- <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
|
|
|
|
- {a?.map((item, index) => <video key={index} src={item?.value?.videoUrl} style={{ width: 250 }} controls />)}
|
|
|
|
- </Space>
|
|
|
|
- </div >}
|
|
|
|
- destroyTooltipOnHide
|
|
|
|
- mouseEnterDelay={0.5}
|
|
|
|
- >
|
|
|
|
- <Space style={{ width: '100%' }}>
|
|
|
|
- <video src={a?.[0]?.value?.videoUrl} style={{ maxHeight: 40, maxWidth: 60 }} />
|
|
|
|
- </Space>
|
|
|
|
- </Popover> : '--'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '轮播',
|
|
|
|
- dataIndex: 'floatingZone',
|
|
|
|
- key: 'floatingZone',
|
|
|
|
- width: 150,
|
|
|
|
- ellipsis: true,
|
|
|
|
- render: (a: any[]) => {
|
|
|
|
- return a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
|
|
|
|
- {a?.map((item, index) => <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
|
|
- <div style={{ width: 40 }}>
|
|
|
|
- <Image src={item?.value?.floatingZoneImageUrl} width={40} height={40} />
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <span>{item?.value?.floatingZoneName}</span><br />
|
|
|
|
- <span>{item?.value?.floatingZoneDesc}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>)}
|
|
|
|
- </div> : '--'
|
|
|
|
|
|
+ width: 200,
|
|
|
|
+ render: (a: any[] = [], b: any) => {
|
|
|
|
+ let title: any[] = b?.title || []
|
|
|
|
+ if (a?.length || title?.length) {
|
|
|
|
+ return <div className={style.detail_body} style={{ height: 'auto' }}>
|
|
|
|
+ {title?.length > 0 && <div>
|
|
|
|
+ <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
|
|
|
|
+ {title.map((t: any, index: number) => <div className={style.text} key={index}><Text ellipsis={{ tooltip: true }}>{t?.value?.content}</Text></div>)}
|
|
|
|
+ </div>}
|
|
|
|
+ {a?.length > 0 && <div>
|
|
|
|
+ <Title level={5} style={{ fontSize: 12 }}>{'描述'}</Title>
|
|
|
|
+ {a.map((t: any, index: number) => <div className={style.text} key={index}><Text ellipsis={{ tooltip: true }}>{t?.value?.content}</Text></div>)}
|
|
|
|
+ </div>}
|
|
|
|
+ </div>
|
|
|
|
+ } else {
|
|
|
|
+ return '--'
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ // {
|
|
|
|
+ // title: '轮播',
|
|
|
|
+ // dataIndex: 'floatingZone',
|
|
|
|
+ // key: 'floatingZone',
|
|
|
|
+ // width: 150,
|
|
|
|
+ // ellipsis: true,
|
|
|
|
+ // render: (a: any[]) => {
|
|
|
|
+ // return a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
|
|
|
|
+ // {a?.map((item, index) => <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
|
|
+ // <div style={{ width: 40 }}>
|
|
|
|
+ // <Image src={item?.value?.floatingZoneImageUrl} width={40} height={40} />
|
|
|
|
+ // </div>
|
|
|
|
+ // <div>
|
|
|
|
+ // <span>{item?.value?.floatingZoneName}</span><br />
|
|
|
|
+ // <span>{item?.value?.floatingZoneDesc}</span>
|
|
|
|
+ // </div>
|
|
|
|
+ // </div>)}
|
|
|
|
+ // </div> : '--'
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
]
|
|
]
|
|
}
|
|
}
|
|
export default cpTableConfig
|
|
export default cpTableConfig
|