|
|
@@ -1,5 +1,5 @@
|
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
|
|
-import { Modal, Form, Input, Divider, Select, Radio, Switch, Spin, List, Checkbox, Space, Button, message, Image, Empty } from 'antd'
|
|
|
+import { Modal, Form, Input, Divider, Select, Radio, Switch, Spin, List, Space, Button, message, Image, Empty } from 'antd'
|
|
|
import styles from './index.less'
|
|
|
import { useAjax } from '@/Hook/useAjax'
|
|
|
import { getText, get_adcreative_template, get_adcreative_template_list, get_tools_video_capture } from '@/services/launchAdq/global'
|
|
|
@@ -10,7 +10,6 @@ import { useModel } from 'umi'
|
|
|
import { ModalConfig } from '../../ad';
|
|
|
import { outAdcreativeTemplateIdFun } from '../../../localAd/adenum'
|
|
|
import { CreateAdProps } from '@/services/launchAdq/createAd'
|
|
|
-import { createSysAdcreative } from '@/services/launchAdq/creative'
|
|
|
import { creativeConfig, overrideCanvasHeadOptionEnum } from './config'
|
|
|
import BrandImage from './brandImage'
|
|
|
import HeadNickJump from './headNickJump'
|
|
|
@@ -35,13 +34,11 @@ function CreativePup(props: Props) {
|
|
|
let [template_checked, settemplate_checked] = useState<boolean>(dataInfo?.isTemplate || false)
|
|
|
let { promotedObjectType, sysAdgroup } = queryForm
|
|
|
let { siteSet } = sysAdgroup
|
|
|
- const { init } = useModel('useLaunchAdq.useBdMediaPup')
|
|
|
let arg = type === 'look' ? { footer: null } : {}
|
|
|
// 请求
|
|
|
const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
|
|
|
const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
|
|
|
const getTextLsit = useAjax((params) => getText(params))
|
|
|
- const addSysAdgroup = useAjax((params) => createSysAdcreative(params))
|
|
|
const getVideoCapture = useAjax((params) => get_tools_video_capture(params))
|
|
|
// 变量
|
|
|
const [adcreative_template, set_adcreative_template] = useState<AdcreativeTemplate>()
|
|
|
@@ -49,7 +46,6 @@ function CreativePup(props: Props) {
|
|
|
const [selectImgVisible, set_selectImgVisible] = useState(false)
|
|
|
const [selectVideoVisible, set_selectVideoVisible] = useState(false)
|
|
|
const [videoImgsVisbile, set_videoImgsVisbile] = useState(false)
|
|
|
- const [descriptionShow, setdescriptionshow] = useState(false)
|
|
|
const [endPageDescShow, setendPageDescnshow] = useState(false)
|
|
|
const [materialData, setMaterialData] = useState<{ label: string, name: string, restriction: any }[]>([])
|
|
|
const [textData, setTextData] = useState<any[]>([])
|
|
|
@@ -69,7 +65,6 @@ function CreativePup(props: Props) {
|
|
|
'https://test-adq-media.oss-cn-hangzhou.aliyuncs.com/image/545A4C2A5B874C82A9D1C0C063624AE5.jpg'
|
|
|
]
|
|
|
})
|
|
|
- const [titleShow, settitleshow] = useState(false)
|
|
|
const [form] = Form.useForm();
|
|
|
const [pupState, setPupState] = useState({
|
|
|
kp_show: false,
|
|
|
@@ -468,15 +463,7 @@ function CreativePup(props: Props) {
|
|
|
useEffect(() => {
|
|
|
let modal = document.querySelector('.myModal')
|
|
|
let onBiurdescription = (e: any) => {
|
|
|
- let d = document.querySelector('.my_description')
|
|
|
- let t = document.querySelector('.my_title')
|
|
|
let p = document.querySelector('.my_endPageDesc')
|
|
|
- if (!d?.contains(e.target)) {
|
|
|
- setdescriptionshow(false)
|
|
|
- }
|
|
|
- if (!t?.contains(e.target)) {
|
|
|
- settitleshow(false)
|
|
|
- }
|
|
|
if (!p?.contains(e.target)) {
|
|
|
setendPageDescnshow(false)
|
|
|
}
|
|
|
@@ -485,7 +472,6 @@ function CreativePup(props: Props) {
|
|
|
return () => {
|
|
|
modal?.removeEventListener('click', onBiurdescription)
|
|
|
}
|
|
|
-
|
|
|
}, [])
|
|
|
// 数据回填
|
|
|
useEffect(() => {
|
|
|
@@ -597,25 +583,6 @@ function CreativePup(props: Props) {
|
|
|
set_infoSet(true)
|
|
|
}
|
|
|
}, [dataInfo, adcreative_template_list, adcreative_template, infoSet])
|
|
|
- // 生成视频封面图
|
|
|
- const videoToImgs = useCallback(() => {
|
|
|
- if (videoMaterialConfig.list[0]) {
|
|
|
- set_videoImgsVisbile(true)
|
|
|
- // let url = videoMaterialConfig.list[0].url
|
|
|
- // fetch(url).then(res => res.blob()).then(async (blob) => {
|
|
|
- // let file = new File([blob], 'sp', { type: blob.type })
|
|
|
- // // let md5 = await getMD5(file)
|
|
|
- // let formData = new FormData()
|
|
|
- // formData.append('videoFile', file)
|
|
|
- // formData.append('number', '12')
|
|
|
- // getVideoCapture.run(formData).then(res => {
|
|
|
- // console.log(res)
|
|
|
- // })
|
|
|
- // })
|
|
|
- } else {
|
|
|
- message.warning('请先选择视频文件！！！')
|
|
|
- }
|
|
|
- }, [videoMaterialConfig.list])
|
|
|
return <Modal
|
|
|
visible={visible}
|
|
|
title={type === 'add' ? '新建创意' : type === 'look' ? '创意详情' : '编辑创意'}
|
|
|
@@ -626,10 +593,6 @@ function CreativePup(props: Props) {
|
|
|
footer={<Space>
|
|
|
<Button onClick={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}>取消</Button>
|
|
|
<Button type='primary' onClick={handleOk}>确定</Button>
|
|
|
- {/* {<Checkbox checked={template_checked} onChange={(e) => {
|
|
|
- let checked = e.target.checked
|
|
|
- settemplate_checked(checked)
|
|
|
- }}>存为模板</Checkbox>} */}
|
|
|
</Space>}
|
|
|
className='myModal'
|
|
|
{...arg}
|
|
|
@@ -688,84 +651,6 @@ function CreativePup(props: Props) {
|
|
|
</Form.Item> : <Form.Item label={<strong>品牌形象</strong>} name='brand' rules={[{ required: true, message: '请选择一个头像及昵称跳转页，与广告创意一起展示' }]}>
|
|
|
<BrandImage />
|
|
|
</Form.Item> : null}
|
|
|
- {/* ============================================================素材============================================================= */}
|
|
|
-
|
|
|
- {/* 标题 */}
|
|
|
- {/* {
|
|
|
- adcreative_template?.adcreativeElements?.filter(item => item.name === 'title').map(item => {
|
|
|
- return <div key={item.fieldType}>
|
|
|
- <Form.Item label={<strong>{item.description}(选填)</strong>} className={'my_title'} >
|
|
|
- <Form.Item name={item.name} rules={[{ pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`)), message: '请输入正确的' + item.description }]} noStyle>
|
|
|
- <Input
|
|
|
- placeholder={'请输入' + item.description}
|
|
|
- style={{ width: 500 }}
|
|
|
- allowClear
|
|
|
- onFocus={() => {
|
|
|
- settitleshow(true)
|
|
|
- textList({ maxTextLength: item.restriction.textRestriction.maxLength })
|
|
|
- }}
|
|
|
- onChange={(e) => {
|
|
|
- let value = e.target.value
|
|
|
- textList({ maxTextLength: item.restriction.textRestriction.maxLength, keyword: value })
|
|
|
- }}
|
|
|
- />
|
|
|
- </Form.Item>
|
|
|
- <span>{`${titles?.length ?? 0}/${item.restriction.textRestriction.maxLength}`}</span>
|
|
|
- {
|
|
|
- titleShow && <List
|
|
|
- loading={getTextLsit?.loading}
|
|
|
- size="small"
|
|
|
- style={{ maxHeight: 300, overflowX: 'auto' }}
|
|
|
- bordered
|
|
|
- dataSource={getTextLsit?.data?.returnTexts}
|
|
|
- renderItem={(item: any) => <List.Item onClick={() => {
|
|
|
- form.setFieldsValue({ title: item.text })
|
|
|
- settitleshow(false)
|
|
|
- }}><span >{item.text}{item.tag && <span className={styles.crt}>{'CTR 高'}</span>}</span></List.Item>}
|
|
|
- />
|
|
|
- }
|
|
|
- </Form.Item>
|
|
|
- </div>
|
|
|
- })
|
|
|
- } */}
|
|
|
- {//过滤了不必传和品牌名称，品牌标识图（外部传）短视频结构（组装使用）
|
|
|
- // adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'description').map(item => {
|
|
|
- // let maxNum = adcreativeTemplateId === 1708 || adcreativeTemplateId === 1707 ? pupState.xd_show ? 10 : item.restriction.textRestriction.maxLength : item.restriction.textRestriction.maxLength
|
|
|
- // return <div key={item.fieldType}>
|
|
|
- // <Form.Item label={<strong>{item.description}</strong>} className={'my_description'}>
|
|
|
- // <Form.Item name={item.name} noStyle rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${maxNum}}`)), message: '请输入正确的' + item.description }]}>
|
|
|
- // <Input
|
|
|
- // placeholder={'请输入' + item.description}
|
|
|
- // style={{ width: 500 }}
|
|
|
- // onFocus={() => {
|
|
|
- // setdescriptionshow(true)
|
|
|
- // textList({ maxTextLength: maxNum })
|
|
|
- // }}
|
|
|
- // onChange={(e) => {
|
|
|
- // let value = e.target.value
|
|
|
- // textList({ maxTextLength: maxNum, keyword: value })
|
|
|
- // }}
|
|
|
- // allowClear
|
|
|
- // />
|
|
|
- // </Form.Item>
|
|
|
- // <span>{`${description?.length ?? 0}/${maxNum}`}</span>
|
|
|
- // {
|
|
|
- // descriptionShow && <List
|
|
|
- // loading={getTextLsit?.loading}
|
|
|
- // size="small"
|
|
|
- // style={{ maxHeight: 300, overflowX: 'auto' }}
|
|
|
- // bordered
|
|
|
- // dataSource={getTextLsit?.data?.returnTexts}
|
|
|
- // renderItem={(item: any) => <List.Item onClick={(e: any) => {
|
|
|
- // form.setFieldsValue({ description: item.text })
|
|
|
- // setdescriptionshow(false)
|
|
|
- // }}><span >{item.text}{item.tag && <span className={styles.crt}>{'CTR 高'}</span>}</span></List.Item>}
|
|
|
- // />
|
|
|
- // }
|
|
|
- // </Form.Item>
|
|
|
- // </div>
|
|
|
- // })
|
|
|
- }
|
|
|
{/* ============================================================落地页============================================================= */}
|
|
|
{adcreativeTemplateId ? <Form.Item label={<strong>落地页</strong>} name='pageType' >
|
|
|
<Radio.Group>
|
