|
@@ -1,11 +1,11 @@
|
|
import { CloseCircleOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons"
|
|
import { CloseCircleOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons"
|
|
-import { Button, Card, Dropdown, Empty, Form, Menu, Modal, Popconfirm, Space, message } from "antd"
|
|
|
|
|
|
+import { Button, Card, Dropdown, Empty, Form, InputNumber, Menu, Modal, Popconfirm, Space, message } from "antd"
|
|
import React, { useEffect, useState } from "react"
|
|
import React, { useEffect, useState } from "react"
|
|
import styles from './index.less'
|
|
import styles from './index.less'
|
|
import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews"
|
|
import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews"
|
|
import { useModel } from "umi"
|
|
import { useModel } from "umi"
|
|
import SelectCloud from "@/pages/launchSystemNew/components/selectCloud"
|
|
import SelectCloud from "@/pages/launchSystemNew/components/selectCloud"
|
|
-import { getVideoImgUrl } from "@/utils/utils"
|
|
|
|
|
|
+import { chunkArray, chunkArray1, getVideoImgUrl } from "@/utils/utils"
|
|
import VideoFrameSelect from "@/pages/launchSystemV3/components/VideoFrameSelect"
|
|
import VideoFrameSelect from "@/pages/launchSystemV3/components/VideoFrameSelect"
|
|
import New1Radio from "@/pages/launchSystemV3/components/New1Radio"
|
|
import New1Radio from "@/pages/launchSystemV3/components/New1Radio"
|
|
|
|
|
|
@@ -51,6 +51,7 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
|
|
const [videoUploads, setVideoUploads] = useState<any>()
|
|
const [videoUploads, setVideoUploads] = useState<any>()
|
|
const [imgUploads, setImgUploads] = useState<any>()
|
|
const [imgUploads, setImgUploads] = useState<any>()
|
|
const [minNumber, setMinNumber] = useState<number>(3)
|
|
const [minNumber, setMinNumber] = useState<number>(3)
|
|
|
|
+ const [mCount, setMCount] = useState<number>(1)
|
|
/*********************************/
|
|
/*********************************/
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
@@ -156,7 +157,7 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
|
|
return <Modal
|
|
return <Modal
|
|
title={<Space>
|
|
title={<Space>
|
|
<strong style={{ fontSize: 20 }}>创意素材</strong>
|
|
<strong style={{ fontSize: 20 }}>创意素材</strong>
|
|
- {deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' && <>
|
|
|
|
|
|
+ {deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? <>
|
|
{videoUploads && Object.keys(videoUploads)?.length > 0 && <Button type="link" onClick={() => {
|
|
{videoUploads && Object.keys(videoUploads)?.length > 0 && <Button type="link" onClick={() => {
|
|
init({ mediaType: 'VIDEO', num: 100, cloudSize: creativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: videoUploads.restriction.videoRestriction.minWidth, height: videoUploads.restriction.videoRestriction.minHeight }]], maxSize: videoUploads.restriction.videoRestriction.fileSize * 1024 })
|
|
init({ mediaType: 'VIDEO', num: 100, cloudSize: creativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: videoUploads.restriction.videoRestriction.minWidth, height: videoUploads.restriction.videoRestriction.minHeight }]], maxSize: videoUploads.restriction.videoRestriction.fileSize * 1024 })
|
|
setMaterialConfig({
|
|
setMaterialConfig({
|
|
@@ -183,6 +184,49 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
|
|
setSelectVideoVisible(true)
|
|
setSelectVideoVisible(true)
|
|
}, 100)
|
|
}, 100)
|
|
}}>批量添加图片素材</Button>}
|
|
}}>批量添加图片素材</Button>}
|
|
|
|
+ </> : <>
|
|
|
|
+ <InputNumber placeholder="分配数量" value={mCount} max={15} onChange={(e) => setMCount(e)} />
|
|
|
|
+ <Button type="link" onClick={() => {
|
|
|
|
+ init({
|
|
|
|
+ mediaType: 'IMG', num: 100, cloudSize: [[
|
|
|
|
+ { relation: '=', width: 800, height: 800 },
|
|
|
|
+ { relation: '=', width: 1280, height: 720 },
|
|
|
|
+ { relation: '=', width: 720, height: 1280 },
|
|
|
|
+ { relation: '=', width: 960, height: 334 },
|
|
|
|
+ { relation: '=', width: 480, height: 320 },
|
|
|
|
+ ]], maxSize: 400 * 1024
|
|
|
|
+ })
|
|
|
|
+ setMaterialConfig({
|
|
|
|
+ ...materialConfig,
|
|
|
|
+ type: 'image',
|
|
|
|
+ max: 100,
|
|
|
|
+ index: 20000,
|
|
|
|
+ adcreativeTemplateId: creativeTemplateId,
|
|
|
|
+ isGroup: false
|
|
|
|
+ })
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ setSelectVideoVisible(true)
|
|
|
|
+ }, 100)
|
|
|
|
+ }}>批量添加图片素材</Button>
|
|
|
|
+ <Button type="link" onClick={() => {
|
|
|
|
+ init({
|
|
|
|
+ mediaType: 'VIDEO', num: 100, cloudSize: [[
|
|
|
|
+ { relation: '=', width: 1280, height: 720 },
|
|
|
|
+ { relation: '=', width: 720, height: 1280 }
|
|
|
|
+ ]], maxSize: 512000 * 1024
|
|
|
|
+ })
|
|
|
|
+ setMaterialConfig({
|
|
|
|
+ ...materialConfig,
|
|
|
|
+ type: 'video',
|
|
|
|
+ max: 100,
|
|
|
|
+ index: 20000,
|
|
|
|
+ adcreativeTemplateId: creativeTemplateId,
|
|
|
|
+ isGroup: false
|
|
|
|
+ })
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ setSelectVideoVisible(true)
|
|
|
|
+ }, 100)
|
|
|
|
+ }}>批量添加视频素材</Button>
|
|
</>}
|
|
</>}
|
|
{(dynamicGroup && dynamicGroup?.length > 1) && <Popconfirm
|
|
{(dynamicGroup && dynamicGroup?.length > 1) && <Popconfirm
|
|
title="是否清空?"
|
|
title="是否清空?"
|
|
@@ -226,6 +270,7 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
|
|
data={[{ label: '全账号复用', value: 0 }, { label: '平均分配到广告', value: 1 }, { label: '顺序分配到广告', value: 2 }]}
|
|
data={[{ label: '全账号复用', value: 0 }, { label: '平均分配到广告', value: 1 }, { label: '顺序分配到广告', value: 2 }]}
|
|
onChange={(e) => {
|
|
onChange={(e) => {
|
|
if (e === 2 && dynamicGroup?.length > adLength) {
|
|
if (e === 2 && dynamicGroup?.length > adLength) {
|
|
|
|
+ console.log('11111111-->', dynamicGroup?.length, adLength)
|
|
form.setFieldsValue({ dynamicGroup: dynamicGroup.slice(0, adLength) })
|
|
form.setFieldsValue({ dynamicGroup: dynamicGroup.slice(0, adLength) })
|
|
}
|
|
}
|
|
}}
|
|
}}
|
|
@@ -454,7 +499,7 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
|
|
return <div className={styles.boxList_body_item} key={index}>
|
|
return <div className={styles.boxList_body_item} key={index}>
|
|
<div className={styles.tag}>{length}图</div>
|
|
<div className={styles.tag}>{length}图</div>
|
|
<div className={styles.content}>
|
|
<div className={styles.content}>
|
|
- {item.map((l, i) => <img src={l?.url} key={i} style={{width: length === 6 ? 33.3 : 49.9}}/>)}
|
|
|
|
|
|
+ {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 33.3 : 49.9 }} />)}
|
|
</div>
|
|
</div>
|
|
<div className={styles.clear} onClick={() => { clearTem(num, index) }}><CloseCircleOutlined /></div>
|
|
<div className={styles.clear} onClick={() => { clearTem(num, index) }}><CloseCircleOutlined /></div>
|
|
</div>
|
|
</div>
|
|
@@ -509,20 +554,33 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
|
|
onChange={(content: any) => {
|
|
onChange={(content: any) => {
|
|
if (content.length > 0) {
|
|
if (content.length > 0) {
|
|
if (deliveryMode === 'DELIVERY_MODE_COMPONENT') { // 组件化创意
|
|
if (deliveryMode === 'DELIVERY_MODE_COMPONENT') { // 组件化创意
|
|
- let newDynamicGroup = dynamicGroup?.map((item: any, index: number) => {
|
|
|
|
- if (materialConfig.index === index) {
|
|
|
|
- let oldList = item?.list || []
|
|
|
|
- if (materialConfig.isGroup) {
|
|
|
|
- oldList = oldList.concat([content.map((m: any) => ({ id: m?.id, url: m?.url, materialType: 0 }))])
|
|
|
|
- return { list: oldList }
|
|
|
|
- } else {
|
|
|
|
- oldList = oldList.concat(content.map((m: any) => ({ id: m?.id, url: m?.url, materialType: 0 })))
|
|
|
|
- return { list: oldList }
|
|
|
|
- }
|
|
|
|
|
|
+ if (materialConfig.index === 20000) {
|
|
|
|
+ if (materialConfig.isGroup) {
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ let newSc = chunkArray1(content.map((m: any) => ({ id: m?.id, url: m?.url, materialType: 0 })), mCount)
|
|
|
|
+ let newList: any[] = newSc.map((item: any) => {
|
|
|
|
+ return { list: item }
|
|
|
|
+ })
|
|
|
|
+ let newDynamicGroup = (dynamicGroup || []).concat(newList)
|
|
|
|
+ form.setFieldsValue({ dynamicGroup: newDynamicGroup })
|
|
}
|
|
}
|
|
- return item
|
|
|
|
- })
|
|
|
|
- form.setFieldsValue({ dynamicGroup: newDynamicGroup })
|
|
|
|
|
|
+ } else {
|
|
|
|
+ let newDynamicGroup = dynamicGroup?.map((item: any, index: number) => {
|
|
|
|
+ if (materialConfig.index === index) {
|
|
|
|
+ let oldList = item?.list || []
|
|
|
|
+ if (materialConfig.isGroup) {
|
|
|
|
+ oldList = oldList.concat([content.map((m: any) => ({ id: m?.id, url: m?.url, materialType: 0 }))])
|
|
|
|
+ return { list: oldList }
|
|
|
|
+ } else {
|
|
|
|
+ oldList = oldList.concat(content.map((m: any) => ({ id: m?.id, url: m?.url, materialType: 0 })))
|
|
|
|
+ return { list: oldList }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return item
|
|
|
|
+ })
|
|
|
|
+ form.setFieldsValue({ dynamicGroup: newDynamicGroup })
|
|
|
|
+ }
|
|
} else { // 自定义创意
|
|
} else { // 自定义创意
|
|
if (materialConfig.index === 99999) {
|
|
if (materialConfig.index === 99999) {
|
|
if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
|
|
if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
|