|
@@ -1,21 +1,27 @@
|
|
|
import Tables from "@/components/Tables"
|
|
|
import { useAjax } from "@/Hook/useAjax"
|
|
|
-import { CreateAdProps } from "@/services/launchAdq/createAd"
|
|
|
+import { createAdBatchApi, CreateAdProps } from "@/services/launchAdq/createAd"
|
|
|
+import { getSysAdcreativeInfo } from "@/services/launchAdq/creative"
|
|
|
import { BidModeEnum, BidStrategyEnum, OptimizationGoalEnum, PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
|
|
|
+import { getTagsList } from "@/services/launchAdq/global"
|
|
|
import { getSysAdgroupsInfo } from "@/services/launchAdq/localAd"
|
|
|
import { getsysTargetingInfo } from "@/services/launchAdq/targeting"
|
|
|
import { CloseOutlined, SearchOutlined } from "@ant-design/icons"
|
|
|
-import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, message } from "antd"
|
|
|
+import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, message, Popover } from "antd"
|
|
|
import React, { useEffect, useState } from "react"
|
|
|
import { useModel } from "umi"
|
|
|
import AdModal from "../../components/adModal"
|
|
|
+import CreativeModal from "../../components/creativeModal"
|
|
|
+import CrowdPackModal from "../../components/crowdPackModal"
|
|
|
import DataSourceModal from "../../components/dataSourceModal"
|
|
|
import GoodsModal from "../../components/goodsModal"
|
|
|
import IdModal from "../../components/idModal"
|
|
|
import LookLanding from "../../components/lookLanding"
|
|
|
import SelectCloud from "../../components/selectCloud"
|
|
|
import TargetingModal from "../../components/targetingModal"
|
|
|
+import TargetingTooltip from "../../components/targetingTooltip"
|
|
|
import { WxAutoButton } from "../../req"
|
|
|
+import AdcreativeCol from "./adcreativeCol"
|
|
|
import style from './index.less'
|
|
|
import Selector from "./selector"
|
|
|
import SubmitModal from "./submitModal"
|
|
@@ -30,31 +36,72 @@ const CreateAd: React.FC = () => {
|
|
|
campaignType: 'CAMPAIGN_TYPE_NORMAL', // 计划类型 CAMPAIGN_TYPE_NORMAL CAMPAIGN_TYPE_SEARCH
|
|
|
promotedObjectType: 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT', // 推广目标类型
|
|
|
speedMode: 'SPEED_MODE_STANDARD', // 投放速度模式
|
|
|
- sysAdgroupsId: undefined, // 广告组内容
|
|
|
+ sysAdgroupId: undefined, // 广告组内容
|
|
|
sysTargetingId: undefined, // 定向包 id
|
|
|
adName: undefined, // 广告名称
|
|
|
configuredStatus: 'AD_STATUS_SUSPEND', // 广告状态
|
|
|
sysAdcreativeId: undefined, // 创意ID
|
|
|
sysPageId: undefined, // 落地页Id
|
|
|
})
|
|
|
- const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSetsList?: number, productList?: any, conversionList?: any }[]>([]) // 账户
|
|
|
+ const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSetsList?: number, productList?: any, conversionList?: any, customAudienceList?: any, excludedCustomAudienceList?: any }[]>([]) // 账户
|
|
|
|
|
|
const [adVisible, setAdVisible] = useState<boolean>(false) // 选择广告弹窗控制
|
|
|
const [dxVisible, setDxVisible] = useState<boolean>(false) // 选择定向弹窗控制
|
|
|
+ const [creativeVisible, setCreativeVisible] = useState<boolean>(false) // 选择创意弹窗控制
|
|
|
const [goodsVisible, setGoodsVisible] = useState<boolean>(false) // 选择商品弹窗控制
|
|
|
const [sourceVisible, setSourceVisible] = useState<boolean>(false) // 选择数据源弹窗控制
|
|
|
const [idVisible, setIdVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
|
|
|
const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
|
|
|
const [lookVisible, setLookVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
|
|
|
const [subVisible, setSubVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
|
|
|
- const getSysAdgroups = useAjax((params) => getSysAdgroupsInfo(params))
|
|
|
- const getsysTargeting = useAjax((params) => getsysTargetingInfo(params))
|
|
|
+ const [cpVisible, setCpVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
|
|
|
const [wxButtonList, setWxButtonList] = useState<WxAutoButton[]>([])
|
|
|
const [tableData, setTableData] = useState<any[]>([]) // 预览表格
|
|
|
const [tableSelect, setTableSelect] = useState<any[]>([])
|
|
|
+ const [geoLocationList, setGeoLocationList] = useState<any>({}) // 所有地域列表
|
|
|
+ const [modelList, setModelList] = useState<any>({}) // 所有品牌手机
|
|
|
+ const [adcreativeTemplateAppellation, setAdcreativeTemplateAppellation] = useState<string>('') // 创意形式
|
|
|
const { init, get } = useModel('useLaunchAdq.useBdMediaPup')
|
|
|
+
|
|
|
+
|
|
|
+ const tagsList_REGION = useAjax((params) => getTagsList(params))
|
|
|
+ const tagsList_MODEL = useAjax((params) => getTagsList(params))
|
|
|
+ const getSysAdgroups = useAjax((params) => getSysAdgroupsInfo(params))
|
|
|
+ const getsysTargeting = useAjax((params) => getsysTargetingInfo(params))
|
|
|
+ const getSysAdcreative = useAjax((params) => getSysAdcreativeInfo(params))
|
|
|
+ const createAdBatch = useAjax((params) => createAdBatchApi(params))
|
|
|
/*************************/
|
|
|
|
|
|
+ /**数据回填 */
|
|
|
+ useEffect(() => {
|
|
|
+ let adqAdData = localStorage.getItem('ADQAD')
|
|
|
+ if (adqAdData) {
|
|
|
+ const { queryForm, accountCreateLogs } = JSON.parse(adqAdData)
|
|
|
+ setQueryForm({ ...queryForm })
|
|
|
+ setAccountCreateLogs(accountCreateLogs)
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ // 设置地域
|
|
|
+ useEffect(() => {
|
|
|
+ tagsList_REGION.run({ type: 'REGION' }).then(res => {
|
|
|
+ if (res) {
|
|
|
+ setGeoLocationList(() => (res as any[])?.reduce((prev: any, cur: { id: number }) => {
|
|
|
+ prev[cur.id] = cur
|
|
|
+ return prev
|
|
|
+ }, {}))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ tagsList_MODEL.run({ type: 'DEVICE_BRAND_MODEL' }).then(res => {
|
|
|
+ if (res) {
|
|
|
+ setModelList(() => (res as any[])?.reduce((prev: any, cur: { id: number }) => {
|
|
|
+ prev[cur.id] = cur
|
|
|
+ return prev
|
|
|
+ }, {}))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, [])
|
|
|
+
|
|
|
// 获取账户列表
|
|
|
useEffect(() => {
|
|
|
getAdAccount.run()
|
|
@@ -63,10 +110,18 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
/** 获取广告详情 */
|
|
|
useEffect(() => {
|
|
|
- if (queryForm?.sysAdgroupsId) {
|
|
|
- getSysAdgroups.run(queryForm?.sysAdgroupsId)
|
|
|
+ if (queryForm?.sysAdgroupId) {
|
|
|
+ getSysAdgroups.run(queryForm?.sysAdgroupId)
|
|
|
+ }
|
|
|
+ }, [queryForm?.sysAdgroupId])
|
|
|
+
|
|
|
+ /** 获取创意详情 */
|
|
|
+ useEffect(() => {
|
|
|
+ if (queryForm?.sysAdcreativeId) {
|
|
|
+ getSysAdcreative.run(queryForm?.sysAdcreativeId)
|
|
|
}
|
|
|
- }, [queryForm?.sysAdgroupsId])
|
|
|
+ }, [queryForm?.sysAdcreativeId])
|
|
|
+
|
|
|
/** 获取定向详情 */
|
|
|
useEffect(() => {
|
|
|
if (queryForm?.sysTargetingId) {
|
|
@@ -94,12 +149,18 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
/** 删除数据源 */
|
|
|
const sourceDel = (index: number, num: number) => {
|
|
|
- console.log(index, num);
|
|
|
let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
|
|
|
newArr[index].userActionSetsList?.splice(num, 1)
|
|
|
setAccountCreateLogs(newArr)
|
|
|
}
|
|
|
|
|
|
+ /** 删除人群包 */
|
|
|
+ const cpDel = (index: number, num: number, key: string) => {
|
|
|
+ let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
|
|
|
+ newArr[index][key]?.splice(num, 1)
|
|
|
+ setAccountCreateLogs(newArr)
|
|
|
+ }
|
|
|
+
|
|
|
/** 设置落地页 */
|
|
|
const setPage = (e: any) => {
|
|
|
setQueryForm({ ...queryForm, sysPageId: e[0]?.id || undefined })
|
|
@@ -116,7 +177,7 @@ const CreateAd: React.FC = () => {
|
|
|
message.error('请选择推广目标')
|
|
|
return
|
|
|
}
|
|
|
- if (!queryForm.sysAdgroupsId) {
|
|
|
+ if (!queryForm.sysAdgroupId) {
|
|
|
message.error('请先设置广告基本信息')
|
|
|
return
|
|
|
}
|
|
@@ -124,16 +185,16 @@ const CreateAd: React.FC = () => {
|
|
|
message.error('请选择定向')
|
|
|
return
|
|
|
}
|
|
|
- // if (!queryForm.sysAdcreativeId) {
|
|
|
- // message.error('请设置创意的基本信息')
|
|
|
- // return
|
|
|
- // }
|
|
|
+ if (!queryForm.sysAdcreativeId) {
|
|
|
+ message.error('请设置创意的基本信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
if (!queryForm.sysPageId) {
|
|
|
message.error('请选择落地页')
|
|
|
return
|
|
|
}
|
|
|
let data = accountCreateLogs.map((item: any, index) => {
|
|
|
- return { ...item, id: index + 1, ...queryForm, sysAdGroupData: getSysAdgroups?.data, targetingData: getsysTargeting?.data, pageData: get?.data }
|
|
|
+ return { ...item, ...queryForm, sysAdGroupData: getSysAdgroups?.data, targetingData: getsysTargeting?.data, sysAdcreativeData: { ...getSysAdcreative?.data, adcreativeTemplateAppellation }, pageData: get?.data }
|
|
|
})
|
|
|
console.log('data--->', data)
|
|
|
setTableData(data)
|
|
@@ -141,7 +202,67 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
const submit = (data: { adName: string, campaignName: string }) => {
|
|
|
console.log(111111, tableSelect);
|
|
|
- console.log(222222, data)
|
|
|
+ let params = { ...queryForm, ...data }
|
|
|
+ let accountLogs = tableSelect.map((item: any) => {
|
|
|
+ // userActionSetsList 数据源 productList 商品
|
|
|
+ let data: any = { adAccountId: item.id }
|
|
|
+ if (item?.userActionSetsList?.length > 0) { // 数据源
|
|
|
+ data.userActionSets = item?.userActionSetsList?.map((item: any) => ({ id: item?.id, type: item?.type }))
|
|
|
+ }
|
|
|
+ if (item?.productList?.length > 0) { // 商品
|
|
|
+ data.productId = item?.productList[0].productOuterId
|
|
|
+ data.productCatalogId = item?.productList[0].productCatalogId
|
|
|
+ }
|
|
|
+ if (item?.customAudienceList?.length > 0) {
|
|
|
+ data.customAudience = item?.customAudienceList?.map((item: any) => item.id)
|
|
|
+ }
|
|
|
+ if (item?.excludedCustomAudienceList?.length > 0) {
|
|
|
+ data.excludedCustomAudience = item?.excludedCustomAudienceList?.map((item: any) => item.id)
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ })
|
|
|
+ params.accountCreateLogs = accountLogs
|
|
|
+ createAdBatch.run(params).then(res => {
|
|
|
+ if (res) {
|
|
|
+ sessionStorage.setItem('CAMP', data?.campaignName)
|
|
|
+ message.success('创建成功')
|
|
|
+ // window.location.href = '/#/launchSystemNew/launchManage/taskList'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 清除数据 */
|
|
|
+ const clearData = () => {
|
|
|
+ setTableData([])
|
|
|
+ setTableSelect([])
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 存为预设 */
|
|
|
+ const severBd = () => {
|
|
|
+ // queryForm accountCreateLogs
|
|
|
+ localStorage.setItem('ADQAD', JSON.stringify({
|
|
|
+ queryForm,
|
|
|
+ accountCreateLogs
|
|
|
+ }))
|
|
|
+ message.success('存储成功')
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 清除 */
|
|
|
+ const delBdPlan = () => {
|
|
|
+ localStorage.removeItem('ADQAD')
|
|
|
+ setAccountCreateLogs([])
|
|
|
+ setQueryForm({
|
|
|
+ campaignName: '', // 计划名称
|
|
|
+ campaignType: 'CAMPAIGN_TYPE_NORMAL', // 计划类型 CAMPAIGN_TYPE_NORMAL CAMPAIGN_TYPE_SEARCH
|
|
|
+ promotedObjectType: 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT', // 推广目标类型
|
|
|
+ speedMode: 'SPEED_MODE_STANDARD', // 投放速度模式
|
|
|
+ sysAdgroupId: undefined, // 广告组内容
|
|
|
+ sysTargetingId: undefined, // 定向包 id
|
|
|
+ adName: undefined, // 广告名称
|
|
|
+ configuredStatus: 'AD_STATUS_SUSPEND', // 广告状态
|
|
|
+ sysAdcreativeId: undefined, // 创意ID
|
|
|
+ sysPageId: undefined, // 落地页Id
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
return <Space direction="vertical" style={{ width: '100%' }}>
|
|
@@ -158,8 +279,10 @@ const CreateAd: React.FC = () => {
|
|
|
filterOption={(input: any, option: any) =>
|
|
|
(option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
}
|
|
|
+ value={accountCreateLogs?.map((item: { id: number }) => item?.id)}
|
|
|
onChange={(e, option) => {
|
|
|
setAccountCreateLogs(option?.map((item: any) => ({ adAccountId: item?.children, id: item?.value })))
|
|
|
+ clearData()
|
|
|
}}
|
|
|
>
|
|
|
{getAdAccount?.data?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.accountId}</Select.Option>)}
|
|
@@ -172,7 +295,7 @@ const CreateAd: React.FC = () => {
|
|
|
<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 }) }}>
|
|
|
+ } onChange={(e) => { setQueryForm({ ...queryForm, promotedObjectType: e }); clearData() }}>
|
|
|
{Object.keys(PromotedObjectType).map(key => {
|
|
|
return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
|
|
|
})}
|
|
@@ -192,16 +315,16 @@ const CreateAd: React.FC = () => {
|
|
|
<Spin spinning={getSysAdgroups.loading}>
|
|
|
<div className={style.centerContent}>
|
|
|
{getSysAdgroups?.data ? <>
|
|
|
- <div>广告名称: {getSysAdgroups?.data?.adgroupName}</div>
|
|
|
- <div>推广目标: {PromotedObjectType[getSysAdgroups?.data?.promotedObjectType]}</div>
|
|
|
- <div>广告版位: {getSysAdgroups?.data?.siteSet?.map((item: string) => SiteSetEnum[item]).toString()}</div>
|
|
|
- <div>投放日期: {getSysAdgroups?.data?.endDate ? getSysAdgroups?.data?.beginDate + '~' + getSysAdgroups?.data?.endDate : getSysAdgroups?.data?.beginDate + '~' + '长期投放'}</div>
|
|
|
- <div>出价方式: {BidModeEnum[getSysAdgroups?.data?.bidMode]}</div>
|
|
|
- <div>优化目标: {OptimizationGoalEnum[getSysAdgroups?.data?.optimizationGoal]}</div>
|
|
|
- <div>出价类型: {getSysAdgroups?.data?.smartBidType === 'SMART_BID_TYPE_CUSTOM' ? '手动出价' : '自动出价'}</div>
|
|
|
- <div>出价策略: {BidStrategyEnum[getSysAdgroups?.data?.bidStrategy]}</div>
|
|
|
- <div>广告出价: {getSysAdgroups?.data?.bidAmount}</div>
|
|
|
- <div>广告日预算: {getSysAdgroups?.data?.dailyBudget || '不限'}</div>
|
|
|
+ <div>广告名称: <span>{getSysAdgroups?.data?.adgroupName}</span></div>
|
|
|
+ <div>推广目标: <span>{PromotedObjectType[getSysAdgroups?.data?.promotedObjectType]}</span></div>
|
|
|
+ <div>广告版位: <span>{getSysAdgroups?.data?.siteSet?.map((item: string) => SiteSetEnum[item]).toString()}</span></div>
|
|
|
+ <div>投放日期: <span>{getSysAdgroups?.data?.endDate ? getSysAdgroups?.data?.beginDate + '~' + getSysAdgroups?.data?.endDate : getSysAdgroups?.data?.beginDate + '~' + '长期投放'}</span></div>
|
|
|
+ <div>出价方式: <span>{BidModeEnum[getSysAdgroups?.data?.bidMode]}</span></div>
|
|
|
+ <div>优化目标: <span>{OptimizationGoalEnum[getSysAdgroups?.data?.optimizationGoal]}</span></div>
|
|
|
+ <div>出价类型: <span>{getSysAdgroups?.data?.smartBidType === 'SMART_BID_TYPE_CUSTOM' ? '手动出价' : '自动出价'}</span></div>
|
|
|
+ <div>出价策略: <span>{BidStrategyEnum[getSysAdgroups?.data?.bidStrategy]}</span></div>
|
|
|
+ <div>广告出价: <span>{getSysAdgroups?.data?.bidAmount}</span></div>
|
|
|
+ <div>广告日预算: <span>{getSysAdgroups?.data?.dailyBudget || '不限'}</span></div>
|
|
|
</> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
|
</div>
|
|
|
</Spin>
|
|
@@ -215,14 +338,58 @@ const CreateAd: React.FC = () => {
|
|
|
{/* =============定向包=========== */}
|
|
|
<Col className={style.conRightBorder}>
|
|
|
<div className={style.top}>
|
|
|
- 定向{/* <span>已选:{1}</span> */}
|
|
|
+ 定向
|
|
|
+ {accountCreateLogs?.length > 0 && queryForm?.sysTargetingId ? <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>
|
|
|
+ </Tooltip>}
|
|
|
</div>
|
|
|
<div className={style.center}>
|
|
|
<Spin spinning={getsysTargeting.loading}>
|
|
|
<div className={style.centerContent}>
|
|
|
- {getsysTargeting?.data ? <>
|
|
|
- <div>定向名称: {getsysTargeting?.data?.targetingName}</div>
|
|
|
- <div>定向描述: {getsysTargeting?.data?.description}</div>
|
|
|
+ {queryForm?.sysTargetingId ? <>
|
|
|
+ {getsysTargeting?.data && <Popover
|
|
|
+ content={<div className={style.popover}>
|
|
|
+ <TargetingTooltip data={getsysTargeting?.data} geoLocationList={geoLocationList} modelList={modelList} />
|
|
|
+ </div>}
|
|
|
+ trigger="hover"
|
|
|
+ placement="right"
|
|
|
+ >
|
|
|
+ <div className={style.popoverContent}>
|
|
|
+ <div>定向名称: <span>{getsysTargeting?.data?.targetingName}</span></div>
|
|
|
+ <div>定向描述: <span>{getsysTargeting?.data?.description || '<空>'}</span></div>
|
|
|
+ </div>
|
|
|
+ </Popover>}
|
|
|
+
|
|
|
+ {accountCreateLogs?.map((item: any, index: number) => {
|
|
|
+ if (item?.customAudienceList) {
|
|
|
+ return <div className={style.acc} key={index}>
|
|
|
+ <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
|
|
|
+ {item?.customAudienceList?.length > 0 && <>
|
|
|
+ <div className={style.accName}>定向用户群</div>
|
|
|
+ {
|
|
|
+ item?.customAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
|
|
|
+ return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
|
|
|
+ cpDel(index, index1, 'customAudienceList')
|
|
|
+ }} /></div>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </>}
|
|
|
+ {item?.excludedCustomAudienceList?.length > 0 && <>
|
|
|
+ <div className={style.accName} style={{ marginTop: 5 }}>排除用户群</div>
|
|
|
+ {
|
|
|
+ item?.excludedCustomAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
|
|
|
+ return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
|
|
|
+ cpDel(index, index1, 'excludedCustomAudienceList')
|
|
|
+ }} /></div>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </>}
|
|
|
+ </div>
|
|
|
+ } else {
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ })}
|
|
|
+
|
|
|
</> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
|
</div>
|
|
|
</Spin>
|
|
@@ -239,7 +406,7 @@ const CreateAd: React.FC = () => {
|
|
|
{accountCreateLogs?.map((item: any, index: number) => {
|
|
|
if (item?.productList) {
|
|
|
return <div className={style.acc} key={index}>
|
|
|
- <div className={style.accName}>{item.adAccountId}</div>
|
|
|
+ <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={() => {
|
|
@@ -271,7 +438,7 @@ const CreateAd: React.FC = () => {
|
|
|
{accountCreateLogs?.map((item: any, index: number) => {
|
|
|
if (item?.userActionSetsList && item?.userActionSetsList?.length > 0) {
|
|
|
return <div className={style.acc} key={index}>
|
|
|
- <div className={style.accName}>{item.adAccountId}</div>
|
|
|
+ <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}</span> <CloseOutlined className={style.close} onClick={() => {
|
|
@@ -298,13 +465,24 @@ const CreateAd: React.FC = () => {
|
|
|
<Col span={8} className={style.conRight}>
|
|
|
<Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
|
|
|
<Row className={style.items}>
|
|
|
+ {/* 创意 */}
|
|
|
<Col span={12} className={style.conRightBorder}>
|
|
|
<div className={style.top}>创意基本信息</div>
|
|
|
<div className={style.center}>
|
|
|
-
|
|
|
+ <Spin spinning={getSysAdcreative.loading}>
|
|
|
+ <div className={style.centerContent}>
|
|
|
+ {(getSysAdcreative?.data && queryForm?.sysAdcreativeId) && <AdcreativeCol data={getSysAdcreative?.data} onChange={(e) => { setAdcreativeTemplateAppellation(e) }} />}
|
|
|
+ </div>
|
|
|
+ </Spin>
|
|
|
+ </div>
|
|
|
+ <div className={style.bottom}>{queryForm?.sysAdgroupId ? <>
|
|
|
+ <Button type="link" onClick={() => { setCreativeVisible(true) }}>{queryForm?.sysAdcreativeId ? '修改' : '添加'}</Button>
|
|
|
+ </> : <Tooltip title="请先设置广告">
|
|
|
+ <Button type="link"><span>添加</span></Button>
|
|
|
+ </Tooltip>}
|
|
|
</div>
|
|
|
- <div className={style.bottom}><span onClick={() => { }}>编辑</span></div>
|
|
|
</Col>
|
|
|
+ {/* 落地页 */}
|
|
|
<Col span={12} >
|
|
|
<div className={style.top}>
|
|
|
落地页
|
|
@@ -323,8 +501,8 @@ const CreateAd: React.FC = () => {
|
|
|
case 'TOP_IMAGE':
|
|
|
return <Image width={80} src={item.topImageSpec.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
|
|
|
case 'TOP_SLIDER':
|
|
|
- return <Space>
|
|
|
- {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={80} src={url} style={{ borderRadius: 8 }} key={index} />)}
|
|
|
+ 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>
|
|
@@ -335,10 +513,10 @@ const CreateAd: React.FC = () => {
|
|
|
</div>
|
|
|
</Spin>
|
|
|
</div>
|
|
|
- <div className={style.bottom}>{queryForm?.sysAdgroupsId ? <>
|
|
|
+ <div className={style.bottom}>{queryForm?.sysAdcreativeId ? <>
|
|
|
{queryForm?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
|
|
|
<Button type="link" onClick={() => { setSelectImgVisible(true) }}>{queryForm?.sysPageId ? '修改' : '选择落地页'}</Button>
|
|
|
- </> : <Tooltip title="请先设置广告基本信息和创意">
|
|
|
+ </> : <Tooltip title="请先设置创意">
|
|
|
<Button type="link"><span>选择落地页</span></Button>
|
|
|
</Tooltip>}
|
|
|
</div>
|
|
@@ -348,9 +526,9 @@ const CreateAd: React.FC = () => {
|
|
|
</Row>
|
|
|
{/* =============广告底部按钮=========== */}
|
|
|
<Space className={style.bts}>
|
|
|
- {/* <Button type='primary' onClick={severBd}>暂存到本地</Button> */}
|
|
|
+ <Button type='primary' onClick={severBd}>存为预设</Button>
|
|
|
<Button type='primary' onClick={preview}><SearchOutlined /> 批量预览广告</Button>
|
|
|
- {/* <Button onClick={delBdPlan}>清空本地配置</Button> */}
|
|
|
+ <Button onClick={delBdPlan}>清空配置/预设</Button>
|
|
|
</Space>
|
|
|
</div>
|
|
|
</Card>
|
|
@@ -360,17 +538,17 @@ const CreateAd: React.FC = () => {
|
|
|
hoverable
|
|
|
extra={tableData?.length > 0 ? <Space>
|
|
|
<span>推广计划总数:{accountCreateLogs?.length}</span>
|
|
|
- <span>广告总数:{accountCreateLogs?.length}</span>
|
|
|
- {tableSelect?.length > 0 && <span> 已选:<span style={{ color: '#1890FF' }}>{tableSelect?.length}</span> 条</span>}
|
|
|
- {
|
|
|
- <Button type='primary' onClick={() => {
|
|
|
- if (tableSelect.length === 0) {
|
|
|
- message.error('请选择要提交的计划!')
|
|
|
- return
|
|
|
- };
|
|
|
- setSubVisible(true)
|
|
|
- }}>批量提交审核</Button>
|
|
|
- }
|
|
|
+ <span>广告总数:{accountCreateLogs?.length}</span>
|
|
|
+ {tableSelect?.length > 0 && <span> 已选:<span style={{ color: '#1890FF' }}>{tableSelect?.length}</span> 条</span>}
|
|
|
+ {
|
|
|
+ <Button type='primary' onClick={() => {
|
|
|
+ if (tableSelect.length === 0) {
|
|
|
+ message.error('请选择要提交的计划!')
|
|
|
+ return
|
|
|
+ };
|
|
|
+ setSubVisible(true)
|
|
|
+ }}>批量提交审核</Button>
|
|
|
+ }
|
|
|
</Space> : false
|
|
|
}
|
|
|
>
|
|
@@ -398,21 +576,25 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
|
|
|
{/* 选择广告 */}
|
|
|
- {adVisible && <AdModal visible={adVisible} onClose={() => setAdVisible(false)} promotedObjectType={queryForm.promotedObjectType as string} onChange={(e) => { setQueryForm({ ...queryForm, sysAdgroupsId: e }); setAdVisible(false) }} />}
|
|
|
+ {adVisible && <AdModal visible={adVisible} onClose={() => setAdVisible(false)} promotedObjectType={queryForm.promotedObjectType as string} onChange={(e) => { setQueryForm({ ...queryForm, sysAdgroupId: e, sysAdcreativeId: undefined }); setAdVisible(false); clearData() }} sysAdgroupId={queryForm?.sysAdgroupId} />}
|
|
|
{/* 选择定向 */}
|
|
|
- {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={(e) => { setQueryForm({ ...queryForm, sysTargetingId: e }); setDxVisible(false) }} />}
|
|
|
+ {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={(e) => { setQueryForm({ ...queryForm, sysTargetingId: e }); setDxVisible(false); clearData() }} sysTargetingId={queryForm?.sysTargetingId} />}
|
|
|
+ {/* 选择创意 */}
|
|
|
+ {creativeVisible && <CreativeModal visible={creativeVisible} onClose={() => setCreativeVisible(false)} onChange={(e) => { setQueryForm({ ...queryForm, sysAdcreativeId: e }); setCreativeVisible(false); clearData() }} sysAdcreativeId={queryForm?.sysAdcreativeId} promotedObjectType={queryForm.promotedObjectType as string} />}
|
|
|
{/* 选择商品 */}
|
|
|
- {goodsVisible && <GoodsModal visible={goodsVisible} data={accountCreateLogs} onClose={() => setGoodsVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setGoodsVisible(false) }} />}
|
|
|
+ {goodsVisible && <GoodsModal visible={goodsVisible} data={accountCreateLogs} onClose={() => setGoodsVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setGoodsVisible(false); clearData() }} />}
|
|
|
{/* 选择数据源 */}
|
|
|
- {sourceVisible && <DataSourceModal visible={sourceVisible} data={accountCreateLogs} onClose={() => setSourceVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false) }} />}
|
|
|
+ {sourceVisible && <DataSourceModal visible={sourceVisible} data={accountCreateLogs} onClose={() => setSourceVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false); clearData() }} />}
|
|
|
{/* 选择转化ID */}
|
|
|
- {idVisible && <IdModal visible={idVisible} data={accountCreateLogs} onClose={() => setIdVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false) }} />}
|
|
|
+ {idVisible && <IdModal visible={idVisible} data={accountCreateLogs} onClose={() => setIdVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false); clearData() }} />}
|
|
|
+ {/* 选择定向包 */}
|
|
|
+ {cpVisible && <CrowdPackModal visible={cpVisible} data={accountCreateLogs} onClose={() => setCpVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setCpVisible(false); clearData() }} />}
|
|
|
{/* 选择素材 */}
|
|
|
{selectImgVisible && <SelectCloud visible={selectImgVisible} onClose={() => setSelectImgVisible(false)} onChange={setPage} isBack={false} />}
|
|
|
{/* 查看落地页 */}
|
|
|
{lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={queryForm?.sysPageId as any} />}
|
|
|
{/* 设置名称 */}
|
|
|
- {subVisible && <SubmitModal visible={subVisible} onClose={() => setSubVisible(false)} onChange={submit}/>}
|
|
|
+ {subVisible && <SubmitModal visible={subVisible} onClose={() => setSubVisible(false)} onChange={submit} ajax={createAdBatch} />}
|
|
|
</Space>
|
|
|
}
|
|
|
|