wjx 2 年之前
父节点
当前提交
947aa779e2

+ 2 - 0
src/pages/launchSystemNew/launchManage/createAd/creativeCL/index.tsx

@@ -160,6 +160,8 @@ const CreativeCL: React.FC<Props> = (props) => {
                             textData={queryForm.textData}
                             sysAdcreative={queryForm?.taskMediaMaps[0]?.sysAdcreative}
                             value={queryForm?.texts}
+                            model={queryForm.model}
+                            material={queryForm?.materials}
                             onChange={(data) => {
                                 setQueryForm({ ...queryForm, texts: data })
                             }}

+ 52 - 5
src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/copywriting.tsx

@@ -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}>

+ 25 - 0
src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/index.less

@@ -114,4 +114,29 @@
     .clear {
         width: 20px;
     }
+}
+
+
+.groups {
+    height: 25px;
+    .otherGroup {
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+        gap: 4px;
+    }
+    .group {
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+        gap: 4px;
+
+        img {
+            height: 100%;
+        }
+
+        video {
+            height: 100%;
+        }
+    }
 }