|
|
@@ -0,0 +1,576 @@
|
|
|
+import React, { useCallback, useState, useEffect } from 'react'
|
|
|
+import { Modal, Form, Input, Divider, Select, Radio, Checkbox, TreeSelect } from 'antd'
|
|
|
+import { GenderEnum, EducationEnum, ExcludedDimensionEnum, MaritalStatusEnum, OptimizationGoalEnum, UserOsEnum, DevicePriceEnum, NetworkEnum, WechatAdBehaviorEnum } from '@/services/launchAdq/enum'
|
|
|
+import { ModalConfig } from '.'
|
|
|
+import { useAjax } from '@/Hook/useAjax'
|
|
|
+import { getTagsList } from '@/services/launchAdq/global'
|
|
|
+interface Props {
|
|
|
+ title?: string,
|
|
|
+ visible: boolean,
|
|
|
+ PupFn: (arg: ModalConfig) => void,
|
|
|
+ callback: (params: any) => void,
|
|
|
+ confirmLoading: boolean
|
|
|
+}
|
|
|
+const ios_os = Object.keys(UserOsEnum).filter(key => key.includes('IOS'))
|
|
|
+const android_os = Object.keys(UserOsEnum).filter(key => key.includes('ANDROID'))
|
|
|
+/**创意模板*/
|
|
|
+function AdModal(props: Props) {
|
|
|
+ let { visible, title, confirmLoading, PupFn, callback } = props
|
|
|
+ const tagsList_REGION = useAjax((params) => getTagsList(params))
|
|
|
+ const tagsList_MODEL = useAjax((params) => getTagsList(params))
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ const [indeterminateIos, setIndeterminateIos] = useState(false);
|
|
|
+ const [indeterminateAndroid, setIndeterminateAndroid] = useState(false);
|
|
|
+ const [modelList, setModelList] = useState([])
|
|
|
+ const [regionsList, setRegionsList] = useState([])
|
|
|
+ let educationType = Form.useWatch('educationType', form)
|
|
|
+ let ageType = Form.useWatch('ageType', form)
|
|
|
+ let age_min = Form.useWatch('age_min', form)
|
|
|
+ let age_max = Form.useWatch('age_max', form)
|
|
|
+ let maritalStatusType = Form.useWatch('maritalStatusType', form)
|
|
|
+ let excludedDimension = Form.useWatch('excludedDimension', form)
|
|
|
+ let userOsType = Form.useWatch('userOsType', form)
|
|
|
+ let userOsIos = Form.useWatch('userOsIos', form)
|
|
|
+ let userOsAndroid = Form.useWatch('userOsAndroid', form)
|
|
|
+ let devicePriceType = Form.useWatch('devicePriceType', form)
|
|
|
+ let networkType = Form.useWatch('networkType', form)
|
|
|
+ let wechatAdBehaviorType = Form.useWatch('wechatAdBehaviorType', form)
|
|
|
+ let actions = Form.useWatch('actions', form)
|
|
|
+ let excludedActions = Form.useWatch('excludedActions', form)
|
|
|
+ let deviceBrandModelType = Form.useWatch('deviceBrandModelType', form)
|
|
|
+ let deviceBrandModelList = Form.useWatch('deviceBrandModelList', form)
|
|
|
+ let geoLocationType = Form.useWatch('geoLocationType', form)
|
|
|
+
|
|
|
+ // 确定事件
|
|
|
+ const handleOk = useCallback(() => {
|
|
|
+ form.validateFields().then(values => {
|
|
|
+ let newValues = JSON.parse(JSON.stringify(values))
|
|
|
+ newValues.targeting = {}
|
|
|
+ Object.keys(newValues).forEach(key => {
|
|
|
+ switch (key) {
|
|
|
+ case 'geoLocationType':
|
|
|
+ if (newValues[key] === '1') {
|
|
|
+ newValues.targeting.geoLocation = {
|
|
|
+ locationTypes: ['LIVE_IN'],//对于微信流量（site_set=SITE_SET_WECHAT、SITE_SET_MOMENTS、SITE_SET_MINI_GAME_WECHAT），仅能选择"LIVE_IN"（常住）；
|
|
|
+ regions: newValues.regions
|
|
|
+ }
|
|
|
+ }
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.regions
|
|
|
+ break;
|
|
|
+ case 'ageType'://年龄处理
|
|
|
+ if (newValues[key] === '1') {
|
|
|
+ newValues.targeting.age = {
|
|
|
+ min: newValues.age_min,
|
|
|
+ max: newValues.age_max
|
|
|
+ }
|
|
|
+ }
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.age_min
|
|
|
+ delete newValues.age_max
|
|
|
+ break;
|
|
|
+ case 'gender'://性别
|
|
|
+ newValues[key] !== '0' && (newValues.targeting.gender = newValues[key])
|
|
|
+ delete newValues[key]
|
|
|
+ break;
|
|
|
+ case 'educationType'://学历
|
|
|
+ newValues[key] === '1' && (newValues.targeting.education = newValues.education)
|
|
|
+ delete newValues[key]
|
|
|
+ break;
|
|
|
+ case 'maritalStatusType'://婚恋
|
|
|
+ newValues[key] === '1' && (newValues.targeting.maritalStatus = newValues.maritalStatus)
|
|
|
+ delete newValues[key]
|
|
|
+ break;
|
|
|
+ case 'customAudienceType'://定向人群
|
|
|
+ break;
|
|
|
+ case 'deviceBrandModelType'://品牌型号
|
|
|
+ if (newValues[key] === '1') {
|
|
|
+ newValues.targeting.deviceBrandModel = {}
|
|
|
+ if (newValues.isexcluded) {
|
|
|
+ newValues.targeting.deviceBrandModel.excludedList = newValues.deviceBrandModelList
|
|
|
+ delete newValues.targeting.deviceBrandModel.includedList
|
|
|
+ } else {
|
|
|
+ newValues.targeting.deviceBrandModel.includedList = newValues.deviceBrandModelList
|
|
|
+ delete newValues.targeting.deviceBrandModel.excludedList
|
|
|
+ }
|
|
|
+ if (!newValues.targeting.deviceBrandModel.excludedList && !newValues.targeting.deviceBrandModel.includedList) {
|
|
|
+ delete newValues.targeting.deviceBrandModel
|
|
|
+ }
|
|
|
+ }
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.deviceBrandModelList
|
|
|
+ delete newValues.isexcluded
|
|
|
+ break;
|
|
|
+ case 'wechatAdBehaviorType'://微信再营销
|
|
|
+ if (newValues[key] === '1') {
|
|
|
+ newValues.targeting.wechatAdBehavior = {}
|
|
|
+ if (newValues.actions) {
|
|
|
+ newValues.targeting.wechatAdBehavior = { ...newValues.targeting.wechatAdBehavior, actions: newValues.actions }
|
|
|
+ }
|
|
|
+ if (newValues.excludedActions) {
|
|
|
+ newValues.targeting.wechatAdBehavior = { ...newValues.targeting.wechatAdBehavior, excludedActions: newValues.excludedActions }
|
|
|
+ }
|
|
|
+ // 去除空值的参数
|
|
|
+ Object.keys(newValues.targeting.wechatAdBehavior).forEach(key => {
|
|
|
+ if (!newValues.targeting.wechatAdBehavior[key] || newValues.targeting.wechatAdBehavior[key]?.length === 0) {
|
|
|
+ delete newValues.targeting.wechatAdBehavior[key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 什么都没删除参数
|
|
|
+ if (!newValues.targeting.wechatAdBehavior.actions && !newValues.targeting.wechatAdBehavior.excludedActions) {
|
|
|
+ delete newValues.targeting.wechatAdBehavior
|
|
|
+ }
|
|
|
+ }
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.actions
|
|
|
+ delete newValues.excludedActions
|
|
|
+ break;
|
|
|
+ case 'networkType'://联网方式
|
|
|
+ newValues[key] === '1' && (newValues.targeting.networkType = newValues.network)
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.network
|
|
|
+ break;
|
|
|
+ case 'devicePriceType'://手机价格
|
|
|
+ newValues[key] === '1' && (newValues.targeting.network = newValues.network)
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.devicePrice
|
|
|
+ break;
|
|
|
+ case 'userOsType'://手机系统
|
|
|
+ if (newValues[key] === '1') {
|
|
|
+ newValues.targeting.userOs = []
|
|
|
+ if (newValues.userOsIos) {
|
|
|
+ newValues.targeting.userOs = [...newValues.targeting.userOs, ...newValues.userOsIos]
|
|
|
+ }
|
|
|
+ if (newValues.userOsAndroid) {
|
|
|
+ newValues.targeting.userOs = [...newValues.targeting.userOs, ...newValues.userOsAndroid]
|
|
|
+ }
|
|
|
+ if (newValues.targeting.userOs.length === 0) {
|
|
|
+ delete newValues.targeting.userOs
|
|
|
+ }
|
|
|
+ }
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.userOsIosAll
|
|
|
+ delete newValues.userOsAndroidAll
|
|
|
+ delete newValues.userOsIos
|
|
|
+ delete newValues.userOsAndroid
|
|
|
+ break;
|
|
|
+ case 'excludedDimension'://排除已转化用户
|
|
|
+ if (newValues[key] !== '0') {
|
|
|
+ newValues.targeting.excludedConvertedAudience = newValues.conversionBehaviorList ? {
|
|
|
+ excludedDimension: newValues.excludedDimension,
|
|
|
+ conversionBehaviorList: [newValues.conversionBehaviorList]
|
|
|
+ } : {
|
|
|
+ excludedDimension: newValues.excludedDimension,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ delete newValues[key]
|
|
|
+ delete newValues.conversionBehaviorList
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(newValues)
|
|
|
+ callback(newValues)
|
|
|
+ })
|
|
|
+ }, [form])
|
|
|
+
|
|
|
+ // 监听ios系统全选事件
|
|
|
+ useEffect(() => {
|
|
|
+ setIndeterminateIos(!!userOsIos?.length && userOsIos?.length < ios_os.length)
|
|
|
+ form.setFieldsValue({ userOsIosAll: userOsIos?.length === ios_os.length })
|
|
|
+ }, [userOsIos])
|
|
|
+ // 监听android系统全选事件
|
|
|
+ useEffect(() => {
|
|
|
+ setIndeterminateAndroid(!!userOsAndroid?.length && userOsAndroid?.length < android_os.length)
|
|
|
+ form.setFieldsValue({ userOsAndroidAll: userOsAndroid?.length === android_os.length })
|
|
|
+ }, [userOsAndroid])
|
|
|
+ // 获取定向标签
|
|
|
+ useEffect(() => {
|
|
|
+ // 获取地域
|
|
|
+ tagsList_REGION.run({ type: 'REGION' }).then(res => {
|
|
|
+ let arr: any = Object.values(res).filter(v => typeof v !== 'string')
|
|
|
+ let parentList = arr.filter((item: { parentName: any }) => !item.parentName)
|
|
|
+ let childrenList = arr.filter((item: { parentName: any }) => item.parentName)
|
|
|
+ parentList = parentList.map((item: { name: any; id: any, parentId: any }) => {
|
|
|
+ let children = childrenList?.filter((c: { parentId: any }) => {
|
|
|
+ return item.id === c.parentId
|
|
|
+ })
|
|
|
+ let obj = {
|
|
|
+ title: item.name,
|
|
|
+ value: item.id,
|
|
|
+ key: item.id,
|
|
|
+ parentId: item.parentId,
|
|
|
+ disabled: item.id === 710000 || item.id === 810000 || item.id === 820000,
|
|
|
+ children: children.map((item: { name: any; id: any, parentId: any }) => ({
|
|
|
+ title: item.name,
|
|
|
+ value: item.id,
|
|
|
+ key: item.id,
|
|
|
+ parentId: item.parentId
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ })
|
|
|
+ parentList = parentList.map((item: any) => {
|
|
|
+ let itemArr = item?.children?.map((c: any) => {
|
|
|
+ let arr = childrenList.filter((d: { parentId: any }) => {
|
|
|
+ return d.parentId === c.value
|
|
|
+ })
|
|
|
+ arr = arr.map((i: { name: any; id: any }) => ({
|
|
|
+ title: i.name,
|
|
|
+ value: i.id,
|
|
|
+ key: i.id,
|
|
|
+ }))
|
|
|
+ return { ...c, children: arr }
|
|
|
+ })
|
|
|
+ return { ...item, children: itemArr }
|
|
|
+ })
|
|
|
+ // let zg = parentList.filter((item: { title: string }) => item.title === '中国')
|
|
|
+ let zg_children = parentList.filter((item: { title: string }) => (item.title !== '中国' && item.title !== '国外'))
|
|
|
+ // zg[0].children = zg_children
|
|
|
+ setRegionsList(zg_children)
|
|
|
+ })
|
|
|
+ // 获取手机
|
|
|
+ tagsList_MODEL.run({ type: 'DEVICE_BRAND_MODEL' }).then(res => {
|
|
|
+ let arr: any = Object.values(res).filter(v => typeof v !== 'string')
|
|
|
+ let parentList = arr.filter((item: { parentName: any }) => !item.parentName)
|
|
|
+ let childrenList = arr.filter((item: { parentName: any }) => item.parentName)
|
|
|
+ parentList = parentList.map((item: { name: any; id: any }) => {
|
|
|
+ let children = childrenList?.filter((c: { parentId: any }) => {
|
|
|
+ return item.id === c.parentId
|
|
|
+ })
|
|
|
+ let obj = {
|
|
|
+ title: item.name,
|
|
|
+ value: item.id,
|
|
|
+ key: item.id,
|
|
|
+ children: children.map((item: { name: any; id: any }) => ({
|
|
|
+ title: item.name,
|
|
|
+ value: item.id,
|
|
|
+ key: item.id,
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ })
|
|
|
+ setModelList(parentList)
|
|
|
+ })
|
|
|
+ }, [])
|
|
|
+ return <Modal
|
|
|
+ visible={visible}
|
|
|
+ title={title + '定向'}
|
|
|
+ onCancel={() => { PupFn({ visible: false }) }}
|
|
|
+ onOk={handleOk}
|
|
|
+ width={900}
|
|
|
+ confirmLoading={confirmLoading}
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ form={form}
|
|
|
+ labelCol={{ span: 3 }}
|
|
|
+ initialValues={
|
|
|
+ {
|
|
|
+ geoLocationType: '0',
|
|
|
+ educationType: '0',
|
|
|
+ ageType: '0',
|
|
|
+ gender: '0',
|
|
|
+ maritalStatusType: '0',
|
|
|
+ age_min: 14,
|
|
|
+ age_max: 66,
|
|
|
+ targetingName: '',
|
|
|
+ excludedDimension: '0',
|
|
|
+ userOsType: '0',
|
|
|
+ devicePriceType: '0',
|
|
|
+ networkType: '0',
|
|
|
+ wechatAdBehaviorType: '0',
|
|
|
+ deviceBrandModelType: '0'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >
|
|
|
+ {/* ============================================================基本信息============================================================= */}
|
|
|
+ <Divider orientation='left'><h3>基本信息</h3></Divider>
|
|
|
+ {/* ====================定向名称========================= */}
|
|
|
+ <Form.Item label={<strong>定向名称</strong>} name='targetingName' rules={[{ required: true, message: '请输入定向名称!' }]}>
|
|
|
+ <Input placeholder='定向名称' style={{ width: 300 }} />
|
|
|
+ </Form.Item>
|
|
|
+ {/* ====================定向描述========================= */}
|
|
|
+ <Form.Item label={<strong>定向描述</strong>} name='description' >
|
|
|
+ <Input.TextArea placeholder='定向名称' style={{ width: 300 }} rows={2} />
|
|
|
+ </Form.Item>
|
|
|
+ {/* ============================================================排期与出价============================================================= */}
|
|
|
+ <Divider orientation='left'>人口学数学</Divider>
|
|
|
+ {/* ====================地理位置========================= */}
|
|
|
+ <Form.Item label={<strong>地理位置</strong>} name='geoLocationType' style={geoLocationType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">按区域</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ geoLocationType === '1' && <Form.Item
|
|
|
+ style={{ marginLeft: 107, marginBottom: 10 }}
|
|
|
+ name='regions'
|
|
|
+ rules={[{ type: 'array', max: 1000, message: '最多选择1000' }]}
|
|
|
+ >
|
|
|
+ <TreeSelect
|
|
|
+ showSearch={true}
|
|
|
+ maxTagCount={50}
|
|
|
+ treeCheckable={true}
|
|
|
+ showCheckedStrategy={TreeSelect.SHOW_PARENT}
|
|
|
+ treeData={regionsList}
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ allowClear
|
|
|
+ filterTreeNode={(inputValue: string, treeNode: any) => {
|
|
|
+ if (treeNode.title.includes(inputValue)) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ }
|
|
|
+ {/* ====================年龄========================= */}
|
|
|
+ <Form.Item label={<strong>年龄</strong>} name='ageType' style={ageType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ ageType === '1' && <div style={{ display: 'flex', justifyContent: 'left', alignItems: 'center' }}>
|
|
|
+ <Form.Item style={{ marginLeft: 107 }} name='age_min'>
|
|
|
+ <Select style={{ width: 120 }} >
|
|
|
+ {
|
|
|
+ Array(66 - 13).fill('').map((n, i) => i + 14).filter(i => i !== 15 && i !== 16 && i !== 17).map(i => {
|
|
|
+ return <Select.Option disabled={i > age_max} value={i} key={i}>{i === 66 ? '66 岁及以上' : i + ' 岁'}</Select.Option>
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item style={{ marginLeft: 10 }} name='age_max'>
|
|
|
+ <Select style={{ width: 120 }}>
|
|
|
+ {
|
|
|
+ Array(66 - 17).fill('').map((n, i) => {
|
|
|
+ return <Select.Option disabled={i + 18 < age_min} value={i + 18} key={i + 18}>{i + 18 === 66 ? '66 岁及以上' : i + 18 + ' 岁'}</Select.Option>
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ {/* ====================性别========================= */}
|
|
|
+ <Form.Item label={<strong>性别</strong>} name='gender'>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ {
|
|
|
+ Object.keys(GenderEnum).map(key => {
|
|
|
+ return <Radio.Button value={key} key={key}>{GenderEnum[key]}</Radio.Button>
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {/* ====================学历========================= */}
|
|
|
+ <Form.Item label={<strong>学历</strong>} name='educationType' style={educationType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ educationType === '1' && <Form.Item style={{ marginLeft: 107 }} name='education'>
|
|
|
+ <Checkbox.Group options={Object.keys(EducationEnum).map(key => ({ label: EducationEnum[key], value: key }))} />
|
|
|
+ </Form.Item>
|
|
|
+ }
|
|
|
+ {/* ====================婚恋育儿状态========================= */}
|
|
|
+ <Form.Item label={<strong>婚恋育儿状态</strong>} name='maritalStatusType' style={maritalStatusType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ maritalStatusType === '1' && <Form.Item style={{ marginLeft: 107 }} name='maritalStatus'>
|
|
|
+ <Checkbox.Group options={Object.keys(MaritalStatusEnum).map(key => ({ label: MaritalStatusEnum[key], value: key }))} />
|
|
|
+ </Form.Item>
|
|
|
+ }
|
|
|
+
|
|
|
+ {/* ============================================================用户行为============================================================= */}
|
|
|
+ <Divider orientation='left'>用户行为</Divider>
|
|
|
+ {/* <Form.Item label={<strong>行为兴趣意向</strong>} name='behaviorOrInterestType'>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item> */}
|
|
|
+ {/* ====================排除已转化用户========================= */}
|
|
|
+ <Form.Item label={<strong>排除已转化用户</strong>} name='excludedDimension' style={excludedDimension !== '0' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ {
|
|
|
+ Object.keys(ExcludedDimensionEnum).map(key => {
|
|
|
+ return <Radio.Button value={key} key={key}>{ExcludedDimensionEnum[key]}</Radio.Button>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ excludedDimension !== '0' && <Form.Item style={{ marginLeft: 107 }} name='conversionBehaviorList'>
|
|
|
+ <Select style={{ width: 300 }} showSearch filterOption={(input, option) =>
|
|
|
+ (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
|
|
|
+ } allowClear placeholder='转化行为,不选为默认行为'>
|
|
|
+ {
|
|
|
+ Object.keys(OptimizationGoalEnum).map(key => {
|
|
|
+ return <Select.Option value={key} key={key}>{OptimizationGoalEnum[key]}</Select.Option>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+ }
|
|
|
+ {/* ============================================================自定义人群============================================================= */}
|
|
|
+ {/* <Divider orientation='left'>自定义人群</Divider> */}
|
|
|
+ {/* ====================自定义人群========================= */}
|
|
|
+ {/* <Form.Item label={<strong>自定义人群</strong>} name='customAudienceType'>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item> */}
|
|
|
+
|
|
|
+ {/* ============================================================设备定向============================================================= */}
|
|
|
+ <Divider orientation='left'>设备定向</Divider>
|
|
|
+ {/* ====================设备品牌型号========================= */}
|
|
|
+ <Form.Item label={<strong>设备品牌型号</strong>} name='deviceBrandModelType' style={deviceBrandModelType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ deviceBrandModelType === '1' && <>
|
|
|
+ <Form.Item style={{ marginLeft: 107, marginBottom: 10 }}
|
|
|
+ name='deviceBrandModelList'
|
|
|
+ rules={[{ type: 'array', max: 400, message: '最多选择400个设备型号' }]}
|
|
|
+ >
|
|
|
+ <TreeSelect
|
|
|
+ showSearch={true}
|
|
|
+ maxTagCount={50}
|
|
|
+ treeCheckable={true}
|
|
|
+ showCheckedStrategy={TreeSelect.SHOW_CHILD}
|
|
|
+ treeData={modelList}
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ allowClear
|
|
|
+ filterTreeNode={(inputValue: string, treeNode: any) => {
|
|
|
+ if (treeNode.title.includes(inputValue)) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item name='isexcluded' valuePropName="checked" style={{ marginLeft: 107, marginBottom: 10 }} >
|
|
|
+ <Checkbox ><p style={{
|
|
|
+ position: 'absolute',
|
|
|
+ width: '95%',
|
|
|
+ top: '50%',
|
|
|
+ transform: 'translate(0, -50%)'
|
|
|
+ }}>排除所选设备的用户 <span style={{ float: 'right' }}>已选 <span style={deviceBrandModelList?.length > 400 ? { color: 'red' } : {}}>{deviceBrandModelList?.length ?? 0}</span>/400</span></p></Checkbox>
|
|
|
+ </Form.Item>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ {/* ====================操作系统版本========================= */}
|
|
|
+ <Form.Item label={<strong>操作系统版本</strong>} name='userOsType' style={userOsType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ userOsType === '1' && <>
|
|
|
+ <Form.Item style={{ marginLeft: 107, marginBottom: 0 }} name='userOsIosAll' valuePropName="checked" getValueFromEvent={(e) => {
|
|
|
+ let checked = e.target.checked
|
|
|
+ form.setFieldsValue({ userOsIos: checked ? ios_os : [] })
|
|
|
+ setIndeterminateIos(false)
|
|
|
+ }}>
|
|
|
+ <Checkbox indeterminate={indeterminateIos} >
|
|
|
+ IOS全选
|
|
|
+ </Checkbox>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item style={{ marginLeft: 107 }} name='userOsIos' >
|
|
|
+ <Checkbox.Group
|
|
|
+ options={
|
|
|
+ ios_os.map(key => {
|
|
|
+ return { label: UserOsEnum[key], value: key }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item style={{ marginLeft: 107, marginBottom: 0 }} name='userOsAndroidAll' valuePropName="checked" getValueFromEvent={(e) => {
|
|
|
+ let checked = e.target.checked
|
|
|
+ form.setFieldsValue({ userOsAndroid: checked ? android_os : [] })
|
|
|
+ setIndeterminateAndroid(false)
|
|
|
+ }}>
|
|
|
+ <Checkbox indeterminate={indeterminateAndroid}>
|
|
|
+ Android全选
|
|
|
+ </Checkbox>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item style={{ marginLeft: 107 }} name='userOsAndroid'>
|
|
|
+ <Checkbox.Group
|
|
|
+ options={
|
|
|
+ android_os.map(key => {
|
|
|
+ return { label: UserOsEnum[key], value: key }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ {/* ====================联网方式========================= */}
|
|
|
+ <Form.Item label={<strong>联网方式</strong>} name='networkType' style={networkType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ networkType === '1' && <Form.Item style={{ marginLeft: 107 }} name='network'>
|
|
|
+ <Checkbox.Group options={Object.keys(NetworkEnum).map(key => ({ label: NetworkEnum[key], value: key }))} />
|
|
|
+ </Form.Item>
|
|
|
+ }
|
|
|
+ {/* ====================设备价格========================= */}
|
|
|
+ <Form.Item label={<strong>设备价格</strong>} name='devicePriceType' style={devicePriceType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ devicePriceType === '1' && <Form.Item style={{ marginLeft: 107 }} name='devicePrice'>
|
|
|
+ <Checkbox.Group options={Object.keys(DevicePriceEnum).map(key => ({ label: DevicePriceEnum[key], value: key }))} />
|
|
|
+ </Form.Item>
|
|
|
+ }
|
|
|
+ {/* ============================================================流量方数学============================================================= */}
|
|
|
+ <Divider orientation='left'>流量方数学</Divider>
|
|
|
+ {/* ====================微信再营销========================= */}
|
|
|
+ <Form.Item label={<strong>微信再营销</strong>} name='wechatAdBehaviorType' style={wechatAdBehaviorType === '1' ? { marginBottom: 5 } : {}}>
|
|
|
+ <Radio.Group >
|
|
|
+ <Radio.Button value="0">不限</Radio.Button>
|
|
|
+ <Radio.Button value="1">自定义</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ wechatAdBehaviorType === '1' && <>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>再营销</strong></p>
|
|
|
+ <Form.Item style={{ marginLeft: 107, marginBottom: 10 }} name='actions'>
|
|
|
+ <Checkbox.Group options={Object.keys(WechatAdBehaviorEnum).map(key => ({ label: WechatAdBehaviorEnum[key], value: key, disabled: excludedActions?.some((k: string) => k === key) }))} />
|
|
|
+ </Form.Item>
|
|
|
+ <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>排除营销</strong></p>
|
|
|
+ <Form.Item style={{ marginLeft: 107 }} name='excludedActions'>
|
|
|
+ <Checkbox.Group options={Object.keys(WechatAdBehaviorEnum).map(key => ({ label: WechatAdBehaviorEnum[key], value: key, disabled: actions?.some((k: string) => k === key) }))} />
|
|
|
+ </Form.Item>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ </Form>
|
|
|
+ </Modal >
|
|
|
+}
|
|
|
+export default AdModal
|
