|
@@ -10,8 +10,6 @@ import { AdcreativeTemplate, AdcreativeTemplateList } from '@/services/launchAdq
|
|
|
import { mySet } from '@/utils/arrFn'
|
|
|
import SelectCloud from '@/pages/launchSystemNew/components/selectCloud'
|
|
|
import { useModel } from '@/.umi/plugin-model/useModel'
|
|
|
-import { DebounceSelect, fetchUserList } from '@/components/DebounceSelect'
|
|
|
-import e from '@umijs/deps/compiled/express'
|
|
|
interface Props {
|
|
|
title?: string,
|
|
|
visible: boolean,
|
|
@@ -32,6 +30,7 @@ function CreativeModal(props: Props) {
|
|
|
const [adcreative_template_list, set_adcreative_template_list] = useState<AdcreativeTemplateList[]>([])
|
|
|
const [selectImgVisible, set_selectImgVisible] = useState(false)
|
|
|
const [descriptionShow, setdescriptionshow] = useState(false)
|
|
|
+ const [endPageDescShow, setendPageDescnshow] = useState(false)
|
|
|
const [titleShow, settitleshow] = useState(false)
|
|
|
const [form] = Form.useForm();
|
|
|
const [pupState, setPupState] = useState({
|
|
@@ -58,6 +57,8 @@ function CreativeModal(props: Props) {
|
|
|
let conversionDataType = Form.useWatch('conversionDataType', form)
|
|
|
let titles = Form.useWatch('title', form)
|
|
|
let description = Form.useWatch('description', form)
|
|
|
+ let videoOver = Form.useWatch('videoOver', form)
|
|
|
+ let endPageDesc = Form.useWatch('endPageDesc', form)
|
|
|
|
|
|
// 确定事件
|
|
|
const handleOk = useCallback(() => {
|
|
@@ -237,6 +238,12 @@ function CreativeModal(props: Props) {
|
|
|
states = { ...states, xd_show: false }
|
|
|
}
|
|
|
}
|
|
|
+ // 视频结束页 end_page
|
|
|
+ if (adcreative_template.adcreativeElements.some(item => item.name === 'end_page')) {
|
|
|
+ // let endPageType =adcreative_template?.adcreativeElements?.filter(item=>item.name === 'end_page_type')[0]?.enumProperty?.enumeration
|
|
|
+ values = { ...values, endPageType: 'END_PAGE_AVATAR_NICKNAME_HIGHLIGHT' }
|
|
|
+ states = { ...states, sp_show: true }
|
|
|
+ }
|
|
|
setPupState(states)
|
|
|
form.setFieldsValue(values)
|
|
|
}
|
|
@@ -257,10 +264,17 @@ function CreativeModal(props: Props) {
|
|
|
let modal = document.querySelector('.myModal')
|
|
|
let onBiurdescription = (e: any) => {
|
|
|
let d = document.querySelector('.my_description')
|
|
|
+ let t = document.querySelector('.my_title')
|
|
|
+ let p = document.querySelector('.my_endPageDesc')
|
|
|
if (!d?.contains(e.target)) {
|
|
|
setdescriptionshow(false)
|
|
|
+ }
|
|
|
+ if (!t?.contains(e.target)) {
|
|
|
settitleshow(false)
|
|
|
}
|
|
|
+ if (!p?.contains(e.target)) {
|
|
|
+ setendPageDescnshow(false)
|
|
|
+ }
|
|
|
}
|
|
|
modal?.addEventListener('click', onBiurdescription)
|
|
|
return () => {
|
|
@@ -438,11 +452,12 @@ function CreativeModal(props: Props) {
|
|
|
{
|
|
|
adcreative_template?.adcreativeElements?.filter(item => item.name === 'title').map(item => {
|
|
|
return <div key={item.fieldType}>
|
|
|
- <Form.Item label={<strong>{item.description}(选填)</strong>} className={'my_description'} >
|
|
|
- <Form.Item name={item.name} rules={[{ pattern: RegExp(item.restriction.textRestriction.textPattern), message: '请输入正确的' + item.description }]} noStyle>
|
|
|
+ <Form.Item label={<strong>{item.description}(选填)</strong>} className={'my_title'} >
|
|
|
+ <Form.Item name={item.name} rules={[{ pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`)), message: '请输入正确的' + item.description }]} noStyle>
|
|
|
<Input
|
|
|
placeholder={'请输入' + item.description}
|
|
|
style={{ width: 500 }}
|
|
|
+ allowClear
|
|
|
onFocus={() => {
|
|
|
settitleshow(true)
|
|
|
textList({ maxTextLength: item.restriction.textRestriction.maxLength })
|
|
@@ -453,7 +468,7 @@ function CreativeModal(props: Props) {
|
|
|
}}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
- <span>{`${titles?.length??0}/${item.restriction.textRestriction.maxLength}`}</span>
|
|
|
+ <span>{`${titles?.length ?? 0}/${item.restriction.textRestriction.maxLength}`}</span>
|
|
|
{
|
|
|
titleShow && <List
|
|
|
loading={getTextLsit?.loading}
|
|
@@ -475,7 +490,7 @@ function CreativeModal(props: Props) {
|
|
|
adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'description').map(item => {
|
|
|
return <div key={item.fieldType}>
|
|
|
<Form.Item label={<strong>{item.description}</strong>} className={'my_description'}>
|
|
|
- <Form.Item name={item.name} noStyle rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern), message: '请输入正确的' + item.description }]}>
|
|
|
+ <Form.Item name={item.name} noStyle rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`)), message: '请输入正确的' + item.description }]}>
|
|
|
<Input
|
|
|
placeholder={'请输入' + item.description}
|
|
|
style={{ width: 500 }}
|
|
@@ -490,7 +505,7 @@ function CreativeModal(props: Props) {
|
|
|
allowClear
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
- <span>{`${description?.length??0}/${item.restriction.textRestriction.maxLength}`}</span>
|
|
|
+ <span>{`${description?.length ?? 0}/${item.restriction.textRestriction.maxLength}`}</span>
|
|
|
{
|
|
|
descriptionShow && <List
|
|
|
loading={getTextLsit?.loading}
|
|
@@ -587,37 +602,62 @@ function CreativeModal(props: Props) {
|
|
|
</>
|
|
|
}
|
|
|
{/* ============================================================视频结束页============================================================= */}
|
|
|
- {/* {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: 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: { 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: 177 }}><strong style={{ marginRight: 20 }}>结束文案</strong></p>
|
|
|
- <Form.Item name='linkPageType'>
|
|
|
- <Input placeholder='请输入结束页文案'/>
|
|
|
- </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', alignItems: 'center', marginBottom: 10 }}>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>视频结束页类型</strong></p>
|
|
|
+ <Form.Item name='endPageType' style={{ marginBottom: 0 }} >
|
|
|
+ <Radio.Group>
|
|
|
+ {
|
|
|
+ adcreative_template?.adcreativeElements?.filter(item => item.name === 'end_page_type')[0]?.enumProperty?.enumeration?.map((item) => {
|
|
|
+ return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ <div className={'my_endPageDesc'}>
|
|
|
+ <div style={{ display: 'flex', alignItems: 'center' }} >
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>结束文案</strong></p>
|
|
|
+ <Form.Item name='endPageDesc' rules={[{ required: true, pattern: RegExp("^[^\\<\\>\\&'\\\"\\/\\x08\\x09\\x0A\\x0D\\\\]{1,12}$"), message: '请输入正确的结束页文案' }]} style={{ marginBottom: 0, marginRight: 10 }}>
|
|
|
+ <Input
|
|
|
+ placeholder='请输入结束页文案'
|
|
|
+ style={{width:300}}
|
|
|
+ onFocus={() => {
|
|
|
+ setendPageDescnshow(true)
|
|
|
+ textList({ maxTextLength: 12 })
|
|
|
+ }}
|
|
|
+ onChange={(e) => {
|
|
|
+ let value = e.target.value
|
|
|
+ textList({ maxTextLength: 12, keyword: value })
|
|
|
+ }}
|
|
|
+ allowClear
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <span>{endPageDesc?.length || 0}/12</span>
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ endPageDescShow && <List
|
|
|
+ loading={getTextLsit?.loading}
|
|
|
+ size="small"
|
|
|
+ style={{ maxHeight: 300, maxWidth: 300, overflowX: 'auto', marginLeft: 253 }}
|
|
|
+ bordered
|
|
|
+ dataSource={getTextLsit?.data?.returnTexts}
|
|
|
+ renderItem={(item: any) => <List.Item onClick={(e: any) => {
|
|
|
+ form.setFieldsValue({ endPageDesc: item.text })
|
|
|
+ setendPageDescnshow(false)
|
|
|
+ }}><span >{item.text}{item.tag && <span className={styles.crt}>{'CTR 高'}</span>}</span></List.Item>}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ }
|
|
|
</>
|
|
|
}
|
|
|
</Form>
|
|
|
- {/* //sliderImgContent={sliderImgContent} */}
|
|
|
{/* 选择素材 */}
|
|
|
{
|
|
|
selectImgVisible && <SelectCloud
|