Merge branch 'develop' of http://git.zanxiangnet.com/wjx/ad-manage

src/models/useLaunchAdq/useBdMedia.ts

@@ -206,6 +206,13 @@ function useBdMediaPup() {
                                         obj['videoTitle'] = data?.videoTitle || data?.title
                                         obj['videoDescription'] = data?.videoDescription
                                     }
+                                    if (!obj?.title) {
+                                        obj.title = data.file.name
+                                    }
+                                    if (obj.title.match(RegExp(/^[^\\<\\>\\&'\\\"\\x08\\x09\\x0A\\x0D\\\\]+$/))) {
+                                        obj.title = obj.title.replace(RegExp(/^[^\\<\\>\\&'\\\"\\x08\\x09\\x0A\\x0D\\\\]+$/), '')
+                                    }
+                                    obj.title = obj.title.replace(/\.(jpg|jpeg|gif|png)$/i, '')
                                     add.run(obj).then((res) => {
                                         list.refresh()
                                         offEditFile()//关闭弹窗并清空相关数据

src/models/useLaunchAdq/useBdMediaPup.ts

@@ -286,14 +286,18 @@ function useBdMediaPup() {
                         obj['videoTitle'] = data?.videoTitle || data?.title;
                         obj['videoDescription'] = data?.videoDescription;
                       }
-                      add
-                        .run(obj)
-                        .then((res) => {
-                          list.refresh();
-                          offEditFile(); //关闭弹窗并清空相关数据
-                          set({ upLoadLoading: false });
-                        })
-                        .catch(() => set({ upLoadLoading: false }));
+                      if (!obj?.title) {
+                        obj.title = data.file.name
+                      }
+                      if (obj.title.match(RegExp(/^[^\\<\\>\\&'\\\"\\x08\\x09\\x0A\\x0D\\\\]+$/))) {
+                        obj.title = obj.title.replace(RegExp(/^[^\\<\\>\\&'\\\"\\x08\\x09\\x0A\\x0D\\\\]+$/), '')
+                      }
+                      obj.title = obj.title.replace(/\.(jpg|jpeg|gif|png)$/i, '')
+                      add.run(obj).then((res) => {
+                        list.refresh();
+                        offEditFile(); //关闭弹窗并清空相关数据
+                        set({ upLoadLoading: false });
+                      }).catch(() => set({ upLoadLoading: false }));
                     }
                   }
                 } else {

src/pages/launchSystemNew/components/videoFrame/index.tsx

@@ -14,7 +14,7 @@ interface Props {
  * @returns 
  */
 const VideoFrame: React.FC<Props> = ({ url, onChange }) => {
-
+    
     /************************************/
     const [urlList, setUrlList] = useState<string[]>([])
     const [urlNum, seturlNum] = useState<number>(30)

src/pages/launchSystemNew/launchManage/createAd/ad/modal/leadAd.tsx

@@ -608,7 +608,7 @@ function LeadAdModal(props: Props) {
                             style={{ width: 300 }}
                             showSearch
                             filterOption={(input, option) =>
-                                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+                                (option!.children as unknown as string)?.toLowerCase()?.includes(input?.toLowerCase())
                             }
                             onChange={(e) => {
                                 if (e === 'OPTIMIZATIONGOAL_PAGE_SCAN_CODE') {

src/pages/launchSystemNew/launchManage/createAd/ad/modal/wechat.tsx

@@ -591,7 +591,7 @@ function WeChatAdModal(props: Props) {
                             }}
                             showSearch
                             filterOption={(input, option) =>
-                                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+                                (option!.children as unknown as string)?.toLowerCase()?.includes(input?.toLowerCase())
                             } allowClear
                         >
                             {Object.keys(OptimizationGoalEnum).map(key => {

src/pages/launchSystemNew/launchManage/createAd/creative/modal/index.less

@@ -1,28 +1,33 @@
-.adcreative_template{
+.adcreative_template {
     width: 100%;
     overflow-y: auto;
     display: flex;
     height: 173px;
-    >label{
+
+    >label {
         height: 100%;
         margin-right: 15px;
     }
 }
-.videoImgs{
+
+.videoImgs {
     width: 100%;
     overflow-y: auto;
     display: flex;
-    img{
+
+    img {
         width: 100%;
     }
-    label{
+
+    label {
         height: 100%;
         padding: 0;
         width: 32%;
         margin-right: 1%;
     }
 }
-.adcreative_template_item{
+
+.adcreative_template_item {
     width: 150px;
     height: 160px;
     display: flex;
@@ -31,8 +36,11 @@
     flex-flow: column;
 }
 
-.video{
-  
+.video {}
+.cjBox {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
 }
 .box {
     width: 60%;
@@ -42,31 +50,44 @@
     justify-content: center;
     background-color: #f5f7fa;
     flex-direction: column;
-    color: rgba(0,0,0,.3);
+    color: rgba(0, 0, 0, .3);
     border-radius: 5px;
-    >p{
+
+    >p,
+    .p {
         display: flex;
         align-items: center;
         flex-flow: column;
         font-size: 10px;
         cursor: pointer;
         max-height: 150px;
-        margin-bottom:0;
-        img{
+        margin-bottom: 0;
+
+        img {
             height: 100%;
         }
-        video{
+
+        video {
+            height: 100%;
+        }
+    }
+
+    >.p>div {
+        height: 100%;
+
+        >div {
             height: 100%;
         }
     }
 }
 
-.image_list{
+.image_list {
     flex-flow: row wrap;
     background-color: transparent;
-    height:auto;
+    height: auto;
     justify-content: flex-start;
-    >p{
+
+    >p {
         width: 150px;
         background-color: #f5f7fa;
         height: 150px;
@@ -77,7 +98,8 @@
         margin: 0;
     }
 }
-.crt{
+
+.crt {
     display: inline-flex;
     align-items: center;
     width: auto;

src/pages/launchSystemNew/launchManage/createAd/creative/modal/index.tsx

@@ -15,7 +15,9 @@ import { creativeConfig, overrideCanvasHeadOptionEnum } from './config'
 import BrandImage from './brandImage'
 import HeadNickJump from './headNickJump'
 import moment from 'moment'
-import { txtLength } from '@/utils/utils'
+import { getVideoImgUrl, txtLength } from '@/utils/utils'
+import VideoNews from '@/pages/launchSystemNew/components/newsModal/videoNews'
+import VideoFrame from '@/pages/launchSystemNew/components/videoFrame'
 interface Props {
     queryForm: Partial<CreateAdProps>,
     title?: string,
@@ -128,6 +130,8 @@ function CreativePup(props: Props) {
     let videoOver = Form.useWatch('videoOver', form)
     let endPageDesc = Form.useWatch('endPageDesc', form)
     let linkPageType = Form.useWatch('linkPageType', form)
+    let short_video1 = Form.useWatch('short_video1', form)
+    let video = Form.useWatch('video', form)
 
     // 确定事件
     const handleOk = useCallback(() => {
@@ -667,6 +671,7 @@ function CreativePup(props: Props) {
             message.warning('请先选择视频文件！！！')
         }
     }, [videoMaterialConfig.list])
+
     return <Modal
         visible={visible}
         title={type === 'add' ? '新建创意' : type === 'look' ? '创意详情' : '编辑创意'}
@@ -764,12 +769,12 @@ function CreativePup(props: Props) {
                                                 })
                                             }, 100)
                                         }}>
-                                            <p>
-                                                {videoMaterialConfig?.list[0] ? <video src={videoMaterialConfig?.list[0].url} controls /> : <>
+                                            <div className={styles.p}>
+                                                {videoMaterialConfig?.list[0] ? <VideoNews src={videoMaterialConfig?.list[0].url} style={{ display: 'block', width: 'auto', margin: 0, height: '100%' }} maskImgStyle={{ position: 'absolute', top: '50%', left: '50%', width: 40, height: 40, transform: 'translate(-50%, -50%)', zIndex: 10 }} /> : <>
                                                     <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>
                                         </div>
                                     </Form.Item>}
                                     {/* 单图 */}
@@ -779,26 +784,36 @@ function CreativePup(props: Props) {
                                         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 })
-                                            setimgType('single')
-                                            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 className={styles.cjBox}>
+                                            <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 })
+                                                setimgType('single')
+                                                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>
+                                            {adcreative_template?.adcreativeElements.some(item => item.name === 'short_video1' || item.name === 'video') && <div style={{ width: 32 }}>
+                                                {videoMaterialConfig?.list?.[0]?.url && <VideoFrame
+                                                    onChange={(e) => {
+                                                        setImgMaterialConfig({ ...imgMaterialConfig, type: 'image', adcreativeTemplateId, list: [{ url: e }] })
+                                                        form.setFieldsValue({ image: 'image' })
+                                                    }}
+                                                    url={videoMaterialConfig?.list[0].url}
+                                                />}
+                                            </div>}
                                         </div>
                                     </Form.Item>}
                                     {/* 多图 */}
@@ -1160,12 +1175,16 @@ function CreativePup(props: Props) {
             visible={selectVideoVisible}
             onClose={() => set_selectVideoVisible(false)}
             sliderImgContent={videoMaterialConfig.list}
-            onChange={(content) => {
+            onChange={(content: any) => {
                 if (content.length > 0) {
                     form.setFieldsValue({ [videoMaterialConfig.type]: videoMaterialConfig.type })
                 }
                 setVideoMaterialConfig({ ...videoMaterialConfig, list: content })
                 set_selectVideoVisible(false)
+                if (adcreative_template?.adcreativeElements.some(item => item.name === 'image') && content.length > 0) {
+                    setImgMaterialConfig({ ...imgMaterialConfig, type: 'image', adcreativeTemplateId, list: [{ url: getVideoImgUrl(content[0]?.url) }] })
+                    form.setFieldsValue({ image: 'image' })
+                }
             }}
         />}
         {/* 视频封面图弹窗 */}