|
@@ -1,6 +1,7 @@
|
|
|
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"
|
|
@@ -10,6 +11,7 @@ import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, mes
|
|
|
import React, { useEffect, useState } from "react"
|
|
|
import { useModel } from "umi"
|
|
|
import AdModal from "../../components/adModal"
|
|
|
+import CreativeModal from "../../components/creativeModal"
|
|
|
import DataSourceModal from "../../components/dataSourceModal"
|
|
|
import GoodsModal from "../../components/goodsModal"
|
|
|
import IdModal from "../../components/idModal"
|
|
@@ -18,6 +20,7 @@ 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"
|
|
@@ -43,6 +46,7 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
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弹窗控制
|
|
@@ -54,6 +58,7 @@ const CreateAd: React.FC = () => {
|
|
|
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')
|
|
|
|
|
|
|
|
@@ -61,6 +66,8 @@ const CreateAd: React.FC = () => {
|
|
|
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))
|
|
|
/*************************/
|
|
|
|
|
|
// 设置地域
|
|
@@ -95,6 +102,14 @@ const CreateAd: React.FC = () => {
|
|
|
getSysAdgroups.run(queryForm?.sysAdgroupsId)
|
|
|
}
|
|
|
}, [queryForm?.sysAdgroupsId])
|
|
|
+
|
|
|
+ /** 获取创意详情 */
|
|
|
+ useEffect(() => {
|
|
|
+ if (queryForm?.sysAdcreativeId) {
|
|
|
+ getSysAdcreative.run(queryForm?.sysAdcreativeId)
|
|
|
+ }
|
|
|
+ }, [queryForm?.sysAdcreativeId])
|
|
|
+
|
|
|
/** 获取定向详情 */
|
|
|
useEffect(() => {
|
|
|
if (queryForm?.sysTargetingId) {
|
|
@@ -152,16 +167,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)
|
|
@@ -169,7 +184,28 @@ 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) {
|
|
|
+ data.productId = item?.productList[0].productOuterId
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ })
|
|
|
+ params.accountCreateLogs = accountLogs
|
|
|
+ console.log(222222, params)
|
|
|
+ createAdBatch.run(params).then(res => {
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const clearData = () => {
|
|
|
+ setTableData([])
|
|
|
+ setTableSelect([])
|
|
|
}
|
|
|
|
|
|
return <Space direction="vertical" style={{ width: '100%' }}>
|
|
@@ -251,7 +287,7 @@ const CreateAd: React.FC = () => {
|
|
|
{getsysTargeting?.data ? <>
|
|
|
<div>定向名称: <span>{getsysTargeting?.data?.targetingName}</span></div>
|
|
|
<div>定向描述: <span>{getsysTargeting?.data?.description}</span></div>
|
|
|
- <TargetingTooltip data={getsysTargeting?.data} geoLocationList={geoLocationList} modelList={modelList}/>
|
|
|
+ <TargetingTooltip data={getsysTargeting?.data} geoLocationList={geoLocationList} modelList={modelList} />
|
|
|
</> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
|
</div>
|
|
|
</Spin>
|
|
@@ -327,13 +363,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?.sysAdgroupsId ? <>
|
|
|
+ <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}>
|
|
|
落地页
|
|
@@ -352,8 +399,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 wrap>
|
|
|
- {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} 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>
|
|
@@ -364,10 +411,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>
|
|
@@ -427,21 +474,23 @@ const CreateAd: React.FC = () => {
|
|
|
|
|
|
|
|
|
{/* 选择广告 */}
|
|
|
- {adVisible && <AdModal visible={adVisible} onClose={() => setAdVisible(false)} promotedObjectType={queryForm.promotedObjectType as string} onChange={(e) => { setQueryForm({ ...queryForm, sysAdgroupsId: e }); setAdVisible(false) }} sysAdgroupsId={queryForm?.sysAdgroupsId}/>}
|
|
|
+ {adVisible && <AdModal visible={adVisible} onClose={() => setAdVisible(false)} promotedObjectType={queryForm.promotedObjectType as string} onChange={(e) => { setQueryForm({ ...queryForm, sysAdgroupsId: e, sysAdcreativeId: undefined }); setAdVisible(false); clearData() }} sysAdgroupsId={queryForm?.sysAdgroupsId} />}
|
|
|
{/* 选择定向 */}
|
|
|
- {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={(e) => { setQueryForm({ ...queryForm, sysTargetingId: e }); setDxVisible(false) }} sysTargetingId={queryForm?.sysTargetingId}/>}
|
|
|
+ {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() }} />}
|
|
|
{/* 选择素材 */}
|
|
|
{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>
|
|
|
}
|
|
|
|