|
@@ -1,14 +1,16 @@
|
|
|
import { CreateAdProps } from "@/services/launchAdq/createAd"
|
|
|
import { BaseResult } from "@ahooksjs/use-request/lib/types"
|
|
|
-import { CloseOutlined } from "@ant-design/icons"
|
|
|
-import { Button, Col, Empty, Popover, Space, Spin, Tooltip } from "antd"
|
|
|
-import React, { useCallback, useState } from "react"
|
|
|
+import { CloseOutlined, DownOutlined } from "@ant-design/icons"
|
|
|
+import { Button, Col, Dropdown, Empty, Menu, Popover, Space, Spin, Tooltip } from "antd"
|
|
|
+import React, { useCallback, useEffect, useState } from "react"
|
|
|
import TargetingModal from "../../../components/targetingModal"
|
|
|
import TargetingPup from "./modal"
|
|
|
import TargetingTooltip from "../../../components/targetingTooltip"
|
|
|
import CrowdPackModal from "../../../components/crowdPackModal"
|
|
|
import style from '../index.less'
|
|
|
import { ModalConfig } from "./modal"
|
|
|
+import ExpandModal from "@/pages/launchSystemNew/components/expandModal"
|
|
|
+import { ExpandTargeting } from "@/services/launchAdq/enum"
|
|
|
type Props = {
|
|
|
queryForm: Partial<CreateAdProps>,
|
|
|
setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
|
|
@@ -38,6 +40,7 @@ function TargetIng(props: Props) {
|
|
|
})
|
|
|
const [dxVisible, setDxVisible] = useState<boolean>(false) // 选择定向弹窗控制
|
|
|
const [cpVisible, setCpVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
|
|
|
+ const [expandVisible, setExpandVisible] = useState<boolean>(false) // 自动扩量弹窗控制
|
|
|
|
|
|
// 设置变量
|
|
|
const handleAdModalConfig = useCallback((arg: ModalConfig) => {
|
|
@@ -51,15 +54,39 @@ function TargetIng(props: Props) {
|
|
|
clearData()
|
|
|
})
|
|
|
}, [queryForm])
|
|
|
+
|
|
|
return <Col className={style.conRightBorder}>
|
|
|
<div className={style.top}>
|
|
|
定向
|
|
|
{/* (queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPM' || queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPC') && */}
|
|
|
- {<>{
|
|
|
- accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setCpVisible(true)}>选择定向包</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
|
|
|
- <Button type="link" style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
|
|
|
- </Tooltip>
|
|
|
- }</>}
|
|
|
+ <Dropdown
|
|
|
+ overlay={<Menu style={{ padding: 0 }} items={[
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ label: <>
|
|
|
+ {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setCpVisible(true)}>选择定向包</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
|
|
|
+ <Button type="link" style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
|
|
|
+ </Tooltip>}
|
|
|
+ </>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ label: <>
|
|
|
+ {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setExpandVisible(true)}>自动扩量</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
|
|
|
+ <Button type="link" style={{ fontSize: 12, padding: 0 }}>自动扩量</Button>
|
|
|
+ </Tooltip>}
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ ]} />}
|
|
|
+ >
|
|
|
+ <a onClick={e => e.preventDefault()}>
|
|
|
+ <Space>
|
|
|
+ 扩展
|
|
|
+ <DownOutlined />
|
|
|
+ </Space>
|
|
|
+ </a>
|
|
|
+ </Dropdown>
|
|
|
+
|
|
|
{queryForm.sysTargeting && <a onClick={() => {
|
|
|
setQueryForm({ ...queryForm, sysTargeting: undefined, sysTargetingId: undefined })
|
|
|
setAccountCreateLogs([])
|
|
@@ -69,40 +96,19 @@ function TargetIng(props: Props) {
|
|
|
<Spin spinning={getsysTargeting.loading}>
|
|
|
<div className={style.centerContent}>
|
|
|
{queryForm?.sysTargeting ? <>
|
|
|
- {accountCreateLogs?.some((item: any) => item?.customAudienceList?.length > 0) ?
|
|
|
- <>
|
|
|
- {queryForm.sysTargeting && <Popover
|
|
|
- content={<div className={style.popover}>
|
|
|
- <TargetingTooltip data={queryForm.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
|
|
|
- </div>}
|
|
|
- trigger="hover"
|
|
|
- placement="right"
|
|
|
- >
|
|
|
- <div className={style.popoverContent}>
|
|
|
- <div><strong>定向名称:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.targetingName}</span></div>
|
|
|
- <div><strong>定向描述:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
|
|
|
- </div>
|
|
|
- </Popover>}
|
|
|
+ {queryForm.expandEnabled && <div className={style.popoverContent}>
|
|
|
+ <div><strong>自动扩量:</strong> <span style={{ color: "#5a5a5a" }}>开启</span></div>
|
|
|
+ <div><strong>不可突破定向:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.expandTargeting?.map(item => ExpandTargeting[item]).toString() || '无'}</span></div>
|
|
|
{accountCreateLogs?.map((item: any, index: number) => {
|
|
|
- if (item?.customAudienceList) {
|
|
|
+ if (item?.coldStartAudienceList) {
|
|
|
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?.coldStartAudienceList?.length > 0 && <>
|
|
|
+ <div className={style.accName}>扩量种子人群</div>
|
|
|
{
|
|
|
- item?.excludedCustomAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
|
|
|
+ item?.coldStartAudienceList?.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')
|
|
|
+ cpDel(index, index1, 'coldStartAudienceList')
|
|
|
}} /></div>
|
|
|
})
|
|
|
}
|
|
@@ -112,13 +118,58 @@ function TargetIng(props: Props) {
|
|
|
return null
|
|
|
}
|
|
|
})}
|
|
|
- </>
|
|
|
- :
|
|
|
- <>
|
|
|
- <div><strong>定向名称:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.targetingName}</span></div>
|
|
|
- <div><strong>定向描述:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
|
|
|
- <TargetingTooltip data={queryForm?.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
|
|
|
- </>}
|
|
|
+ </div>}
|
|
|
+
|
|
|
+ {accountCreateLogs?.some((item: any) => item?.customAudienceList?.length > 0) ?
|
|
|
+ <>
|
|
|
+ {queryForm.sysTargeting && <Popover
|
|
|
+ content={<div className={style.popover}>
|
|
|
+ <TargetingTooltip data={queryForm.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
|
|
|
+ </div>}
|
|
|
+ trigger="hover"
|
|
|
+ placement="right"
|
|
|
+ >
|
|
|
+ <div className={style.popoverContent}>
|
|
|
+ <div><strong>定向名称:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.targetingName}</span></div>
|
|
|
+ <div><strong>定向描述:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.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
|
|
|
+ }
|
|
|
+ })}
|
|
|
+ </>
|
|
|
+ :
|
|
|
+ <>
|
|
|
+ <div><strong>定向名称:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.targetingName}</span></div>
|
|
|
+ <div><strong>定向描述:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
|
|
|
+ <TargetingTooltip data={queryForm?.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
|
|
|
+ </>}
|
|
|
|
|
|
|
|
|
</> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
|
@@ -135,6 +186,20 @@ function TargetIng(props: Props) {
|
|
|
{dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={getInfo} sysTargetingId={queryForm?.sysTargetingId} />}
|
|
|
{/* 选择定向包 */}
|
|
|
{cpVisible && <CrowdPackModal visible={cpVisible} data={accountCreateLogs} onClose={() => setCpVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setCpVisible(false); clearData() }} />}
|
|
|
+ {/* 设置自动扩量 */}
|
|
|
+ {expandVisible && <ExpandModal
|
|
|
+ visible={expandVisible}
|
|
|
+ sysTargeting={queryForm.sysTargeting}
|
|
|
+ expandData={{ expandEnabled: queryForm.expandEnabled || false, expandTargeting: queryForm.expandTargeting || [] }}
|
|
|
+ data={accountCreateLogs}
|
|
|
+ onClose={() => setExpandVisible(false)}
|
|
|
+ onChange={(e, expandData) => {
|
|
|
+ setAccountCreateLogs(e);
|
|
|
+ setQueryForm({ ...queryForm, ...expandData })
|
|
|
+ setExpandVisible(false)
|
|
|
+ clearData()
|
|
|
+ }}
|
|
|
+ />}
|
|
|
{/* 新建定向包 */}
|
|
|
{adModalConfig.visible && <TargetingPup visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values: any) => {
|
|
|
setQueryForm({ ...queryForm, sysTargeting: values, }); setDxVisible(false); clearData();
|