|
@@ -0,0 +1,371 @@
|
|
|
+import { useAjax } from "@/Hook/useAjax";
|
|
|
+import { AdcreativeTemplate, AdcreativeTemplateList } from "@/services/launchAdq";
|
|
|
+import { get_adcreative_template, get_adcreative_template_list } from "@/services/launchAdq/global";
|
|
|
+import { mySet } from "@/utils/arrFn";
|
|
|
+import { DeleteOutlined, DownOutlined, UpOutlined } from "@ant-design/icons";
|
|
|
+import { Button, Form, Popconfirm, Radio, Spin } from "antd"
|
|
|
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react"
|
|
|
+import { useModel } from "umi";
|
|
|
+import SelectCloud from "../../components/selectCloud";
|
|
|
+import TextAideInput from "../../components/textAideInput";
|
|
|
+import { outAdcreativeTemplateIdFun } from "../localAd/adenum";
|
|
|
+import style from './index.less'
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ template: { siteSet: string[], promotedObjectType: string },
|
|
|
+ index: number,
|
|
|
+ isDel: boolean,
|
|
|
+ delOri?: () => void
|
|
|
+ data?: any
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 批量Form
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+const CreativeForm = forwardRef((props: Props, ref) => {
|
|
|
+
|
|
|
+ /**************************/
|
|
|
+ const { data, template, index, delOri, isDel } = props
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ let adcreativeElementsType = Form.useWatch('adcreativeElementsType', form)
|
|
|
+ let adcreativeTemplateId = Form.useWatch('adcreativeTemplateId', form)
|
|
|
+
|
|
|
+ const [adcreative_template_list, set_adcreative_template_list] = useState<AdcreativeTemplateList[]>([])
|
|
|
+ const [adcreative_template, set_adcreative_template] = useState<AdcreativeTemplate>()
|
|
|
+ const [conversionList, setConversionList] = useState<any>(null)
|
|
|
+ const [materialConfig, setMaterialConfig] = useState<{ adcreativeTemplateId?: number, type: string, cloudSize: { relation: string, width: number, height: number }[], list: any[], max: number }>({
|
|
|
+ type: '',//类型
|
|
|
+ cloudSize: [],//素材搜索条件
|
|
|
+ list: [],//素材
|
|
|
+ max: 1,//素材数量
|
|
|
+ })//素材配置
|
|
|
+ const [pupState, setPupState] = useState({
|
|
|
+ kp_show: false,
|
|
|
+ xd_show: false,
|
|
|
+ sj_show: false,
|
|
|
+ bq_show: false,
|
|
|
+ sp_show: false
|
|
|
+ })
|
|
|
+ const [isOpen, setIsOpen] = useState<boolean>(true)
|
|
|
+ const [isErr, setIsErr] = useState<boolean>(false)
|
|
|
+ const [selectImgVisible, set_selectImgVisible] = useState(false)
|
|
|
+
|
|
|
+
|
|
|
+ const { init } = useModel('useLaunchAdq.useBdMediaPup')
|
|
|
+
|
|
|
+ const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
|
|
|
+ const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
|
|
|
+ /**************************/
|
|
|
+
|
|
|
+ //子组件暴露方法
|
|
|
+ useImperativeHandle(ref, () => ({
|
|
|
+ handleOk
|
|
|
+ }));
|
|
|
+
|
|
|
+ const handleOk = () => {
|
|
|
+ return new Promise((resolve: (value: unknown) => void, reject: (reason?: any) => void) => {
|
|
|
+ form.validateFields().then(values => {
|
|
|
+ setIsErr(false)
|
|
|
+ resolve(values)
|
|
|
+ }).catch(err => {
|
|
|
+ setIsErr(true)
|
|
|
+ reject(err)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取创意形式列表
|
|
|
+ useEffect(() => {
|
|
|
+ if (template && template?.siteSet?.length > 0 && template?.promotedObjectType) {
|
|
|
+ getAdcreativeTemplateList.run({
|
|
|
+ siteSet: template?.siteSet,
|
|
|
+ promotedObjectType: template?.promotedObjectType,
|
|
|
+ campaignType: 'CAMPAIGN_TYPE_NORMAL',
|
|
|
+ }).then(res => {
|
|
|
+ let newArr: any = []
|
|
|
+ // 过滤掉相同的和即将下线的
|
|
|
+ if (!res) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, [template, form])
|
|
|
+
|
|
|
+ // 获取创意形式详情
|
|
|
+ useEffect(() => {
|
|
|
+ // CAMPAIGN_TYPE_NORMAL
|
|
|
+ if (template?.siteSet?.length > 0 && template?.promotedObjectType && adcreativeTemplateId) {
|
|
|
+ if (adcreativeTemplateId) {
|
|
|
+ getAdcreativeTemplate.run({
|
|
|
+ siteSet: template?.siteSet,
|
|
|
+ promotedObjectType: template?.promotedObjectType,
|
|
|
+ adcreativeTemplateId
|
|
|
+ }).then(res => {
|
|
|
+ if (res?.length > 0) {
|
|
|
+ set_adcreative_template(res[0])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, [template?.siteSet, template?.promotedObjectType, adcreativeTemplateId])
|
|
|
+
|
|
|
+ //每次选中创意设置该展示的界面
|
|
|
+ useEffect(() => {
|
|
|
+ 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 (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) => {
|
|
|
+ let arr: any[] = mySet(item.propertyDetail.enumDetail.enumeration)
|
|
|
+ newObj[item.name] = arr
|
|
|
+ })
|
|
|
+ setConversionList(newObj)
|
|
|
+
|
|
|
+ states = { ...states, sj_show: true }
|
|
|
+ if (newObj.conversion_data_type) {
|
|
|
+ values = { ...values, conversionDataType: newObj.conversion_data_type[0].value }
|
|
|
+ }
|
|
|
+ if (newObj.conversion_target_type) {
|
|
|
+ values = { ...values, conversionTargetType: newObj.conversion_target_type[0].value }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //行动按钮组件存在
|
|
|
+ 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 }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 视频结束页 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)
|
|
|
+ }
|
|
|
+ }, [adcreative_template])
|
|
|
+
|
|
|
+ // 版位改变清空数据
|
|
|
+ useEffect(() => {
|
|
|
+ if (materialConfig.adcreativeTemplateId && adcreativeTemplateId !== materialConfig.adcreativeTemplateId) {
|
|
|
+ setMaterialConfig({ ...materialConfig, adcreativeTemplateId: undefined, list: [] })
|
|
|
+ }
|
|
|
+ }, [adcreativeTemplateId, materialConfig])
|
|
|
+
|
|
|
+ // 切换创意形式默认选中第一个
|
|
|
+ useEffect(() => {
|
|
|
+ // 设置默认选中第一个
|
|
|
+ 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])
|
|
|
+
|
|
|
+ return <div className={style.originality} key={index} style={isOpen ? { borderColor: isErr ? 'red' : '#e4e4e4' } : { height: 44, overflow: 'hidden', borderColor: isErr ? 'red' : '#e4e4e4' }}>
|
|
|
+ <div className={style.head} onClick={() => { setIsOpen(!isOpen) }}>
|
|
|
+ <div>创意{index}</div>
|
|
|
+ <div>
|
|
|
+ {isDel && <Popconfirm placement="top" title="是否放弃该创意" onConfirm={(e) => { e?.stopPropagation(); delOri && delOri() }} okText="Yes" cancelText="No">
|
|
|
+ <Button type="link" size='small' className={style.clear} style={{ color: 'red' }} onClick={(e) => { e?.stopPropagation() }}><DeleteOutlined /></Button>
|
|
|
+ </Popconfirm>}
|
|
|
+ <Button
|
|
|
+ type="link"
|
|
|
+ size='small'
|
|
|
+ style={{ color: '#000' }}
|
|
|
+ >
|
|
|
+ {isOpen ? <UpOutlined /> : <DownOutlined />}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style={{ height: 20 }}></div>
|
|
|
+ <Form
|
|
|
+ form={form}
|
|
|
+ labelCol={{ span: 4 }}
|
|
|
+ labelWrap={true}
|
|
|
+ labelAlign="left"
|
|
|
+ initialValues={
|
|
|
+ {
|
|
|
+ adcreativeElementsType: '视频'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Form.Item label="创意形式" name='adcreativeElementsType'>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="视频">视频</Radio.Button>
|
|
|
+ <Radio.Button value="图片">图片</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Spin tip="Loading..." spinning={getAdcreativeTemplateList?.loading} style={{ width: '100%' }}>
|
|
|
+ <Form.Item style={{ marginLeft: 155 }} name='adcreativeTemplateId'>
|
|
|
+ <Radio.Group className={style.adcreative_template}>
|
|
|
+ {adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)?.map((item: any) => {
|
|
|
+ return <Radio.Button value={item.adcreativeTemplateId} key={item.adcreativeTemplateId}>
|
|
|
+ <div className={style.adcreative_template_item}>
|
|
|
+ {item.isGeneral && <span style={{ color: '#4080ff', fontSize: 10 }}>所选版位通投</span>}
|
|
|
+ <img src={item.adcreativeSampleImage} />
|
|
|
+ <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateAppellation}</span>
|
|
|
+ <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateId}</span>
|
|
|
+ </div>
|
|
|
+ </Radio.Button>
|
|
|
+ })}
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ {/* 优先展示视频或图片 */}
|
|
|
+ {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={item.description} rules={[{ required: true, message: '请选择素材!' }]} key={item.name} name={item.name}>
|
|
|
+ {/* 视频 */}
|
|
|
+ {
|
|
|
+ (item.name === 'short_video1' || item.name === 'video') && <div className={`${style.box} ${style.video}`} onClick={() => {
|
|
|
+ init({ mediaType: 'VIDEO', cloudSize: adcreativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]], maxSize: item.restriction.videoRestriction.fileSize * 1024 })
|
|
|
+ setTimeout(() => {
|
|
|
+ set_selectImgVisible(true)
|
|
|
+ setMaterialConfig({
|
|
|
+ ...materialConfig,
|
|
|
+ type: item.name,
|
|
|
+ max: 1,
|
|
|
+ adcreativeTemplateId
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ }}>
|
|
|
+ <p>
|
|
|
+ {
|
|
|
+ materialConfig?.list[0] ? <video src={materialConfig?.list[0].url} controls /> : <>
|
|
|
+ <span>{`推荐尺寸(${adcreativeTemplateId === 1708 ? 1280 : item.restriction.videoRestriction.minWidth} x ${adcreativeTemplateId === 1708 ? 720 : 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={`${style.box} ${style.image}`} onClick={() => {
|
|
|
+ init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
|
|
|
+ setTimeout(() => {
|
|
|
+ set_selectImgVisible(true)
|
|
|
+ setMaterialConfig({
|
|
|
+ ...materialConfig,
|
|
|
+ type: item.name,
|
|
|
+ max: 1,
|
|
|
+ adcreativeTemplateId
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+
|
|
|
+ }}>
|
|
|
+ <p>
|
|
|
+ {materialConfig?.list[0] ? <img src={materialConfig?.list[0].url} /> : <>
|
|
|
+ <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={`${style.box} ${item.arrayProperty.maxNumber >= 3 ? style.image_list : style.image}`} onClick={() => {
|
|
|
+ init({ mediaType: 'IMG', num: item.arrayProperty.maxNumber, cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
|
|
|
+ setTimeout(() => {
|
|
|
+ set_selectImgVisible(true)
|
|
|
+ setMaterialConfig({
|
|
|
+ ...materialConfig,
|
|
|
+ type: item.name,
|
|
|
+ max: item.arrayProperty.maxNumber,
|
|
|
+ adcreativeTemplateId
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ }}>
|
|
|
+ {
|
|
|
+ Array(item.arrayProperty.maxNumber).fill('').map((arr, index) => {
|
|
|
+ return <p key={index}>
|
|
|
+ {
|
|
|
+ materialConfig?.list[index] ? <img src={materialConfig?.list[index].url} /> : <>
|
|
|
+ <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.required && item.name === 'description').map(item => {
|
|
|
+ let maxNum = adcreativeTemplateId === 1708 ? pupState.xd_show ? 10 : item.restriction.textRestriction.maxLength : item.restriction.textRestriction.maxLength
|
|
|
+ return <div key={item.fieldType}>
|
|
|
+ <Form.Item label={item.description} name={item.name} rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${maxNum}}`)), message: '请输入正确的' + item.description }]}>
|
|
|
+ <TextAideInput placeholder={'请输入' + item.description} style={{ width: 500 }} maxTextLength={maxNum} />
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ })}
|
|
|
+ </Spin>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ {/* 选择素材 */}
|
|
|
+ {selectImgVisible && <SelectCloud
|
|
|
+ visible={selectImgVisible}
|
|
|
+ onClose={() => set_selectImgVisible(false)}
|
|
|
+ sliderImgContent={materialConfig.list}
|
|
|
+ onChange={(content) => {
|
|
|
+ if (content.length > 0) {
|
|
|
+ form.setFieldsValue({ [materialConfig.type]: materialConfig.type })
|
|
|
+ }
|
|
|
+ setMaterialConfig({ ...materialConfig, list: content })
|
|
|
+ set_selectImgVisible(false)
|
|
|
+ console.log(content)
|
|
|
+ }} />
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+export default React.memo(CreativeForm)
|