Merge branch 'shenwu' of http://git.zanxiangnet.com/wjx/ad-manage into wangjianxin

src/pages/launchSystemNew/launchManage/localAd/creative/index.less

@@ -12,7 +12,7 @@
     height: 160px;
     display: flex;
     align-items: center;
-    justify-content: space-around;
+    justify-content: center;
     flex-flow: column;
 }
 
@@ -40,6 +40,9 @@
         img{
             height: 100%;
         }
+        video{
+            height: 100%;
+        }
     }
 }
 

src/pages/launchSystemNew/launchManage/localAd/creative/index.tsx

@@ -2,7 +2,7 @@
 import { FnAjax, useAjax } from '@/Hook/useAjax'
 import { ListData, } from '@/services/launchAdq'
 import { PromotedObjectType } from '@/services/launchAdq/enum'
-import { createSysAdcreative, getSysAdcreativeList } from '@/services/launchAdq/creative'
+import { createSysAdcreative, getSysAdcreativeInfo, getSysAdcreativeList } from '@/services/launchAdq/creative'
 import { Col, Row, Input, Select, Button } from 'antd'
 import React, { useEffect, useState, useCallback } from 'react'
 import TableData from '../../../components/TableData'
@@ -11,19 +11,21 @@ import tableConfig from './tableConfig'
 
 export interface ModalConfig {
     visible: boolean;
-    title?: string;
+    type?:'add'|'look'|'edit',
+    dataInfo?:null
 }
 
 function Creative() {
     // 变量
     const [modalConfig, setModalConfig] = useState<ModalConfig>({
         visible: false,
-        title: '新建'
+        type:'add'
     })
     const [oldsearchData, setOldsearchData] = useState<any>(null)
     // api方法
-    const sysAdcreativeList: FnAjax<ListData<any>|any> = useAjax((params) => getSysAdcreativeList(params),{formatResult:true})
+    const sysAdcreativeList: FnAjax<ListData<any> | any> = useAjax((params) => getSysAdcreativeList(params), { formatResult: true })
     const createSysAdgroup = useAjax((params) => createSysAdcreative(params))
+    const targetingInfo = useAjax((params) => getSysAdcreativeInfo(params),{formatResult:true})
     // 初始获取列表
     useEffect(() => {
         getList({ pageSize: 20, pageNum: 1 })
@@ -49,14 +51,24 @@ function Creative() {
         createSysAdgroup.run(arg).then(res => {
             if (res) {
                 sysAdcreativeList.refresh()
-                handleModalConfig({ visible: false })
+                handleModalConfig({ visible: false,dataInfo:null,type:'add' })
             }
         })
     }, [sysAdcreativeList])
-    console.log(sysAdcreativeList)
+    // 获取详情
+    const getInfo = useCallback((adgroupsId, type) => {
+        targetingInfo.run(adgroupsId).then((res: any) => {
+            setModalConfig({ ...modalConfig, visible: true, type, dataInfo: res.data })
+        })
+    }, [modalConfig])
+    // 回调
+    const callback = useCallback((data, type) => {
+        getInfo(data.id, type)
+
+    }, [])
     return <div>
         <TableData
-            columns={tableConfig}
+            columns={()=>tableConfig(callback)}
             ajax={sysAdcreativeList}
             dataSource={sysAdcreativeList?.data?.data?.records}
             loading={sysAdcreativeList?.loading}
@@ -114,7 +126,7 @@ function Creative() {
                 getList({ pageNum: current, pageSize })
             }}
         />
-        {modalConfig.visible && <AdModal visible={modalConfig.visible} title={modalConfig.title} PupFn={handleModalConfig} callback={submit} confirmLoading={createSysAdgroup.loading} />}
+        {modalConfig.visible && <AdModal visible={modalConfig.visible} type={modalConfig.type} PupFn={handleModalConfig} callback={submit} confirmLoading={createSysAdgroup.loading} dataInfo={modalConfig.dataInfo}/>}
     </div>
 }
 export default Creative

src/pages/launchSystemNew/launchManage/localAd/creative/modal.tsx

@@ -15,12 +15,15 @@ interface Props {
     visible: boolean,
     PupFn: (arg: ModalConfig) => void,
     callback: (params: any) => void,
-    confirmLoading: boolean
+    confirmLoading: boolean,
+    type?: 'add' | 'look' | 'edit',//新增，查看，编辑
+    dataInfo?: any
 }
 /**创意模板*/
 function CreativeModal(props: Props) {
-    let { visible, title, confirmLoading, PupFn, callback } = props
+    let { visible, confirmLoading, PupFn, callback, type, dataInfo } = props
     const { init } = useModel('useLaunchAdq.useBdMediaPup')
+    let arg = type === 'look' ? { footer: null } : {}
     // 请求
     const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
     const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
@@ -32,6 +35,7 @@ function CreativeModal(props: Props) {
     const [descriptionShow, setdescriptionshow] = useState(false)
     const [endPageDescShow, setendPageDescnshow] = useState(false)
     const [titleShow, settitleshow] = useState(false)
+    const [login, setlogin] = useState(true)
     const [form] = Form.useForm();
     const [pupState, setPupState] = useState({
         kp_show: false,
@@ -83,17 +87,19 @@ function CreativeModal(props: Props) {
                         break;
                     case 'image_list'://图素材
                         newValues.adcreativeElements = {
-                            imageUrlList: materialConfig.list?.map(item=>item.url),
+                            imageUrlList: materialConfig.list?.map(item => item.url),
                             description: newValues.description,
                         }
                         delete newValues[key]
                         break;
                     case 'short_video1'://视频素材
-                        // newValues.adcreativeElements = {
-                        //     video: materialConfig.list[0].url,
-                        //     description: newValues.description,
-                        // }
-                        // delete newValues[key]
+                        newValues.adcreativeElements = {
+                            shortVideoStruct:{
+                                shortVideo1Url:materialConfig.list[0].url
+                            },
+                            description: newValues.description,
+                        }
+                        delete newValues[key]
                         break;
                     case 'description'://文案
                         newValues.adcreativeElements = { ...newValues.adcreativeElements, description: newValues.description }
@@ -101,6 +107,14 @@ function CreativeModal(props: Props) {
                     case 'title'://文案
                         newValues.adcreativeElements = { ...newValues.adcreativeElements, title: newValues.title }
                         break;
+                    case 'endPageType'://视频结束l类型
+                        newValues.adcreativeElements = { ...newValues.adcreativeElements, endPage: {...newValues.adcreativeElements.endPage,endPageType:newValues.endPageType} }
+                        delete newValues[key]
+                        break;
+                    case 'endPageDesc'://视频结束文案
+                        newValues.adcreativeElements = { ...newValues.adcreativeElements, endPage: {...newValues.adcreativeElements.endPage,endPageDesc:newValues.endPageDesc} }
+                        delete newValues[key]
+                        break;
                 }
             }
             delete newValues.description //删除外层文案
@@ -282,14 +296,94 @@ function CreativeModal(props: Props) {
         }
 
     }, [])
+    // 数据回填
+    useEffect(() => {
+        if (dataInfo && adcreative_template_list?.length > 0 && adcreative_template) {
+            let { adcreativeName, adcreativeTemplateId, conversionDataType, conversionTargetType, linkNameType, linkPageType, pageType, promotedObjectType, siteSet, adcreativeElements } = dataInfo
+            let { description, imageUrl, title, videoUrl, imageUrlList,endPage,shortVideoStruct } = adcreativeElements
+            let obj: any = {
+                adcreativeName,
+                siteSet,
+                promotedObjectType,
+                adcreativeTemplateId,
+            }
+            if ([720, 721, 618, 1708].some(n => n === adcreativeTemplateId)) {
+                obj = { ...obj, adcreativeElementsType: '视频' }
+            } else {
+                obj = { ...obj, adcreativeElementsType: '图片' }
+            }
+            if (conversionDataType) {
+                obj = { ...obj, conversionDataType, dataShow: true }
+            }
+            if (conversionTargetType) {
+                obj = { ...obj, conversionTargetType, dataShow: true }
+            }
+            if (linkNameType) {
+                obj = { ...obj, linkNameType, actionBtn: true }
+            }
+            if (linkPageType) {
+                obj = { ...obj, linkPageType, actionBtn: true }
+            }
+            if (pageType) {
+                obj = { ...obj, pageType }
+            }
+            if (description) {
+                obj = { ...obj, description }
+            }
+            if (title) {
+                obj = { ...obj, title }
+            }
+            if(endPage){
+                obj = { ...obj, videoOver:true ,...endPage}
+            }
+            if (videoUrl) {
+                setMaterialConfig({
+                    cloudSize: [],
+                    list: [{ url: videoUrl }],
+                    max: 1,
+                    type: 'video',
+                    adcreativeTemplateId
+                })
+            }
+            if (imageUrl) {
+                setMaterialConfig({
+                    cloudSize: [],
+                    list: [{ url: imageUrl }],
+                    max: 1,
+                    type: 'image',
+                    adcreativeTemplateId
+                })
+            }
+            if (imageUrlList) {
+                setMaterialConfig({
+                    cloudSize: [],
+                    list: imageUrlList?.map((url: any) => ({ url })),
+                    max: imageUrlList.length,
+                    type: 'image_list',
+                    adcreativeTemplateId
+                })
+            }
+            if(shortVideoStruct){
+                setMaterialConfig({
+                    cloudSize: [],
+                    list: [{ url: shortVideoStruct.shortVideo1Url }],
+                    max: 1,
+                    type: 'short_video1',
+                    adcreativeTemplateId
+                })
+            }
+            form.setFieldsValue(obj)
+        }
+    }, [dataInfo, adcreative_template_list, adcreative_template])
     return <Modal
         visible={visible}
-        title={title + '创意'}
-        onCancel={() => { PupFn({ visible: false }) }}
+        title={type === 'add' ? '新建创意' : type === 'look' ? '创意详情' : '编辑创意'}
+        onCancel={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}
         onOk={handleOk}
         width={1200}
         confirmLoading={confirmLoading}
         className='myModal'
+        {...arg}
     >
         <Form
             form={form}
@@ -300,8 +394,8 @@ function CreativeModal(props: Props) {
                     adcreativeElementsType: '视频',
                     promotedObjectType: 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT',
                     siteSet: ['SITE_SET_MOMENTS', 'SITE_SET_WECHAT'],
-                    actionBtn: true,//行动按钮
-                    dataShow: true,//数据展示
+                    // actionBtn: false,//行动按钮
+                    // dataShow: false,//数据展示
                 }
             }
         >
@@ -354,7 +448,8 @@ function CreativeModal(props: Props) {
                                             <div className={styles.adcreative_template_item}>
                                                 {item.isGeneral && <span style={{ color: '#4080ff', fontSize: 10 }}>所选版位通投</span>}
                                                 <img src={item.adcreativeSampleImage} />
-                                                <span>{item.adcreativeTemplateAppellation} </span>
+                                                <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>
                                     })
@@ -371,7 +466,7 @@ function CreativeModal(props: Props) {
                                     {/* 视频 */}
                                     {
                                         (item.name === 'short_video1' || item.name === 'video') && <div className={`${styles.box} ${styles.video}`} onClick={() => {
-                                            init({ mediaType: 'VIDEO', cloudSize: [[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]] })
+                                            init({ mediaType: 'VIDEO', cloudSize:adcreativeTemplateId === 1708 ?  [[{ relation: '=', width: 1280, height: 720 }]]:[[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]] })
                                             setTimeout(() => {
                                                 set_selectImgVisible(true)
                                                 setMaterialConfig({
@@ -384,8 +479,8 @@ function CreativeModal(props: Props) {
                                         }}>
                                             <p>
                                                 {
-                                                    materialConfig?.list[0] ? <video src={materialConfig?.list[0].url} /> : <>
-                                                        <span>{`推荐尺寸（${item.restriction.videoRestriction.minWidth} x ${item.restriction.videoRestriction.minHeight}）`}</span>
+                                                    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>
                                                     </>
                                                 }
@@ -625,7 +720,7 @@ function CreativeModal(props: Props) {
                                         <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}}
+                                                style={{ width: 300 }}
                                                 onFocus={() => {
                                                     setendPageDescnshow(true)
                                                     textList({ maxTextLength: 12 })

src/pages/launchSystemNew/launchManage/localAd/creative/tableConfig.tsx

@@ -1,19 +1,19 @@
-import { PromotedObjectType } from '@/services/launchAdq/enum'
+import { PageTypeEnum, PromotedObjectType } from '@/services/launchAdq/enum'
 import React from 'react'
 import { Space } from 'antd'
-function tableConfig():any{
+function tableConfig(callback:(data:any,type:'edit'|'look')=>void): any {
     return [
         {
             title: 'ID',
             dataIndex: 'id',
             key: 'id',
             align: 'center',
-            width:70
+            width: 70
         },
         {
-            title: '广告名称',
-            dataIndex: 'adgroupName',
-            key: 'adgroupName',
+            title: '创意名称',
+            dataIndex: 'adcreativeName',
+            key: 'adcreativeName',
             align: 'center',
         },
         {
@@ -21,24 +21,42 @@ function tableConfig():any{
             dataIndex: 'promotedObjectType',
             key: 'promotedObjectType',
             align: 'center',
-           render:(a: string | number)=>{
-            return PromotedObjectType[a]
-           } 
+            render: (a: string | number) => {
+                return PromotedObjectType[a]
+            }
+        },
+        {
+            title: '落地页类型',
+            dataIndex: 'pageType',
+            key: 'pageType',
+            align: 'center',
+            render: (a: string) => {
+                return PageTypeEnum[a]
+            }
+        },
+        {
+            title: '创意形式ID',
+            dataIndex: 'adcreativeTemplateId',
+            key: 'adcreativeTemplateId',
+            align: 'center',
         },
         {
-            title: '投放日期',
-            dataIndex: 'beginDate',
-            key: 'beginDate',
+            title: '数据展示',
+            dataIndex: 'conversionDataType',
+            key: 'conversionDataType',
             align: 'center',
-            render:(a: string,b: { endDate: string })=>{
-                return b?.endDate ? a+'~'+b.endDate : a+'~'+'长期投放'
+            render: (a: any, b: any) => {
+                return b.conversionDataType || b.conversionTargetType ? '开' : '关'
             }
         },
         {
-            title: '广告出价',
-            dataIndex: 'bidAmount',
-            key: 'bidAmount',
-            align: 'center',  
+            title: '行动开关',
+            dataIndex: 'linkNameType',
+            key: 'linkNameType',
+            align: 'center',
+            render: (a: any, b: any) => {
+                return b.linkNameType || b.linkPageType ? '开' : '关'
+            }
         },
         {
             title: '创建时间',
@@ -47,15 +65,17 @@ function tableConfig():any{
             align: 'center',
         },
         {
-            title:'操作',
-            dataIndex:'cz',
+            title: '操作',
+            dataIndex: 'cz',
             key: 'cz',
-            align: 'center',  
-            render:()=>{
-               return <Space>
-                    <a>详情</a>
-                </Space>
-            }
+            align: 'center',
+            render:(a: any,b: any)=>{
+                return <Space>
+                     <a onClick={()=>{
+                         callback(b,'look')
+                     }}>详情</a>
+                 </Space>
+             }
         }
     ]
 }

src/services/launchAdq/enum.ts

@@ -252,21 +252,21 @@ export enum NetworkEnum {
   NET_5G = '5G 网络',
 }
 /**联网方式*/
-export enum WechatAdBehaviorEnum{
-  WECHAT_OFFICIAL_ACCOUNT_AD_LIKE='曾对你的公众号广告感兴趣',
-  WECHAT_MOMENTS_AD_LIKE='曾对你的朋友圈广告感兴趣',
-  MINI_GAME_WECHAT_REGISTERED='已关注过你的公众号'
- }
+export enum WechatAdBehaviorEnum {
+  WECHAT_OFFICIAL_ACCOUNT_AD_LIKE = '曾对你的公众号广告感兴趣',
+  WECHAT_MOMENTS_AD_LIKE = '曾对你的朋友圈广告感兴趣',
+  MINI_GAME_WECHAT_REGISTERED = '已关注过你的公众号',
+}
 
 /** 商品库规模  */
 export enum CatalogScaleType {
   CATALOG_SCALE_TYPE_NORMAL = '普通商品库，商品库规模不大于 100 万',
-  CATALOG_SCALE_TYPE_HUGE = '超大商品库，商品库规模大于 100 万'
+  CATALOG_SCALE_TYPE_HUGE = '超大商品库，商品库规模大于 100 万',
 }
 
 /** 商品库类型 */
 export enum CatalogType {
-  CATALOG_TYPE_STANDARD = "标准商品库类型"
+  CATALOG_TYPE_STANDARD = '标准商品库类型',
 }
 
 /** 商品库行业类型 */
@@ -289,5 +289,65 @@ export enum IndustryType {
   INDUSTRY_TYPE_HOTEL = '旅游行业',
   INDUSTRY_TYPE_CAR_ONLINE_PLATFORM = '汽车线上平台',
   INDUSTRY_TYPE_CAR_AFTERMARKET = '汽车后市场',
-  INDUSTRY_TYPE_CAR_TRAVEL_SERVICE = '汽车出行服务'
+  INDUSTRY_TYPE_CAR_TRAVEL_SERVICE = '汽车出行服务',
+}
+/**落地页类型*/
+export enum PageTypeEnum {
+  PAGE_TYPE_CANVAS_WECHAT = '微信原生推广页',
+  PAGE_TYPE_MOMENTS_SIMPLE_NATIVE_WECHAT = '微信简版原生页',
+  PAGE_TYPE_WECHAT_OFFICIAL_ACCOUNT_DETAIL = '微信公众号详情页',
+}
+/**跳转落地页类型*/
+export enum LinkPageTypeEnum {
+  LINK_PAGE_TYPE_CANVAS_WECHAT = '微信原生页',
+  LINK_PAGE_TYPE_WECHAT_OFFICIAL_ACCOUNT_DETAIL = '微信公众号详情页',
+}
+/**链接名称类型*/
+export enum LinkPageNameTypeEnum {
+  VIEW_DETAILS = '查看详情',
+  GET_COUPONS = '领取优惠，选择领取优惠，需在详情页中可直接领取优惠，否则广告将会被审核驳回',
+  MAKE_AN_APPOINTMENT = '预约活动，选择预约活动，需在详情页中体现活动预约入口，否则广告将会被审核驳回',
+  BUY_NOW = '立即购买，当且仅当推广目标为电商时可使用',
+  GO_SHOPPING = '去逛逛，当且仅当推广目标为电商时可使用',
+  ENTER_MINI_PROGRAM = '进入小程序，仅能使用于投放小程序落地页',
+  ENTER_MINI_GAME = '进入小游戏，仅能使用于投放小游戏落地页',
+  APPLY_NOW = '立即申请',
+  BOOK_NOW = '立即预定',
+  RESERVATION_BUY = '预约购买',
+  CONSULT_NOW = '立即咨询',
+  BOOK_DRIVE = '预约试驾',
+  ENTER_OFFICIAL_ACCOUNTS = '了解公众号',
+  PLAY_NOW = '立即玩',
+  OPEN_MINI_GAME = '打开游戏',
+  DOWNLOAD_APP = '下载应用',
+  DOWNLOAD_GAME = '下载游戏',
+  GET_SAMPLES = '领取小样',
+  TRY_NOW = '立即体验',
+  GET_IT_NOW = '立即领取',
+  BUY_ASAP = '立即抢购',
+  DOWNLOAD_NOW = '立即下载',
+  VIEW_APPS = '查看应用',
+  MORE_INFO = '了解更多',
+  GET_VOUCHERS = '领券',
+  FOLLOW_OFFICIAL_ACCOUNT = '关注公众号',
+  READ_NOVELS = '阅读小说',
+  WATCH_LIVE = '观看直播',
+  RESERVE_NOW = '立即预约',
+  OPEN_APP = '打开应用',
+  ALREADY_INSTALL = '已安装',
+  RESERVE_LIVE = '预约直播',
+  SETUP_NOW = '立即开通',
+  SECKILL_NOW = '立即秒杀',
+  TRY_PLAY_NOW = '立即试玩',
+  INSTALL_NOW = '立即安装',
+  MORE_ABOUT_OFFICIAL_ACCOUNT_CHT = '了解公眾號',
+  FOLLOW_OFFICIAL_ACCOUNT_CHT = '關註公眾號',
+  GET_FOR_FREE = '免费领取',
+  CARNIVAL_618 = '618 狂欢',
+  SURPRISE_618 = '618 惊喜',
+  DISCOUNT_618 = '618 优惠',
+  GO_618_VENUE = '去 618 会场',
+  GET_618_WELFARE = '领 618 福利',
+  CONTACT_CUSTOMER_SERVICE = '联系客服',
+  CONTACT_BUSINESS = '联系商家',
 }