浏览代码

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

shenwu 2 年之前
父节点
当前提交
783344f8e2

+ 40 - 122
src/pages/launchSystemNew/components/addLandingPage/content.ts

@@ -1,4 +1,4 @@
-import { Img, TopImg, TopSlider, TopVideo, Text, GhButton, WxAutoButton } from "../../req"
+import { Img, TopImg, TopSlider, TopVideo, Text, GhButton, WxAutoButton, Floatbutton } from "../../req"
 
 // 头部内容
 export const topsliderContent: TopSlider = {
@@ -27,6 +27,45 @@ export const topvideoNewContent: TopVideo = {
     outerStyle: 0
 }
 
+// 悬浮组件
+export const floatbuttonContent: Floatbutton = {
+    elementType: 'FLOAT_BUTTON',
+    titleColor: "#171717",
+    descColor: "#4c4c4c",
+    title: "",
+    desc: "",
+    styleType: 0,
+    imageUrl: '',
+    appearType: 0,
+    disappearType: 0,
+    componentItem: {
+        elementType: 'GH',
+        btnTitle: '关注公众号',
+        fontColor: '#FFFFFF',
+        btnBgColorTheme: '#07C160',
+        btnFontType: 0,
+        fastFollow: 1,
+    }
+}
+
+
+// 悬浮组件 添加商家微信
+export const floatbuttonBtTypeWxAuto: Omit<WxAutoButton, 'btnBorderColorTheme' | 'useIcon' | 'paddingTop' | 'paddingBottom'> = {
+    elementType: 'ENTERPRISE_WX',
+    btnBgColorTheme: "#07C160",
+    btnFontType: 0,
+    btnTitle: "联系商家",
+    fontColor: "#FFFFFF",
+}
+export const floatbuttonBtTypeGh: Omit<GhButton, 'btnBorderColorTheme' | 'useIcon' | 'paddingTop' | 'paddingBottom'> = {
+    elementType: 'GH',
+    btnTitle: '关注公众号',
+    fontColor: '#FFFFFF',
+    btnBgColorTheme: '#07C160',
+    btnFontType: 0,
+    fastFollow: 1,
+}
+
 export const topvideoContent = {
     id: 'widget_1625551322566_1',
     widgetTypeV2: 'topvideo',
@@ -846,125 +885,4 @@ export const btModelJumpWxAuto103 = {
     id: "", //"widget_1646279296521_3",
     layoutHeight: "542",
     layoutWidth: "320"
-}
-
-// 悬浮组件 添加商家微信
-export const floatbuttonBtTypeWxAuto = {
-    widgetTypeV2: "enterprise_wx_auto",
-    widgetType: "button",
-    type: "21",
-    name: "添加商家微信",
-    btnTitle: "联系商家",
-    subType: "15",
-    fontSize: "28",
-    fontColor: "#FFFFFF",
-    btnType: "0",
-    btnBgColorTheme: "#07C160",
-    btnBorderColorTheme: "#FFFFFF",
-    btnFontType: "0",
-    btnStyle: "1",
-    cornerRadius: "4",
-    useIcon: "0",
-    mpJumpType: "1",
-    origBtnJumpUrl: "",
-    btnJumpUrl: "",
-    corpid: "",
-    groupid: null,
-    h5_config_id: "",
-    wxapp_config_id: "",
-    qrUrl: "https://wework.qpic.cn/wwpic/402461_L-7_oaL7St6-juF_1649837642/0",
-    needUpdateQrUrl: 0,
-    qrExtInfo: "",
-    serviceType: "1",
-    chatGroupName: "",
-    id: "",
-    layoutHeight: "70",
-    layoutWidth: "160",
-    borderSize: "0",
-    custorGroup: []
-}
-export const floatbuttonBtTypeGh = {
-    widgetTypeV2: "gh",
-    widgetType: "button",
-    type: "21",
-    name: "关注公众号",
-    btnTitle: "关注公众号",
-    subType: "17",
-    fontSize: "28",
-    fontColor: "#FFFFFF",
-    btnType: "0",
-    btnBgColorTheme: "#07C160",
-    btnBorderColorTheme: "#FFFFFF",
-    btnFontType: "0",
-    btnStyle: "1",
-    cornerRadius: "4",
-    useIcon: "0",
-    field21_1: {
-        origBtnJumpUrl: "",
-        wxad_guide_group_id: ""
-    },
-    id: "widget_1652153905113_9",
-    layoutHeight: "70",
-    layoutWidth: "160",
-    borderSize: "0",
-    custorGroup: []
-}
-
-// 悬浮组件
-export const floatbuttonContent = {
-    widgetTypeV2: "floatbutton",
-    widgetType: "float_button",
-    type: "134",
-    name: "悬浮组件",
-    wxad_styleType: "1",
-    onlyShowInTimelineAd: "0",
-    backgroundImg: "",
-    backgroundColor: "#F0F0F0",
-    backgroundColorAlpha: "0.96",
-    backgroundBlurEffect: "1",
-    backgroundBlurEffectColor: "#F0F0F0",
-    backgroundBlurEffectColorAlpha: "0.5",
-    titleColor: "#171717",
-    titleColorAlpha: "1",
-    descColor: "#4c4c4c",
-    descColorAlpha: "0.5",
-    iconUrl: "",
-    imageMd5: "",
-    materialId: "",
-    title: "",
-    desc: "",
-    isFullClickable: "1",
-    appearPaddingTop: "0",
-    appearPaddingBottom: "0",
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingRight: 0,
-    paddingLeft: 0,
-    id: "widget_1652076096083_2",
-    componentItem: {
-        widgetTypeV2: "gh",
-        widgetType: "button",
-        type: "21",
-        name: "关注公众号",
-        btnTitle: "关注公众号",
-        subType: "17",
-        fontSize: "28",
-        fontColor: "#FFFFFF",
-        btnType: "0",
-        btnBgColorTheme: "#07C160",
-        btnBorderColorTheme: "#FFFFFF",
-        btnFontType: "0",
-        btnStyle: "1",
-        cornerRadius: "4",
-        useIcon: "0",
-        field21_1: {
-            origBtnJumpUrl: "",
-            wxad_guide_group_id: ""
-        },
-        id: "widget_1652153905113_9",
-        layoutHeight: "70",
-        layoutWidth: "160",
-        borderSize: "0",
-        custorGroup: []
-    }
 }

+ 92 - 63
src/pages/launchSystemNew/components/addLandingPage/index.tsx

@@ -90,7 +90,7 @@ function AddLandingPage(props: Props) {
         if (id) {
             get.run({ sysMediaId: id, mediaType: 'PAGE' }).then(res => {
                 if (res) {
-                    const { pageSpecsList, shareContentSpec } = res
+                    const { pageSpecsList, shareContentSpec, globalSpec } = res
                     dispatch({ type: 'setPageBackColor', params: { pageBackColor: pageSpecsList[0]?.bgColor } })
                     let pageElementsSpecList = pageSpecsList[0]?.pageElementsSpecList
                     dispatch({
@@ -110,14 +110,31 @@ function AddLandingPage(props: Props) {
                     })
                     setShareDesc(() => shareContentSpec?.shareTitle || '')
                     setShareTittle(() => shareContentSpec?.shareDescription || '')
-                    // global = global?.map((item: any) => ({ ...item, comptActive: false }))
-                    // dispatchGlobal({ type: "setConItem", params: { componentItem: global || [] } })
+                    if (globalSpec && Object.keys(globalSpec).length > 0) {
+                        let globalElementsSpecList = globalSpec.globalElementsSpecList
+                        let newComponentItem = globalElementsSpecList?.map((item: { elementType: string }) => {
+                            let typeKey = getTypeKey(item.elementType)
+                            let { elementType, ...data } = item[typeKey]
+                            let typeKey1 = getTypeKey(elementType)
+                            let componentItem: any = data[typeKey1]
+                            if (componentItem) {
+                                componentItem['elementType'] = elementType
+                            }
+                            data.componentItem = componentItem
+                            data.elementType = item.elementType
+                            delete data[typeKey1]
+                            return data
+                        })
+                        dispatchGlobal({ type: "setConItem", params: { componentItem: newComponentItem || [] } })
+                    }
                 }
             })
         } else {
             // dispatch({ type: 'init', params: { elementType: 'empty' } })
         }
     }, [id])
+    console.log('componentItem------>', componentItem);
+
 
     const config = {
         title: '警告!',
@@ -175,8 +192,7 @@ function AddLandingPage(props: Props) {
             }
         } else if (selectData?.elementType === 'FLOAT_BUTTON') {
             setIsFootlock(() => false)
-            init({ mediaType: 'VIDEO', cloudSize: { minWidth: '96', maxWidth: '96', minHeight: '96', maxHeight: '96', minMediaSize: 0, maxMediaSize: 307200 } })
-            setImgSize(() => ({ minWidth: '96', maxWidth: '96', minHeight: '96', maxHeight: '96', minMediaSize: 0, maxMediaSize: 307200, mediaType: 'IMG' }))
+            init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: 96, height: 96 }]], maxSize: 300 * 1024 })
         }
     }, [content])
 
@@ -261,13 +277,13 @@ function AddLandingPage(props: Props) {
         let newCon = content?.map((item: any) => {
             return { ...item, comptActive: false }
         })
-        let newConItem = componentItem?.map((item: { widgetTypeV2: string }) => {
+        let newConItem = componentItem?.map((item: { elementType: string }) => {
             return { ...item, comptActive: false }
         })
         setImgTextButtonShow(false)
         if (index === 99999) {
-            newConItem = newConItem?.map((item: { widgetTypeV2: string }) => {
-                if (item.widgetTypeV2 === 'floatbutton') {
+            newConItem = newConItem?.map((item: { elementType: string }) => {
+                if (item.elementType === 'FLOAT_BUTTON') {
                     return { ...item, comptActive: true }
                 }
                 return item
@@ -342,7 +358,7 @@ function AddLandingPage(props: Props) {
         setImgTextButtonShow(false)
         if (index === 99999) { // 删除悬浮组件
             let newContentItem = JSON.parse(JSON.stringify(componentItem))
-            newContentItem = newContentItem?.filter((item: { widgetTypeV2: string }) => item.widgetTypeV2 !== 'floatbutton')
+            newContentItem = newContentItem?.filter((item: { elementType: string }) => item.elementType !== 'FLOAT_BUTTON')
             dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(newContentItem)) } })
         } else {
             let newContent = JSON.parse(JSON.stringify(content))
@@ -927,24 +943,24 @@ function AddLandingPage(props: Props) {
         if (selectIndex !== -1) {
             let selectCon = oldContent[selectIndex]
             // 设置悬浮窗 转化按钮
-            if (key === 'componentItem' && (value === 'gh' || value === 'enterprise_wx_auto')) {
-                if (value === 'gh') {
+            if (key === 'componentItem' && (value === 'GH' || value === 'ENTERPRISE_WX')) {
+                if (value === 'GH') {
                     selectCon[key] = floatbuttonBtTypeGh
-                } else if (value === 'enterprise_wx_auto') {
+                } else if (value === 'ENTERPRISE_WX') {
                     selectCon[key] = floatbuttonBtTypeWxAuto
                 }
             } else {
                 if (!isDel) {
                     selectCon[key] = value
-                    if (key === 'wxad_styleType') {
-                        if (value === '1') {
-                            selectCon['iconUrl'] = ""
+                    if (key === 'styleType') {
+                        if (value === 0) {
+                            selectCon['imageUrl'] = ""
                             selectCon['desc'] = selectCon?.desc || ""
-                        } else if (value === '2') {
-                            delete selectCon['iconUrl']
+                        } else if (value === 1) {
+                            delete selectCon['imageUrl']
                             selectCon['desc'] = selectCon?.desc || ""
-                        } else if (value === '3') {
-                            delete selectCon['iconUrl']
+                        } else if (value === 2) {
+                            delete selectCon['imageUrl']
                             delete selectCon['desc']
                         }
                         selectCon[key] = value
@@ -953,7 +969,6 @@ function AddLandingPage(props: Props) {
                     delete selectCon[key]
                 }
             }
-
             dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(oldContent)) } })
         }
     }
@@ -965,10 +980,10 @@ function AddLandingPage(props: Props) {
             selectCon = componentItem?.find((item: { comptActive: boolean }) => item.comptActive)
         }
         if (selectCon) {
-            let { elementType, adLocation, outerStyle, imageUrlList, pureImageUrl, imageUrl, text, fontColor, fontSize, fontStyle, textAlignment,
+            let { elementType, adLocation, outerStyle, imageUrlList, imageUrl, text, fontColor, fontSize, fontStyle, textAlignment,
                 paddingTop, paddingBottom, fastFollow, btnTitle, btnFontType, btnBorderColorTheme, btnBgColorTheme, useIcon,
                 styleType, type, initHeight, outerUseTopMaterial, componentCount, activeIndex, componentGroupList, origBtnJumpUrl,
-                layoutItems, borderColor, bgColor, wxad_align, wxad_styleType, iconUrl, title, desc, titleColor, descColor, componentItem, appearPaddingTop, appearPaddingBottom } = selectCon
+                layoutItems, borderColor, bgColor, title, desc, titleColor, descColor, componentItem, appearType, disappearType } = selectCon
             let descType = "text"
             let jumpMode = "btn_jump"
             let shelfnewImgData: { pureImageUrl: string } = { pureImageUrl: '' }  // 图片信息
@@ -1728,7 +1743,7 @@ function AddLandingPage(props: Props) {
                                                         </>} */}
                                                     </div>
                                                         :
-                                                        elementType === 'floatbutton' ? <div style={{ height: '100%' }}>
+                                                        elementType === 'FLOAT_BUTTON' ? <div style={{ height: '100%' }}>
                                                             <div className={`widget ${imgTextButtonShow ? 'widget_back' : ''}`}>
                                                                 <div className="caption section">
                                                                     <div className="caption-title">悬浮按钮</div>
@@ -1744,22 +1759,22 @@ function AddLandingPage(props: Props) {
                                                                     <div className="adui-form-item">
                                                                         <div className="adui-form-label">卡片样式</div>
                                                                         <div className="adui-form-control">
-                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('wxad_styleType', e.target.value) }} className="floatType" value={wxad_styleType}>
-                                                                                <Radio.Button value='1'>
+                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('styleType', e.target.value) }} className="floatType" value={styleType}>
+                                                                                <Radio.Button value={0}>
                                                                                     <div className='floatTypeInner'>
                                                                                         <i className="floatTypeAvatar"></i>
                                                                                         <i className="floatTypeText_two"></i>
                                                                                         <i className="floatTypeButton"></i>
                                                                                     </div>
                                                                                 </Radio.Button>
-                                                                                <Radio.Button value='2'>
+                                                                                <Radio.Button value={1}>
                                                                                     <div className='floatTypeInner'>
                                                                                         <i style={{ display: 'inline-block', height: 12 }}></i>
                                                                                         <i className="floatTypeText_two"></i>
                                                                                         <i className="floatTypeButton"></i>
                                                                                     </div>
                                                                                 </Radio.Button>
-                                                                                <Radio.Button value='3'>
+                                                                                <Radio.Button value={2}>
                                                                                     <div className='floatTypeInner'>
                                                                                         <i style={{ display: 'inline-block', height: 12 }}></i>
                                                                                         <i className="floatTypeText_one"></i>
@@ -1772,12 +1787,12 @@ function AddLandingPage(props: Props) {
                                                                 </div>
                                                                 <div className="form section">
                                                                     <div className="form-caption">内容设置</div>
-                                                                    {wxad_styleType === '1' && <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
+                                                                    {styleType === 0 && <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                                                         <div className="adui-form-label">图片</div>
                                                                         <div className="adui-form-control">
-                                                                            <div className={`upload-img-item ${iconUrl ? 'upload-img-item_uploaded' : ''}`}>
+                                                                            <div className={`upload-img-item ${imageUrl ? 'upload-img-item_uploaded' : ''}`}>
                                                                                 {
-                                                                                    iconUrl ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${iconUrl ? iconUrl : ""})` }}>
+                                                                                    imageUrl ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${imageUrl ? imageUrl : ""})` }}>
                                                                                         <div className='upload-img-item-action' onClick={() => { setCcType(5); setSelectImgVisible(true); }}>
                                                                                             <RetweetOutlined />
                                                                                         </div>
@@ -1800,7 +1815,7 @@ function AddLandingPage(props: Props) {
                                                                         </div>
                                                                     </div>
 
-                                                                    {(wxad_styleType === '1' || wxad_styleType === '2') && <div className="adui-form-item" style={{ alignItems: 'flex-start', marginBottom: 10 }}>
+                                                                    {(styleType === 1 || styleType === 0) && <div className="adui-form-item" style={{ alignItems: 'flex-start', marginBottom: 10 }}>
                                                                         <div className="adui-form-label" style={{ marginTop: 6 }}>描述</div>
                                                                         <div className="adui-form-control">
                                                                             <Input.TextArea placeholder="请输入描述" onChange={(e) => { setGlobalComponentItem('desc', e.target.value?.replace(/\r|\n/ig, "")) }} value={desc} showCount maxLength={14} autoSize />
@@ -1812,7 +1827,7 @@ function AddLandingPage(props: Props) {
                                                                             <Space><ColorPicker onColor={(color: string) => { setGlobalComponentItem('titleColor', color) }} color={titleColor}></ColorPicker> <div className="colorShow">{titleColor}</div></Space>
                                                                         </div>
                                                                     </div>
-                                                                    {(wxad_styleType === '1' || wxad_styleType === '2') && <div className="adui-form-item" style={{ alignItems: 'center', marginBottom: 10 }}>
+                                                                    {(styleType === 1 || styleType === 0) && <div className="adui-form-item" style={{ alignItems: 'center', marginBottom: 10 }}>
                                                                         <div className="adui-form-label" style={{ marginTop: 6 }}>描述字色</div>
                                                                         <div className="adui-form-control">
                                                                             <Space><ColorPicker onColor={(color: string) => { setGlobalComponentItem('descColor', color) }} color={descColor}></ColorPicker> <div className="colorShow">{descColor}</div></Space>
@@ -1825,18 +1840,18 @@ function AddLandingPage(props: Props) {
                                                                     <div className="adui-form-item">
                                                                         <div className="adui-form-label">出现方式</div>
                                                                         <div className="adui-form-control">
-                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('appearPaddingTop', e.target.value) }} value={Number(appearPaddingTop)}>
+                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('appearType', e.target.value) }} value={appearType}>
                                                                                 <Radio value={0}>进入页面时出现</Radio>
-                                                                                <Radio value={100}>滑动页面时出现</Radio>
+                                                                                <Radio value={1}>滑动页面时出现</Radio>
                                                                             </Radio.Group>
                                                                         </div>
                                                                     </div>
                                                                     <div className="adui-form-item">
                                                                         <div className="adui-form-label">消失方式</div>
                                                                         <div className="adui-form-control">
-                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('appearPaddingBottom', e.target.value) }} value={Number(appearPaddingBottom)}>
+                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('disappearType', e.target.value) }} value={disappearType}>
                                                                                 <Radio value={0}>不消失</Radio>
-                                                                                <Radio value={80}>滑至页面底部时消失</Radio>
+                                                                                <Radio value={1}>滑至页面底部时消失</Radio>
                                                                             </Radio.Group>
                                                                         </div>
                                                                     </div>
@@ -1850,16 +1865,16 @@ function AddLandingPage(props: Props) {
                                                                 <div className="form section">
                                                                     <div className="form-caption">按钮类型</div>
                                                                     <div className="adui-form-item" style={{ alignItems: 'center' }}>
-                                                                        <Select style={{ width: 180 }} className="aside-select" dropdownClassName="aside-select" onChange={(e) => { setGlobalComponentItem('componentItem', e) }} value={componentItem?.widgetTypeV2} size="small">
-                                                                            <Option value="gh"><FollowAcc />关注公众号</Option>
-                                                                            <Option value="enterprise_wx_auto"><WxAutoSvg />添加商家微信</Option>
+                                                                        <Select style={{ width: 180 }} className="aside-select" dropdownClassName="aside-select" onChange={(e) => { setGlobalComponentItem('componentItem', e) }} value={componentItem?.elementType} size="small">
+                                                                            <Option value="GH"><FollowAcc />关注公众号</Option>
+                                                                            {/* <Option value="ENTERPRISE_WX"><WxAutoSvg />添加商家微信</Option> */}
                                                                         </Select>
                                                                     </div>
                                                                 </div>
-                                                                {componentItem?.widgetTypeV2 === 'gh' ? <>
+                                                                {componentItem?.elementType === 'GH' ? <>
                                                                     <div className="form section">
                                                                         <Space>
-                                                                            <Switch size="small" checked={componentItem?.subType === '17' ? true : false} onChange={(e) => { setGlobalComponentItem('componentItem', { ...componentItem, subType: e ? '17' : '1' }) }} />
+                                                                            <Switch size="small" checked={componentItem?.fastFollow} onChange={(e) => { setGlobalComponentItem('componentItem', { ...componentItem, fastFollow: e ? 1 : 0 }) }} />
                                                                             一键关注
                                                                             <Tooltip placement="top" title={'唤起公众号简介的半屏面板,点击其中按钮直接关注公众号'}>
                                                                                 <QuestionCircleOutlined />
@@ -1976,9 +1991,12 @@ function AddLandingPage(props: Props) {
                 }
             }
         } else if (scType === 5) { // 设置悬浮组件 
+            let newConItem = JSON.parse(JSON.stringify(componentItem))
+            let selectIndex = newConItem?.findIndex((item: Content) => item.comptActive)
+            let oldContent = newConItem
             if (selectIndex !== -1) {
                 let selectCon = oldContent[selectIndex]
-                selectCon['iconUrl'] = value[0]?.content
+                selectCon['imageUrl'] = value[0]?.url
                 dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(oldContent)) } })
             }
         }
@@ -2055,9 +2073,9 @@ function AddLandingPage(props: Props) {
         })
         if (componentItem?.length > 0) {
             let b = componentItem?.every((item: any) => {
-                if (item?.elementType === "floatbutton") {
-                    if (item?.wxad_styleType === '1') {
-                        if (!item?.iconUrl) {
+                if (item?.elementType === "FLOAT_BUTTON") {
+                    if (item?.styleType === 0) {
+                        if (!item?.imageUrl) {
                             message.error('悬浮组件请上传图片')
                             return false
                         }
@@ -2069,7 +2087,7 @@ function AddLandingPage(props: Props) {
                             message.error('悬浮组件请输入描述')
                             return false
                         }
-                    } else if (item?.wxad_styleType === '2') {
+                    } else if (item?.wxad_styleType === 1) {
                         if (!item?.title) {
                             message.error('悬浮组件请输入标题')
                             return false
@@ -2078,20 +2096,12 @@ function AddLandingPage(props: Props) {
                             message.error('悬浮组件请输入描述')
                             return false
                         }
-                    } else if (item?.wxad_styleType === '3') {
+                    } else if (item?.wxad_styleType === 2) {
                         if (!item?.title) {
                             message.error('悬浮组件请输入标题')
                             return false
                         }
                     }
-                    if (item?.componentItem?.widgetTypeV2 === 'enterprise_wx_auto') {
-                        if (item?.componentItem?.custorData && item?.componentItem?.custorData?.length > 0) {
-                            return true
-                        } else {
-                            message.error('请完善悬浮组件客服组内容')
-                            return false
-                        }
-                    }
                 }
                 return true
             })
@@ -2127,6 +2137,25 @@ function AddLandingPage(props: Props) {
             return newItem
         })
 
+        let globalSpec: any = {}
+        if (componentItem?.length > 0) {
+            let globalElementsSpecList = componentItem?.map((item: { elementType: string, comptActive: boolean, componentItem: { elementType: string } }) => {
+                let { elementType, comptActive, componentItem, ...data } = item
+                let typeKey = getTypeKey(elementType);
+                let newItem = { elementType };
+                (data as any).elementType = componentItem.elementType
+                if (componentItem?.elementType) {
+                    let { elementType, ...data1 } = componentItem
+                    let type1Key = getTypeKey(elementType);
+                    data[type1Key] = data1
+                }
+                newItem[typeKey] = data
+                return newItem
+            })
+            globalSpec.globalElementsSpecList = globalElementsSpecList
+        } else {
+            globalSpec = null
+        }
         let pageSpecs = {
             bgColor: pageBackColor,
             pageElementsSpecList: pageContextList
@@ -2140,7 +2169,7 @@ function AddLandingPage(props: Props) {
             belongUser: belongUser === '0' ? false : true,
             sort,
             pageSpecsList: [pageSpecs],
-            globalSpec: null,
+            globalSpec,
             shareContentSpec: {
                 shareTitle: shareTittle,
                 shareDescription: shareDesc
@@ -2234,13 +2263,13 @@ function AddLandingPage(props: Props) {
                             {/* <div {...getDragPropsCon(`JumpLink`)}> <JumpLink /> <span className="my">跳转链接</span> </div> */}
                             {/* <div {...getDragPropsCon(`ENTERPRISE_WX`)}> <WxAutoSvg /> <span className="my">添加商家微信</span> </div> */}
                         </div>
-                        {/* <div className={style.title}>营销组件</div>
-                    <div className={style.assembly}>
-                        <div {...getDragPropsCon(`shelfnew`)}> <ImgText /> <span className="my">图文复合组件</span> </div>
-                        {componentItem?.some((item: { elementType: string }) => item.elementType === 'FLOAT_BUTTON') ?
-                            <div className={style.disabled}> <FloatbuttonSvg /> <span>悬浮组件</span></div> : <div {...getDragPropsCon(`FLOAT_BUTTON`)}> <FloatbuttonSvg /> <span className="my">悬浮组件</span> </div>
-                        }
-                    </div> */}
+                        <div className={style.title}>营销组件</div>
+                        <div className={style.assembly}>
+                            {/* <div {...getDragPropsCon(`shelfnew`)}> <ImgText /> <span className="my">图文复合组件</span> </div> */}
+                            {componentItem?.some((item: { elementType: string }) => item.elementType === 'FLOAT_BUTTON') ?
+                                <div className={style.disabled}> <FloatbuttonSvg /> <span>悬浮组件</span></div> : <div {...getDragPropsCon(`FLOAT_BUTTON`)}> <FloatbuttonSvg /> <span className="my">悬浮组件</span></div>
+                            }
+                        </div>
                     </Col>
                     <Col flex="auto" className={style.center} onClick={installActiveNull}>
 

+ 4 - 4
src/pages/launchSystemNew/components/addLandingPage/sortable.tsx

@@ -255,20 +255,20 @@ export const SortableItemImgText = SortableElement(({ item, click, del, index, d
 
 /** 悬浮组件 */
 export const SortableItemFloatbutton = SortableElement(({ item, click, del }: any) => {
-    let { titleColor, descColor, componentItem, iconUrl, title, desc, wxad_styleType } = item
+    let { titleColor, descColor, componentItem, imageUrl, title, desc, styleType } = item
     return <div className={`compt componentType134 comptFixedBottom ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
         <div className={'componentWrap'}>
             <div className="componentContent">
                 <div className="floatButtonWrapper">
                     <div className="floatButton">
-                        {wxad_styleType === '1' && (iconUrl ? <img src={iconUrl} className="floatButtonAvatar"/> : <div className="floatButtonAvatarPlaceholder"></div>)}
+                        {styleType === 0 && (imageUrl ? <img src={imageUrl} className="floatButtonAvatar"/> : <div className="floatButtonAvatarPlaceholder"></div>)}
                         <div className="floatButtonTexts">
                             <div className="floatButtonTitle" style={{ color: titleColor || 'rgb(23, 23, 23)' }}>{title || '标题'}</div>
-                            {(wxad_styleType === '1' || wxad_styleType === '2' ) && <div className="floatButtonDesc" style={{ color: descColor || 'rgb(76, 76, 76)' }}>{desc || '描述'}</div>}
+                            {(styleType === 1 || styleType === 0 ) && <div className="floatButtonDesc" style={{ color: descColor || 'rgb(76, 76, 76)' }}>{desc || '描述'}</div>}
                         </div>
                         <div className="floatButtonLink" style={{
                             color: componentItem?.fontColor || 'rgb(255,255,255)', 
-                            fontWeight: componentItem?.btnFontType === '0' ? 'normal' : 'bold', 
+                            fontWeight: componentItem?.btnFontType === 0 ? 'normal' : 'bold', 
                             backgroundColor: componentItem?.btnBgColorTheme || 'rgb(7, 193, 96)', 
                             width: ((componentItem?.layoutWidth || 160) / 2) + 'px',
                             textAlign: 'center', 

+ 21 - 4
src/pages/launchSystemNew/components/lookLanding/index.tsx

@@ -32,7 +32,7 @@ function LookLanding(props: Props) {
         if (id) {
             get.run({ sysMediaId: id, mediaType: 'PAGE' }).then(res => {
                 if (res) {
-                    const { pageSpecsList } = res
+                    const { pageSpecsList, globalSpec } = res
                     setPageBackColor(pageSpecsList[0]?.bgColor)
                     let pageElementsSpecList = pageSpecsList[0]?.pageElementsSpecList
                     setContent(pageElementsSpecList?.map((item: any) => {
@@ -46,6 +46,23 @@ function LookLanding(props: Props) {
                         }
                         return item
                     }))
+                    if (globalSpec && Object.keys(globalSpec).length > 0) {
+                        let globalElementsSpecList = globalSpec.globalElementsSpecList
+                        let newComponentItem = globalElementsSpecList?.map((item: { elementType: string }) => {
+                            let typeKey = getTypeKey(item.elementType)
+                            let { elementType, ...data } = item[typeKey]
+                            let typeKey1 = getTypeKey(elementType)
+                            let componentItem: any = data[typeKey1]
+                            if (componentItem) {
+                                componentItem['elementType'] = elementType
+                            }
+                            data.componentItem = componentItem
+                            data.elementType = item.elementType
+                            delete data[typeKey1]
+                            return data
+                        })
+                        setGlobalData(newComponentItem)
+                    }
                 }
             })
         }
@@ -263,16 +280,16 @@ function LookLanding(props: Props) {
                 })}
                 {globalData.map((value: any, index: number) => {
                     if (value?.elementType === 'FLOAT_BUTTON') {
-                        let { titleColor, descColor, componentItem, iconUrl, title, desc, wxad_styleType } = value
+                        let { titleColor, descColor, componentItem, imageUrl, title, desc, styleType } = value
                         return <div className={`compt componentType134 comptFixedBottom`} key={'floatbutton' + index}>
                             <div className={'componentWrap'}>
                                 <div className="componentContent">
                                     <div className="floatButtonWrapper">
                                         <div className="floatButton">
-                                            {wxad_styleType === '1' && (iconUrl ? <img src={iconUrl} className="floatButtonAvatar" /> : <div className="floatButtonAvatarPlaceholder"></div>)}
+                                            {styleType === 0 && (imageUrl ? <img src={imageUrl} className="floatButtonAvatar" /> : <div className="floatButtonAvatarPlaceholder"></div>)}
                                             <div className="floatButtonTexts">
                                                 <div className="floatButtonTitle" style={{ color: titleColor || 'rgb(23, 23, 23)' }}>{title || '标题'}</div>
-                                                {(wxad_styleType === '1' || wxad_styleType === '2') && <div className="floatButtonDesc" style={{ color: descColor || 'rgb(76, 76, 76)' }}>{desc || '描述'}</div>}
+                                                {(styleType === 1 || styleType === 0) && <div className="floatButtonDesc" style={{ color: descColor || 'rgb(76, 76, 76)' }}>{desc || '描述'}</div>}
                                             </div>
                                             <div className="floatButtonLink" style={{
                                                 color: componentItem?.fontColor || 'rgb(255,255,255)',

+ 12 - 28
src/pages/launchSystemNew/req.ts

@@ -341,34 +341,18 @@ export interface Shelfnew extends Padding {
 
 
 /** 悬浮组件 */
-export interface Floatbutton extends Padding {
-    widgetTypeV2: string, //"floatbutton",
-    widgetType: string, //"float_button",
-    type: string, //"134",
-    name: string, // "悬浮组件",
-    wxad_styleType: string, //"2",
-    onlyShowInTimelineAd: string, //"0",
-    backgroundImg: string, //"",
-    backgroundColor: string,//"#F0F0F0",
-    backgroundColorAlpha: string, //"0.96",
-    backgroundBlurEffect: string,  //"1",
-    backgroundBlurEffectColor: string,  //"#F0F0F0",
-    backgroundBlurEffectColorAlpha: string,  //"0.5",
-    titleColor: string,  //"#171717",
-    titleColorAlpha: string,//"1",
-    descColor: string, //"#4c4c4c",
-    descColorAlpha: string, //"0.5",
-    imageMd5: string, // 图片传
-    materialId: string | number, // 有图片传
-    title: string,  // 标题传
-    desc: string,   // 描述
-    isFullClickable: string, //"1",
-    appearPaddingTop: string | number, //"0", 出现方式 进入页面出现 0 滑动页面时出现 100
-    appearPaddingBottom: string | number, //"0", 消失方式 不消失 0  消失 80
-    id: string,
-    componentItem: ImageTextContentWxAuto | ImageTextContentGh,
-    iconUrl?: string
-    comptActive?: boolean
+export interface Floatbutton {
+    elementType: 'FLOAT_BUTTON',
+    styleType: 0 | 1 | 2,  // 取值 0: 图片+title+desc,1: title+desc, 2: title
+    imageUrl?: string, // style_type=0 时必填. 悬浮组件图片 id. 图片尺寸 96x96
+    title: string, // 悬浮组件标题
+    titleColor?: string,  //悬浮组件标题颜色 "#171717",
+    desc?: string,   // 描述
+    descColor?: string, //悬浮组件描述颜色. 默认#4C4C4C
+    appearType?: 0 | 1, //出现方式 取值 0. 进入页面时出现, 1. 滑动页面时出现. 默认 0 如果 page_specs_list 只有一页必须为 0
+    disappearType?: 0 | 1, //消失方式 取值 0.不消失, 1.滑至页面底部时消失, 默认 0 如果 page_specs_list 只有一页必须为 0
+    forbidPageList?: number[], // 悬浮按钮不出现的页面数组. [1,2]代表第 1,2 页不出现悬浮按钮, 依次类推.
+    componentItem: Omit<GhButton, 'btnBorderColorTheme' | 'useIcon' | 'paddingTop' | 'paddingBottom'> | Omit<WxAutoButton, 'btnBorderColorTheme' | 'useIcon' | 'paddingTop' | 'paddingBottom'>
 }
 /**top_slider 顶部轮播*/
 export interface TopSlider extends ElementType {

+ 2 - 0
src/utils/utils.ts

@@ -114,6 +114,8 @@ export const getTypeKey = (key: string): string => {
       return 'ghSpec'
     case 'ENTERPRISE_WX':
       return 'enterpriseWxSpec'
+    case 'FLOAT_BUTTON':
+      return 'floatButtonSpec'
   }
   return ''
 }