|
@@ -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} />}
|
|
|
{/* 查看落地页 */}
|