|
|
@@ -0,0 +1,151 @@
|
|
|
+import { Button, Checkbox, Input, Modal, Select, Space } from "antd";
|
|
|
+import React, { useEffect, useState } from "react"
|
|
|
+import '../../tencentAdPutIn/index.less'
|
|
|
+import style from '../../components/GoodsModal/index.less'
|
|
|
+import { getAdqLandingPageListApi, getWXDownPageAuthInfoListApi } from "@/services/adqV3/global"
|
|
|
+import { getAdqV3AdListApi } from "@/services/launchAdq/adqv3";
|
|
|
+import { useAjax } from "@/Hook/useAjax";
|
|
|
+import { SyncOutlined } from "@ant-design/icons";
|
|
|
+
|
|
|
+interface ReplacePageProps {
|
|
|
+ selectedRows: any[];
|
|
|
+ visible?: boolean;
|
|
|
+ onClose?: () => void;
|
|
|
+ onChange?: () => void;
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 替换落地页
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+const ReplacePage: React.FC<ReplacePageProps> = ({ selectedRows, visible, onChange, onClose }) => {
|
|
|
+
|
|
|
+ /***********************************************/
|
|
|
+ const { deliveryMode, creativeTemplateId, creativeComponents: { mainJumpInfo } } = selectedRows[0]
|
|
|
+ const pageType: string | undefined = mainJumpInfo?.[0]?.value?.pageType
|
|
|
+ const pageLength: number | undefined = mainJumpInfo?.length
|
|
|
+
|
|
|
+ const [selectAdz, setSelectAdz] = useState<number>(1) // 选择创意
|
|
|
+ const [selectData, setSelectData] = useState<any>(selectedRows[0]) // 选择创意
|
|
|
+ const [loading, setLoading] = useState<boolean>(false)
|
|
|
+ const [wXDownPageAuthInfo, setWXDownPageAuthInfo] = useState<any>({})
|
|
|
+ const [queryForm, setQueryForm] = useState<{ accountId?: number, pageName?: string, ownerUid?: number, pageSize: number, pageNum: number, isSqDownPage: boolean, isCanvasType?: boolean }>({ pageNum: 1, pageSize: 20, isSqDownPage: false })
|
|
|
+
|
|
|
+ const getAdqLandingPageList = useAjax((params) => getAdqLandingPageListApi(params))
|
|
|
+ /***********************************************/
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (selectedRows?.length > 0) {
|
|
|
+ setLoading(true)
|
|
|
+ const accountDataList = [...new Set(selectedRows.map(item => item.accountId))]
|
|
|
+ const infoAjax = accountDataList.map(accountId => getWXDownPageAuthInfoListApi(accountId))
|
|
|
+ const newData: any = {}
|
|
|
+ Promise.all(infoAjax).then(res => {
|
|
|
+ res?.forEach((item, index) => {
|
|
|
+ newData[accountDataList[index]] = item?.data || []
|
|
|
+ })
|
|
|
+ setWXDownPageAuthInfo(newData)
|
|
|
+ setLoading(false)
|
|
|
+ }).catch(() => setLoading(false))
|
|
|
+ const adIdDataList = [...new Set(selectedRows.map(item => item.adgroupId))]
|
|
|
+ const adInfoAjax = adIdDataList.map(item => getAdqV3AdListApi({ adgroupIdList: [item], pageNum: 1, pageSize: 1 } as ADQV3.GetAdListProps))
|
|
|
+ Promise.all(adInfoAjax).then(res => {
|
|
|
+ // res?.forEach((item, index) => {
|
|
|
+ // selectedRows[index].pageList = item?.data?.list || []
|
|
|
+ // })
|
|
|
+ // setSelectData(selectedRows[0])
|
|
|
+ setLoading(false)
|
|
|
+ }).catch(() => setLoading(false))
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (selectData) {
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ }, [queryForm, selectData])
|
|
|
+
|
|
|
+ const getList = async () => {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleOk = () => {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 设置选中广告主 */
|
|
|
+ const handleSelectAdz = (value: number) => {
|
|
|
+ if (value === selectAdz) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const accountId = selectedRows[value - 1].accountId
|
|
|
+ setSelectData(selectedRows[value - 1])
|
|
|
+ setQueryForm({ ...queryForm, pageNum: 1, accountId, ownerUid: wXDownPageAuthInfo[accountId]?.[0]?.accountId })
|
|
|
+ setSelectAdz(value)
|
|
|
+ }
|
|
|
+
|
|
|
+ return <Modal
|
|
|
+ title={<strong>替换落地页</strong>}
|
|
|
+ open={visible}
|
|
|
+ onCancel={onClose}
|
|
|
+ onOk={handleOk}
|
|
|
+ width={1100}
|
|
|
+ className={`${style.SelectPackage} modalResetCss`}
|
|
|
+ bodyStyle={{ padding: '0 10px 0 10px' }}
|
|
|
+ >
|
|
|
+ <div className={style.content}>
|
|
|
+ <div className={style.left} style={{ width: 180 }}>
|
|
|
+ <h4 className={style.title}>创意</h4>
|
|
|
+ <div className={style.accountIdList}>
|
|
|
+ {selectedRows?.map((item, index) => (
|
|
|
+ <div key={item?.accountId + '_' + item.dynamicCreativeId} onClick={() => { if (!loading) handleSelectAdz(index + 1) }} className={`${style.accItem} ${selectAdz === index + 1 && style.select} `}>
|
|
|
+ {item.dynamicCreativeId}({item?.accountId})
|
|
|
+ {/* {data[index].pageList?.length > 0 && <CheckOutlined style={{ color: '#1890ff' }} />} */}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={style.right}>
|
|
|
+ <Space style={{ marginBottom: 10 }}>
|
|
|
+ <Checkbox
|
|
|
+ onChange={(e) => {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: 1, isCanvasType: e.target.checked })
|
|
|
+ }}
|
|
|
+ checked={queryForm.isCanvasType}
|
|
|
+ ><span style={{ fontSize: 12 }}>展示外换内组件原生页</span></Checkbox>
|
|
|
+ <Checkbox
|
|
|
+ onChange={(e) => {
|
|
|
+ if (e.target.checked && wXDownPageAuthInfo && Object.keys(wXDownPageAuthInfo).length) {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: 1, ownerUid: wXDownPageAuthInfo[selectedRows[selectAdz - 1].accountId]?.[0]?.accountId, isSqDownPage: true })
|
|
|
+ } else {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: 1, ownerUid: undefined, isSqDownPage: false })
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ checked={queryForm.isSqDownPage}
|
|
|
+ ><span style={{ fontSize: 12 }}>被授权落地页</span></Checkbox>
|
|
|
+ {queryForm.isSqDownPage && <Select
|
|
|
+ placeholder='选择原生页授权方信息'
|
|
|
+ style={{ width: 210 }}
|
|
|
+ showSearch
|
|
|
+ filterOption={(input: any, option: any) =>
|
|
|
+ (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
+ }
|
|
|
+ allowClear
|
|
|
+ onChange={(value) => {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: 1, ownerUid: value })
|
|
|
+ }}
|
|
|
+ value={queryForm?.ownerUid}
|
|
|
+ dropdownMatchSelectWidth={false}
|
|
|
+ >
|
|
|
+ {wXDownPageAuthInfo?.[selectedRows[selectAdz - 1].accountId]?.map((item: { accountId: number; accountName: string }) => {
|
|
|
+ return <Select.Option value={item.accountId} key={item.accountId}>{item.accountName}({item.accountId})</Select.Option>
|
|
|
+ })}
|
|
|
+ </Select>}
|
|
|
+ <Input value={queryForm?.pageName} style={{ width: 150 }} allowClear placeholder='请输入落地页名称' onChange={(e) => setQueryForm({ ...queryForm, pageNum: 1, pageName: e.target.value })} />
|
|
|
+ <Button style={{ padding: 0, margin: 0 }} icon={<SyncOutlined />} type='link' loading={getAdqLandingPageList?.loading} onClick={() => { getAdqLandingPageList?.refresh() }}><span style={{ fontSize: 12 }}>刷新</span></Button>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+}
|
|
|
+
|
|
|
+export default React.memo(ReplacePage)
|
