shenwu há 2 anos atrás
pai
commit
28aca7b885

+ 3 - 0
src/pages/launchSystemNew/launchManage/localAd/creative/index.less

@@ -40,6 +40,9 @@
         img{
             height: 100%;
         }
+        video{
+            height: 100%;
+        }
     }
 }
 

+ 58 - 47
src/pages/launchSystemNew/launchManage/localAd/creative/modal.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 /**创意模板*/
 function CreativeModal(props: Props) {
-    let { visible,  confirmLoading, PupFn, callback ,type,dataInfo} = props
+    let { visible, confirmLoading, PupFn, callback, type, dataInfo } = props
     const { init } = useModel('useLaunchAdq.useBdMediaPup')
     let arg = type === 'look' ? { footer: null } : {}
     // 请求
@@ -35,7 +35,7 @@ function CreativeModal(props: Props) {
     const [descriptionShow, setdescriptionshow] = useState(false)
     const [endPageDescShow, setendPageDescnshow] = useState(false)
     const [titleShow, settitleshow] = useState(false)
-    const [login,setlogin]=useState(true)
+    const [login, setlogin] = useState(true)
     const [form] = Form.useForm();
     const [pupState, setPupState] = useState({
         kp_show: false,
@@ -87,7 +87,7 @@ function CreativeModal(props: Props) {
                         break;
                     case 'image_list'://图素材
                         newValues.adcreativeElements = {
-                            imageUrlList: materialConfig.list?.map(item=>item.url),
+                            imageUrlList: materialConfig.list?.map(item => item.url),
                             description: newValues.description,
                         }
                         delete newValues[key]
@@ -105,6 +105,14 @@ function CreativeModal(props: Props) {
                     case 'title'://文案
                         newValues.adcreativeElements = { ...newValues.adcreativeElements, title: newValues.title }
                         break;
+                    case 'endPageType'://视频结束l类型
+                        newValues.adcreativeElements = { ...newValues.adcreativeElements, endPage: {...newValues.adcreativeElements.endPage,endPageType:newValues.endPageType} }
+                        delete newValues[key]
+                        break;
+                    case 'endPageDesc'://视频结束文案
+                        newValues.adcreativeElements = { ...newValues.adcreativeElements, endPage: {...newValues.adcreativeElements.endPage,endPageDesc:newValues.endPageDesc} }
+                        delete newValues[key]
+                        break;
                 }
             }
             delete newValues.description //删除外层文案
@@ -287,76 +295,79 @@ function CreativeModal(props: Props) {
 
     }, [])
     // 数据回填
-    useEffect(()=>{
-        if(dataInfo && adcreative_template_list?.length >0 && adcreative_template){
-            let {adcreativeName,adcreativeTemplateId,conversionDataType,conversionTargetType,linkNameType,linkPageType,pageType,promotedObjectType,siteSet,adcreativeElements} = dataInfo
-            let {description,imageUrl,title,videoUrl,imageUrlList} = adcreativeElements
-            let obj:any={
+    useEffect(() => {
+        if (dataInfo && adcreative_template_list?.length > 0 && adcreative_template) {
+            let { adcreativeName, adcreativeTemplateId, conversionDataType, conversionTargetType, linkNameType, linkPageType, pageType, promotedObjectType, siteSet, adcreativeElements } = dataInfo
+            let { description, imageUrl, title, videoUrl, imageUrlList,endPage } = adcreativeElements
+            let obj: any = {
                 adcreativeName,
                 siteSet,
                 promotedObjectType,
                 adcreativeTemplateId,
             }
-            if([720,721,618,1708].some(n=>n === adcreativeTemplateId)){
-                obj={...obj,adcreativeElementsType:'视频'}
-            }else{
-                obj={...obj,adcreativeElementsType:'图片'}
+            if ([720, 721, 618, 1708].some(n => n === adcreativeTemplateId)) {
+                obj = { ...obj, adcreativeElementsType: '视频' }
+            } else {
+                obj = { ...obj, adcreativeElementsType: '图片' }
+            }
+            if (conversionDataType) {
+                obj = { ...obj, conversionDataType, dataShow: true }
             }
-            if(conversionDataType){
-                obj={...obj,conversionDataType,dataShow:true}
+            if (conversionTargetType) {
+                obj = { ...obj, conversionTargetType, dataShow: true }
             }
-            if(conversionTargetType){
-                obj={...obj,conversionTargetType,dataShow:true}
+            if (linkNameType) {
+                obj = { ...obj, linkNameType, actionBtn: true }
             }
-            if(linkNameType){
-                obj={...obj,linkNameType,actionBtn:true}
+            if (linkPageType) {
+                obj = { ...obj, linkPageType, actionBtn: true }
             }
-            if(linkPageType){
-                obj={...obj,linkPageType,actionBtn:true}
+            if (pageType) {
+                obj = { ...obj, pageType }
             }
-            if(pageType){
-                obj={...obj,pageType}
+            if (description) {
+                obj = { ...obj, description }
             }
-            if(description){
-                obj={...obj,description}
+            if (title) {
+                obj = { ...obj, title }
             }
-            if(title){
-                obj={...obj,title}
+            if(endPage){
+                obj = { ...obj, videoOver:true ,...endPage}
             }
-            if(videoUrl){
+            if (videoUrl) {
                 setMaterialConfig({
-                    cloudSize:[],
-                    list:[{url:videoUrl}],
-                    max:1,
-                    type:'video',
+                    cloudSize: [],
+                    list: [{ url: videoUrl }],
+                    max: 1,
+                    type: 'video',
                     adcreativeTemplateId
                 })
             }
-            if(imageUrl){
+            if (imageUrl) {
                 setMaterialConfig({
-                    cloudSize:[],
-                    list:[{url:imageUrl}],
-                    max:1,
-                    type:'image',
+                    cloudSize: [],
+                    list: [{ url: imageUrl }],
+                    max: 1,
+                    type: 'image',
                     adcreativeTemplateId
                 })
             }
-            if(imageUrlList){
+            if (imageUrlList) {
                 setMaterialConfig({
-                    cloudSize:[],
-                    list:imageUrlList?.map((url: any)=>({url})),
-                    max:imageUrlList.length,
-                    type:'image_list',
+                    cloudSize: [],
+                    list: imageUrlList?.map((url: any) => ({ url })),
+                    max: imageUrlList.length,
+                    type: 'image_list',
                     adcreativeTemplateId
                 })
             }
             form.setFieldsValue(obj)
         }
-    },[dataInfo,adcreative_template_list,adcreative_template])
+    }, [dataInfo, adcreative_template_list, adcreative_template])
     return <Modal
         visible={visible}
         title={type === 'add' ? '新建创意' : type === 'look' ? '创意详情' : '编辑创意'}
-        onCancel={() => { PupFn({ visible: false,dataInfo:null,type:'add' }) }}
+        onCancel={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}
         onOk={handleOk}
         width={1200}
         confirmLoading={confirmLoading}
@@ -426,8 +437,8 @@ function CreativeModal(props: Props) {
                                             <div className={styles.adcreative_template_item}>
                                                 {item.isGeneral && <span style={{ color: '#4080ff', fontSize: 10 }}>所选版位通投</span>}
                                                 <img src={item.adcreativeSampleImage} />
-                                                <span style={{fontSize:12,height:20,lineHeight:'20px'}}>{item.adcreativeTemplateAppellation}</span>
-                                                <span style={{fontSize:12,height:20,lineHeight:'20px'}}>{item.adcreativeTemplateId}</span>
+                                                <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateAppellation}</span>
+                                                <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateId}</span>
                                             </div>
                                         </Radio.Button>
                                     })
@@ -457,7 +468,7 @@ function CreativeModal(props: Props) {
                                         }}>
                                             <p>
                                                 {
-                                                    materialConfig?.list[0] ? <video src={materialConfig?.list[0].url} /> : <>
+                                                    materialConfig?.list[0] ? <video src={materialConfig?.list[0].url} controls /> : <>
                                                         <span>{`推荐尺寸(${item.restriction.videoRestriction.minWidth} x ${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>
                                                     </>
@@ -698,7 +709,7 @@ function CreativeModal(props: Props) {
                                         <Form.Item name='endPageDesc' rules={[{ required: true, pattern: RegExp("^[^\\<\\>\\&'\\\"\\/\\x08\\x09\\x0A\\x0D\\\\]{1,12}$"), message: '请输入正确的结束页文案' }]} style={{ marginBottom: 0, marginRight: 10 }}>
                                             <Input
                                                 placeholder='请输入结束页文案'
-                                                style={{width:300}}
+                                                style={{ width: 300 }}
                                                 onFocus={() => {
                                                     setendPageDescnshow(true)
                                                     textList({ maxTextLength: 12 })