Merge branch 'develop' of http://git.zanxiangnet.com/wjx/ad-manage

src/pages/launchSystemNew/launchManage/createAd/adcreativeCol.tsx

@@ -63,6 +63,11 @@ const AdcreativeCol: React.FC<Props> = (props) => {
                 {adcreativeElements?.imageUrlList?.map((url: string, index: number) => <Image width={50} src={url} style={{ borderRadius: 4 }} key={'TOP_SLIDER' + index} />)}
             </Space>
         </Image.PreviewGroup></div>}
+        {adcreativeElements?.elementStory && <div style={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap' }}><span style={{ marginRight: 4 }}><strong>创意素材：</strong></span> <Image.PreviewGroup>
+            <Space wrap>
+                {adcreativeElements?.elementStory?.map((item: { imageUrl: string }, index: number) => <Image width={50} src={item.imageUrl} style={{ borderRadius: 4 }} key={'TOP_SLIDER' + index} />)}
+            </Space>
+        </Image.PreviewGroup></div>}
         {overrideCanvasHeadOption && <div><strong>素材选项：</strong> <span style={{ color: "#5a5a5a" }}>{overrideCanvasHeadOptionEnum[overrideCanvasHeadOption]}</span></div>}
         {adcreativeElements?.shortVideoStruct?.shortVideo1Url && <div style={{ display: 'flex', alignItems: 'flex-start' }}><span style={{ marginRight: 4 }}><strong>创意素材：</strong></span> <video src={adcreativeElements?.shortVideoStruct?.shortVideo1Url} width={130} controls></video></div>}
         {adcreativeElements?.videoUrl && <div style={{ display: 'flex', alignItems: 'flex-start' }}><span style={{ marginRight: 4 }}><strong>创意素材：</strong></span> <video src={adcreativeElements?.videoUrl} width={130} controls></video></div>}

src/pages/launchSystemNew/launchManage/createAd/creative/modal/index.tsx

@@ -143,6 +143,14 @@ function CreativePup(props: Props) {
                         }
                         delete newValues[key]
                         break;
+                    case 'element_story'://图素材
+                        newValues.adcreativeElements = {
+                            ...newValues.adcreativeElements,
+                            elementStory: imgMaterialConfig.list?.map(item => ({ imageUrl: item.url })),
+                            description: newValues.description,
+                        }
+                        delete newValues[key]
+                        break;
                     case 'short_video1'://视频素材
                         newValues.adcreativeElements = {
                             ...newValues.adcreativeElements,
@@ -327,6 +335,15 @@ function CreativePup(props: Props) {
                 }).then(res => {
                     if (res?.length > 0) {
                         form.setFieldsValue({ adcreativeName: res[0]?.adcreativeTemplateAppellation + '_' + moment().format('YYYYMMDDhhmmss') + '_' + currentUser.userId })
+                        let adcreativeElements = res[0]?.adcreativeElements || []
+                        let elementStoryData = adcreativeElements?.find((item: { name: string }) => item.name === 'element_story')
+                        if (elementStoryData) {
+                            let imgageData = adcreativeElements?.find((item: { name: string }) => item.name === 'image')
+                            if (imgageData) {
+                                elementStoryData.restriction = imgageData.restriction
+                                adcreativeElements.splice(adcreativeElements?.findIndex((item: { name: string }) => item.name === 'image'), 1)
+                            }
+                        }
                         set_adcreative_template(res[0])
                         if (siteSet?.some((name: string) => name === 'SITE_SET_MOMENTS')) {
                             let id = res[0].adcreativeTemplateId
@@ -486,7 +503,7 @@ function CreativePup(props: Props) {
     useEffect(() => {
         if (!infoSet && dataInfo && adcreative_template_list?.length > 0) {
             let { adcreativeName, adcreativeTemplateId, conversionDataType, conversionTargetType, linkNameType, linkPageType, pageType, promotedObjectType, siteSet, profile, adcreativeElements, overrideCanvasHeadOption, linkPageSpec } = dataInfo
-            let { description, imageUrl, title, videoUrl, imageUrlList, endPage, shortVideoStruct, brand, buttonText } = adcreativeElements
+            let { description, imageUrl, title, videoUrl, imageUrlList, endPage, shortVideoStruct, brand, buttonText, elementStory } = adcreativeElements
             let obj: any = {
                 adcreativeName,
                 siteSet,
@@ -571,6 +588,16 @@ function CreativePup(props: Props) {
                 })
                 obj = { ...obj, image_list: imageUrlList }
             }
+            if (elementStory) {
+                setImgMaterialConfig({
+                    cloudSize: [],
+                    list: elementStory?.map((item: { imageUrl: string }) => ({ url: item.imageUrl })),
+                    max: elementStory.length,
+                    type: 'element_story',
+                    adcreativeTemplateId
+                })
+                obj = { ...obj, element_story: imageUrlList }
+            }
             if (shortVideoStruct) {
                 setVideoMaterialConfig({
                     cloudSize: [],
@@ -684,7 +711,7 @@ function CreativePup(props: Props) {
                         {/* 优先展示视频或图片,朋友圈常规不勾选使用外部素材替换内部，隐藏此选项，后期自动将落地页顶部素材添加进入 */}
                         {((overrideCanvasHeadOption !== 'OPTION_CANVAS_OVERRIDE_CREATIVE') || siteSet.every((name: string) => name !== 'SITE_SET_MOMENTS')) && <div style={{ display: 'flex', flexFlow: 'column' }}>
                             {
-                                adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image').map(item => {
+                                adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image' || item.name === 'element_story').map(item => {
                                     return <Form.Item
                                         label={<strong>{item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? '视频封面图' : item.description}</strong>}
                                         key={item.name}
@@ -789,6 +816,41 @@ function CreativePup(props: Props) {
                                                 </div>
                                             </Form.Item>
                                         }
+                                        {
+                                            item.name === 'element_story' && <Form.Item
+                                                noStyle
+                                                rules={[{ required: true, message: '请选择素材!' }]}
+                                                name={item.name}
+                                                style={item.description === '图片' && adcreative_template?.adcreativeElements?.some(item => item.name === 'video') ? { order: 2 } : {}}
+                                            >
+                                                <div className={`${styles.box} ${item.arrayProperty.maxNumber >= 3 ? styles.image_list : styles.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)
+                                                        setImgMaterialConfig({
+                                                            ...imgMaterialConfig,
+                                                            type: item.name,
+                                                            max: item.arrayProperty.maxNumber,
+                                                            adcreativeTemplateId
+                                                        })
+                                                    }, 100)
+                                                }}>
+                                                    {
+                                                        Array(item.arrayProperty.maxNumber).fill('').map((arr, index) => {
+                                                            return <p key={index}>
+                                                                {
+                                                                    imgMaterialConfig?.list[index] ? <img style={item?.restriction.imageRestriction?.width > item?.restriction.imageRestriction?.height ? { width: '100%', height: 'auto' } : {}} src={imgMaterialConfig?.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>
+                                        }
                                     </Form.Item>
                                 })
                             }
@@ -896,7 +958,7 @@ function CreativePup(props: Props) {
                         {/* ============================================================普通行动按钮============================================================= */}
                         {
                             pupState.xd_show && <Form.Item hidden={isShowXd} label={<strong>行动按钮</strong>} name='actionBtn' valuePropName="checked">
-                                <Switch checkedChildren="开启" unCheckedChildren="关闭" disabled={isShowXd}/>
+                                <Switch checkedChildren="开启" unCheckedChildren="关闭" disabled={isShowXd} />
                             </Form.Item>
                         }
                         {

src/pages/launchSystemNew/launchManage/createAd/creativeCL/index.tsx

@@ -82,6 +82,10 @@ const CreativeCL: React.FC<Props> = (props) => {
                             return <div key={index} className={style.group}>
                                 {item?.imageUrlList?.map((url: string, index: number) => <div key={index}><img src={url} /></div>)}
                             </div>
+                        } else if (keys?.includes('elementStory')) {
+                            return <div key={index} className={style.group}>
+                                {item?.elementStory?.map((item: { imageUrl: string }, index: number) => <div key={index}><img src={item.imageUrl} /></div>)}
+                            </div>
                         } else {
                             if (keys?.length > 1) {
                                 return <div key={index} className={style.otherGroup}>

src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/index.tsx

@@ -143,6 +143,14 @@ function CreativePup(props: Props) {
                         }
                         delete newValues[key]
                         break;
+                    case 'element_story'://图素材
+                        newValues.adcreativeElements = {
+                            ...newValues.adcreativeElements,
+                            elementStory: imgMaterialConfig.list?.map(item => ({ imageUrl: item.url })),
+                            description: newValues.description,
+                        }
+                        delete newValues[key]
+                        break;
                     case 'short_video1'://视频素材
                         newValues.adcreativeElements = {
                             ...newValues.adcreativeElements,
@@ -331,6 +339,15 @@ function CreativePup(props: Props) {
                 }).then(res => {
                     if (res?.length > 0) {
                         form.setFieldsValue({ adcreativeName: res[0]?.adcreativeTemplateAppellation + '_' + moment().format('YYYYMMDDhhmmss') + '_' + currentUser.userId })
+                        let adcreativeElements = res[0]?.adcreativeElements || []
+                        let elementStoryData = adcreativeElements?.find((item: { name: string }) => item.name === 'element_story')
+                        if (elementStoryData) {
+                            let imgageData = adcreativeElements?.find((item: { name: string }) => item.name === 'image')
+                            if (imgageData) {
+                                elementStoryData.restriction = imgageData.restriction
+                                adcreativeElements.splice(adcreativeElements?.findIndex((item: { name: string }) => item.name === 'image'), 1)
+                            }
+                        }
                         set_adcreative_template(res[0])
                         if (siteSet?.some((name: string) => name === 'SITE_SET_MOMENTS')) {
                             let id = res[0].adcreativeTemplateId
@@ -342,7 +359,7 @@ function CreativePup(props: Props) {
                         }
                         templateChange(res[0], ok)
                         // 处理素材
-                        setMaterialData(res[0]?.adcreativeElements?.filter((item: any) => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image').map((item: any) => {
+                        setMaterialData(res[0]?.adcreativeElements?.filter((item: any) => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image' || item.name === 'element_story').map((item: any) => {
                             return {
                                 label: item.description === '图片' && res[0]?.adcreativeElements?.some((item: any) => item.name === 'video') ? '视频封面图' : item.description,
                                 name: item.name,
@@ -493,7 +510,7 @@ function CreativePup(props: Props) {
     useEffect(() => {
         if (!infoSet && dataInfo && adcreative_template_list?.length > 0) {
             let { adcreativeName, adcreativeTemplateId, conversionDataType, conversionTargetType, linkNameType, linkPageType, pageType, promotedObjectType, siteSet, profile, adcreativeElements, overrideCanvasHeadOption, linkPageSpec } = dataInfo
-            let { description, imageUrl, title, videoUrl, imageUrlList, endPage, shortVideoStruct, brand, buttonText } = adcreativeElements
+            let { description, imageUrl, title, videoUrl, imageUrlList, endPage, shortVideoStruct, brand, buttonText, elementStory } = adcreativeElements
             let obj: any = {
                 adcreativeName,
                 siteSet,
@@ -579,6 +596,16 @@ function CreativePup(props: Props) {
                 })
                 obj = { ...obj, image_list: imageUrlList }
             }
+            if (elementStory) {
+                setImgMaterialConfig({
+                    cloudSize: [],
+                    list: elementStory?.map((item: { imageUrl: string }) => ({ url: item.imageUrl })),
+                    max: elementStory.length,
+                    type: 'element_story',
+                    adcreativeTemplateId
+                })
+                obj = { ...obj, element_story: imageUrlList }
+            }
             if (shortVideoStruct) {
                 setVideoMaterialConfig({
                     cloudSize: [],
@@ -687,7 +714,7 @@ function CreativePup(props: Props) {
                         {/* ============================================================普通行动按钮============================================================= */}
                         {
                             pupState.xd_show && <Form.Item hidden={isShowXd} label={<strong>行动按钮</strong>} name='actionBtn' valuePropName="checked">
-                                <Switch checkedChildren="开启" unCheckedChildren="关闭" disabled={isShowXd}/>
+                                <Switch checkedChildren="开启" unCheckedChildren="关闭" disabled={isShowXd} />
                             </Form.Item>
                         }
                         {

src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/material.tsx

@@ -86,6 +86,9 @@ const Material: React.FC<Props> = (props) => {
                             case 'shortVideo1Url'://视频素材
                                 data.short_video1 = item[key]
                                 break;
+                            case 'elementStory':
+                                data.element_story = item[key].map((item: { imageUrl: string }) => item.imageUrl)
+                                break;
                         }
                     }
                     return data
@@ -99,10 +102,9 @@ const Material: React.FC<Props> = (props) => {
 
     // 处理判断有哪些素材 展示按钮
     useEffect(() => {
-        console.log('material----->', material);
         if (material?.length > 0) {
             setVideoUploads(material?.find((item: { name: string }) => item.name === 'short_video1' || item.name === 'video'))
-            setImgUploads(material?.find((item: { name: string }) => item.name === 'image' || item.name === 'image_list'))
+            setImgUploads(material?.find((item: { name: string }) => item.name === 'image' || item.name === 'image_list' || item.name === 'element_story'))
         } else {
             setVideoUploads({})
             setImgUploads({})
@@ -128,6 +130,9 @@ const Material: React.FC<Props> = (props) => {
                         case 'short_video1'://视频素材
                             data.shortVideo1Url = item[key]
                             break;
+                        case 'element_story':
+                            data.elementStory = item[key].map((url: string) => ({ imageUrl: url }))
+                            break;
                     }
                 }
                 return data
@@ -145,7 +150,6 @@ const Material: React.FC<Props> = (props) => {
             title={<>
                 <span>创意素材</span>
                 {videoUploads && Object.keys(videoUploads)?.length > 0 && <Button type="link" onClick={() => {
-                    console.log('videoUploads---->', videoUploads);
                     init({ mediaType: 'VIDEO', num: 100, cloudSize: adcreativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: videoUploads.restriction.videoRestriction.minWidth, height: videoUploads.restriction.videoRestriction.minHeight }]], maxSize: videoUploads.restriction.videoRestriction.fileSize * 1024 })
                     setMaterialConfig({
                         ...materialConfig,
@@ -163,7 +167,7 @@ const Material: React.FC<Props> = (props) => {
                     setMaterialConfig({
                         ...materialConfig,
                         type: imgUploads.name,
-                        max: imgUploads.name === 'image_list' ? imgUploads.arrayProperty.maxNumber : 1,
+                        max: (imgUploads.name === 'image_list' || imgUploads.name === 'element_story') ? imgUploads.arrayProperty.maxNumber : 1,
                         index: 99999,
                         adcreativeTemplateId
                     })
@@ -273,6 +277,38 @@ const Material: React.FC<Props> = (props) => {
                                             </div>
                                         </Form.Item>
                                     }
+                                    if (item.name === 'element_story') {
+                                        return <Form.Item
+                                            {...field}
+                                            label={<strong>{item.label}</strong>}
+                                            rules={[{ required: true, message: '请选择素材!' }]}
+                                            name={[field.name, item.name]}
+                                            key={index}
+                                        >
+                                            <div className={`${styles.box} ${item.arrayProperty.maxNumber >= 3 ? styles.image_list : styles.imageMater}`} style={item.arrayProperty.maxNumber >= 3 ? { flexFlow: 'row', width: '100%' } : {}} 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 })
+                                                setMaterialConfig({
+                                                    ...materialConfig,
+                                                    type: item.name,
+                                                    max: item.arrayProperty.maxNumber,
+                                                    index: num,
+                                                    adcreativeTemplateId
+                                                })
+                                                setTimeout(() => {
+                                                    set_selectVideoVisible(true)
+                                                }, 100)
+                                            }}>
+                                                {Array(item.arrayProperty.maxNumber).fill('').map((arr, index1) => {
+                                                    return <p key={index1} style={item.arrayProperty.maxNumber >= 3 ? { width: 130, height: 130 } : { width: 130, height: 130, justifyContent: 'center' }}>
+                                                        {materials?.length > 0 && materials[num] && Object.keys(materials[num])?.includes(item.name) && materials[num][item.name][index1] ? <img style={item?.restriction.imageRestriction?.width > item?.restriction.imageRestriction?.height ? { width: '100%', height: 'auto' } : {}} src={materials[num][item.name][index1]} /> : <>
+                                                            <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
+                                                            <span>{`${item.restriction.imageRestriction.fileFormat?.map((str: any) => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
+                                                        </>}
+                                                    </p>
+                                                })}
+                                            </div>
+                                        </Form.Item>
+                                    }
                                     return null
 
                                 })}
@@ -293,14 +329,15 @@ const Material: React.FC<Props> = (props) => {
         {selectVideoVisible && <SelectCloud
             visible={selectVideoVisible}
             onClose={() => set_selectVideoVisible(false)}
-            sliderImgContent={materialConfig.index === 99999 ? undefined : materialConfig.type === 'image_list'
-                ? (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes('image_list')) ? materials[materialConfig.index]['image_list']?.map((item: string) => ({ url: item })) : undefined
-                : (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes(materialConfig.type)) ? [{ url: materials[materialConfig.index][materialConfig.type] }] : undefined
+            sliderImgContent={materialConfig.index === 99999 ? undefined :
+                materialConfig.type === 'element_story' ? (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes('element_story')) ? materials[materialConfig.index]['element_story']?.map((item: string) => ({ url: item })) : undefined :
+                    materialConfig.type === 'image_list' ? (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes('image_list')) ? materials[materialConfig.index]['image_list']?.map((item: string) => ({ url: item })) : undefined :
+                        (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes(materialConfig.type)) ? [{ url: materials[materialConfig.index][materialConfig.type] }] : undefined
             }
             onChange={(content: any) => {
                 if (content.length > 0) {
                     if (materialConfig.index === 99999) {
-                        if (materialConfig.type === 'image_list') {
+                        if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
                             let urls = content?.map((item: any) => item?.url)
                             let max = materialConfig.max
                             let materialsNew = materials.map((item: any) => {
@@ -374,7 +411,7 @@ const Material: React.FC<Props> = (props) => {
                     } else {
                         materials = materials?.map((item: any, index: number) => {
                             if (materialConfig.index === index) {
-                                if (materialConfig.type === 'image_list') {
+                                if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
                                     if (item) {
                                         item[materialConfig.type] = content?.map((item: any) => item?.url)
                                         return { ...item }