|  | @@ -6,9 +6,9 @@ import { PromotedObjectType } from "@/services/launchAdq/enum"
 | 
	
		
			
				|  |  |  import { getTagsList } from "@/services/launchAdq/global"
 | 
	
		
			
				|  |  |  import { getSysAdgroupsInfo } from "@/services/launchAdq/localAd"
 | 
	
		
			
				|  |  |  import { getsysTargetingInfo } from "@/services/launchAdq/targeting"
 | 
	
		
			
				|  |  | -import { CloseOutlined, EditOutlined, QuestionCircleOutlined, SearchOutlined } from "@ant-design/icons"
 | 
	
		
			
				|  |  | -import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, message, Popover, Tabs, Checkbox } from "antd"
 | 
	
		
			
				|  |  | -import React, { useCallback, useEffect, useRef, useState } from "react"
 | 
	
		
			
				|  |  | +import { CloseOutlined, SearchOutlined } from "@ant-design/icons"
 | 
	
		
			
				|  |  | +import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, message, Tabs } from "antd"
 | 
	
		
			
				|  |  | +import React, { useCallback, useEffect, useState } from "react"
 | 
	
		
			
				|  |  |  import { useModel } from "umi"
 | 
	
		
			
				|  |  |  import Ad from "./ad"
 | 
	
		
			
				|  |  |  import DataSourceModal from "../../components/dataSourceModal"
 | 
	
	
		
			
				|  | @@ -25,6 +25,7 @@ import columns from "./tableConfig"
 | 
	
		
			
				|  |  |  import TargetIng from './targeting'
 | 
	
		
			
				|  |  |  import Creative from './creative'
 | 
	
		
			
				|  |  |  import AddGroup from '../../components/addGroup'
 | 
	
		
			
				|  |  | +import CustomerServiceModal from "../../components/customerServiceModal"
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -56,7 +57,6 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |      const [lookVisible, setLookVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
 | 
	
		
			
				|  |  |      const [subVisible, setSubVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
 | 
	
		
			
				|  |  |      const [pageVisible, setPageVisible] = useState<boolean>(false) // 选择云端落地页控制
 | 
	
		
			
				|  |  | -    const [wxButtonList, setWxButtonList] = useState<WxAutoButton[]>([])
 | 
	
		
			
				|  |  |      const [tableData, setTableData] = useState<any[]>([])   // 预览表格
 | 
	
		
			
				|  |  |      const [tableSelect, setTableSelect] = useState<any[]>([])
 | 
	
		
			
				|  |  |      const [geoLocationList, setGeoLocationList] = useState<any>({}) // 所有地域列表
 | 
	
	
		
			
				|  | @@ -65,6 +65,7 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |      const [page_checked, set_page_checked] = useState(false)//创意key
 | 
	
		
			
				|  |  |      const [usesArr, setUsersArr] = useState<any>(localStorage.getItem('ADQUSERS' + userId) ? JSON.parse(localStorage.getItem('ADQUSERS' + userId) as any) : [])
 | 
	
		
			
				|  |  |      const { init, get } = useModel('useLaunchAdq.useBdMediaPup')
 | 
	
		
			
				|  |  | +    const [cloudParams, setCloudParams] = useState<{ adcreativeTemplateId?: number }>({})
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      const tagsList_REGION = useAjax((params) => getTagsList(params))
 | 
	
	
		
			
				|  | @@ -107,7 +108,6 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |      // 获取账户列表
 | 
	
		
			
				|  |  |      useEffect(() => {
 | 
	
		
			
				|  |  |          getAdAccount.run()
 | 
	
		
			
				|  |  | -        // init({ mediaType: 'PAGE' })
 | 
	
		
			
				|  |  |      }, [])
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      /** 获取广告详情 */
 | 
	
	
		
			
				|  | @@ -182,6 +182,15 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |              message.error('请选择落地页')
 | 
	
		
			
				|  |  |              return
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | +        if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps?.some((item: { cropUserGroupMap: any[] }) => item?.cropUserGroupMap?.length > 0)) {
 | 
	
		
			
				|  |  | +            let cropData = queryForm?.taskMediaMaps?.filter((item: { cropUserGroupMap: any[] }) => item?.cropUserGroupMap?.length > 0)
 | 
	
		
			
				|  |  | +            if (cropData?.some((item: { cropUserGroupMap: { data: { cropList: any[] }[] }[] }) => {
 | 
	
		
			
				|  |  | +                return item?.cropUserGroupMap?.some((item1: { data: { cropList: any[] }[] }) => item1?.data?.some((item2: { cropList: any[] }) => item2?.cropList?.length === 0))
 | 
	
		
			
				|  |  | +            })) {
 | 
	
		
			
				|  |  | +                message.error('请完善落地页企微客服组')
 | 
	
		
			
				|  |  | +                return
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  |          let data: any[] = []
 | 
	
		
			
				|  |  |          accountCreateLogs.forEach((item: any) => {
 | 
	
		
			
				|  |  |              queryForm.taskMediaMaps?.forEach((task, index) => {
 | 
	
	
		
			
				|  | @@ -203,7 +212,36 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      const submit = (props: { campaignName: string, count?: number }) => {
 | 
	
		
			
				|  |  |          console.log(111111, tableSelect);
 | 
	
		
			
				|  |  | -        let params = { ...queryForm, ...props }
 | 
	
		
			
				|  |  | +        let newQueryForm = JSON.parse(JSON.stringify(queryForm))
 | 
	
		
			
				|  |  | +        let newtaskMediaMaps = newQueryForm.taskMediaMaps.map((item1: { cropUserGroupMap?: any[] }) => {
 | 
	
		
			
				|  |  | +            let { cropUserGroupMap, ...data } = item1
 | 
	
		
			
				|  |  | +            if (cropUserGroupMap && cropUserGroupMap?.length > 0) {
 | 
	
		
			
				|  |  | +                let cropUserGroup1Map: any = {}
 | 
	
		
			
				|  |  | +                let cropUserGroup2Map: any = {}
 | 
	
		
			
				|  |  | +                cropUserGroupMap.forEach((cropData: { id: number, data: any[] }) => {
 | 
	
		
			
				|  |  | +                    let cropData1: { cropId: string, groupId: number }[] = []
 | 
	
		
			
				|  |  | +                    let cropData2: { cropId: string, groupId: number }[] = []
 | 
	
		
			
				|  |  | +                    cropData?.data.forEach((crop: { type: 1 | 2, cropList: { cropId: string, groupId: number }[] }) => {
 | 
	
		
			
				|  |  | +                        let cropList = crop.cropList
 | 
	
		
			
				|  |  | +                        if (crop.type === 1) {
 | 
	
		
			
				|  |  | +                            cropData1.push({ cropId: cropList[0].cropId, groupId: cropList[0].groupId })
 | 
	
		
			
				|  |  | +                        } else {
 | 
	
		
			
				|  |  | +                            cropData2.push({ cropId: cropList[0].cropId, groupId: cropList[0].groupId })
 | 
	
		
			
				|  |  | +                        }
 | 
	
		
			
				|  |  | +                    })
 | 
	
		
			
				|  |  | +                    if (cropData1.length > 0) {
 | 
	
		
			
				|  |  | +                        cropUserGroup1Map[cropData.id.toString()] = cropData1
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                    if (cropData2.length > 0) {
 | 
	
		
			
				|  |  | +                        cropUserGroup2Map[cropData.id.toString()] = cropData2
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                })
 | 
	
		
			
				|  |  | +                return { ...data, cropUserGroup1Map: Object.keys(cropUserGroup1Map)?.length > 0 ? cropUserGroup1Map : null, cropUserGroup2Map: Object.keys(cropUserGroup2Map)?.length > 0 ? cropUserGroup2Map : null }
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            return data
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        newQueryForm.taskMediaMaps = newtaskMediaMaps
 | 
	
		
			
				|  |  | +        let params = { ...newQueryForm, ...props }
 | 
	
		
			
				|  |  |          console.log(accountCreateLogs)
 | 
	
		
			
				|  |  |          let accountLogs = accountCreateLogs.map((item: any, index) => {
 | 
	
		
			
				|  |  |              // userActionSetsList 数据源  productList 商品
 | 
	
	
		
			
				|  | @@ -316,6 +354,7 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |          getPageInfo(arr)
 | 
	
		
			
				|  |  |          setSelectImgVisible(false)
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      /** 获取落地页详情 */
 | 
	
		
			
				|  |  |      const getPageInfo = useCallback((arrList) => {
 | 
	
		
			
				|  |  |          console.log('arrList====>', arrList)
 | 
	
	
		
			
				|  | @@ -323,13 +362,28 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |              get.run({ mediaType: 'PAGE', sysMediaId: arrList[targetKey]?.sysPageId }).then(res => {
 | 
	
		
			
				|  |  |                  if (!Object.keys(res)?.includes('fail')) {
 | 
	
		
			
				|  |  |                      let data = res
 | 
	
		
			
				|  |  | -                    let pageElementsSpecList = data?.pageSpecsList[0]?.pageElementsSpecList
 | 
	
		
			
				|  |  | +                    let pageElementsSpecList = data?.pageSpecsList[0]?.pageElementsSpecList // 内容区
 | 
	
		
			
				|  |  | +                    let globalSpec = data?.globalSpec  // 悬浮组件
 | 
	
		
			
				|  |  |                      let arr: any = queryForm.pageList || []
 | 
	
		
			
				|  |  |                      let adqPageArr: any = queryForm.adqPageList || []
 | 
	
		
			
				|  |  |                      adqPageArr[targetKey] = null
 | 
	
		
			
				|  |  |                      arr[targetKey] = data
 | 
	
		
			
				|  |  | +                    /** 处理客服 */
 | 
	
		
			
				|  |  | +                    let cropUserGroupMap: any[] = []
 | 
	
		
			
				|  |  | +                    if ((pageElementsSpecList as any[])?.some((item: { elementType: string }) => item?.elementType === 'ENTERPRISE_WX') || (globalSpec?.globalElementsSpecList?.length > 0 && globalSpec?.globalElementsSpecList?.some((item: { floatButtonSpec: { elementType: string } }) => item?.floatButtonSpec?.elementType === 'ENTERPRISE_WX'))) {
 | 
	
		
			
				|  |  | +                        let groupList: { type: number, name: string, cropList: any[], cropId?: number, groupId?: number }[] = [];
 | 
	
		
			
				|  |  | +                        (pageElementsSpecList as any[])?.forEach((item: { elementType: string, enterpriseWxSpec: { btnTitle: string } }) => {
 | 
	
		
			
				|  |  | +                            if (item?.elementType === 'ENTERPRISE_WX') {
 | 
	
		
			
				|  |  | +                                groupList.push({ type: 1, name: '联系商家', cropList: [] }) // item.enterpriseWxSpec.btnTitle
 | 
	
		
			
				|  |  | +                            }
 | 
	
		
			
				|  |  | +                        })
 | 
	
		
			
				|  |  | +                        if ((globalSpec?.globalElementsSpecList?.length > 0 && globalSpec?.globalElementsSpecList)) {
 | 
	
		
			
				|  |  | +                            groupList.push({ type: 2, name: '悬浮组件', cropList: [] })
 | 
	
		
			
				|  |  | +                        }
 | 
	
		
			
				|  |  | +                        cropUserGroupMap = accountCreateLogs?.map((item: any) => ({ adAccountId: item.adAccountId, id: item.id, data: groupList }))
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                    arrList[targetKey].cropUserGroupMap = cropUserGroupMap
 | 
	
		
			
				|  |  |                      setQueryForm({ ...queryForm, pageList: arr, taskMediaMaps: arrList, adqPageList: adqPageArr })//设置落地页详情数组
 | 
	
		
			
				|  |  | -                    setWxButtonList(() => (pageElementsSpecList as any[])?.filter((item: { elementType: string }) => item?.elementType === 'ENTERPRISE_WX'))
 | 
	
		
			
				|  |  |                  } else {
 | 
	
		
			
				|  |  |                      //清空对应创意中的落地页ID
 | 
	
		
			
				|  |  |                      let arr = queryForm.taskMediaMaps || []
 | 
	
	
		
			
				|  | @@ -338,7 +392,7 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |                  }
 | 
	
		
			
				|  |  |              })
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | -    }, [queryForm, targetKey])
 | 
	
		
			
				|  |  | +    }, [queryForm, targetKey, accountCreateLogs])
 | 
	
		
			
				|  |  |      // 设置云端落地页
 | 
	
		
			
				|  |  |      const setAdqPage = useCallback((data) => {
 | 
	
		
			
				|  |  |          if (Array.isArray(data) && data.length > 0) {
 | 
	
	
		
			
				|  | @@ -351,6 +405,7 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |              let pageArr: any = queryForm.pageList || []
 | 
	
		
			
				|  |  |              adqPageArr[targetKey as string] = data
 | 
	
		
			
				|  |  |              pageArr[targetKey as string] = null
 | 
	
		
			
				|  |  | +            delete arr[targetKey as string]?.cropUserGroupMap
 | 
	
		
			
				|  |  |              arr[targetKey as string] = { ...arr[targetKey as string], sysPageId: '', accountPageIdMap: objMap }
 | 
	
		
			
				|  |  |              // 重新设置云端数据并清空本地数据
 | 
	
		
			
				|  |  |              setQueryForm({ ...queryForm, taskMediaMaps: arr, adqPageList: adqPageArr, pageList: pageArr })
 | 
	
	
		
			
				|  | @@ -375,7 +430,8 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |          let data = JSON.parse(localStorage.getItem('ADQUSERS' + userId) as any)
 | 
	
		
			
				|  |  |          setUsersArr(data)
 | 
	
		
			
				|  |  |      }, [])
 | 
	
		
			
				|  |  | -    console.log('queryForm======>111', queryForm)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    console.log('queryForm111111', queryForm);
 | 
	
		
			
				|  |  |      return <Space direction="vertical" style={{ width: '100%' }}>
 | 
	
		
			
				|  |  |          <Card
 | 
	
		
			
				|  |  |              title={<div className={style.cardTitle}>配置区</div>}
 | 
	
	
		
			
				|  | @@ -426,6 +482,7 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |                          value={accountCreateLogs?.map((item: { id: number }) => item?.id)}
 | 
	
		
			
				|  |  |                          onChange={(e, option) => {
 | 
	
		
			
				|  |  |                              console.log(option)
 | 
	
		
			
				|  |  | +                            setQueryForm({ ...queryForm, taskMediaMaps: queryForm?.taskMediaMaps?.map((item: { sysPageId: number }) => ({ ...item, sysPageId: '' })) })
 | 
	
		
			
				|  |  |                              setAccountCreateLogs(option?.map((item: any) => ({ adAccountId: item?.children?.toString()?.split('——')[0], id: item?.value })))
 | 
	
		
			
				|  |  |                              clearData()
 | 
	
		
			
				|  |  |                          }}
 | 
	
	
		
			
				|  | @@ -539,10 +596,11 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |                              <Col span={12} >
 | 
	
		
			
				|  |  |                                  <div className={style.top}>
 | 
	
		
			
				|  |  |                                      落地页
 | 
	
		
			
				|  |  | -                                    {/* <span >落地页<Tooltip title="云端落地页优先于本地落地页">
 | 
	
		
			
				|  |  | -                                        <QuestionCircleOutlined />
 | 
	
		
			
				|  |  | -                                    </Tooltip></span> */}
 | 
	
		
			
				|  |  | -                                    {wxButtonList?.length > 0 && <Button type="link" size="small">配置客服</Button>}
 | 
	
		
			
				|  |  | +                                    {(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap?.length > 0) && <CustomerServiceModal data={queryForm?.taskMediaMaps[targetKey]?.cropUserGroupMap} onChange={(data) => {
 | 
	
		
			
				|  |  | +                                        let newQueryForm = JSON.parse(JSON.stringify(queryForm))
 | 
	
		
			
				|  |  | +                                        newQueryForm.taskMediaMaps[targetKey].cropUserGroupMap = data
 | 
	
		
			
				|  |  | +                                        setQueryForm(newQueryForm)
 | 
	
		
			
				|  |  | +                                    }} />}
 | 
	
		
			
				|  |  |                                  </div>
 | 
	
		
			
				|  |  |                                  <div className={style.center}>
 | 
	
		
			
				|  |  |                                      <Tabs size={'small'} onEdit={onEdit} type="editable-card" activeKey={targetKey} onChange={(key) => { set_targetKey(key) }} hideAdd >
 | 
	
	
		
			
				|  | @@ -603,11 +661,17 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |                                              } else {
 | 
	
		
			
				|  |  |                                                  init({ mediaType: 'PAGE', cloudSize: undefined })
 | 
	
		
			
				|  |  |                                              }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |                                          }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId ? '修改' : '选择落地页'}</Button>
 | 
	
		
			
				|  |  | -                                        {/* {accountCreateLogs?.length > 0  ?  <Button type="link" onClick={() => { setPageVisible(true) }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
 | 
	
		
			
				|  |  | +                                        {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => {
 | 
	
		
			
				|  |  | +                                            setPageVisible(true)
 | 
	
		
			
				|  |  | +                                            if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
 | 
	
		
			
				|  |  | +                                                setCloudParams({ adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
 | 
	
		
			
				|  |  | +                                            } else {
 | 
	
		
			
				|  |  | +                                                setCloudParams({})
 | 
	
		
			
				|  |  | +                                            }
 | 
	
		
			
				|  |  | +                                        }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
 | 
	
		
			
				|  |  |                                              <Button type="link">云端落地页</Button>
 | 
	
		
			
				|  |  | -                                        </Tooltip>} */}
 | 
	
		
			
				|  |  | +                                        </Tooltip>}
 | 
	
		
			
				|  |  |                                      </> : <Tooltip title="请先设置创意">
 | 
	
		
			
				|  |  |                                          <Button type="link"><span>选择落地页</span></Button>
 | 
	
		
			
				|  |  |                                      </Tooltip>}
 | 
	
	
		
			
				|  | @@ -675,7 +739,7 @@ const CreateAd: React.FC = () => {
 | 
	
		
			
				|  |  |          {/* 选择转化ID */}
 | 
	
		
			
				|  |  |          {idVisible && <IdModal visible={idVisible} data={accountCreateLogs} onClose={() => setIdVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false); clearData() }} />}
 | 
	
		
			
				|  |  |          {/* 选择ADQ落地页 */}
 | 
	
		
			
				|  |  | -        {pageVisible && <PageModal visible={pageVisible} data={accountCreateLogs} onClose={() => setPageVisible(false)} onChange={(e) => { setAdqPage(e); setPageVisible(false); clearData() }} />}
 | 
	
		
			
				|  |  | +        {pageVisible && <PageModal cloudParams={cloudParams} visible={pageVisible} data={accountCreateLogs} onClose={() => setPageVisible(false)} onChange={(e) => { setAdqPage(e); setPageVisible(false); clearData() }} />}
 | 
	
		
			
				|  |  |          {/* 选择素材 */}
 | 
	
		
			
				|  |  |          {selectImgVisible && <SelectCloud visible={selectImgVisible} onClose={() => setSelectImgVisible(false)} onChange={setPage} isBack={false} />}
 | 
	
		
			
				|  |  |          {/* 查看落地页 */}
 |