|
|
@@ -245,6 +245,24 @@ function CreativePup(props: Props) {
|
|
|
}
|
|
|
}
|
|
|
break;
|
|
|
+ case 'pageUrl'://跳转落地页
|
|
|
+ newValues.linkPageSpec = {
|
|
|
+ ...newValues.linkPageSpec,
|
|
|
+ pageUrl: newValues.pageUrl
|
|
|
+ }
|
|
|
+ delete newValues.pageUrl
|
|
|
+ break;
|
|
|
+ case 'miniProgramId':
|
|
|
+ newValues.linkPageSpec = {
|
|
|
+ ...newValues.linkPageSpec,
|
|
|
+ miniProgramSpec: {
|
|
|
+ miniProgramId: newValues.miniProgramId,
|
|
|
+ miniProgramPath: newValues.miniProgramPath
|
|
|
+ }
|
|
|
+ }
|
|
|
+ delete newValues.miniProgramId
|
|
|
+ delete newValues.miniProgramPath
|
|
|
+ break;
|
|
|
}
|
|
|
}
|
|
|
if (!newValues.adcreativeElements) {
|
|
|
@@ -448,7 +466,9 @@ function CreativePup(props: Props) {
|
|
|
// 视频结束页 end_page
|
|
|
if (adcreative_template.adcreativeElements.some((item: { name: string }) => item.name === 'end_page')) {
|
|
|
// let endPageType =adcreative_template?.adcreativeElements?.filter(item=>item.name === 'end_page_type')[0]?.enumProperty?.enumeration
|
|
|
- values = { ...values, endPageType: 'END_PAGE_AVATAR_NICKNAME_HIGHLIGHT' }
|
|
|
+ if(!ok){
|
|
|
+ values = { ...values, endPageType: 'END_PAGE_AVATAR_NICKNAME_HIGHLIGHT' }
|
|
|
+ }
|
|
|
states = { ...states, sp_show: true }
|
|
|
}
|
|
|
setPupState(states)
|
|
|
@@ -495,8 +515,8 @@ function CreativePup(props: Props) {
|
|
|
// 数据回填
|
|
|
useEffect(() => {
|
|
|
if (!infoSet && dataInfo && adcreative_template_list?.length > 0) {
|
|
|
- let { adcreativeName, adcreativeTemplateId, conversionDataType, conversionTargetType, linkNameType, linkPageType, pageType, promotedObjectType, siteSet, adcreativeElements, overrideCanvasHeadOption } = dataInfo
|
|
|
- let { description, imageUrl, title, videoUrl, imageUrlList, endPage, shortVideoStruct } = adcreativeElements
|
|
|
+ let { adcreativeName, adcreativeTemplateId, conversionDataType, conversionTargetType, linkNameType, linkPageType, pageType, promotedObjectType, siteSet, adcreativeElements, overrideCanvasHeadOption, linkPageSpec } = dataInfo
|
|
|
+ let { description, imageUrl, title, videoUrl, imageUrlList, endPage, shortVideoStruct,brand } = adcreativeElements
|
|
|
let obj: any = {
|
|
|
adcreativeName,
|
|
|
siteSet,
|
|
|
@@ -537,6 +557,15 @@ function CreativePup(props: Props) {
|
|
|
if (overrideCanvasHeadOption) {
|
|
|
obj = { ...obj, overrideCanvasHeadOption }
|
|
|
}
|
|
|
+ if (linkPageSpec?.pageUrl) {
|
|
|
+ obj = { ...obj, pageUrl:linkPageSpec?.pageUrl }
|
|
|
+ }
|
|
|
+ if (linkPageSpec?.miniProgramSpec && linkPageSpec?.miniProgramSpec?.miniProgramPath) {
|
|
|
+ obj = { ...obj, miniProgramPath:linkPageSpec?.miniProgramSpec?.miniProgramPath, miniProgramId:linkPageSpec?.miniProgramSpec?.miniProgramId }
|
|
|
+ }
|
|
|
+ if(brand && brand.brandImg && brand.brandName){
|
|
|
+ obj={...obj,brand:brand.brandName+'_'+brand.brandImg,}
|
|
|
+ }
|
|
|
if (videoUrl) {
|
|
|
setVideoMaterialConfig({
|
|
|
cloudSize: [],
|
|
|
@@ -601,7 +630,6 @@ function CreativePup(props: Props) {
|
|
|
message.warning('请先选择视频文件！！！')
|
|
|
}
|
|
|
}, [videoMaterialConfig.list])
|
|
|
- console.log('linkPageList===>', linkPageList, linkPageType)
|
|
|
return <Modal
|
|
|
visible={visible}
|
|
|
title={type === 'add' ? '新建创意' : type === 'look' ? '创意详情' : '编辑创意'}
|
|
|
@@ -708,86 +736,110 @@ function CreativePup(props: Props) {
|
|
|
{((overrideCanvasHeadOption !== 'OPTION_CANVAS_OVERRIDE_CREATIVE') || siteSet.every((name: string) => name !== 'SITE_SET_MOMENTS')) && <div style={{ display: 'flex', flexFlow: 'column' }}>
|
|
|
{
|
|
|
adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image').map(item => {
|
|
|
- return <Form.Item label={<strong>{item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? '视频封面图' : item.description}</strong>} rules={[{ required: true, message: '请选择素材!' }]} key={item.name} name={item.name} style={item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? { order: 2 } : {}}>
|
|
|
+ return <Form.Item
|
|
|
+ label={<strong>{item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? '视频封面图' : item.description}</strong>}
|
|
|
+ key={item.name}
|
|
|
+ >
|
|
|
{/* 视频 */}
|
|
|
{
|
|
|
- (item.name === 'short_video1' || item.name === 'video') && <div className={`${styles.box} ${styles.video}`} onClick={() => {
|
|
|
- init({ mediaType: 'VIDEO', cloudSize: adcreativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]], maxSize: item.restriction.videoRestriction.fileSize * 1024 })
|
|
|
- setTimeout(() => {
|
|
|
- set_selectVideoVisible(true)
|
|
|
- setVideoMaterialConfig({
|
|
|
- ...videoMaterialConfig,
|
|
|
- type: item.name,
|
|
|
- max: 1,
|
|
|
- adcreativeTemplateId
|
|
|
- })
|
|
|
- }, 100)
|
|
|
- }}>
|
|
|
- <p>
|
|
|
- {
|
|
|
- videoMaterialConfig?.list[0] ? <video src={videoMaterialConfig?.list[0].url} controls /> : <>
|
|
|
- <span>{`推荐尺寸（${adcreativeTemplateId === 1708 ? 1280 : item.restriction.videoRestriction.minWidth} x ${adcreativeTemplateId === 1708 ? 720 : item.restriction.videoRestriction.minHeight}）`}</span>
|
|
|
- <span>{`${item.restriction.videoRestriction.fileFormat?.map(str => str?.replace('MEDIA_TYPE_', ''))};< ${item.restriction.videoRestriction.fileSize / 1024}M;时长 ≥ ${item.restriction.videoRestriction.minDuration}s,≤ ${item.restriction.videoRestriction.maxDuration}s,必须带有声音`}</span>
|
|
|
- </>
|
|
|
- }
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ (item.name === 'short_video1' || item.name === 'video') && <Form.Item
|
|
|
+ noStyle
|
|
|
+ rules={[{ required: true, message: '请选择素材!' }]}
|
|
|
+ name={item.name}
|
|
|
+ style={item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? { order: 2 } : {}}
|
|
|
+ >
|
|
|
+ <div className={`${styles.box} ${styles.video}`} onClick={() => {
|
|
|
+ init({ mediaType: 'VIDEO', cloudSize: adcreativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]], maxSize: item.restriction.videoRestriction.fileSize * 1024 })
|
|
|
+ setTimeout(() => {
|
|
|
+ set_selectVideoVisible(true)
|
|
|
+ setVideoMaterialConfig({
|
|
|
+ ...videoMaterialConfig,
|
|
|
+ type: item.name,
|
|
|
+ max: 1,
|
|
|
+ adcreativeTemplateId
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ }}>
|
|
|
+ <p>
|
|
|
+ {
|
|
|
+ videoMaterialConfig?.list[0] ? <video src={videoMaterialConfig?.list[0].url} controls /> : <>
|
|
|
+ <span>{`推荐尺寸（${adcreativeTemplateId === 1708 ? 1280 : item.restriction.videoRestriction.minWidth} x ${adcreativeTemplateId === 1708 ? 720 : item.restriction.videoRestriction.minHeight}）`}</span>
|
|
|
+ <span>{`${item.restriction.videoRestriction.fileFormat?.map(str => str?.replace('MEDIA_TYPE_', ''))};< ${item.restriction.videoRestriction.fileSize / 1024}M;时长 ≥ ${item.restriction.videoRestriction.minDuration}s,≤ ${item.restriction.videoRestriction.maxDuration}s,必须带有声音`}</span>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </Form.Item>
|
|
|
}
|
|
|
{/* 单图 */}
|
|
|
{
|
|
|
- item.name === 'image' && <div className={`${styles.box} ${styles.image}`} onClick={() => {
|
|
|
- init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
|
|
|
- setTimeout(() => {
|
|
|
- set_selectImgVisible(true)
|
|
|
- setImgMaterialConfig({
|
|
|
- ...imgMaterialConfig,
|
|
|
- type: item.name,
|
|
|
- max: 1,
|
|
|
- adcreativeTemplateId
|
|
|
- })
|
|
|
- }, 100)
|
|
|
+ item.name === 'image' && <Form.Item
|
|
|
+ noStyle
|
|
|
+ rules={[{ required: true, message: '请选择素材!' }]}
|
|
|
+ name={item.name}
|
|
|
+ style={item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? { order: 2 } : {}}
|
|
|
+ >
|
|
|
+ <div className={`${styles.box} ${styles.image}`} onClick={() => {
|
|
|
+ init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
|
|
|
+ setTimeout(() => {
|
|
|
+ set_selectImgVisible(true)
|
|
|
+ setImgMaterialConfig({
|
|
|
+ ...imgMaterialConfig,
|
|
|
+ type: item.name,
|
|
|
+ max: 1,
|
|
|
+ adcreativeTemplateId
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
|
|
|
- }}>
|
|
|
- <p>
|
|
|
- {imgMaterialConfig?.list[0] ? <img src={imgMaterialConfig?.list[0].url} /> : <>
|
|
|
- <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
|
|
|
- <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
|
|
|
- </>
|
|
|
- }
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ }}>
|
|
|
+ <p>
|
|
|
+ {imgMaterialConfig?.list[0] ? <img src={imgMaterialConfig?.list[0].url} /> : <>
|
|
|
+ <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
|
|
|
+ <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </Form.Item>
|
|
|
}
|
|
|
{
|
|
|
item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') && <Button onClick={videoToImgs} size='small' type='primary' disabled={!videoMaterialConfig.list[0]}>从视频生成封面图</Button>
|
|
|
}
|
|
|
{/* 多图 */}
|
|
|
{
|
|
|
- item.name === 'image_list' && <div className={`${styles.box} ${item.arrayProperty.maxNumber >= 3 ? styles.image_list : styles.image}`} onClick={() => {
|
|
|
- init({ mediaType: 'IMG', num: item.arrayProperty.maxNumber, cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
|
|
|
- setTimeout(() => {
|
|
|
- set_selectImgVisible(true)
|
|
|
- setImgMaterialConfig({
|
|
|
- ...imgMaterialConfig,
|
|
|
- type: item.name,
|
|
|
- max: item.arrayProperty.maxNumber,
|
|
|
- adcreativeTemplateId
|
|
|
- })
|
|
|
- }, 100)
|
|
|
- }}>
|
|
|
- {
|
|
|
- Array(item.arrayProperty.maxNumber).fill('').map((arr, index) => {
|
|
|
- return <p key={index}>
|
|
|
- {
|
|
|
- imgMaterialConfig?.list[index] ? <img src={imgMaterialConfig?.list[index].url} /> : <>
|
|
|
- <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
|
|
|
- <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
|
|
|
- </>
|
|
|
- }
|
|
|
+ item.name === 'image_list' && <Form.Item
|
|
|
+ noStyle
|
|
|
+ rules={[{ required: true, message: '请选择素材!' }]}
|
|
|
+ name={item.name}
|
|
|
+ style={item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? { order: 2 } : {}}
|
|
|
+ >
|
|
|
+ <div className={`${styles.box} ${item.arrayProperty.maxNumber >= 3 ? styles.image_list : styles.image}`} onClick={() => {
|
|
|
+ init({ mediaType: 'IMG', num: item.arrayProperty.maxNumber, cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
|
|
|
+ setTimeout(() => {
|
|
|
+ set_selectImgVisible(true)
|
|
|
+ setImgMaterialConfig({
|
|
|
+ ...imgMaterialConfig,
|
|
|
+ type: item.name,
|
|
|
+ max: item.arrayProperty.maxNumber,
|
|
|
+ adcreativeTemplateId
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ }}>
|
|
|
+ {
|
|
|
+ Array(item.arrayProperty.maxNumber).fill('').map((arr, index) => {
|
|
|
+ return <p key={index}>
|
|
|
+ {
|
|
|
+ imgMaterialConfig?.list[index] ? <img src={imgMaterialConfig?.list[index].url} /> : <>
|
|
|
+ <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
|
|
|
+ <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
|
|
|
+ </>
|
|
|
+ }
|
|
|
|
|
|
- </p>
|
|
|
- })
|
|
|
- }
|
|
|
- </div>
|
|
|
+ </p>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </Form.Item>
|
|
|
}
|
|
|
</Form.Item>
|
|
|
})
|
