wjx 2 tahun lalu
induk
melakukan
3d7d661d24

+ 1 - 0
src/pages/launchSystemNew/components/pageModal/index.tsx

@@ -84,6 +84,7 @@ const PageModal: React.FC<Props> = (props) => {
             listAjax.refresh()
         }).catch(() => setLoading(false))
     }
+    
     return <Modal
         title={<Space>
             <span>ADQ落地页</span>

+ 8 - 0
src/pages/launchSystemNew/launchManage/createAd/creative/modal/index.tsx

@@ -361,6 +361,14 @@ function CreativePup(props: Props) {
                                 adcreativeElements.splice(adcreativeElements?.findIndex((item: { name: string }) => item.name === 'image'), 1)
                             }
                         }
+                        if (id === 2106) {
+                            res[0].adcreativeElements = res[0]?.adcreativeElements?.map((item: any) => {
+                                if (item.name === "description") {
+                                    return { ...item, name: 'title', title: item['description'] }
+                                }
+                                return item
+                            })
+                        }
                         set_adcreative_template(res[0])
                         if (siteSet?.some((name: string) => name === 'SITE_SET_MOMENTS')) {
                             let id = res[0].adcreativeTemplateId

+ 6 - 1
src/pages/launchSystemNew/launchManage/createAd/creativeCL/index.tsx

@@ -1,6 +1,6 @@
 import { CreateAdProps } from "@/services/launchAdq/createAd"
 import { BaseResult } from "@ahooksjs/use-request/lib/types"
-import { Col, Space, Spin, Tooltip } from "antd"
+import { Col, Select, Space, Spin, Tooltip } from "antd"
 import React, { useCallback, useState } from "react"
 import { ModalConfig } from "../ad"
 import style from '../index.less'
@@ -131,6 +131,11 @@ const CreativeCL: React.FC<Props> = (props) => {
                 <span>已选:{queryForm?.texts?.length || 0}</span>
             </div>
             <div className={style.center}>
+                <Select style={{ minWidth: 150 }} value={queryForm.model} onChange={(e) => { setQueryForm({ ...queryForm, model: e }) }} dropdownMatchSelectWidth={false}>
+                    <Select.Option value="cross">素材文案叉乘</Select.Option>
+                    <Select.Option value="corres">一一对应</Select.Option>
+                </Select>
+
                 {queryForm?.texts?.some((item: any) => item?.title) && <div className={style.accName} style={{ fontWeight: 800 }}>标题</div>}
                 {queryForm?.texts?.map((item: any, index: number) => {
                     if (item?.title) {

+ 9 - 0
src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/index.tsx

@@ -367,6 +367,15 @@ function CreativePup(props: Props) {
                                 arrayProperty: item?.arrayProperty
                             }
                         }))
+                        
+                        if (id === 2106) {
+                            res[0].adcreativeElements = res[0]?.adcreativeElements?.map((item: any) => {
+                                if (item.name === "description") {
+                                    return { ...item, name: 'title', title: item['description'] }
+                                }
+                                return item
+                            })
+                        }
                         // 处理文案
                         setTextData(res[0]?.adcreativeElements?.filter((item: any) => item.name === 'title' || (item.required && item.name === 'description')).map((item: any) => ({ ...item, pupState })))
                     }

+ 131 - 51
src/pages/launchSystemNew/launchManage/createAd/index.tsx

@@ -49,7 +49,8 @@ const CreateAd: React.FC = () => {
         pageList: [],//本地落地页详情入口
         adqPageList: [],//云落地页
         expandEnabled: false,
-        expandTargeting: []
+        expandTargeting: [],
+        model: 'cross'
     })
     const [launchMode, setLaunchMode] = useState<number>(Number(localStorage.getItem('LAUNCHMODE')) || 1) // 投放模式 1 现在投放模式  2 创量模式
     const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSetsList?: any[], productList?: any, conversionList?: any, customAudienceList?: any, excludedCustomAudienceList?: any, pageList?: any, coldStartAudienceList?: any[] }[]>([])  // 账户
@@ -83,15 +84,22 @@ const CreateAd: React.FC = () => {
     const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
     /*************************/
 
-    console.log('==========>', queryForm);
-
+    /** 判断出价方式,优化目标 “二方包”人群包仅能在出价方式为CPC(包含oCPM点击优化目标)、CPM场景下使用 */
+    useEffect(() => {
+        if (queryForm?.sysAdgroup && Object.keys(queryForm?.sysAdgroup).length > 0 && (!['BID_MODE_CPC', 'BID_MODE_CPM'].includes(queryForm?.sysAdgroup?.bidMode) || !(queryForm?.sysAdgroup?.bidMode === 'BID_MODE_OCPM' && queryForm?.sysAdgroup?.optimizationGoal === 'OPTIMIZATIONGOAL_CLICK'))) {
+            setAccountCreateLogs(() => accountCreateLogs.map(item => {
+                delete item?.customAudienceList
+                delete item?.excludedCustomAudienceList
+                return item
+            }))
+        }
+    }, [queryForm?.sysAdgroup])
 
     /**数据回填 */
     useEffect(() => {
         let taskId = sessionStorage.getItem('TASKID')
         if (taskId) {
             getTaskDetails.run(taskId).then(async res => {
-                console.log('res----->', res)
                 const { adCreateLogs, campaignType, promotedObjectType, speedMode, sysAdgroup, sysAdgroupId, sysTargeting, sysTargetingId } = res
                 let adcreativeTemplateId = adCreateLogs[0]?.sysAdcreative?.adcreativeTemplateId
                 let sysPageId = adCreateLogs[0]?.sysPageId
@@ -112,34 +120,8 @@ const CreateAd: React.FC = () => {
                         type = 1
                     }
                 }
-                console.log('adcreativeTemplateId--->', adcreativeTemplateId, type);
-                // type = 1
                 setLaunchMode(type)
 
-
-                // 账号信息相关
-                let adCreateLogsData = adCreateLogs?.map((item: any) => {
-                    return {
-                        adAccountId: item?.accountId,
-                        id: item?.adAccountId,
-                        // 数据源
-                        userActionSetsList: item?.userActionSetList?.map((item: any) => ({ ...item, id: item?.userActionSetId })),
-                        // 商品
-                        productList: item?.product ? [{ ...item?.product, productCatalog: item?.productCatalog, id: Number(item?.product?.productOuterId?.replace(/\D/ig, '')) }] : undefined,
-                        coldStartAudienceList: item?.coldStartAudienceList?.map((item: any) => ({ ...item, id: item.audienceId }))
-                        // pageList: [item.page]
-                        // 定向用户群
-                        // customAudienceList
-                        // 排除用户群
-                        // excludedCustomAudienceList
-                    }
-                }).filter((item: any, index: number, self: any) => self.findIndex((i: any) => i.id == item.id) === index)
-
-                console.log('adCreateLogsData--->', adCreateLogsData);
-
-                setAccountCreateLogs(adCreateLogsData)
-
-
                 /** 本地落地页处理 */
                 let pageList: any = []
                 /** 云端落地页 */
@@ -147,7 +129,6 @@ const CreateAd: React.FC = () => {
                 let taskMediaMaps: any[] = []
                 const sorted = groupBy(adCreateLogs, (item) => [item.accountId])
                 let type2Data = {}
-                console.log('sorted---->', sorted);
 
                 if (type === 1) {
                     pageList = sorted[0]?.map((item: any) => {
@@ -206,22 +187,54 @@ const CreateAd: React.FC = () => {
                 } else {
                     let adCreateLog = adCreateLogs[0]
                     if (adCreateLog?.sysPageId) {
-                        pageList = [adCreateLog?.sysPageId]
+                        pageList = [adCreateLog?.sysPage]
                     } else {
                         pageList = [null]
                     }
                     if (adCreateLog?.pageId) {
-                        adqPageList = [{
+                        adqPageList = [[{
                             pageList: [{ ...adCreateLog.page, id: adCreateLog.page.pageId }],
                             adAccountId: adCreateLog?.accountId,
                             id: adCreateLog?.adAccountId,
-                        }]
+                        }]]
                     } else {
                         adqPageList = [null]
                     }
                     let template = await getAdcreativeTemplate.run({ promotedObjectType, adcreativeTemplateId, siteSet: sysAdgroup.siteSet })
-                    console.log('template--->', template);
-                    // type2Data['textData'] = template[0]?.adcreativeElements?.filter((item: any) => item.name === 'title' || (item.required && item.name === 'description')).map((item: any) => ({ ...item, pupState }))
+                    let states = { kp_show: false, xd_show: true, sj_show: false, bq_show: false, sp_show: false }
+                    if (template[0]) {
+                        let pageList = template[0]?.landingPageConfig?.supportPageTypeList?.filter((i: { description: string | string[] }) => i.description.includes('微信原生推广页'))//当前版本只获取微信原生页,后期改进
+                        let pageType = pageList?.length ? pageList[0]?.pageType : null
+                        //数据展示组件
+                        if (template[0].adcreativeAttributes.some((item: { name: string }) => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')) {
+                            states = { ...states, sj_show: true }
+                        }
+                        //行动按钮组件存在
+                        if (states.xd_show) {
+                            let supportLinkNameTypeData = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkNameType
+                            let linkNameList = supportLinkNameTypeData?.list
+                            if (linkNameList) { // && !linkPageType
+                            } else {
+                                states = { ...states, xd_show: false }
+                            }
+                            if (supportLinkNameTypeData?.required) {
+                                states = { ...states, xd_show: true }
+                            }
+                        }
+                        // 视频结束页 end_page
+                        if (template[0].adcreativeElements.some((item: { name: string }) => item.name === 'end_page')) {
+                            states = { ...states, sp_show: true }
+                        }
+                    }
+                    if (adcreativeTemplateId === 2106) {
+                        template[0].adcreativeElements = template[0]?.adcreativeElements?.map((item: any) => {
+                            if (item.name === "description") {
+                                return { ...item, name: 'title', title: item['description'] }
+                            }
+                            return item
+                        })
+                    }
+                    type2Data['textData'] = template[0]?.adcreativeElements?.filter((item: any) => item.name === 'title' || (item.required && item.name === 'description')).map((item: any) => ({ ...item, pupState: states }))
                     type2Data['materialData'] = template[0]?.adcreativeElements?.filter((item: any) => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image' || item.name === 'element_story').map((item: any) => {
                         return {
                             label: item.description === '图片' && res[0]?.adcreativeElements?.some((item: any) => item.name === 'video') ? '视频封面图' : item.description,
@@ -230,7 +243,7 @@ const CreateAd: React.FC = () => {
                             arrayProperty: item?.arrayProperty
                         }
                     })
-                    taskMediaMaps = [sorted[0][0]].map(async (item: any) => {
+                    taskMediaMaps = [sorted[0][0]].map((item: any) => {
                         let pageElementsSpecList = item?.sysPage?.pageSpecsList[0]?.pageElementsSpecList // 内容区
                         let globalSpec = item?.sysPage?.globalSpec  // 悬浮组件
                         /** 处理客服 */
@@ -263,16 +276,59 @@ const CreateAd: React.FC = () => {
                                 accountPageIdMap[item.accountId] = item?.pageId
                             }
                         })
-                        return { sysAdcreative: item?.sysAdcreative, sysPageId: item?.sysPageId, cropUserGroupMap, accountPageIdMap }
+                        let { adcreativeElements, ...Adcreative } = JSON.parse(JSON.stringify(item?.sysAdcreative))
+                        delete adcreativeElements?.title
+                        delete adcreativeElements?.description
+                        delete adcreativeElements?.imageUrlList
+                        delete adcreativeElements?.elementStory
+                        delete adcreativeElements?.imageUrl
+                        delete adcreativeElements?.videoUrl
+                        delete adcreativeElements?.shortVideo1Url
+                        return { sysAdcreative: { ...Adcreative, adcreativeElements }, sysPageId: item?.sysPageId, cropUserGroupMap, accountPageIdMap }
                     })
-                }
-
-
-                console.log('taskMediaMaps--->', taskMediaMaps);
 
-                // return
+                    // 处理 materials [] texts []
+                    let newMaterials: any[] = [], newTexts: any[] = []
+                    sorted[0].forEach((item: any) => {
+                        let { title, description, imageUrlList, elementStory, imageUrl, videoUrl, shortVideo1Url } = item?.sysAdcreative?.adcreativeElements
+                        let texts = {};
+                        let materials = {};
+                        if (title) texts['title'] = title;
+                        if (description) texts['description'] = description;
+                        if (imageUrlList) materials['imageUrlList'] = imageUrlList;
+                        if (elementStory) materials['elementStory'] = elementStory;
+                        if (imageUrl) materials['imageUrl'] = imageUrl;
+                        if (videoUrl) materials['videoUrl'] = videoUrl;
+                        if (shortVideo1Url) materials['shortVideo1Url'] = shortVideo1Url;
+                        newMaterials.push(materials)
+                        newTexts.push(texts)
+                    })
+                    let groupMaterials: any[] = []
+                    let groupTexts: any[] = []
+                    
+                    if (newMaterials.length > 0 && newMaterials?.every(item => Object.keys(item).length > 0)) {
+                        let firstField = Object.keys(newMaterials[0])[0]
+                        groupMaterials = groupBy(newMaterials, (item) => [item[firstField]])
+                        type2Data['materials'] = newMaterials
+                    }
+                    if (newTexts.length > 0 && newTexts?.every(item => Object.keys(item).length > 0)) {
+                        let firstField = Object.keys(newTexts[0])[0]
+                        groupTexts = groupBy(newTexts, (item) => [item[firstField]])
+                        type2Data['texts'] = newTexts
+                    }
+                    let mLength = groupMaterials.length || 1
+                    let tLength = groupTexts.length || 1
+                    if (mLength * tLength === sorted[0].length) {  // 数量对上是 叉乘 否则 一对一
+                        if (groupMaterials.length > 0) type2Data['materials'] = groupMaterials.map((item: any[]) => item[0])
+                        if (groupTexts.length > 0) type2Data['texts'] = groupTexts.map((item: any[]) => item[0])
+                        type2Data['model'] = 'cross'
+                    } else {
+                        type2Data['model'] = 'corres'
+                    }
+                }
                 setQueryForm({
                     ...queryForm,
+                    ...type2Data,
                     campaignType,
                     promotedObjectType,
                     speedMode,
@@ -284,14 +340,31 @@ const CreateAd: React.FC = () => {
                     configuredStatus: sysAdgroup?.configuredStatus,
                     expandEnabled: sysAdgroup?.expandEnabled || false,
                     expandTargeting: sysAdgroup?.expandTargeting || [],
-                    // taskMediaMaps: taskMediaMaps || [],
+                    taskMediaMaps: taskMediaMaps || [],
                     pageList,
                     adqPageList
                 })
-            })
-
 
-            // sessionStorage.removeItem('TASKID')
+                // 账号信息相关
+                let adCreateLogsData = adCreateLogs?.map((item: any) => {
+                    return {
+                        adAccountId: item?.accountId,
+                        id: item?.adAccountId,
+                        // 数据源
+                        userActionSetsList: item?.userActionSetList?.map((item: any) => ({ ...item, id: item?.userActionSetId })),
+                        // 商品
+                        productList: item?.product ? [{ ...item?.product, productCatalog: item?.productCatalog, id: Number(item?.product?.productOuterId?.replace(/\D/ig, '')) }] : undefined,
+                        coldStartAudienceList: item?.coldStartAudienceList?.map((item: any) => ({ ...item, id: item.audienceId })),
+                        // pageList: [item.page]
+                        // 定向用户群
+                        customAudienceList: item?.customAudienceList?.map((item: any) => ({ ...item, id: item.audienceId })),
+                        // 排除用户群
+                        excludedCustomAudienceList: item?.excludedCustomAudienceList?.map((item: any) => ({ ...item, id: item.audienceId }))
+                    }
+                }).filter((item: any, index: number, self: any) => self.findIndex((i: any) => i.id == item.id) === index)
+                setAccountCreateLogs(adCreateLogsData)
+            })
+            sessionStorage.removeItem('TASKID')
         } else {
             let adqAdData = localStorage.getItem('ADQAD')
             if (adqAdData) {
@@ -388,8 +461,10 @@ const CreateAd: React.FC = () => {
 
     // 创意素材与文案叉乘处理
     const whatever = (...arrs: any[]) => {
-        console.log('arrs---->', arrs);
         if (arrs[0]?.length && arrs[1]?.length) {
+            if (queryForm.model === 'corres') { // 一一对应
+                return arrs[0].map((item: any, index: number) => ({ ...item, ...arrs[1][index] }))
+            }
             return arrs.reduce((total, curr) => total.flatMap((e: any) => curr.map((e2: any) => ({ ...e2, ...e }))))
         } else if (arrs[0]?.length) {
             return arrs[0]
@@ -437,6 +512,10 @@ const CreateAd: React.FC = () => {
                 message.error('请选择创意文案')
                 return
             }
+            if (queryForm.model === 'corres' && (queryForm?.materialData && queryForm?.materialData?.length > 0) && (queryForm?.textData && queryForm.textData?.length > 0) && queryForm.texts?.length !== queryForm?.materials?.length) {
+                message.error('素材文案一一对应模式下,素材数量与文案数量要相等,请修改')
+                return
+            }
         }
         if (newQueryForm?.taskMediaMaps && newQueryForm?.taskMediaMaps?.some((item: { cropUserGroupMap: any[] }) => item?.cropUserGroupMap?.length > 0)) {
             let cropData = newQueryForm?.taskMediaMaps?.filter((item: { cropUserGroupMap: any[] }) => item?.cropUserGroupMap?.length > 0)
@@ -522,7 +601,6 @@ const CreateAd: React.FC = () => {
         })
         newQueryForm.taskMediaMaps = newtaskMediaMaps
         let params = { ...newQueryForm, ...props }
-        console.log(accountCreateLogs)
         let accountLogs = accountCreateLogs.map((item: any, index) => {
             // userActionSetsList 数据源  productList 商品
             let data: any = { adAccountId: item.id, count: props.count || 1 }
@@ -567,6 +645,7 @@ const CreateAd: React.FC = () => {
         delete params?.textData
         delete params?.materialData
         delete params?.materials
+        delete params?.model
         console.log('paramsSubmit====>', params)
         createAdBatch.run(params).then(res => {
             if (res) {
@@ -608,7 +687,8 @@ const CreateAd: React.FC = () => {
             configuredStatus: 'AD_STATUS_SUSPEND',  // 广告状态
             sysAdcreativeId: undefined, // 创意ID
             expandEnabled: false,
-            expandTargeting: []
+            expandTargeting: [],
+            model: 'cross'
         })
     }
     /** 设置落地页 */
@@ -1146,7 +1226,7 @@ const CreateAd: React.FC = () => {
         {/* 选择转化ID */}
         {idVisible && <IdModal visible={idVisible} data={accountCreateLogs} onClose={() => setIdVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false); clearData() }} />}
         {/* 选择ADQ落地页 */}
-        {pageVisible && <PageModal cloudParams={cloudParams} visible={pageVisible} data={accountCreateLogs} onClose={() => setPageVisible(false)} onChange={(e) => { setAdqPage(e); setPageVisible(false); clearData() }} />}
+        {pageVisible && <PageModal cloudParams={cloudParams} visible={pageVisible} data={queryForm?.adqPageList?.[targetKey]} onClose={() => setPageVisible(false)} onChange={(e) => { setAdqPage(e); setPageVisible(false); clearData() }} />}
         {/* 选择素材 */}
         {selectImgVisible && <SelectCloud visible={selectImgVisible} onClose={() => setSelectImgVisible(false)} onChange={setPage} isBack={false} />}
         {/* 查看落地页 */}

+ 11 - 5
src/pages/launchSystemNew/launchManage/createAd/targeting/index.tsx

@@ -64,8 +64,14 @@ function TargetIng(props: Props) {
                     {
                         key: '1',
                         label: <>
-                            {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setCpVisible(true)}>选择定向包</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
-                                <Button type="link" style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
+                            {queryForm?.sysAdgroup && Object.keys(queryForm?.sysAdgroup).length > 0 ? (['BID_MODE_CPC', 'BID_MODE_CPM'].includes(queryForm?.sysAdgroup?.bidMode) || (queryForm?.sysAdgroup?.bidMode === 'BID_MODE_OCPM' && queryForm?.sysAdgroup?.optimizationGoal === 'OPTIMIZATIONGOAL_CLICK')) ? <>
+                                {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setCpVisible(true)}>选择定向包</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
+                                    <Button type="link" disabled style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
+                                </Tooltip>}
+                            </> : <Tooltip title='“二方包”人群包仅能在出价方式为CPC(包含oCPM点击优化目标)、CPM场景下使用'>
+                                <Button type="link" disabled style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
+                            </Tooltip> : <Tooltip title='请先设置广告基本信息'>
+                                <Button type="link" disabled style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
                             </Tooltip>}
                         </>
                     },
@@ -204,11 +210,11 @@ function TargetIng(props: Props) {
         {adModalConfig.visible && <TargetingPup visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values: any) => {
             if (queryForm?.expandEnabled && queryForm?.expandTargeting && queryForm?.expandTargeting?.length > 0) {
                 message.error('不可突破定向已重置,需要请重新设置')
-                setQueryForm({ ...queryForm, sysTargeting: values, expandTargeting: [] }); 
+                setQueryForm({ ...queryForm, sysTargeting: values, expandTargeting: [] });
             } else {
-                setQueryForm({ ...queryForm, sysTargeting: values }); 
+                setQueryForm({ ...queryForm, sysTargeting: values });
             }
-            setDxVisible(false); 
+            setDxVisible(false);
             clearData();
             handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' })
         }} type={adModalConfig.type} dataInfo={queryForm.sysTargeting} />}

+ 3 - 2
src/services/launchAdq/createAd.ts

@@ -45,10 +45,11 @@ export interface CreateAdProps {
     customAudience?: number[],  // 定向人群
     excludedCustomAudience?: number[], // 排除人群
     pageId?: number,  // 腾讯落地页ID
-  }[]
+  }[],
+  model: 'cross' | 'corres'
 }
 export async function createAdBatchApi(data: CreateAdProps) {
-  return request(api + `/adq//adCreateTask/createAdBatch`, {
+  return request(api + `/adq/adCreateTask/createAdBatch`, {
     method: 'POST',
     data
   })