|
@@ -1,14 +1,20 @@
|
|
|
import TextAideInput from "@/pages/launchSystemNew/components/textAideInput"
|
|
|
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
|
|
|
-import { Button, Collapse, Form, Modal } from "antd"
|
|
|
+import { Button, Collapse, Form, Modal, Space } from "antd"
|
|
|
import React, { useEffect, useState } from "react"
|
|
|
import styles from './index.less'
|
|
|
|
|
|
|
|
|
-
|
|
|
interface Props {
|
|
|
value?: any[]
|
|
|
textData?: any[],
|
|
|
+ model?: 'cross' | 'corres',
|
|
|
+ material?: {
|
|
|
+ label: string;
|
|
|
+ name: string;
|
|
|
+ restriction: any;
|
|
|
+ arrayProperty?: any;
|
|
|
+ }[],
|
|
|
sysAdcreative: any
|
|
|
onChange?: (data: any) => void
|
|
|
}
|
|
@@ -20,7 +26,7 @@ interface Props {
|
|
|
const Copywriting: React.FC<Props> = (props) => {
|
|
|
|
|
|
/******************************/
|
|
|
- const { onChange, textData = [], sysAdcreative, value } = props
|
|
|
+ const { onChange, textData = [], sysAdcreative, value, model, material } = props
|
|
|
const { adcreativeTemplateId } = sysAdcreative
|
|
|
const [visible, setVisible] = useState<boolean>(false)
|
|
|
const [form] = Form.useForm();
|
|
@@ -44,7 +50,7 @@ const Copywriting: React.FC<Props> = (props) => {
|
|
|
setVisible(false)
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
return <>
|
|
|
<span onClick={() => { setVisible(true) }}>{value && value?.length > 0 ? '编辑' : '添加'}</span>
|
|
|
{visible && <Modal visible={visible} onCancel={() => setVisible(false)} title="创意文案" width={700} onOk={handleOk}>
|
|
@@ -52,7 +58,48 @@ const Copywriting: React.FC<Props> = (props) => {
|
|
|
<Form.List name="texts">
|
|
|
{(fields, { add, remove }) => (<>
|
|
|
<Collapse activeKey={fields.map(field => field.name)} bordered={false}>
|
|
|
- {fields.map((field, num) => (<Collapse.Panel showArrow={false} header={`文案组${num + 1}`} key={(field.name).toString()} extra={fields?.length > 1 && <MinusCircleOutlined className={styles.clear} onClick={() => remove(field.name)} style={{ color: 'red' }} />}>
|
|
|
+ {fields.map((field, num) => (<Collapse.Panel
|
|
|
+ showArrow={false}
|
|
|
+ header={<Space>
|
|
|
+ <span>{`文案组${num + 1}`}</span>
|
|
|
+ <div className={styles.groups}>
|
|
|
+ {material && material?.length >= num + 1 && model === 'corres' && [material[num]]?.map((item: any, index: number) => {
|
|
|
+ let keys = Object.keys(item)
|
|
|
+ if (keys?.includes('imageUrlList')) {
|
|
|
+ return <div key={index} className={styles.group}>
|
|
|
+ {item?.imageUrlList?.map((url: string, index: number) => <div key={index}><img src={url} /></div>)}
|
|
|
+ </div>
|
|
|
+ } else if (keys?.includes('elementStory')) {
|
|
|
+ return <div key={index} className={styles.group}>
|
|
|
+ {item?.elementStory?.map((item: { imageUrl: string }, index: number) => <div key={index}><img src={item.imageUrl} /></div>)}
|
|
|
+ </div>
|
|
|
+ } else {
|
|
|
+ if (keys?.length > 1) {
|
|
|
+ return <div key={index} className={styles.otherGroup}>
|
|
|
+ {keys?.includes('imageUrl') && <div className={styles.group}><img src={item.imageUrl} /></div>}
|
|
|
+ {keys?.includes('videoUrl') && <div className={styles.group}><video src={item.videoUrl} /></div>}
|
|
|
+ {keys?.includes('shortVideo1Url') && <div className={styles.group}><video src={item.shortVideo1Url} /></div>}
|
|
|
+ </div>
|
|
|
+ } else {
|
|
|
+ if (keys?.includes('imageUrl')) {
|
|
|
+ return <div key={index} className={styles.group}><img src={item.imageUrl} /></div>
|
|
|
+ } else if (keys?.includes('videoUrl')) {
|
|
|
+ return <div key={index} className={styles.group}><video src={item.videoUrl} /></div>
|
|
|
+ } else if (keys?.includes('shortVideo1Url')) {
|
|
|
+ return <div key={index} className={styles.group}><video src={item.shortVideo1Url} /></div>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </Space>}
|
|
|
+ key={(field.name).toString()}
|
|
|
+ extra={fields?.length > 1 && <MinusCircleOutlined className={styles.clear}
|
|
|
+ onClick={() => remove(field.name)}
|
|
|
+ style={{ color: 'red' }}
|
|
|
+ />}
|
|
|
+ >
|
|
|
{textData?.map((item, index) => {
|
|
|
if (item.name === 'title') {
|
|
|
return <div key={'title' + item.fieldType}>
|