|
|
@@ -1,9 +1,13 @@
|
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
|
|
-import { Modal, Form, Input, Divider, Select, Radio, DatePicker, Switch } from 'antd'
|
|
|
+import { Modal, Form, Input, Divider, Select, Radio, DatePicker, Switch, Spin } from 'antd'
|
|
|
import { SiteSetEnum, PromotedObjectType } from '@/services/launchAdq/enum'
|
|
|
import { ModalConfig } from '.'
|
|
|
import styles from './index.less'
|
|
|
-import { adcreativeTemplateList } from '../adenum';
|
|
|
+import { outAdcreativeTemplateIdFun } from '../adenum';
|
|
|
+import { useAjax } from '@/Hook/useAjax'
|
|
|
+import { get_adcreative_template, get_adcreative_template_list } from '@/services/launchAdq/global'
|
|
|
+import { AdcreativeTemplate, AdcreativeTemplateList } from '@/services/launchAdq'
|
|
|
+import { mySet } from '@/utils/arrFn'
|
|
|
interface Props {
|
|
|
title?: string,
|
|
|
visible: boolean,
|
|
|
@@ -14,6 +18,13 @@ interface Props {
|
|
|
/**创意模板*/
|
|
|
function CreativeModal(props: Props) {
|
|
|
let { visible, title, confirmLoading, PupFn, callback } = props
|
|
|
+ // 请求
|
|
|
+ const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
|
|
|
+ const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
|
|
|
+ // 变量
|
|
|
+ const [adcreative_template, set_adcreative_template] = useState<AdcreativeTemplate>()
|
|
|
+ const [adcreative_template_list, set_adcreative_template_list] = useState<AdcreativeTemplateList[]>([])
|
|
|
+
|
|
|
const [form] = Form.useForm();
|
|
|
const [pupState, setPupState] = useState({
|
|
|
kp_show: false,
|
|
|
@@ -41,32 +52,69 @@ function CreativeModal(props: Props) {
|
|
|
})
|
|
|
// PupFn({ visible: false })
|
|
|
}, [form])
|
|
|
- //获取对应创意形式列表
|
|
|
- const adcreativeTemplateArr = useMemo(() => {
|
|
|
- if (siteSet?.length > 0 && promotedObjectType && adcreativeElementsType) {
|
|
|
- let arr = adcreativeTemplateList.filter(item => {
|
|
|
- if (item.adcreative_template_style === adcreativeElementsType && item.promoted_object_type === promotedObjectType && siteSet.some((s: string) => item.site_set.some(i => s === i))) {
|
|
|
- return item
|
|
|
- }
|
|
|
- return null
|
|
|
+ // 获取创意形式列表
|
|
|
+ useEffect(() => {
|
|
|
+ if (siteSet?.length > 0 && promotedObjectType) {
|
|
|
+ getAdcreativeTemplateList.run({
|
|
|
+ siteSet,
|
|
|
+ promotedObjectType,
|
|
|
+ campaignType: 'CAMPAIGN_TYPE_NORMAL',
|
|
|
+ }).then(res => {
|
|
|
+ let newArr: any = []
|
|
|
+ // 过滤掉相同的和即将下线的
|
|
|
+ Object.values(res).forEach((arr: any) => {
|
|
|
+ Array.isArray(arr) && arr?.forEach((item: any) => {
|
|
|
+ if (newArr.length > 0) {
|
|
|
+ if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId) && newArr.every((i: { adcreativeTemplateId: any }) => i.adcreativeTemplateId !== item.adcreativeTemplateId)) {
|
|
|
+ newArr.push(item)
|
|
|
+ } else {
|
|
|
+ // 找出通用创意
|
|
|
+ newArr = newArr?.map((arr: { adcreativeTemplateId: any }) => {
|
|
|
+ if (arr.adcreativeTemplateId === item.adcreativeTemplateId) {
|
|
|
+ return { ...arr, isGeneral: true }
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId)) {
|
|
|
+ newArr.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ set_adcreative_template_list(newArr)
|
|
|
})
|
|
|
- return arr
|
|
|
}
|
|
|
- return null
|
|
|
- }, [siteSet, promotedObjectType, adcreativeElementsType])
|
|
|
+ }, [siteSet, promotedObjectType, form])
|
|
|
+ // 获取创意形式详情
|
|
|
+ useEffect(() => {
|
|
|
+ // CAMPAIGN_TYPE_NORMAL
|
|
|
+ if (siteSet?.length > 0 && promotedObjectType && adcreativeTemplateId) {
|
|
|
+ if (adcreativeTemplateId) {
|
|
|
+ getAdcreativeTemplate.run({
|
|
|
+ siteSet,
|
|
|
+ promotedObjectType,
|
|
|
+ adcreativeTemplateId
|
|
|
+ }).then(res => {
|
|
|
+ set_adcreative_template(res[0])
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, [siteSet, promotedObjectType, adcreativeTemplateId])
|
|
|
// 获取对应落地页按钮
|
|
|
const pageTypeList = useMemo(() => {
|
|
|
if (adcreativeTemplateId) {
|
|
|
- let arr: any = adcreativeTemplateArr?.filter(item => item.adcreative_template_id === adcreativeTemplateId)[0]?.landing_page_config.support_page_type_list
|
|
|
+ let arr: any = adcreative_template?.landingPageConfig?.supportPageTypeList
|
|
|
return arr
|
|
|
}
|
|
|
return null
|
|
|
|
|
|
- }, [adcreativeTemplateId, adcreativeTemplateArr])
|
|
|
+ }, [adcreativeTemplateId, adcreative_template])
|
|
|
// 获取对应行动按钮数据
|
|
|
const linkNameList = useMemo(() => {
|
|
|
if (pageType) {
|
|
|
- let arr = (pageTypeList?.filter((item: { page_type: any; }) => item.page_type === pageType)[0] as any)?.support_link_name_type?.list
|
|
|
+ let arr = (pageTypeList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkNameType?.list
|
|
|
return arr
|
|
|
}
|
|
|
return null
|
|
|
@@ -74,89 +122,80 @@ function CreativeModal(props: Props) {
|
|
|
// 跳转落地页
|
|
|
const linkPageList = useMemo(() => {
|
|
|
if (pageType) {
|
|
|
- let arr = (pageTypeList?.filter((item: { page_type: any; }) => item.page_type === pageType)[0] as any)?.support_link_page_type?.list
|
|
|
+ let arr = (pageTypeList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkPageType?.list
|
|
|
return arr
|
|
|
}
|
|
|
return null
|
|
|
}, [pageType, pageTypeList])
|
|
|
-
|
|
|
-
|
|
|
- // 切换形式类型
|
|
|
+ // 切换创意形式默认选中第一个
|
|
|
useEffect(() => {
|
|
|
- //默认选第一个选项
|
|
|
- if (Array.isArray(adcreativeTemplateArr)) {
|
|
|
- let values = {}
|
|
|
- let adcreativeTemplateId = adcreativeTemplateArr[0]?.adcreative_template_id
|
|
|
- let pageList = adcreativeTemplateArr?.filter(item => item.adcreative_template_id === adcreativeTemplateArr[0]?.adcreative_template_id)[0]?.landing_page_config.support_page_type_list
|
|
|
- let pageType = pageList[0]?.page_type
|
|
|
- //卡片组件存在
|
|
|
- if (adcreativeTemplateArr[0]?.kp_show) {
|
|
|
-
|
|
|
- }
|
|
|
- //行动按钮组件存在
|
|
|
- if (adcreativeTemplateArr[0]?.xd_show) {
|
|
|
- let linkNameList = (pageList?.filter((item: { page_type: any; }) => item.page_type === pageType)[0] as any)?.support_link_name_type?.list
|
|
|
- let linkPageList = (pageList?.filter((item: { page_type: any; }) => item.page_type === pageType)[0] as any)?.support_link_page_type?.list
|
|
|
- let linkNameType = linkNameList[0]?.link_name_type
|
|
|
- let linkPageType = linkPageList[0]?.link_page_type
|
|
|
- values = { ...values, linkNameType, linkPageType }
|
|
|
- }
|
|
|
-
|
|
|
- //标签组件
|
|
|
- if (adcreativeTemplateArr[0]?.bq_show) {
|
|
|
+ // 设置默认选中第一个
|
|
|
+ if (adcreativeElementsType && adcreative_template_list?.length > 0) {
|
|
|
+ let adcreativeTemplateIdArr = adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)
|
|
|
+ form.setFieldsValue({ adcreativeTemplateId: adcreativeTemplateIdArr[0].adcreativeTemplateId })
|
|
|
+ }
|
|
|
+ }, [adcreativeElementsType, adcreative_template_list])
|
|
|
|
|
|
- }
|
|
|
- //视频结束页组件
|
|
|
- if (adcreativeTemplateArr[0]?.sp_show) {
|
|
|
|
|
|
- }
|
|
|
- values = { ...values, adcreativeTemplateId, pageType }
|
|
|
- form.setFieldsValue(values)
|
|
|
- }
|
|
|
- }, [adcreativeTemplateArr, form])
|
|
|
//每次选中创意设置该展示的界面
|
|
|
useEffect(() => {
|
|
|
- if (adcreativeTemplateId && Array.isArray(adcreativeTemplateArr)) {
|
|
|
- let adcreativeTemplate = adcreativeTemplateArr?.filter(item => item.adcreative_template_id === adcreativeTemplateId)[0]
|
|
|
+ let states = {
|
|
|
+ kp_show: false,
|
|
|
+ xd_show: true,
|
|
|
+ sj_show: false,
|
|
|
+ bq_show: false,
|
|
|
+ sp_show: false
|
|
|
+ }
|
|
|
+ let values: any = { pageType: 'PAGE_TYPE_CANVAS_WECHAT', }
|
|
|
+ if (adcreative_template) {
|
|
|
+ let pageList = adcreative_template?.landingPageConfig?.supportPageTypeList
|
|
|
+ let pageType = pageList?.length ? pageList[0]?.pageType : null
|
|
|
//数据展示组件
|
|
|
- if (adcreativeTemplate?.sj_show) {
|
|
|
- let arr = (adcreativeTemplate.adcreative_attributes as any)?.filter((item: { name: string; }) => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')
|
|
|
+ if (adcreative_template.adcreativeAttributes.some(item => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')) {
|
|
|
+ let arr = adcreative_template.adcreativeAttributes?.filter((item: { name: string; }) => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')
|
|
|
let newObj: any = {}
|
|
|
- arr.forEach((item: { name: string | number; property_detail: { enum_detail: { enumeration: any[]; }; }; }) => {
|
|
|
- newObj[item.name] = item.property_detail.enum_detail.enumeration.filter((i: { category: any; }) => !i.category)
|
|
|
+ arr.forEach((item) => {
|
|
|
+ let arr: any[] = mySet(item.propertyDetail.enumDetail.enumeration)
|
|
|
+ newObj[item.name] = arr
|
|
|
})
|
|
|
setConversionList(newObj)
|
|
|
- form.setFieldsValue({
|
|
|
- conversionDataType: newObj.conversion_data_type[0].value,
|
|
|
- conversionTargetType: newObj.conversion_target_type[0].value
|
|
|
- })
|
|
|
+
|
|
|
+ states = { ...states, sj_show: true }
|
|
|
+ values = { ...values, conversionDataType: newObj.conversion_data_type[0].value, conversionTargetType: newObj.conversion_target_type[0].value }
|
|
|
}
|
|
|
- setPupState({
|
|
|
- kp_show: !!adcreativeTemplate?.kp_show,//卡片组件
|
|
|
- xd_show: !!adcreativeTemplate?.xd_show,//行动按钮组件
|
|
|
- sj_show: !!adcreativeTemplate?.sj_show,//数据展示组件
|
|
|
- bq_show: !!adcreativeTemplate?.bq_show,//标签组件
|
|
|
- sp_show: !!adcreativeTemplate?.sp_show//视频结束页组件
|
|
|
- })
|
|
|
+ //行动按钮组件存在
|
|
|
+ if (states.xd_show) {
|
|
|
+ let linkNameList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkNameType?.list
|
|
|
+ let linkPageList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkPageType?.list
|
|
|
+ if (linkNameList) {
|
|
|
+ let linkNameType = linkNameList[0]?.linkNameType
|
|
|
+ let linkPageType = linkPageList[0]?.linkPageType
|
|
|
+ values = { ...values, linkNameType, linkPageType }
|
|
|
+ } else {
|
|
|
+ states = { ...states, xd_show: false }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setPupState(states)
|
|
|
+ form.setFieldsValue(values)
|
|
|
}
|
|
|
- }, [adcreativeTemplateArr, adcreativeTemplateId])
|
|
|
-
|
|
|
+ }, [adcreative_template])
|
|
|
return <Modal
|
|
|
visible={visible}
|
|
|
title={title + '创意'}
|
|
|
onCancel={() => { PupFn({ visible: false }) }}
|
|
|
onOk={handleOk}
|
|
|
- width={900}
|
|
|
+ width={1200}
|
|
|
confirmLoading={confirmLoading}
|
|
|
>
|
|
|
<Form
|
|
|
form={form}
|
|
|
- labelCol={{ span: 3 }}
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
+ labelWrap={true}
|
|
|
initialValues={
|
|
|
{
|
|
|
adcreativeElementsType: '视频',
|
|
|
promotedObjectType: 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT',
|
|
|
- siteSet: ['SITE_SET_MOMENTS'],
|
|
|
+ siteSet: ['SITE_SET_MOMENTS', 'SITE_SET_WECHAT'],
|
|
|
actionBtn: true,//行动按钮
|
|
|
dataShow: true,//数据展示
|
|
|
}
|
|
|
@@ -199,113 +238,166 @@ function CreativeModal(props: Props) {
|
|
|
<Radio.Button value="图片">图片</Radio.Button>
|
|
|
</Radio.Group>
|
|
|
</Form.Item>
|
|
|
- <Form.Item style={{ marginLeft: 107 }} name='adcreativeTemplateId'>
|
|
|
- <Radio.Group className={styles.adcreative_template}>
|
|
|
- {
|
|
|
- adcreativeTemplateArr?.map((item, index) => {
|
|
|
- return <Radio.Button value={item.adcreative_template_id} key={item.adcreative_template_id}>
|
|
|
- <div className={styles.adcreative_template_item}>
|
|
|
- <img src={item.adcreative_sample_image} />
|
|
|
- <span>{item.adcreative_template_appellation} </span>
|
|
|
- </div>
|
|
|
- </Radio.Button>
|
|
|
- })
|
|
|
- }
|
|
|
- </Radio.Group>
|
|
|
- </Form.Item>
|
|
|
- {/* ============================================================创意内容============================================================= */}
|
|
|
- <Divider orientation='center'>创意内容</Divider>
|
|
|
- {/* ============================================================素材============================================================= */}
|
|
|
-
|
|
|
- {/* ============================================================落地页============================================================= */}
|
|
|
- <Form.Item label={<strong>落地页</strong>} name='pageType'>
|
|
|
- <Radio.Group>
|
|
|
- {
|
|
|
- pageTypeList?.map((item: { page_type: string | number | null | undefined; description: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; }, index: number) => {
|
|
|
- if (!pageType && index === 0) {
|
|
|
|
|
|
- }
|
|
|
- return <Radio.Button value={item.page_type} key={item.page_type}>{item.description}</Radio.Button>
|
|
|
- })
|
|
|
- }
|
|
|
- </Radio.Group>
|
|
|
- </Form.Item>
|
|
|
- {/* ============================================================行动按钮============================================================= */}
|
|
|
- {
|
|
|
- pupState.xd_show && <Form.Item label={<strong>行动按钮</strong>} name='actionBtn' valuePropName="checked">
|
|
|
- <Switch checkedChildren="开启" unCheckedChildren="关闭" />
|
|
|
- </Form.Item>
|
|
|
- }
|
|
|
- {
|
|
|
- actionBtn && <>
|
|
|
- <div style={{ display: 'flex' }}>
|
|
|
- <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>按钮文案</strong></p>
|
|
|
- <Form.Item name='linkNameType'>
|
|
|
- <Select style={{ width: 200 }} showSearch filterOption={(input, option) =>
|
|
|
- (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
- } allowClear>
|
|
|
- {
|
|
|
- linkNameList?.map((item: { link_name_type: string; description: string; }, index: number) => {
|
|
|
- return <Select.Option value={item.link_name_type} key={item.link_name_type}>{item.description}</Select.Option>
|
|
|
- })
|
|
|
- }
|
|
|
- </Select>
|
|
|
- </Form.Item>
|
|
|
- </div>
|
|
|
- <div style={{ display: 'flex' }}>
|
|
|
- <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>跳转落地页</strong></p>
|
|
|
- <Form.Item name='linkPageType'>
|
|
|
- <Radio.Group>
|
|
|
- {
|
|
|
- linkPageList?.map((item: { link_page_type: string; description: string; }, index: number) => {
|
|
|
- return <Radio.Button value={item.link_page_type} key={item.link_page_type}>{item.description}</Radio.Button>
|
|
|
- })
|
|
|
- }
|
|
|
- </Radio.Group>
|
|
|
- </Form.Item>
|
|
|
- </div>
|
|
|
- </>
|
|
|
- }
|
|
|
- {/* ============================================================数据展示============================================================= */}
|
|
|
- {pupState.sj_show && <Form.Item label={<strong>数据展示</strong>} name='dataShow' valuePropName="checked">
|
|
|
- <Switch checkedChildren="开启" unCheckedChildren="关闭" />
|
|
|
- </Form.Item>}
|
|
|
{
|
|
|
- dataShow && <>
|
|
|
- <div style={{ display: 'flex' }}>
|
|
|
- <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>数据类型</strong></p>
|
|
|
- <Form.Item name='conversionDataType'>
|
|
|
- <Radio.Group>
|
|
|
+ getAdcreativeTemplateList?.loading ? <Spin tip="Loading..." style={{ width: '100%' }}></Spin> :
|
|
|
+ <>
|
|
|
+ <Form.Item style={{ marginLeft: 177 }} name='adcreativeTemplateId'>
|
|
|
+ <Radio.Group className={styles.adcreative_template}>
|
|
|
{
|
|
|
- conversionList?.conversion_data_type?.map((item: { value: string; description: string; }, index: number) => {
|
|
|
- return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
|
|
|
+ adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)?.map((item: any) => {
|
|
|
+ return <Radio.Button value={item.adcreativeTemplateId} key={item.adcreativeTemplateId}>
|
|
|
+ <div className={styles.adcreative_template_item}>
|
|
|
+ {item.isGeneral && <span style={{ color: '#4080ff', fontSize: 10 }}>所选版位通投</span>}
|
|
|
+ <img src={item.adcreativeSampleImage} />
|
|
|
+ <span>{item.adcreativeTemplateAppellation} </span>
|
|
|
+ </div>
|
|
|
+ </Radio.Button>
|
|
|
})
|
|
|
}
|
|
|
</Radio.Group>
|
|
|
</Form.Item>
|
|
|
- </div>
|
|
|
- {conversionDataType === 'CONVERSION_DATA_ADMETRIC' && <div style={{ display: 'flex' }}>
|
|
|
- <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>转化行为</strong></p>
|
|
|
- <Form.Item name='conversionTargetType'>
|
|
|
+ {/* ============================================================创意内容============================================================= */}
|
|
|
+ <Divider orientation='center'>创意内容</Divider>
|
|
|
+ {/* ============================================================素材============================================================= */}
|
|
|
+ {/* 优先展示视频或图片 */}
|
|
|
+ {
|
|
|
+ adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image').map(item => {
|
|
|
+ return <Form.Item label={<strong>{item.description}</strong>} name={item.name} rules={[{ required: true, message: '请选择素材!' }]}>
|
|
|
+ {
|
|
|
+ ( item.name === 'short_video1'||item.name === 'video' )&& <div className={`${styles.box} ${styles.video}`}>
|
|
|
+ <p>
|
|
|
+ <span>{`推荐尺寸（${item.restriction.videoRestriction.minWidth} x ${item.restriction.videoRestriction.minHeight}）`}</span>
|
|
|
+ <span>{`${item.restriction.videoRestriction.fileFormat?.map(str => str?.replace('MEDIA_TYPE_', ''))};< ${item.restriction.videoRestriction.fileSize / 1024}M;时长 ≥ ${item.restriction.videoRestriction.minDuration}s,≤ ${item.restriction.videoRestriction.maxDuration}s,必须带有声音`}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ item.name === 'image' && <div className={`${styles.box} ${styles.image}`}>
|
|
|
+ <p>
|
|
|
+ <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
|
|
|
+ <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ item.name === 'image_list' && <div className={`${styles.box} ${item.arrayProperty.maxNumber >= 3 ?styles.image_list : styles.image}`}>
|
|
|
+ {
|
|
|
+ Array(item.arrayProperty.maxNumber).fill('').map((arr,index)=>{
|
|
|
+ return <p key={index}>
|
|
|
+ <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
|
|
|
+ <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
|
|
|
+ </p>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </Form.Item>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ {/* 标题 */}
|
|
|
+ {
|
|
|
+ adcreative_template?.adcreativeElements?.filter(item => item.name === 'title').map(item => {
|
|
|
+ return <Form.Item label={<strong>{item.description}(选填)</strong>} name={item.name} rules={[{ pattern: RegExp(item.restriction.textRestriction.textPattern), message: '请输入正确的' + item.description }]}>
|
|
|
+ <Input placeholder={'请输入' + item.description} style={{ width: 500 }} />
|
|
|
+ </Form.Item>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ {//过滤了不必传和品牌名称，品牌标识图（外部传）短视频结构（组装使用）
|
|
|
+ // adcreative_template?.adcreativeElements?.filter(item => item.required && item.name !== 'brand_name' && item.name !== 'brand_img' && item.name !== 'short_video_struct' && item.name !== 'image_list' && item.name !== 'short_video1' && item.name !== 'video' ).map(item => {
|
|
|
+ adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'description').map(item => {
|
|
|
+ return <Form.Item label={<strong>{item.description}</strong>} name={item.name} rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern), message: '请输入正确的' + item.description }]}>
|
|
|
+ <Input placeholder={'请输入' + item.description} style={{ width: 500 }} />
|
|
|
+ </Form.Item>
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ {/* ============================================================落地页============================================================= */}
|
|
|
+ <Form.Item label={<strong>落地页</strong>} name='pageType'>
|
|
|
<Radio.Group>
|
|
|
{
|
|
|
- conversionList?.conversion_target_type?.map((item: { value: string; description: string; }, index: number) => {
|
|
|
- return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
|
|
|
+ pageTypeList?.map((item: any) => {
|
|
|
+ return <Radio.Button value={item.pageType} key={item.pageType} disabled={!item.description.includes('微信原生推广页')}>{item.description.includes('微信原生推广页') ? '微信原生推广页' : item.description}</Radio.Button>
|
|
|
})
|
|
|
}
|
|
|
</Radio.Group>
|
|
|
</Form.Item>
|
|
|
- </div>}
|
|
|
- </>
|
|
|
- }
|
|
|
- {/* ============================================================视频结束页============================================================= */}
|
|
|
- {/* {pupState.sp_show && <Form.Item label={<strong>视频结束页</strong>} name='videoOver' valuePropName="checked">
|
|
|
+ {/* ============================================================行动按钮============================================================= */}
|
|
|
+ {
|
|
|
+ pupState.xd_show && <Form.Item label={<strong>行动按钮</strong>} name='actionBtn' valuePropName="checked">
|
|
|
+ <Switch checkedChildren="开启" unCheckedChildren="关闭" />
|
|
|
+ </Form.Item>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ actionBtn && <>
|
|
|
+ <div style={{ display: 'flex' }}>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>按钮文案</strong></p>
|
|
|
+ <Form.Item name='linkNameType'>
|
|
|
+ <Select style={{ width: 200 }} showSearch filterOption={(input, option) =>
|
|
|
+ (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
+ } allowClear>
|
|
|
+ {
|
|
|
+ linkNameList?.map((item: any) => {
|
|
|
+ return <Select.Option value={item.linkNameType} key={item.linkNameType}>{item.description}</Select.Option>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ <div style={{ display: 'flex' }}>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>跳转落地页</strong></p>
|
|
|
+ <Form.Item name='linkPageType'>
|
|
|
+ <Radio.Group>
|
|
|
+ {
|
|
|
+ linkPageList?.map((item: { linkPageType: string; description: string; }, index: number) => {
|
|
|
+ return <Radio.Button value={item.linkPageType} key={item.linkPageType}>{item.description}</Radio.Button>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ {/* ============================================================数据展示============================================================= */}
|
|
|
+ {pupState.sj_show && <Form.Item label={<strong>数据展示</strong>} name='dataShow' valuePropName="checked">
|
|
|
+ <Switch checkedChildren="开启" unCheckedChildren="关闭" />
|
|
|
+ </Form.Item>}
|
|
|
+ {
|
|
|
+ dataShow && <>
|
|
|
+ <div style={{ display: 'flex' }}>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>数据类型</strong></p>
|
|
|
+ <Form.Item name='conversionDataType'>
|
|
|
+ <Radio.Group>
|
|
|
+ {
|
|
|
+ conversionList?.conversion_data_type?.map((item: { value: string; description: string; }, index: number) => {
|
|
|
+ return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ {conversionDataType === 'CONVERSION_DATA_ADMETRIC' && <div style={{ display: 'flex' }}>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>转化行为</strong></p>
|
|
|
+ <Form.Item name='conversionTargetType'>
|
|
|
+ <Radio.Group>
|
|
|
+ {
|
|
|
+ conversionList?.conversion_target_type?.map((item: { value: string; description: string; }, index: number) => {
|
|
|
+ return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ </div>}
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ {/* ============================================================视频结束页============================================================= */}
|
|
|
+ {/* {pupState.sp_show && <Form.Item label={<strong>视频结束页</strong>} name='videoOver' valuePropName="checked">
|
|
|
<Switch checkedChildren="开启" unCheckedChildren="关闭" />
|
|
|
</Form.Item>}
|
|
|
{
|
|
|
videoOver && <>
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
- <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>视频结束页类型</strong></p>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>视频结束页类型</strong></p>
|
|
|
<Form.Item name='linkNameType'>
|
|
|
<Select style={{ width: 200 }} showSearch filterOption={(input, option) =>
|
|
|
(option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
@@ -319,13 +411,15 @@ function CreativeModal(props: Props) {
|
|
|
</Form.Item>
|
|
|
</div>
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
- <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>结束文案</strong></p>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>结束文案</strong></p>
|
|
|
<Form.Item name='linkPageType'>
|
|
|
<Input placeholder='请输入结束页文案'/>
|
|
|
</Form.Item>
|
|
|
</div>
|
|
|
</>
|
|
|
}*/}
|
|
|
+ </>
|
|
|
+ }
|
|
|
</Form>
|
|
|
</Modal >
|
|
|
}
|
