|
@@ -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}>
|
|
|
|