|
|
@@ -99,12 +99,11 @@ const CreateAd: React.FC = () => {
|
|
|
// }))
|
|
|
// }
|
|
|
// }, [queryForm?.sysAdgroup])
|
|
|
-
|
|
|
/**数据回填 */
|
|
|
useEffect(() => {
|
|
|
let taskId = sessionStorage.getItem('TASKID')
|
|
|
if (taskId) {
|
|
|
- getTaskDetails.run(taskId).then(async res => {
|
|
|
+ getTaskDetails.run(taskId).then(async (res: any) => {
|
|
|
const { adCreateLogs, campaignType, promotedObjectType, speedMode, sysAdgroup, sysAdgroupId, sysTargeting, sysTargetingId, putModel } = res
|
|
|
let adcreativeTemplateId = adCreateLogs[0]?.sysAdcreative?.adcreativeTemplateId
|
|
|
|
|
|
@@ -128,21 +127,6 @@ const CreateAd: React.FC = () => {
|
|
|
setAccountCreateLogs(adCreateLogsData)
|
|
|
|
|
|
let type: 0 | 1 | 2 = putModel
|
|
|
- // if (sysPageId && pageId) {
|
|
|
- // type = 0
|
|
|
- // } else if (sysPageId) {
|
|
|
- // if (adCreateLogs?.every((item: { sysAdcreative: { adcreativeTemplateId: number }, sysPageId: number }) => item.sysAdcreative.adcreativeTemplateId === adcreativeTemplateId && (item.sysPageId === sysPageId))) {
|
|
|
- // type = 1
|
|
|
- // } else {
|
|
|
- // type = 0
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // if (adCreateLogs?.every((item: { sysAdcreative: { adcreativeTemplateId: number }, pageId: number }) => item.sysAdcreative.adcreativeTemplateId === adcreativeTemplateId)) {
|
|
|
- // type = 1
|
|
|
- // } else {
|
|
|
- // type = 0
|
|
|
- // }
|
|
|
- // }
|
|
|
setLaunchMode(type)
|
|
|
|
|
|
/** 本地落地页处理 */
|
|
|
@@ -207,7 +191,7 @@ const CreateAd: React.FC = () => {
|
|
|
return { sysAdcreative: item?.sysAdcreative, sysPageId: item?.sysPageId, cropUserGroupMap, accountPageIdMap }
|
|
|
})
|
|
|
} else {
|
|
|
- const sorted = groupBy(adCreateLogs, (item) => [item.accountId])
|
|
|
+ let sorted = groupBy(adCreateLogs, (item) => [item.accountId])
|
|
|
let adCreateLog = adCreateLogs[0]
|
|
|
if (adCreateLog?.sysPageId) {
|
|
|
pageList = [adCreateLog?.sysPage]
|
|
|
@@ -215,17 +199,28 @@ const CreateAd: React.FC = () => {
|
|
|
pageList = [null]
|
|
|
}
|
|
|
if (adCreateLog?.pageId) {
|
|
|
- adqPageList = groupBy(adCreateLogs, (item) => [item.sysAdcreativeId])?.map((item: any[]) => {
|
|
|
- if (item.some((item1: { pageId: number }) => item1.pageId)) {
|
|
|
- return item.map((item1: any) => ({
|
|
|
+ if (type === 2) {
|
|
|
+ adqPageList = [groupBy(adCreateLogs, (item) => [item.accountId])?.map((item: any[]) => {
|
|
|
+ let item1 = item[0]
|
|
|
+ return {
|
|
|
pageList: [{ ...item1.page, id: item1.page.pageId }],
|
|
|
adAccountId: item1?.accountId,
|
|
|
id: item1?.accountId,
|
|
|
- }))
|
|
|
- } else {
|
|
|
- return null
|
|
|
- }
|
|
|
- })
|
|
|
+ }
|
|
|
+ })]
|
|
|
+ } else {
|
|
|
+ adqPageList = groupBy(adCreateLogs, (item) => [item.sysAdcreativeId])?.map((item: any[]) => {
|
|
|
+ if (item.some((item1: { pageId: number }) => item1.pageId)) {
|
|
|
+ return item.map((item1: any) => ({
|
|
|
+ pageList: [{ ...item1.page, id: item1.page.pageId }],
|
|
|
+ adAccountId: item1?.accountId,
|
|
|
+ id: item1?.accountId,
|
|
|
+ }))
|
|
|
+ } else {
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
} else {
|
|
|
adqPageList = [null]
|
|
|
}
|
|
|
@@ -318,20 +313,50 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
// 处理 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)
|
|
|
- })
|
|
|
+ if (type === 1) {
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ groupBy(adCreateLogs, (item) => [
|
|
|
+ item.sysAdcreative.adcreativeElements?.imageUrlList ||
|
|
|
+ item.sysAdcreative.adcreativeElements?.elementStory ||
|
|
|
+ item.sysAdcreative.adcreativeElements?.imageUrl ||
|
|
|
+ item.sysAdcreative.adcreativeElements?.videoUrl ||
|
|
|
+ item.sysAdcreative.adcreativeElements?.shortVideo1Url
|
|
|
+ ]).forEach((item: any) => {
|
|
|
+ let { imageUrlList, elementStory, imageUrl, videoUrl, shortVideo1Url } = item?.[0]?.sysAdcreative?.adcreativeElements
|
|
|
+ let materials = {};
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ groupBy(adCreateLogs, (item) => [
|
|
|
+ item.sysAdcreative.adcreativeElements?.description ||
|
|
|
+ item.sysAdcreative.adcreativeElements?.title
|
|
|
+ ]).forEach((item: any) => {
|
|
|
+ let { title, description } = item?.[0]?.sysAdcreative?.adcreativeElements
|
|
|
+ let texts = {};
|
|
|
+ if (title) texts['title'] = title;
|
|
|
+ if (description) texts['description'] = description;
|
|
|
+ newTexts.push(texts)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
let groupMaterials: any[] = []
|
|
|
let groupTexts: any[] = []
|
|
|
|
|
|
@@ -941,33 +966,35 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
return <Space direction="vertical" style={{ width: '100%' }}>
|
|
|
<h3 style={{ textAlign: 'center', color: 'red', marginBottom: 0 }}>请注意:除了普通模式选择创意模板,叉乘模式和顺序模式都属于新建创意,腾讯规定每个广告账户每天新建创意限制20条。</h3>
|
|
|
- <Card
|
|
|
- title={
|
|
|
- <div>
|
|
|
- <Space>
|
|
|
- <div className={style.cardTitle}>配置区</div>
|
|
|
- <Select
|
|
|
- style={{ width: 100 }} size="small"
|
|
|
- value={Number(launchMode)}
|
|
|
- onChange={(value) => {
|
|
|
- switchLaunchMode(value)
|
|
|
- }}
|
|
|
- options={[
|
|
|
- {
|
|
|
- value: 0,
|
|
|
- label: "普通模式",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- label: "叉乘模式",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- label: "顺序模式",
|
|
|
- }
|
|
|
- ]}>
|
|
|
- </Select>
|
|
|
- {/* <Popconfirm
|
|
|
+
|
|
|
+ <Spin spinning={getTaskDetails.loading}>
|
|
|
+ <Card
|
|
|
+ title={
|
|
|
+ <div>
|
|
|
+ <Space>
|
|
|
+ <div className={style.cardTitle}>配置区</div>
|
|
|
+ <Select
|
|
|
+ style={{ width: 100 }} size="small"
|
|
|
+ value={Number(launchMode)}
|
|
|
+ onChange={(value) => {
|
|
|
+ switchLaunchMode(value)
|
|
|
+ }}
|
|
|
+ options={[
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ label: "普通模式",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: "叉乘模式",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: "顺序模式",
|
|
|
+ }
|
|
|
+ ]}>
|
|
|
+ </Select>
|
|
|
+ {/* <Popconfirm
|
|
|
title={<>当前已编辑的数据部分不会保存，是否切换?</>}
|
|
|
onConfirm={switchLaunchMode}
|
|
|
okText="是"
|
|
|
@@ -975,395 +1002,396 @@ const CreateAd: React.FC = () => {
|
|
|
>
|
|
|
<Button type="link" style={{ padding: 0 }}>切换投放模式</Button>
|
|
|
</Popconfirm> */}
|
|
|
- </Space>
|
|
|
- </div>
|
|
|
- }
|
|
|
- className={style.createAd}
|
|
|
- hoverable
|
|
|
- extra={<Space>
|
|
|
- {accountCreateLogs?.length > 0 && <Button loading={syncAjax.loading} onClick={synTgmb}>
|
|
|
- 同步推广目标
|
|
|
- <Tooltip title="近期账号更改推广目标（比如以前推广公众，现在投企微），选择媒体账号后同步">
|
|
|
- <QuestionCircleOutlined />
|
|
|
- </Tooltip>
|
|
|
- </Button>}
|
|
|
- <UserTactics setQueryForm={setQueryForm} setAccountCreateLogs={setAccountCreateLogs} setLaunchMode={setLaunchMode} />
|
|
|
- </Space>}
|
|
|
- >
|
|
|
- <Space wrap>
|
|
|
- <Selector label="媒体账户组">
|
|
|
- <Select
|
|
|
- mode="multiple"
|
|
|
- style={{ minWidth: 200 }}
|
|
|
- placeholder="快捷选择媒体账户组"
|
|
|
- maxTagCount={1}
|
|
|
- allowClear
|
|
|
- bordered={false}
|
|
|
- filterOption={(input: any, option: any) => {
|
|
|
- return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
|
|
|
- }}
|
|
|
- onChange={(e, option) => { getGroupAccountList(e) }}
|
|
|
- >
|
|
|
- {getGroupList?.data?.map((item: any) => <Select.Option value={item.groupId} key={item.groupId}>{item.groupName}</Select.Option>)}
|
|
|
- </Select>
|
|
|
- </Selector>
|
|
|
- <Selector label="媒体账户">
|
|
|
- <Select
|
|
|
- mode="multiple"
|
|
|
- style={{ minWidth: 200, maxWidth: 500 }}
|
|
|
- placeholder="媒体账户(多个，,空格换行)"
|
|
|
- maxTagCount={1}
|
|
|
- allowClear
|
|
|
- bordered={false}
|
|
|
- maxTagPlaceholder={
|
|
|
- <Tooltip
|
|
|
- color="#FFF"
|
|
|
- title={<span style={{ color: '#000' }}>
|
|
|
- {accountCreateLogs?.filter((item, index) => index !== 0)
|
|
|
- ?.map((item, index) => <Tag
|
|
|
- key={index}
|
|
|
- closable
|
|
|
- onClose={() => {
|
|
|
- setAccountCreateLogs(accountCreateLogs?.filter(item1 => item1.adAccountId !== item.adAccountId))
|
|
|
- setQueryForm({ ...queryForm, adqPageList: [], pageList: [], taskMediaMaps: queryForm?.taskMediaMaps?.map((item: { sysPageId: number }) => ({ ...item, sysPageId: '', accountPageIdMap: {}, cropUserGroupMap: [] })) })
|
|
|
- clearData()
|
|
|
- }}
|
|
|
- >{item.adAccountId}</Tag>)}</span>
|
|
|
- }
|
|
|
- >
|
|
|
- <span>+{accountCreateLogs?.length > 1 ? accountCreateLogs.length - 1 : 0}</span>
|
|
|
- </Tooltip>
|
|
|
- }
|
|
|
- dropdownMatchSelectWidth={false}
|
|
|
- autoClearSearchValue={false}
|
|
|
- filterOption={(input: any, option: any) => {
|
|
|
- let newInput: string[] = input ? input?.split(/[,，\n\s]+/ig).filter((item: any) => item) : []
|
|
|
- return newInput?.some(val => option!.children?.toString().toLowerCase()?.includes(val))
|
|
|
- }}
|
|
|
- value={accountCreateLogs?.map((item: { id: number }) => item?.id)}
|
|
|
- onChange={(e, option) => {
|
|
|
- setQueryForm({ ...queryForm, adqPageList: [], pageList: [], taskMediaMaps: queryForm?.taskMediaMaps?.map((item: { sysPageId: number }) => ({ ...item, sysPageId: '', accountPageIdMap: {}, cropUserGroupMap: [] })) })
|
|
|
- setAccountCreateLogs(option?.map((item: any) => ({ adAccountId: item?.children?.toString()?.split('_')[0], id: item?.value })))
|
|
|
- clearData()
|
|
|
- }}
|
|
|
- searchValue={accSearch}
|
|
|
- onSearch={(val) => {
|
|
|
- setAccSearch(val)
|
|
|
- }}
|
|
|
- dropdownRender={menu => (
|
|
|
- <>
|
|
|
- {menu}
|
|
|
- <Divider style={{ margin: '8px 0' }} />
|
|
|
- <Space style={{ padding: '0 8px 4px' }}>
|
|
|
- <Checkbox onChange={(e) => {
|
|
|
- let data = []
|
|
|
- if (e.target.checked) {
|
|
|
- data = JSON.parse(JSON.stringify(getAllUserAccount?.data?.data))
|
|
|
- if (accSearch) {
|
|
|
- let newAccSearch = accSearch?.split(/[,，\n\s]+/ig).filter((item: any) => item)
|
|
|
- data = data?.filter((item: any) => newAccSearch?.some(val => item!.accountId?.toString().toLowerCase()?.includes(val)))
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ className={style.createAd}
|
|
|
+ hoverable
|
|
|
+ extra={<Space>
|
|
|
+ {accountCreateLogs?.length > 0 && <Button loading={syncAjax.loading} onClick={synTgmb}>
|
|
|
+ 同步推广目标
|
|
|
+ <Tooltip title="近期账号更改推广目标（比如以前推广公众，现在投企微），选择媒体账号后同步">
|
|
|
+ <QuestionCircleOutlined />
|
|
|
+ </Tooltip>
|
|
|
+ </Button>}
|
|
|
+ <UserTactics setQueryForm={setQueryForm} setAccountCreateLogs={setAccountCreateLogs} setLaunchMode={setLaunchMode} />
|
|
|
+ </Space>}
|
|
|
+ >
|
|
|
+ <Space wrap>
|
|
|
+ <Selector label="媒体账户组">
|
|
|
+ <Select
|
|
|
+ mode="multiple"
|
|
|
+ style={{ minWidth: 200 }}
|
|
|
+ placeholder="快捷选择媒体账户组"
|
|
|
+ maxTagCount={1}
|
|
|
+ allowClear
|
|
|
+ bordered={false}
|
|
|
+ filterOption={(input: any, option: any) => {
|
|
|
+ return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
|
|
|
+ }}
|
|
|
+ onChange={(e, option) => { getGroupAccountList(e) }}
|
|
|
+ >
|
|
|
+ {getGroupList?.data?.map((item: any) => <Select.Option value={item.groupId} key={item.groupId}>{item.groupName}</Select.Option>)}
|
|
|
+ </Select>
|
|
|
+ </Selector>
|
|
|
+ <Selector label="媒体账户">
|
|
|
+ <Select
|
|
|
+ mode="multiple"
|
|
|
+ style={{ minWidth: 200, maxWidth: 500 }}
|
|
|
+ placeholder="媒体账户(多个，,空格换行)"
|
|
|
+ maxTagCount={1}
|
|
|
+ allowClear
|
|
|
+ bordered={false}
|
|
|
+ maxTagPlaceholder={
|
|
|
+ <Tooltip
|
|
|
+ color="#FFF"
|
|
|
+ title={<span style={{ color: '#000' }}>
|
|
|
+ {accountCreateLogs?.filter((item, index) => index !== 0)
|
|
|
+ ?.map((item, index) => <Tag
|
|
|
+ key={index}
|
|
|
+ closable
|
|
|
+ onClose={() => {
|
|
|
+ setAccountCreateLogs(accountCreateLogs?.filter(item1 => item1.adAccountId !== item.adAccountId))
|
|
|
+ setQueryForm({ ...queryForm, adqPageList: [], pageList: [], taskMediaMaps: queryForm?.taskMediaMaps?.map((item: { sysPageId: number }) => ({ ...item, sysPageId: '', accountPageIdMap: {}, cropUserGroupMap: [] })) })
|
|
|
+ clearData()
|
|
|
+ }}
|
|
|
+ >{item.adAccountId}</Tag>)}</span>
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <span>+{accountCreateLogs?.length > 1 ? accountCreateLogs.length - 1 : 0}</span>
|
|
|
+ </Tooltip>
|
|
|
+ }
|
|
|
+ dropdownMatchSelectWidth={false}
|
|
|
+ autoClearSearchValue={false}
|
|
|
+ filterOption={(input: any, option: any) => {
|
|
|
+ let newInput: string[] = input ? input?.split(/[,，\n\s]+/ig).filter((item: any) => item) : []
|
|
|
+ return newInput?.some(val => option!.children?.toString().toLowerCase()?.includes(val))
|
|
|
+ }}
|
|
|
+ value={accountCreateLogs?.map((item: { id: number }) => item?.id)}
|
|
|
+ onChange={(e, option) => {
|
|
|
+ setQueryForm({ ...queryForm, adqPageList: [], pageList: [], taskMediaMaps: queryForm?.taskMediaMaps?.map((item: { sysPageId: number }) => ({ ...item, sysPageId: '', accountPageIdMap: {}, cropUserGroupMap: [] })) })
|
|
|
+ setAccountCreateLogs(option?.map((item: any) => ({ adAccountId: item?.children?.toString()?.split('_')[0], id: item?.value })))
|
|
|
+ clearData()
|
|
|
+ }}
|
|
|
+ searchValue={accSearch}
|
|
|
+ onSearch={(val) => {
|
|
|
+ setAccSearch(val)
|
|
|
+ }}
|
|
|
+ dropdownRender={menu => (
|
|
|
+ <>
|
|
|
+ {menu}
|
|
|
+ <Divider style={{ margin: '8px 0' }} />
|
|
|
+ <Space style={{ padding: '0 8px 4px' }}>
|
|
|
+ <Checkbox onChange={(e) => {
|
|
|
+ let data = []
|
|
|
+ if (e.target.checked) {
|
|
|
+ data = JSON.parse(JSON.stringify(getAllUserAccount?.data?.data))
|
|
|
+ if (accSearch) {
|
|
|
+ let newAccSearch = accSearch?.split(/[,，\n\s]+/ig).filter((item: any) => item)
|
|
|
+ data = data?.filter((item: any) => newAccSearch?.some(val => item!.accountId?.toString().toLowerCase()?.includes(val)))
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- setQueryForm({ ...queryForm, adqPageList: [], pageList: [], taskMediaMaps: queryForm?.taskMediaMaps?.map((item: { sysPageId: number }) => ({ ...item, sysPageId: '', accountPageIdMap: {}, cropUserGroupMap: [] })) })
|
|
|
- setAccountCreateLogs(data?.map((item: any) => ({ adAccountId: item?.accountId, id: item?.accountId })))
|
|
|
- clearData()
|
|
|
- }}>全选</Checkbox>
|
|
|
- </Space>
|
|
|
- </>
|
|
|
- )}
|
|
|
- >
|
|
|
- {getAllUserAccount?.data?.data?.map((item: any) => <Select.Option value={item.accountId} key={item.id}>{item.remark ? item.accountId + '_' + item.remark : item.accountId}</Select.Option>)}
|
|
|
- </Select>
|
|
|
- </Selector>
|
|
|
- <Selector label="推广目标">
|
|
|
- <Select style={{ width: 200 }} value={queryForm?.promotedObjectType} placeholder="请选择推广目标" bordered={false} showSearch filterOption={(input: any, option: any) =>
|
|
|
- (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
- } onChange={(e) => { setQueryForm({ ...queryForm, promotedObjectType: e, sysAdgroup: null, sysAdgroupId: undefined, taskMediaMaps: [], sysAdcreativeId: undefined, materials: [], textData: [], texts: [] }); clearData() }}>
|
|
|
- {Object.keys(PromotedObjectType).map(key => {
|
|
|
- return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
|
|
|
- })}
|
|
|
- </Select>
|
|
|
- </Selector>
|
|
|
- {launchMode !== 0 && accountCreateLogs?.length > 0 && <>
|
|
|
- <Button onClick={() => { setGoodsVisible(true) }}>商品广告（选填）{accountCreateLogs?.some(item => item?.productList?.length) && <CheckOutlined style={{ color: '#1890ff' }} />}</Button>
|
|
|
- <Button onClick={() => { setSourceVisible(true) }}>精准匹配归因（选填）{accountCreateLogs?.some(item => item?.userActionSetsList?.length) && <CheckOutlined style={{ color: '#1890ff' }} />}</Button>
|
|
|
- </>}
|
|
|
- </Space>
|
|
|
+ setQueryForm({ ...queryForm, adqPageList: [], pageList: [], taskMediaMaps: queryForm?.taskMediaMaps?.map((item: { sysPageId: number }) => ({ ...item, sysPageId: '', accountPageIdMap: {}, cropUserGroupMap: [] })) })
|
|
|
+ setAccountCreateLogs(data?.map((item: any) => ({ adAccountId: item?.accountId, id: item?.accountId })))
|
|
|
+ clearData()
|
|
|
+ }}>全选</Checkbox>
|
|
|
+ </Space>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ {getAllUserAccount?.data?.data?.map((item: any) => <Select.Option value={item.accountId} key={item.id}>{item.remark ? item.accountId + '_' + item.remark : item.accountId}</Select.Option>)}
|
|
|
+ </Select>
|
|
|
+ </Selector>
|
|
|
+ <Selector label="推广目标">
|
|
|
+ <Select style={{ width: 200 }} value={queryForm?.promotedObjectType} placeholder="请选择推广目标" bordered={false} showSearch filterOption={(input: any, option: any) =>
|
|
|
+ (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
+ } onChange={(e) => { setQueryForm({ ...queryForm, promotedObjectType: e, sysAdgroup: null, sysAdgroupId: undefined, taskMediaMaps: [], sysAdcreativeId: undefined, materials: [], textData: [], texts: [] }); clearData() }}>
|
|
|
+ {Object.keys(PromotedObjectType).map(key => {
|
|
|
+ return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
|
|
|
+ })}
|
|
|
+ </Select>
|
|
|
+ </Selector>
|
|
|
+ {launchMode !== 0 && accountCreateLogs?.length > 0 && <>
|
|
|
+ <Button onClick={() => { setGoodsVisible(true) }}>商品广告（选填）{accountCreateLogs?.some(item => item?.productList?.length) && <CheckOutlined style={{ color: '#1890ff' }} />}</Button>
|
|
|
+ <Button onClick={() => { setSourceVisible(true) }}>精准匹配归因（选填）{accountCreateLogs?.some(item => item?.userActionSetsList?.length) && <CheckOutlined style={{ color: '#1890ff' }} />}</Button>
|
|
|
+ </>}
|
|
|
+ </Space>
|
|
|
|
|
|
- <div className={style.cardBody}>
|
|
|
- <Row className={style.content}>
|
|
|
- <Col span={launchMode === 0 ? 12 : 8} xl={launchMode === 0 ? 12 : 8} lg={24} md={24} sm={24} xs={24} className={style.conLeft}>
|
|
|
- <Row className={`${style.conTitle} ${style.conRightBorder}`}><Col span={24}>广告</Col></Row>
|
|
|
- <Row className={style.items}>
|
|
|
- {/* =============广告基本信息=========== */}
|
|
|
- <Ad queryForm={queryForm} setQueryForm={setQueryForm} getSysAdgroups={getSysAdgroups} clearData={clearData} />
|
|
|
- {/* =============定向包=========== */}
|
|
|
- <TargetIng
|
|
|
- queryForm={queryForm}
|
|
|
- setQueryForm={setQueryForm}
|
|
|
- getSysAdgroups={getSysAdgroups}
|
|
|
- clearData={clearData}
|
|
|
- setAccountCreateLogs={setAccountCreateLogs}
|
|
|
- getsysTargeting={getsysTargeting}
|
|
|
- geoLocationList={geoLocationList}
|
|
|
- modelList={modelList}
|
|
|
- cpDel={cpDel}
|
|
|
- accountCreateLogs={accountCreateLogs}
|
|
|
- />
|
|
|
+ <div className={style.cardBody}>
|
|
|
+ <Row className={style.content}>
|
|
|
+ <Col span={launchMode === 0 ? 12 : 8} xl={launchMode === 0 ? 12 : 8} lg={24} md={24} sm={24} xs={24} className={style.conLeft}>
|
|
|
+ <Row className={`${style.conTitle} ${style.conRightBorder}`}><Col span={24}>广告</Col></Row>
|
|
|
+ <Row className={style.items}>
|
|
|
+ {/* =============广告基本信息=========== */}
|
|
|
+ <Ad queryForm={queryForm} setQueryForm={setQueryForm} getSysAdgroups={getSysAdgroups} clearData={clearData} />
|
|
|
+ {/* =============定向包=========== */}
|
|
|
+ <TargetIng
|
|
|
+ queryForm={queryForm}
|
|
|
+ setQueryForm={setQueryForm}
|
|
|
+ getSysAdgroups={getSysAdgroups}
|
|
|
+ clearData={clearData}
|
|
|
+ setAccountCreateLogs={setAccountCreateLogs}
|
|
|
+ getsysTargeting={getsysTargeting}
|
|
|
+ geoLocationList={geoLocationList}
|
|
|
+ modelList={modelList}
|
|
|
+ cpDel={cpDel}
|
|
|
+ accountCreateLogs={accountCreateLogs}
|
|
|
+ />
|
|
|
|
|
|
- {launchMode === 0 && <>
|
|
|
- {/* =============商品=========== */}
|
|
|
- <Col className={style.conRightBorder} span={5}>
|
|
|
+ {launchMode === 0 && <>
|
|
|
+ {/* =============商品=========== */}
|
|
|
+ <Col className={style.conRightBorder} span={5}>
|
|
|
+ <div className={style.top}>
|
|
|
+ 商品
|
|
|
+ </div>
|
|
|
+ <div className={style.center}>
|
|
|
+ <div className={style.centerContent}>
|
|
|
+ {accountCreateLogs?.map((item: any, index: number) => {
|
|
|
+ if (item?.productList) {
|
|
|
+ return <div className={style.acc} key={index}>
|
|
|
+ <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
|
|
|
+ {
|
|
|
+ item?.productList?.map((pack: { productName: string, author: string, id: number }, index: number) => {
|
|
|
+ return <div className={style.accCon} key={pack.id}>{pack.productName}<CloseOutlined className={style.close} onClick={() => {
|
|
|
+ goodsDel(index)
|
|
|
+ }} /></div>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ } else {
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={style.bottom}>
|
|
|
+ {accountCreateLogs?.length > 0 ? <span onClick={() => { setGoodsVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
|
|
|
+ <span>编辑</span>
|
|
|
+ </Tooltip>}
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+
|
|
|
+ {/* 数据源 */}
|
|
|
+ <Col className={style.conRightBorder} span={5}>
|
|
|
+ <div className={style.top}>
|
|
|
+ 数据源
|
|
|
+ </div>
|
|
|
+ <div className={style.center}>
|
|
|
+ <div className={style.centerContent}>
|
|
|
+ {accountCreateLogs?.map((item: any, index: number) => {
|
|
|
+ if (item?.userActionSetsList && item?.userActionSetsList?.length > 0) {
|
|
|
+ return <div className={style.acc} key={index}>
|
|
|
+ <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
|
|
|
+ {
|
|
|
+ item?.userActionSetsList?.map((pack: { name: string, type: string, id: number }, index1: number) => {
|
|
|
+ return <div className={style.accCon} key={pack.id}> <span className={style.title}>{pack.name}{' > '}{pack.type?.replace('USER_ACTION_SET_TYPE_', '')}</span> <CloseOutlined className={style.close} onClick={() => {
|
|
|
+ sourceDel(index, index1)
|
|
|
+ }} /></div>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ } else {
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={style.bottom}>
|
|
|
+ {accountCreateLogs?.length > 0 ? <span onClick={() => { setSourceVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
|
|
|
+ <span>编辑</span>
|
|
|
+ </Tooltip>}
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </>}
|
|
|
+ </Row>
|
|
|
+ </Col>
|
|
|
+ {/* =============广告创意=========== */}
|
|
|
+ {launchMode === 0 ? <Col span={12} xl={12} lg={24} md={24} sm={24} xs={24} className={style.conRight}>
|
|
|
+ <Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
|
|
|
+ <Row className={style.items}>
|
|
|
+ {/* 创意 */}
|
|
|
+ <Creative queryForm={queryForm} setQueryForm={setQueryForm} getSysAdgroups={getSysAdgroups} clearData={clearData} getSysAdcreative={getSysAdcreative} set_targetKey={set_targetKey} targetKey={targetKey} page_checked={page_checked} />
|
|
|
+ {/* 落地页 */}
|
|
|
+ <Col span={12} >
|
|
|
<div className={style.top}>
|
|
|
- 商品
|
|
|
+ 落地页
|
|
|
+ {(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap?.length > 0) && <CustomerServiceModal data={queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap} onChange={(data) => {
|
|
|
+ let newQueryForm = JSON.parse(JSON.stringify(queryForm))
|
|
|
+ newQueryForm.taskMediaMaps[targetKey].cropUserGroupMap = data
|
|
|
+ setQueryForm(newQueryForm)
|
|
|
+ }} />}
|
|
|
</div>
|
|
|
<div className={style.center}>
|
|
|
- <div className={style.centerContent}>
|
|
|
- {accountCreateLogs?.map((item: any, index: number) => {
|
|
|
- if (item?.productList) {
|
|
|
- return <div className={style.acc} key={index}>
|
|
|
- <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
|
|
|
- {
|
|
|
- item?.productList?.map((pack: { productName: string, author: string, id: number }, index: number) => {
|
|
|
- return <div className={style.accCon} key={pack.id}>{pack.productName}<CloseOutlined className={style.close} onClick={() => {
|
|
|
- goodsDel(index)
|
|
|
- }} /></div>
|
|
|
- })
|
|
|
- }
|
|
|
- </div>
|
|
|
+ <Tabs size={'small'} onEdit={onEdit} type="editable-card" activeKey={targetKey} onChange={(key) => { set_targetKey(key) }} hideAdd >
|
|
|
+ {
|
|
|
+ queryForm?.taskMediaMaps?.map((item, index) => {
|
|
|
+ return <Tabs.TabPane tab={'创意' + (index + 1)} key={index} >
|
|
|
+ <Spin spinning={get.loading}>
|
|
|
+ <div className={style.centerContent}>
|
|
|
+ {
|
|
|
+ item?.sysPageId || item?.accountPageIdMap ? <>
|
|
|
+ {
|
|
|
+ (item?.sysPageId && queryForm?.pageList) && <>
|
|
|
+ <div>落地页名称：{queryForm?.pageList[targetKey]?.pageName || ''}</div>
|
|
|
+ <div>分享名称：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareTitle || ''}</div>
|
|
|
+ <div>分享描述：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareDescription || ''}</div>
|
|
|
+ <div style={{ marginBottom: 10 }}>原生推广页顶部素材预览：
|
|
|
+ <div>{queryForm?.pageList[targetKey]?.pageSpecsList && queryForm?.pageList[targetKey]?.pageSpecsList[0]?.pageElementsSpecList?.filter((item: any, index: number) => index === 0)?.map((item: { elementType: 'TOP_IMAGE' | 'TOP_VIDEO' | 'TOP_SLIDER', topImageSpec: any, topSliderSpec: any, topVideoSpec: any }, index: number) => {
|
|
|
+ switch (item?.elementType) {
|
|
|
+ case 'TOP_IMAGE':
|
|
|
+ return <Image width={80} src={item?.topImageSpec?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
|
|
|
+ case 'TOP_SLIDER':
|
|
|
+ return <Space wrap key={index}>
|
|
|
+ {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} src={url} style={{ borderRadius: 8 }} key={'TOP_SLIDER' + index} />)}
|
|
|
+ </Space>
|
|
|
+ case 'TOP_VIDEO':
|
|
|
+ return <video src={item?.topVideoSpec?.videoUrl} width={150} controls key={index}></video>
|
|
|
+ }
|
|
|
+ })}</div>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ queryForm?.adqPageList && queryForm?.adqPageList[targetKey]?.map((adq: any) => {
|
|
|
+ return <div className={style.acc} key={adq.adAccountId}>
|
|
|
+ <div className={style.accName} style={{ fontWeight: 800 }}>{adq.adAccountId}</div>
|
|
|
+ <div className={style.accCon}>
|
|
|
+ <span className={style.title}>{adq.pageList[0].pageName}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
|
+ </div>
|
|
|
+ </Spin>
|
|
|
+ </Tabs.TabPane>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ <div className={style.bottom}>{
|
|
|
+ (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative) ? <>
|
|
|
+ {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
|
|
|
+ <Button type="link" onClick={() => {
|
|
|
+ setSelectImgVisible(true)
|
|
|
+ // 判定是否用原生页顶部替换外部素材
|
|
|
+ if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
+ init({ mediaType: 'PAGE', cloudSize: undefined, adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
} else {
|
|
|
- return null
|
|
|
+ init({ mediaType: 'PAGE', cloudSize: undefined })
|
|
|
}
|
|
|
- })}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={style.bottom}>
|
|
|
- {accountCreateLogs?.length > 0 ? <span onClick={() => { setGoodsVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
|
|
|
- <span>编辑</span>
|
|
|
+ }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId ? '修改' : '选择落地页'}</Button>
|
|
|
+
|
|
|
+ {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => {
|
|
|
+ setPageVisible(true)
|
|
|
+ if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
+ setCloudParams({ adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
+ } else {
|
|
|
+ setCloudParams({})
|
|
|
+ }
|
|
|
+ }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
|
|
|
+ <Button type="link">云端落地页</Button>
|
|
|
+ </Tooltip>}
|
|
|
+ </> : <Tooltip title="请先设置创意">
|
|
|
+ <Button type="link"><span>选择落地页</span></Button>
|
|
|
</Tooltip>}
|
|
|
</div>
|
|
|
</Col>
|
|
|
-
|
|
|
- {/* 数据源 */}
|
|
|
- <Col className={style.conRightBorder} span={5}>
|
|
|
+ </Row>
|
|
|
+ </Col> : <Col span={16} xl={16} lg={24} md={24} sm={24} xs={24} className={style.conRight}>
|
|
|
+ <Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
|
|
|
+ <Row className={style.items}>
|
|
|
+ {/* 创意 */}
|
|
|
+ <CreativeCL queryForm={queryForm} setQueryForm={setQueryForm} clearData={clearData} getSysAdcreative={getSysAdcreative} targetKey={targetKey} />
|
|
|
+ {/* 落地页 maxWidth: '25%', */}
|
|
|
+ <Col className={style.conRightBorder} style={{ border: 'none' }}>
|
|
|
<div className={style.top}>
|
|
|
- 数据源
|
|
|
+ 落地页
|
|
|
+ {(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap?.length > 0) && <CustomerServiceModal data={queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap} onChange={(data) => {
|
|
|
+ let newQueryForm = JSON.parse(JSON.stringify(queryForm))
|
|
|
+ newQueryForm.taskMediaMaps[targetKey].cropUserGroupMap = data
|
|
|
+ setQueryForm(newQueryForm)
|
|
|
+ }} />}
|
|
|
</div>
|
|
|
<div className={style.center}>
|
|
|
- <div className={style.centerContent}>
|
|
|
- {accountCreateLogs?.map((item: any, index: number) => {
|
|
|
- if (item?.userActionSetsList && item?.userActionSetsList?.length > 0) {
|
|
|
- return <div className={style.acc} key={index}>
|
|
|
- <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
|
|
|
- {
|
|
|
- item?.userActionSetsList?.map((pack: { name: string, type: string, id: number }, index1: number) => {
|
|
|
- return <div className={style.accCon} key={pack.id}> <span className={style.title}>{pack.name}{' > '}{pack.type?.replace('USER_ACTION_SET_TYPE_', '')}</span> <CloseOutlined className={style.close} onClick={() => {
|
|
|
- sourceDel(index, index1)
|
|
|
- }} /></div>
|
|
|
- })
|
|
|
- }
|
|
|
- </div>
|
|
|
+ {queryForm?.taskMediaMaps?.filter((item, index) => index === 0)?.map((item, index) => {
|
|
|
+ return <Spin spinning={get.loading} key={index}>
|
|
|
+ <div className={style.centerContent}>
|
|
|
+ {item?.sysPageId || item?.accountPageIdMap ? <>
|
|
|
+ {(item?.sysPageId && queryForm?.pageList) && <>
|
|
|
+ <div>落地页名称：{queryForm?.pageList[targetKey]?.pageName || ''}</div>
|
|
|
+ <div>分享名称：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareTitle || ''}</div>
|
|
|
+ <div>分享描述：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareDescription || ''}</div>
|
|
|
+ <div style={{ marginBottom: 10 }}>原生推广页顶部素材预览：
|
|
|
+ <div>{queryForm?.pageList[targetKey]?.pageSpecsList && queryForm?.pageList[targetKey]?.pageSpecsList[0]?.pageElementsSpecList?.filter((item: any, index: number) => index === 0)?.map((item: { elementType: 'TOP_IMAGE' | 'TOP_VIDEO' | 'TOP_SLIDER', topImageSpec: any, topSliderSpec: any, topVideoSpec: any }, index: number) => {
|
|
|
+ switch (item?.elementType) {
|
|
|
+ case 'TOP_IMAGE':
|
|
|
+ return <Image width={80} src={item?.topImageSpec?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
|
|
|
+ case 'TOP_SLIDER':
|
|
|
+ return <Space wrap key={index}>
|
|
|
+ {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} src={url} style={{ borderRadius: 8 }} key={'TOP_SLIDER' + index} />)}
|
|
|
+ </Space>
|
|
|
+ case 'TOP_VIDEO':
|
|
|
+ return <VideoNews src={item?.topVideoSpec?.videoUrl} />
|
|
|
+ }
|
|
|
+ })}</div>
|
|
|
+ </div>
|
|
|
+ </>}
|
|
|
+ {queryForm?.adqPageList && queryForm?.adqPageList[targetKey]?.map((adq: any) => {
|
|
|
+ return <div className={style.acc} key={adq.adAccountId}>
|
|
|
+ <div className={style.accName} style={{ fontWeight: 800 }}>{adq.adAccountId}</div>
|
|
|
+ <div className={style.accCon}>
|
|
|
+ <span className={style.title}>{adq.pageList[0].pageName}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ })}
|
|
|
+ </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
|
+ </div>
|
|
|
+ </Spin>
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ <div className={style.bottom}>{
|
|
|
+ (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative) ? <>
|
|
|
+ {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
|
|
|
+ <Button type="link" onClick={() => {
|
|
|
+ setSelectImgVisible(true)
|
|
|
+ // 判定是否用原生页顶部替换外部素材
|
|
|
+ if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
+ init({ mediaType: 'PAGE', cloudSize: undefined, adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
} else {
|
|
|
- return null
|
|
|
+ init({ mediaType: 'PAGE', cloudSize: undefined })
|
|
|
}
|
|
|
- })}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={style.bottom}>
|
|
|
- {accountCreateLogs?.length > 0 ? <span onClick={() => { setSourceVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
|
|
|
- <span>编辑</span>
|
|
|
+ }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId ? '修改' : '选择落地页'}</Button>
|
|
|
+
|
|
|
+ {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => {
|
|
|
+ setPageVisible(true)
|
|
|
+ if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
+ setCloudParams({ adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
+ } else {
|
|
|
+ setCloudParams({})
|
|
|
+ }
|
|
|
+ }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
|
|
|
+ <Button type="link">云端落地页</Button>
|
|
|
+ </Tooltip>}
|
|
|
+ </> : <Tooltip title="请先设置创意">
|
|
|
+ <Button type="link"><span>选择落地页</span></Button>
|
|
|
</Tooltip>}
|
|
|
</div>
|
|
|
</Col>
|
|
|
- </>}
|
|
|
- </Row>
|
|
|
- </Col>
|
|
|
- {/* =============广告创意=========== */}
|
|
|
- {launchMode === 0 ? <Col span={12} xl={12} lg={24} md={24} sm={24} xs={24} className={style.conRight}>
|
|
|
- <Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
|
|
|
- <Row className={style.items}>
|
|
|
- {/* 创意 */}
|
|
|
- <Creative queryForm={queryForm} setQueryForm={setQueryForm} getSysAdgroups={getSysAdgroups} clearData={clearData} getSysAdcreative={getSysAdcreative} set_targetKey={set_targetKey} targetKey={targetKey} page_checked={page_checked} />
|
|
|
- {/* 落地页 */}
|
|
|
- <Col span={12} >
|
|
|
- <div className={style.top}>
|
|
|
- 落地页
|
|
|
- {(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap?.length > 0) && <CustomerServiceModal data={queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap} onChange={(data) => {
|
|
|
- let newQueryForm = JSON.parse(JSON.stringify(queryForm))
|
|
|
- newQueryForm.taskMediaMaps[targetKey].cropUserGroupMap = data
|
|
|
- setQueryForm(newQueryForm)
|
|
|
- }} />}
|
|
|
- </div>
|
|
|
- <div className={style.center}>
|
|
|
- <Tabs size={'small'} onEdit={onEdit} type="editable-card" activeKey={targetKey} onChange={(key) => { set_targetKey(key) }} hideAdd >
|
|
|
- {
|
|
|
- queryForm?.taskMediaMaps?.map((item, index) => {
|
|
|
- return <Tabs.TabPane tab={'创意' + (index + 1)} key={index} >
|
|
|
- <Spin spinning={get.loading}>
|
|
|
- <div className={style.centerContent}>
|
|
|
- {
|
|
|
- item?.sysPageId || item?.accountPageIdMap ? <>
|
|
|
- {
|
|
|
- (item?.sysPageId && queryForm?.pageList) && <>
|
|
|
- <div>落地页名称：{queryForm?.pageList[targetKey]?.pageName || ''}</div>
|
|
|
- <div>分享名称：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareTitle || ''}</div>
|
|
|
- <div>分享描述：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareDescription || ''}</div>
|
|
|
- <div style={{ marginBottom: 10 }}>原生推广页顶部素材预览：
|
|
|
- <div>{queryForm?.pageList[targetKey]?.pageSpecsList && queryForm?.pageList[targetKey]?.pageSpecsList[0]?.pageElementsSpecList?.filter((item: any, index: number) => index === 0)?.map((item: { elementType: 'TOP_IMAGE' | 'TOP_VIDEO' | 'TOP_SLIDER', topImageSpec: any, topSliderSpec: any, topVideoSpec: any }, index: number) => {
|
|
|
- switch (item?.elementType) {
|
|
|
- case 'TOP_IMAGE':
|
|
|
- return <Image width={80} src={item?.topImageSpec?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
|
|
|
- case 'TOP_SLIDER':
|
|
|
- return <Space wrap key={index}>
|
|
|
- {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} src={url} style={{ borderRadius: 8 }} key={'TOP_SLIDER' + index} />)}
|
|
|
- </Space>
|
|
|
- case 'TOP_VIDEO':
|
|
|
- return <video src={item?.topVideoSpec?.videoUrl} width={150} controls key={index}></video>
|
|
|
- }
|
|
|
- })}</div>
|
|
|
- </div>
|
|
|
- </>
|
|
|
- }
|
|
|
- {
|
|
|
- queryForm?.adqPageList && queryForm?.adqPageList[targetKey]?.map((adq: any) => {
|
|
|
- return <div className={style.acc} key={adq.adAccountId}>
|
|
|
- <div className={style.accName} style={{ fontWeight: 800 }}>{adq.adAccountId}</div>
|
|
|
- <div className={style.accCon}>
|
|
|
- <span className={style.title}>{adq.pageList[0].pageName}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- })
|
|
|
- }
|
|
|
- </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
|
- </div>
|
|
|
- </Spin>
|
|
|
- </Tabs.TabPane>
|
|
|
- })
|
|
|
- }
|
|
|
- </Tabs>
|
|
|
- </div>
|
|
|
- <div className={style.bottom}>{
|
|
|
- (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative) ? <>
|
|
|
- {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
|
|
|
- <Button type="link" onClick={() => {
|
|
|
- setSelectImgVisible(true)
|
|
|
- // 判定是否用原生页顶部替换外部素材
|
|
|
- if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
- init({ mediaType: 'PAGE', cloudSize: undefined, adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
- } else {
|
|
|
- init({ mediaType: 'PAGE', cloudSize: undefined })
|
|
|
- }
|
|
|
- }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId ? '修改' : '选择落地页'}</Button>
|
|
|
+ </Row>
|
|
|
+ </Col>}
|
|
|
|
|
|
- {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => {
|
|
|
- setPageVisible(true)
|
|
|
- if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
- setCloudParams({ adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
- } else {
|
|
|
- setCloudParams({})
|
|
|
- }
|
|
|
- }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
|
|
|
- <Button type="link">云端落地页</Button>
|
|
|
- </Tooltip>}
|
|
|
- </> : <Tooltip title="请先设置创意">
|
|
|
- <Button type="link"><span>选择落地页</span></Button>
|
|
|
- </Tooltip>}
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </Col> : <Col span={16} xl={16} lg={24} md={24} sm={24} xs={24} className={style.conRight}>
|
|
|
- <Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
|
|
|
- <Row className={style.items}>
|
|
|
- {/* 创意 */}
|
|
|
- <CreativeCL queryForm={queryForm} setQueryForm={setQueryForm} clearData={clearData} getSysAdcreative={getSysAdcreative} targetKey={targetKey} />
|
|
|
- {/* 落地页 maxWidth: '25%', */}
|
|
|
- <Col className={style.conRightBorder} style={{ border: 'none' }}>
|
|
|
- <div className={style.top}>
|
|
|
- 落地页
|
|
|
- {(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap?.length > 0) && <CustomerServiceModal data={queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap} onChange={(data) => {
|
|
|
- let newQueryForm = JSON.parse(JSON.stringify(queryForm))
|
|
|
- newQueryForm.taskMediaMaps[targetKey].cropUserGroupMap = data
|
|
|
- setQueryForm(newQueryForm)
|
|
|
- }} />}
|
|
|
- </div>
|
|
|
- <div className={style.center}>
|
|
|
- {queryForm?.taskMediaMaps?.filter((item, index) => index === 0)?.map((item, index) => {
|
|
|
- return <Spin spinning={get.loading} key={index}>
|
|
|
- <div className={style.centerContent}>
|
|
|
- {item?.sysPageId || item?.accountPageIdMap ? <>
|
|
|
- {(item?.sysPageId && queryForm?.pageList) && <>
|
|
|
- <div>落地页名称：{queryForm?.pageList[targetKey]?.pageName || ''}</div>
|
|
|
- <div>分享名称：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareTitle || ''}</div>
|
|
|
- <div>分享描述：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareDescription || ''}</div>
|
|
|
- <div style={{ marginBottom: 10 }}>原生推广页顶部素材预览：
|
|
|
- <div>{queryForm?.pageList[targetKey]?.pageSpecsList && queryForm?.pageList[targetKey]?.pageSpecsList[0]?.pageElementsSpecList?.filter((item: any, index: number) => index === 0)?.map((item: { elementType: 'TOP_IMAGE' | 'TOP_VIDEO' | 'TOP_SLIDER', topImageSpec: any, topSliderSpec: any, topVideoSpec: any }, index: number) => {
|
|
|
- switch (item?.elementType) {
|
|
|
- case 'TOP_IMAGE':
|
|
|
- return <Image width={80} src={item?.topImageSpec?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
|
|
|
- case 'TOP_SLIDER':
|
|
|
- return <Space wrap key={index}>
|
|
|
- {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} src={url} style={{ borderRadius: 8 }} key={'TOP_SLIDER' + index} />)}
|
|
|
- </Space>
|
|
|
- case 'TOP_VIDEO':
|
|
|
- return <VideoNews src={item?.topVideoSpec?.videoUrl} />
|
|
|
- }
|
|
|
- })}</div>
|
|
|
- </div>
|
|
|
- </>}
|
|
|
- {queryForm?.adqPageList && queryForm?.adqPageList[targetKey]?.map((adq: any) => {
|
|
|
- return <div className={style.acc} key={adq.adAccountId}>
|
|
|
- <div className={style.accName} style={{ fontWeight: 800 }}>{adq.adAccountId}</div>
|
|
|
- <div className={style.accCon}>
|
|
|
- <span className={style.title}>{adq.pageList[0].pageName}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- })}
|
|
|
- </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
|
- </div>
|
|
|
- </Spin>
|
|
|
- })}
|
|
|
- </div>
|
|
|
- <div className={style.bottom}>{
|
|
|
- (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative) ? <>
|
|
|
- {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
|
|
|
- <Button type="link" onClick={() => {
|
|
|
- setSelectImgVisible(true)
|
|
|
- // 判定是否用原生页顶部替换外部素材
|
|
|
- if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
- init({ mediaType: 'PAGE', cloudSize: undefined, adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
- } else {
|
|
|
- init({ mediaType: 'PAGE', cloudSize: undefined })
|
|
|
- }
|
|
|
- }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId ? '修改' : '选择落地页'}</Button>
|
|
|
-
|
|
|
- {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => {
|
|
|
- setPageVisible(true)
|
|
|
- if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
|
|
|
- setCloudParams({ adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
|
|
|
- } else {
|
|
|
- setCloudParams({})
|
|
|
- }
|
|
|
- }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
|
|
|
- <Button type="link">云端落地页</Button>
|
|
|
- </Tooltip>}
|
|
|
- </> : <Tooltip title="请先设置创意">
|
|
|
- <Button type="link"><span>选择落地页</span></Button>
|
|
|
- </Tooltip>}
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </Col>}
|
|
|
-
|
|
|
- </Row>
|
|
|
- {/* =============广告底部按钮=========== */}
|
|
|
- <Space className={style.bts} wrap>
|
|
|
- <TacticsS queryForm={queryForm} accountCreateLogs={accountCreateLogs} launchMode={launchMode} />
|
|
|
- <Button type='primary' onClick={severBd}>存为预设</Button>
|
|
|
- <Button type='primary' onClick={preview}><SearchOutlined /> 批量预览广告</Button>
|
|
|
- <Button onClick={delBdPlan}>清空配置/预设</Button>
|
|
|
- </Space>
|
|
|
- </div>
|
|
|
- </Card>
|
|
|
+ </Row>
|
|
|
+ {/* =============广告底部按钮=========== */}
|
|
|
+ <Space className={style.bts} wrap>
|
|
|
+ <TacticsS queryForm={queryForm} accountCreateLogs={accountCreateLogs} launchMode={launchMode} />
|
|
|
+ <Button type='primary' onClick={severBd}>存为预设</Button>
|
|
|
+ <Button type='primary' onClick={preview}><SearchOutlined /> 批量预览广告</Button>
|
|
|
+ <Button onClick={delBdPlan}>清空配置/预设</Button>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </Spin>
|
|
|
|
|
|
<Card
|
|
|
className={style.createAd}
|
