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

src/components/FileBoxAD/index.tsx

@@ -191,6 +191,7 @@ function FlieBox(props: Props) {
                 let img = document.createElement('img')
                 img.src = fileImg;
                 ev.dataTransfer.setDragImage(img, 0, 0)
+                console.log('item---->', item)
                 setMoveId(item.id)
             },
             onDragEnd: (e: any) => {
@@ -294,15 +295,16 @@ function FlieBox(props: Props) {
             moveSelected.style.left = '0px';
         }
     }
-    
+
 
     // 获取拖拽的文件
     const [fileList, setFileList] = useState<FileList>()
     const [uploadVisible, setUploadVisible] = useState<boolean>(false)
     const { isDragOver, dropAreaProps } = useFileDrop((fileList) => {
-        console.log(mediaType, fileList)
-        setFileList(fileList)
-        setUploadVisible(true)
+        if (!moveId) {
+            setFileList(fileList)
+            setUploadVisible(true)
+        }
     });
 
     return <div style={{ display: 'flex', flexFlow: 'row', width: '100%', padding: get_folder_tree?.data?.length ? 0 : '0 16px 0' }}>
@@ -329,7 +331,7 @@ function FlieBox(props: Props) {
                 style={height ? { height } : {}}
                 {...(mediaType !== 'PAGE' ? dropAreaProps : {})}
             >
-                {mediaType !== 'PAGE' && isDragOver && <div className={`${style.placeholder} ${isDragOver ? style.dragOver : ''}`}><span>拖动文件到这里</span></div>}
+                {mediaType !== 'PAGE' && isDragOver && !moveId && <div className={`${style.placeholder} ${isDragOver ? style.dragOver : ''}`}><span>拖动文件到这里</span></div>}
                 {/* 层级路径 */}
                 <div className={style.path} >
                     {//存在渲染个人本地路径不存在执行公共本地

src/pages/launchSystemV3/tencentAdPutIn/const.ts

@@ -714,4 +714,14 @@ export enum FLOATING_ZONE_TYPE_ENUM {
 	FLOATING_ZONE_TYPE_SINGLE_IMAGE = '单图类型',
 	FLOATING_ZONE_TYPE_MULTI_BUTTON = '多按钮类型',
 	FLOATING_ZONE_TYPE_SLIDER_CARD = '轮播卡片类型'
+}
+
+/** 标签类型 */
+export enum LABEL_TYPE_ENUM {
+	LABEL_TYPE_UNKNOWN = '未知',
+	LABEL_TYPE_COMMON = '普通标签',
+	LABEL_TYPE_PROMOTIONAL = '节点营销标签',
+	LABEL_TYPE_CUSTOMIZETEXT = '自定义标签',
+	LABEL_TYPE_ICON = '角标',
+	LABEL_TYPE_DYNAMIC = '动态标签'
 }

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/SelectLable.tsx

@@ -0,0 +1,125 @@
+import { CloseOutlined, PlusOutlined } from "@ant-design/icons"
+import { Button, Form, Modal, Space, Spin, Tabs, Tooltip, Typography } from "antd"
+import React, { useEffect, useState } from "react"
+import { LABEL_TYPE_ENUM } from "../../const"
+import style from './index.less'
+import '../../index.less'
+import { useAjax } from "@/Hook/useAjax"
+import { getAdLabelApi } from "@/services/adqV3/global"
+const { Text, Title } = Typography;
+
+
+interface Props {
+    arrayProperty: { maxNumber: number, minNumber: number }
+    value?: { content: string, type: LABEL_TYPE_ENUM }[]
+    onChange?: (value?: { content: string, type: LABEL_TYPE_ENUM }[]) => void
+}
+
+/**
+ * 选择标签
+ * @returns 
+ */
+const SelectLabel: React.FC<Props> = ({ value, onChange, arrayProperty }) => {
+
+    /************************************/
+    const [visible, setVisible] = useState<boolean>(false)
+    const [activeKey, setActiveKey] = useState<string>('1')
+
+    const getAdLabel = useAjax((params) => getAdLabelApi(params))
+    /************************************/
+
+    useEffect(() => {
+        if (visible) {
+            getAdLabel.run({})
+        }
+    }, [visible])
+
+    const handleOk = () => {
+
+    }
+
+    return <>
+        <a className={style.selectLabelBtn} onClick={() => setVisible(true)}><PlusOutlined /><span>选择标签</span></a>
+        {visible && <Modal
+            title={<strong>选择标签</strong>}
+            visible={visible}
+            className="modalResetCss"
+            width={900}
+            onCancel={() => setVisible(false)}
+            bodyStyle={{ padding: '0px 32px' }}
+            footer={<div className={style.showLabel}>
+                <div style={{ textAlign: 'left' }}>
+                    <Tooltip
+                        title={`${(value?.length || 0) > arrayProperty.maxNumber ? `最多可选 ${arrayProperty.maxNumber} 个标签` : ''}，${(value || []).reduce((pre: number, cur) => pre + cur.content.length, 0) > 16 ? '标签总字数上限不超过 16 个字，中英文均算 1 个字' : ''}`}
+                        visible={((value?.length || 0) > arrayProperty.maxNumber || (value || []).reduce((pre: number, cur) => pre + cur.content.length, 0) > 16)}
+                    >
+                        <Text strong>文字标签 ({value?.length || 0}/{arrayProperty.maxNumber})</Text>
+                    </Tooltip>
+                    <div className={style.toggleLabels}>
+                        {value?.map((item, tIndex) => <div
+                            key={tIndex}
+                            className={`${style.toggleLabel} ${style.showLabel} ${((value?.length || 0) > arrayProperty.maxNumber || value.reduce((pre: number, cur) => pre + cur.content.length, 0) > 16) ? style.errorSHowLabel : ''}`}
+                        >
+                            <Space>
+                                <span>{item.content}</span>
+                                <CloseOutlined className={style.clearLable} />
+                            </Space>
+                        </div>)}
+                    </div>
+                </div>
+                <Space>
+                    <Button onClick={() => setVisible(false)}>取消</Button>
+                    <Button type="primary" onClick={handleOk}>确定</Button>
+                </Space>
+            </div>}
+        >
+            <Tabs
+                accessKey={activeKey}
+                onChange={(e) => setActiveKey(e)}
+                tabBarExtraContent={<Text type="secondary" style={{ fontSize: 12 }}>最多可选 {arrayProperty.maxNumber} 个标签，且标签总字数上限不超过 16 个字，中英文均算 1 个字</Text>}
+            >
+                <Tabs.TabPane tab="选择已有" key="1" >
+                    <Spin spinning={getAdLabel.loading}>
+                        <div className={style.labelContent}>
+                            <div className={style.tips}>
+                                <strong>行业通用</strong>
+                            </div>
+                            <Form
+                                name="basicSelectLabel"
+                                labelCol={{ span: 3 }}
+                                wrapperCol={{ span: 21 }}
+                                labelAlign="left"
+                                colon={false}
+                            >
+                                {getAdLabel.data?.map((item: { labelCategory: string, label: string[], labelTypeName: string }, index: number) => <Form.Item className={style.toggleLabelForm} label={<strong>{item.labelCategory}</strong>} key={index}>
+                                    <div className={style.toggleLabels}>
+                                        {item.label.map((text, tIndex) => {
+                                            let activeIndex = (value || [])?.findIndex(i => i.content === text)
+                                            return <div
+                                                key={tIndex}
+                                                className={`${style.toggleLabel} ${(activeIndex !== -1) ? style.active : ''}`}
+                                                onClick={() => {
+                                                    let newValue: { content: string, type: LABEL_TYPE_ENUM }[] = JSON.parse(JSON.stringify(value || []))
+                                                    if (activeIndex !== -1) {
+                                                        newValue = newValue.filter((_, index) => activeIndex !== index)
+                                                    } else {
+                                                        newValue.push({ content: text, type: (item.labelTypeName === '普通文本标签' ? 'LABEL_TYPE_COMMON' : 'LABEL_TYPE_UNKNOWN') as LABEL_TYPE_ENUM })
+                                                    }
+                                                    onChange?.(newValue)
+                                                }}
+                                            >{text}</div>
+                                        })}
+                                    </div>
+                                </Form.Item>)}
+                            </Form>
+                        </div>
+                    </Spin>
+                </Tabs.TabPane>
+                <Tabs.TabPane tab="新建标签" key="2" >
+                </Tabs.TabPane>
+            </Tabs>
+        </Modal>}
+    </>
+}
+
+export default React.memo(SelectLabel)

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/creativeConversionAssistant.tsx

@@ -10,6 +10,7 @@ import TextAideInput from "@/pages/launchSystemV3/components/TextAideInput";
 import styles from '../Material/index.less'
 import { useModel } from "umi";
 import SelectCloud from "@/pages/launchSystemNew/components/selectCloud";
+import SelectLabel from "./SelectLable"
 
 /**
  * 营销组件
@@ -248,6 +249,21 @@ const CreativeConversionAssistant: React.FC<{ automaticSiteEnabled?: boolean }>
         return null
     }, [creativeComponents?.action_button, pageSpec, actionButtonShow, cardType, creativeTemplateId])
 
+    /** 标签 */
+    const labelContent = useMemo(() => {
+        let label = creativeComponents?.label;
+        if (label) {
+            const list = label.children.list
+            // const content = list.children.content
+            // const type = list.children.type
+
+            return <Form.Item name={['label', 'value', 'list']} style={{ marginTop: 16 }} label={<strong>&nbsp;&nbsp;&nbsp;标签{label.required ? '' : '(选填)'}</strong>}>
+                <SelectLabel arrayProperty={list.arrayProperty}/>
+            </Form.Item>
+        }
+        return null
+    }, [creativeComponents?.label])
+
     /** 数据外显 */
     const showDataContent = useMemo(() => {
         let showData = creativeComponents?.show_data;
@@ -348,7 +364,7 @@ const CreativeConversionAssistant: React.FC<{ automaticSiteEnabled?: boolean }>
                         <div className={style.newSpace_top}>
                             <div className={style.newSpace_title}>浮层卡片</div>
                             <Form.Item name={['floatingZone', 'value', 'floatingZoneSwitch']} rules={[{ required, message: '请选择浮层卡片!' }]} valuePropName="checked" style={{ marginBottom: 0 }}>
-                                <Switch 
+                                <Switch
                                     disabled={required}
                                     onChange={(e) => {
                                         if (e) {
@@ -581,6 +597,7 @@ const CreativeConversionAssistant: React.FC<{ automaticSiteEnabled?: boolean }>
             </Form.Item>}
             {textLinkContent}
             {actionButtonContent}
+            {/* {labelContent} */}
             {showDataContent}
             {floatingZoneContent}
 

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/index.less

@@ -0,0 +1,89 @@
+.selectLabelBtn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 16px;
+    border: 1px solid #BFD3FA;
+    background-color: #FFF;
+    border-radius: 20px;
+
+    &:hover {
+        border-color: #BFD3FA;
+        background-color: #F5F8FF;
+    }
+}
+
+.labelContent {
+    max-height: 500px;
+    overflow: hidden;
+    overflow-y: auto;
+
+    .tips {
+        padding: 5px 16px;
+        margin-bottom: 10px;
+        background-color: #f7f9fc;
+        border-radius: 4px;
+    }
+}
+
+.toggleLabelForm {
+    margin-bottom: 0;
+    padding: 16px 0;
+
+    &:not(:first-child) {
+        border-top: 1px solid #e6e8ed;
+    }
+}
+
+.toggleLabels {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.toggleLabel {
+    padding: 0 16px;
+    border-radius: 999px;
+    background-color: #FFF;
+    border: 1px solid #d2d4d9;
+    cursor: pointer;
+    transition: .3s all;
+
+    &:hover {
+        background-color: #f1f3f5;
+    }
+}
+
+.active {
+    color: #296bef;
+    border-color: #80aaff;
+
+    &:hover {
+        background-color: #FFF;
+    }
+}
+
+.showLabel {
+    display: flex;
+    overflow: hidden;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    margin-left: 24px;
+
+    .showLabel {
+        margin: 2px 2px 2px 0;
+        cursor: default;
+    }
+
+    .errorSHowLabel {
+        color: #e63d2e;
+        background-color: #fff3f2;
+        border-color: #ff8a80;
+    }
+
+    .clearLable {
+        cursor: pointer;
+    }
+}

src/services/adqV3/global.ts

@@ -576,4 +576,17 @@ export async function getCorpWechatDetailApi(id: number) {
     return request(api + `/adq/v3/corpWechat/getById/${id}`, {
         method: 'GET'
     })
+}
+
+
+/**
+ * 获取广告标签
+ * @param data 
+ * @returns 
+ */
+export async function getAdLabelApi(data: { accountId?: number }) {
+    return request(api + `/adq/v3/launch/tools/getAdLabel`, {
+        method: 'POST',
+        data
+    })
 }