|
|
@@ -1,4 +1,4 @@
|
|
|
-import { Button, Checkbox, Col, Drawer, Form, Input, InputNumber, message, Modal, Radio, RadioChangeEvent, Row, Select, Slider, Space, Spin, Switch, Tooltip } from 'antd'
|
|
|
+import { Button, Col, Drawer, Form, Input, InputNumber, message, Modal, Radio, Row, Select, Slider, Space, Spin, Switch, Tooltip } from 'antd'
|
|
|
import React, { useCallback, useEffect, useMemo, useState } from "react"
|
|
|
import modal from "antd/lib/modal"
|
|
|
import style from './index.less'
|
|
|
@@ -23,8 +23,8 @@ import arrayMove from "array-move";
|
|
|
import ColorPicker from '@/components/ColorPicker1'
|
|
|
import TextArea from 'antd/lib/input/TextArea'
|
|
|
import moment from 'moment'
|
|
|
-import { TopImg, TopVideo, Text, Img as ImgProps, GhButton, TopSlider, LinkButton, Shelfnew, WxAutoButton, Floatbutton } from '../../req'
|
|
|
-import { imgContent, txtContent, ghContent, topvideoNewContent, linkContent, topsliderContent, topimgContent, topvideoContent, shelfnewContent, shelfnewContent2, btModelJumpGh, btModelJumpLink, btModelJumpLink103, btModelJumpGh103, jumpLink104, jumpGh104, jumpLink103, jumpGh103, wxAutoContent, jumpWxAuto104, jumpWxAuto103, btModelJumpWxAuto, btModelJumpWxAuto103, floatbuttonContent, floatbuttonBtTypeWxAuto, floatbuttonBtTypeGh } from './content'
|
|
|
+import { TopImg, TopVideo, Text, Img as ImgProps, GhButton, TopSlider, Floatbutton, ImageTextItem, ITItemGhSpec } from '../../req'
|
|
|
+import { imgContent, txtContent, ghContent, topvideoNewContent, topsliderContent, topimgContent, wxAutoContent, floatbuttonContent, floatbuttonBtTypeWxAuto, floatbuttonBtTypeGh, imageTextGh, ghITItemContent, wxAutoITItemContent, imageTextItem } from './content'
|
|
|
import { landingPageReducer, Content, Props } from './landingPageReducer'
|
|
|
|
|
|
import {
|
|
|
@@ -62,21 +62,6 @@ function AddLandingPage(props: Props) {
|
|
|
const [shareDesc, setShareDesc] = useState<string>('') // 分享描述
|
|
|
const [pageName, setPageName] = useState<string>('') // 落地页名称
|
|
|
const [sort, setSort] = useState<number>(0) // 排序
|
|
|
- const [imgSize, setImgSize] = useState<{
|
|
|
- aspectRatio?: string, //宽高比
|
|
|
- minWidth?: string, //最小宽度
|
|
|
- maxWidth?: string, //最大宽度
|
|
|
- minHeight?: string, //最小高度
|
|
|
- maxHeight?: string, //最大高度
|
|
|
- minMediaSize?: number, // 最小媒体大小
|
|
|
- maxMediaSize?: number, // 最大媒体大小
|
|
|
- minVideoLength?: number, // 最小视频时长
|
|
|
- maxVideoLength?: number, // 最大视频时长
|
|
|
- minVideoBitRate?: number, // 最小视频比特率
|
|
|
- maxVideoBitRate?: number, // 最大视频比特率
|
|
|
- mediaType?: 'IMG' | 'VIDEO' | 'PAGE', // 内容类型 1 图片 2 视频
|
|
|
- }>({}) // 要选择的素材信息
|
|
|
- const [isFootlock, setIsFootlock] = useState<boolean>(false) // 是否横板视频
|
|
|
const [scType, setCcType] = useState<1 | 2 | 3 | 4 | 5>(1) // 视频 单图片 多图片处理
|
|
|
const [sliderImgContent, setSliderImgContent] = useState<{ url: string, width?: number, height?: number }[]>([]) // 保存回填数据
|
|
|
const [imgTextButtonShow, setImgTextButtonShow] = useState<boolean>(false)
|
|
|
@@ -133,7 +118,6 @@ function AddLandingPage(props: Props) {
|
|
|
// dispatch({ type: 'init', params: { elementType: 'empty' } })
|
|
|
}
|
|
|
}, [id])
|
|
|
- console.log('componentItem------>', componentItem);
|
|
|
|
|
|
|
|
|
const config = {
|
|
|
@@ -155,7 +139,6 @@ function AddLandingPage(props: Props) {
|
|
|
selectData = componentItem?.find((item: { comptActive: boolean }) => item.comptActive)
|
|
|
}
|
|
|
if (selectData?.elementType === "TOP_IMAGE") {
|
|
|
- setIsFootlock(() => false)
|
|
|
if (selectData?.adLocation === 'sns') { // 朋友圈信息流
|
|
|
if (selectData?.outerStyle === 0) { // 常规广告
|
|
|
init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: 800, height: 800 }]], maxSize: 300 * 1024 })
|
|
|
@@ -166,11 +149,9 @@ function AddLandingPage(props: Props) {
|
|
|
init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: 800, height: 800 }], [{ relation: '=', width: 800, height: 450 }], [{ relation: '=', width: 800, height: 640 }], [{ relation: '=', width: 640, height: 800 }]], maxSize: 300 * 1024 })
|
|
|
}
|
|
|
} else if (selectData?.elementType === 'IMAGE') { // 内容图片
|
|
|
- setIsFootlock(() => false)
|
|
|
init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: 750, height: null }, { relation: '<=', width: null, height: 1536 }]], maxSize: 300 * 1024 })
|
|
|
} else if (selectData?.elementType === 'TOP_SLIDER') { // 轮播图
|
|
|
init({ mediaType: 'IMG', num: selectData?.imageUrlList?.length || 3, cloudSize: [[{ relation: '=', width: 800, height: 800 }]], maxSize: 300 * 1024 })
|
|
|
- setIsFootlock(() => false)
|
|
|
} else if (selectData?.elementType === 'TOP_VIDEO') { // 视频
|
|
|
if (selectData?.adLocation === 'sns') { // 朋友圈信息流
|
|
|
if (selectData?.outerStyle === 0) { // 常规广告
|
|
|
@@ -180,18 +161,14 @@ function AddLandingPage(props: Props) {
|
|
|
}
|
|
|
} else { // 公众号及其它
|
|
|
init({ mediaType: 'VIDEO', cloudSize: [[{ relation: '=', width: 750, height: null }, { relation: '<=', width: null, height: 1536 }]], maxSize: 20 * 1024 * 1024 })
|
|
|
- setIsFootlock(() => false)
|
|
|
}
|
|
|
- } else if (selectData?.elementType === 'shelfnew') { // 图文复合组件 1个
|
|
|
- if (selectData?.type === '104') {
|
|
|
- setIsFootlock(() => false)
|
|
|
- setImgSize(() => ({ minWidth: '360', maxWidth: '360', minHeight: '360', maxHeight: '360', minMediaSize: 0, maxMediaSize: 307200, mediaType: 'IMG' }))
|
|
|
- } else if (selectData?.type === '103') {
|
|
|
- setIsFootlock(() => false)
|
|
|
- setImgSize(() => ({ minWidth: '480', maxWidth: '480', minHeight: '480', maxHeight: '480', minMediaSize: 0, maxMediaSize: 307200, mediaType: 'IMG' }))
|
|
|
+ } else if (selectData?.elementType === 'IMAGE_TEXT') { // 图文复合组件 1个
|
|
|
+ if (selectData?.imageTextItem?.length === 1) {
|
|
|
+ init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: 360, height: 360 }]], maxSize: 300 * 1024 })
|
|
|
+ } else if (selectData?.imageTextItem?.length === 2) {
|
|
|
+ init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: 480, height: 480 }]], maxSize: 300 * 1024 })
|
|
|
}
|
|
|
} else if (selectData?.elementType === 'FLOAT_BUTTON') {
|
|
|
- setIsFootlock(() => false)
|
|
|
init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: 96, height: 96 }]], maxSize: 300 * 1024 })
|
|
|
}
|
|
|
}, [content])
|
|
|
@@ -255,8 +232,8 @@ function AddLandingPage(props: Props) {
|
|
|
newCon.push({ ...ghContent, comptActive: true } as any)
|
|
|
// } else if (con === 'JumpLink') {
|
|
|
// newCon.push({ ...linkContent, comptActive: true } as any)
|
|
|
- // } else if (con === 'shelfnew') {
|
|
|
- // newCon.push({ ...shelfnewContent, comptActive: true } as any)
|
|
|
+ } else if (con === 'IMAGE_TEXT') {
|
|
|
+ newCon.push({ ...imageTextGh, comptActive: true } as any)
|
|
|
} else if (con === 'ENTERPRISE_WX') {
|
|
|
newCon.push({ ...wxAutoContent, comptActive: true } as any)
|
|
|
} else if (con === 'FLOAT_BUTTON') {
|
|
|
@@ -333,10 +310,10 @@ function AddLandingPage(props: Props) {
|
|
|
// newContent.splice(index, 0, { ...linkContent });
|
|
|
// dispatch({ type: 'setCon', params: { content: newContent } })
|
|
|
// break;
|
|
|
- // case 'shelfnew': // 图文复合组件
|
|
|
- // newContent.splice(index, 0, { ...shelfnewContent });
|
|
|
- // dispatch({ type: 'setCon', params: { content: newContent } })
|
|
|
- // break;
|
|
|
+ case 'IMAGE_TEXT': // 图文复合组件
|
|
|
+ newContent.splice(index, 0, JSON.parse(JSON.stringify(imageTextGh)));
|
|
|
+ dispatch({ type: 'setCon', params: { content: newContent } })
|
|
|
+ break;
|
|
|
case 'ENTERPRISE_WX': // 图文复合组件
|
|
|
newContent.splice(index, 0, { ...wxAutoContent });
|
|
|
dispatch({ type: 'setCon', params: { content: newContent } })
|
|
|
@@ -387,8 +364,8 @@ function AddLandingPage(props: Props) {
|
|
|
return <SortableItemWxAuto key={`item-${value.elementType}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
|
|
|
// } else if (value?.elementType === 'link') {
|
|
|
// return <SortableItemJumpLink key={`item-${value.elementType}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
|
|
|
- // } else if (value?.elementType === 'shelfnew') {
|
|
|
- // return <SortableItemImgText key={`item-${value.elementType}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
|
|
|
+ } else if (value?.elementType === 'IMAGE_TEXT') {
|
|
|
+ return <SortableItemImgText key={`item-${value.elementType}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
|
|
|
} else {
|
|
|
return null
|
|
|
}
|
|
|
@@ -399,7 +376,7 @@ function AddLandingPage(props: Props) {
|
|
|
}
|
|
|
}
|
|
|
/** 设置start */
|
|
|
- const setCon = useCallback((key: string, value: any, isTopImg?: boolean) => {
|
|
|
+ const setCon = useCallback((key: string, value: any) => {
|
|
|
let newContent = JSON.parse(JSON.stringify(content))
|
|
|
let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
|
|
|
let oldContent = newContent
|
|
|
@@ -424,21 +401,17 @@ function AddLandingPage(props: Props) {
|
|
|
<div className={`compt componentType41 ${content[0]?.comptActive && 'comptActive'}`} onClick={(e) => { installActive(e, 0) }}>
|
|
|
<div className={'componentWrap'}>
|
|
|
<div className={'componentContent'}>
|
|
|
- {
|
|
|
- imageUrl ? <img src={imageUrl} style={{ display: 'block', width: '100%', margin: 0 }} /> : <div className={'default'} style={{ width: 375, height: 300, margin: 0 }}>
|
|
|
- <div className={'defaultIcon'} style={{ marginTop: 80 }}>
|
|
|
- <Topimg />
|
|
|
- </div>
|
|
|
+ {imageUrl ? <img src={imageUrl} style={{ display: 'block', width: '100%', margin: 0 }} /> : <div className={'default'} style={{ width: 375, height: 300, margin: 0 }}>
|
|
|
+ <div className={'defaultIcon'} style={{ marginTop: 80 }}>
|
|
|
+ <Topimg />
|
|
|
</div>
|
|
|
- }
|
|
|
+ </div>}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- {
|
|
|
- !imageUrl && <div className={'comptUpload'} style={{ margin: 0 }}>
|
|
|
- <button style={{ marginTop: 150 }} className={'comptEditButton'} onClick={() => { clickUpdateImg(1) }}>上传图片</button>
|
|
|
- </div>
|
|
|
- }
|
|
|
+ {!imageUrl && <div className={'comptUpload'} style={{ margin: 0 }}>
|
|
|
+ <button style={{ marginTop: 150 }} className={'comptEditButton'} onClick={() => { clickUpdateImg(1) }}>上传图片</button>
|
|
|
+ </div>}
|
|
|
<section className={'comptEditBtns'}>
|
|
|
<div className={'comptEditBtnsInner'}>
|
|
|
{imageUrl && <button onClick={() => { editSelectImg(imageUrl) }}><EditSvg /></button>}
|
|
|
@@ -640,152 +613,25 @@ function AddLandingPage(props: Props) {
|
|
|
}, [content])
|
|
|
|
|
|
/** 图文单个设置 */
|
|
|
- const onShelfnewTxtCon = useCallback((value: string, count: number, parameter: string) => {
|
|
|
+ const onShelfnewTxtCon = useCallback((value: string, parameter: string) => {
|
|
|
let newContent = JSON.parse(JSON.stringify(content))
|
|
|
let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
|
|
|
let oldContent = newContent
|
|
|
if (selectIndex !== -1) {
|
|
|
let selectCon = oldContent[selectIndex]
|
|
|
- if (selectCon?.type === '103') {
|
|
|
- let componentItem = selectCon?.layoutItems.componentItem[goodsCount]
|
|
|
- let shelfnewItem = componentItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- shelfnewItem[count + 1][parameter] = value
|
|
|
- if (count + 1 === 2 && parameter === 'content') {
|
|
|
- if (shelfnewItem[count + 1]?.name === '价格') {
|
|
|
- shelfnewItem[count + 1][parameter] = '￥' + value
|
|
|
- } else {
|
|
|
- shelfnewItem[count + 1][parameter] = value
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (selectCon?.type === '104') {
|
|
|
- let componentItem = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- let textData = componentItem[1]?.layoutItems?.componentItem
|
|
|
- textData[count][parameter] = value
|
|
|
- if (count === 1 && parameter === 'content') {
|
|
|
- let name = textData[count]?.name
|
|
|
- if (name === '价格') {
|
|
|
- textData[count][parameter] = '￥' + value
|
|
|
- } else {
|
|
|
- textData[count][parameter] = value
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- oldContent[selectIndex] = { ...selectCon }
|
|
|
- dispatch({ type: 'setCon', params: { content: [...oldContent] } })
|
|
|
- }
|
|
|
- }, [content, goodsCount])
|
|
|
- /** 设置描述类型 */
|
|
|
- const onSetShelfnewDescType = useCallback((e: RadioChangeEvent) => {
|
|
|
- let newContent = JSON.parse(JSON.stringify(content))
|
|
|
- let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
|
|
|
- let oldContent = newContent
|
|
|
- if (selectIndex !== -1) {
|
|
|
- let selectCon = oldContent[selectIndex]
|
|
|
- if (selectCon?.type === '103') {
|
|
|
- let componentItem = selectCon?.layoutItems.componentItem[goodsCount]
|
|
|
- let shelfnewItem = componentItem?.layoutItems?.componentItem[0]
|
|
|
- shelfnewItem.descType = e.target.value
|
|
|
- let textData = shelfnewItem?.layoutItems?.componentItem
|
|
|
- if (e.target.value === 'price') {
|
|
|
- textData[2] = {
|
|
|
- ...textData[2],
|
|
|
- name: '价格',
|
|
|
- content: '',
|
|
|
- fontColor: '#353535',
|
|
|
- fontSize: '32',
|
|
|
- showType: "1",
|
|
|
- }
|
|
|
- } else {
|
|
|
- let { showType, ...desc } = textData[2]
|
|
|
- textData[2] = {
|
|
|
- ...desc,
|
|
|
- name: '描述',
|
|
|
- content: '',
|
|
|
- fontColor: '#4D4D4D',
|
|
|
- fontSize: '24'
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (selectCon?.type === '104') {
|
|
|
- let componentItem = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- componentItem[1].descType = e.target.value
|
|
|
- let textData = componentItem[1]?.layoutItems?.componentItem
|
|
|
- if (e.target.value === 'price') {
|
|
|
- textData[1] = {
|
|
|
- ...textData[1],
|
|
|
- name: '价格',
|
|
|
- content: '',
|
|
|
- fontColor: '#353535',
|
|
|
- fontSize: '32',
|
|
|
- showType: "1",
|
|
|
- }
|
|
|
- } else {
|
|
|
- let { showType, ...desc } = textData[1]
|
|
|
- textData[1] = {
|
|
|
- ...desc,
|
|
|
- name: '描述',
|
|
|
- content: '',
|
|
|
- fontColor: '#4D4D4D',
|
|
|
- fontSize: '24'
|
|
|
- }
|
|
|
- }
|
|
|
+ let length = selectCon?.imageTextItem?.length || 0;
|
|
|
+ if (length === 2) {
|
|
|
+ let imageTextItem = selectCon?.imageTextItem[goodsCount]
|
|
|
+ imageTextItem[parameter] = value
|
|
|
+ } else if (length === 1) {
|
|
|
+ let imageTextItem = selectCon?.imageTextItem[0]
|
|
|
+ imageTextItem[parameter] = value
|
|
|
}
|
|
|
oldContent[selectIndex] = { ...selectCon }
|
|
|
dispatch({ type: 'setCon', params: { content: [...oldContent] } })
|
|
|
}
|
|
|
}, [content, goodsCount])
|
|
|
|
|
|
- /** 设置跳转方式 */
|
|
|
- const onSetShelfnewJumpMode = useCallback((e: RadioChangeEvent) => {
|
|
|
- let newContent = JSON.parse(JSON.stringify(content))
|
|
|
- let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
|
|
|
- let oldContent = newContent
|
|
|
- if (selectIndex !== -1) {
|
|
|
- let selectCon = oldContent[selectIndex]
|
|
|
- if (selectCon?.type === '103') {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].jumpMode = e.target.value
|
|
|
- let jumpData = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]
|
|
|
- let widgetTypeV2 = jumpData?.widgetTypeV2
|
|
|
- let componentItem = selectCon?.layoutItems?.componentItem[goodsCount]?.layoutItems?.componentItem
|
|
|
- if (e.target.value === 'btn_jump') {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem = [{ ...componentItem[0] }]
|
|
|
- } else {
|
|
|
- switch (widgetTypeV2) {
|
|
|
- case 'link':
|
|
|
- componentItem[1] = { ...btModelJumpLink103, origBtnJumpUrl: jumpData?.origBtnJumpUrl }
|
|
|
- break
|
|
|
- case 'gh':
|
|
|
- componentItem[1] = { ...btModelJumpGh103, subType: jumpData?.subType, btnFontType: jumpData?.btnFontType }
|
|
|
- break
|
|
|
- case 'enterprise_wx_auto':
|
|
|
- componentItem[1] = { ...btModelJumpWxAuto103, subType: jumpData?.subType, btnFontType: jumpData?.btnFontType }
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (selectCon?.type === '104') {
|
|
|
- selectCon.layoutItems.componentItem[0].jumpMode = e.target.value
|
|
|
- let textData = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem[1]?.layoutItems?.componentItem
|
|
|
- let widgetTypeV2 = textData[2].widgetTypeV2
|
|
|
- let componentItem = selectCon?.layoutItems?.componentItem
|
|
|
- if (e.target.value === 'btn_jump') {
|
|
|
- selectCon.layoutItems.componentItem = [{ ...componentItem[0] }]
|
|
|
- } else {
|
|
|
- switch (widgetTypeV2) {
|
|
|
- case 'link':
|
|
|
- componentItem[1] = { ...btModelJumpLink, origBtnJumpUrl: textData[2]?.origBtnJumpUrl }
|
|
|
- break
|
|
|
- case 'gh':
|
|
|
- componentItem[1] = { ...btModelJumpGh, subType: textData[2]?.subType, btnFontType: textData[2]?.btnFontType }
|
|
|
- break
|
|
|
- case 'enterprise_wx_auto':
|
|
|
- componentItem[1] = { ...btModelJumpWxAuto, subType: textData[2]?.subType, btnFontType: textData[2]?.btnFontType }
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- oldContent[selectIndex] = { ...selectCon }
|
|
|
- dispatch({ type: 'setCon', params: { content: [...oldContent] } })
|
|
|
- }
|
|
|
- }, [content, goodsCount])
|
|
|
// 设置图文跳转链接按钮
|
|
|
const onSetShelfnewButton = useCallback((value: string) => {
|
|
|
let newContent = JSON.parse(JSON.stringify(content))
|
|
|
@@ -793,86 +639,49 @@ function AddLandingPage(props: Props) {
|
|
|
let oldContent = newContent
|
|
|
if (selectIndex !== -1) {
|
|
|
let selectCon = oldContent[selectIndex]
|
|
|
- // "btn_jump" "total_jump"
|
|
|
- if (selectCon?.type === '103') {
|
|
|
- let jumpMode = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].jumpMode
|
|
|
- let btnContent = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]
|
|
|
- if (value === 'link') {
|
|
|
- if (jumpMode === "total_jump") {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1] = { ...btModelJumpLink103 }
|
|
|
- }
|
|
|
- if (btnContent?.horizontalAlignment) {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpLink103, horizontalAlignment: '1' }
|
|
|
- } else {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpLink103 }
|
|
|
- }
|
|
|
- } else if (value === 'gh') {
|
|
|
- if (jumpMode === "total_jump") {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1] = { ...btModelJumpGh103 }
|
|
|
- }
|
|
|
- if (btnContent?.horizontalAlignment) {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpGh103, horizontalAlignment: '1' }
|
|
|
- } else {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpGh103 }
|
|
|
- }
|
|
|
- } else if (value === 'enterprise_wx_auto') {
|
|
|
- if (jumpMode === "total_jump") {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1] = { ...btModelJumpWxAuto103 }
|
|
|
- }
|
|
|
- if (btnContent?.horizontalAlignment) {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpWxAuto103, horizontalAlignment: '1' }
|
|
|
- } else {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpWxAuto103 }
|
|
|
- }
|
|
|
+ let length = selectCon?.imageTextItem?.length || 0;
|
|
|
+ if (length === 2) {
|
|
|
+ let imageTextItem = selectCon?.imageTextItem[goodsCount]
|
|
|
+ imageTextItem.subElemType = value
|
|
|
+ switch(value) {
|
|
|
+ case 'GH':
|
|
|
+ imageTextItem.content = JSON.parse(JSON.stringify(ghITItemContent))
|
|
|
+ break;
|
|
|
+ case 'ENTERPRISE_WX':
|
|
|
+ imageTextItem.content = JSON.parse(JSON.stringify(wxAutoITItemContent))
|
|
|
+ break
|
|
|
}
|
|
|
- } else if (selectCon?.type === '104') {
|
|
|
- let jumpMode = selectCon.layoutItems.componentItem[0].jumpMode
|
|
|
- if (value === 'link') {
|
|
|
- if (jumpMode === "total_jump") {
|
|
|
- selectCon.layoutItems.componentItem[1] = { ...btModelJumpLink }
|
|
|
- }
|
|
|
- selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2] = { ...jumpLink104 }
|
|
|
- } else if (value === 'gh') {
|
|
|
- if (jumpMode === "total_jump") {
|
|
|
- selectCon.layoutItems.componentItem[1] = { ...btModelJumpGh }
|
|
|
- }
|
|
|
- selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2] = { ...jumpGh104 }
|
|
|
- } else if (value === 'enterprise_wx_auto') {
|
|
|
- if (jumpMode === "total_jump") {
|
|
|
- selectCon.layoutItems.componentItem[1] = { ...btModelJumpWxAuto }
|
|
|
- }
|
|
|
- selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2] = { ...jumpWxAuto104 }
|
|
|
+ } else if (length === 1) {
|
|
|
+ let imageTextItem = selectCon?.imageTextItem[0]
|
|
|
+ imageTextItem.subElemType = value
|
|
|
+ switch(value) {
|
|
|
+ case 'GH':
|
|
|
+ imageTextItem.content = JSON.parse(JSON.stringify(ghITItemContent))
|
|
|
+ break;
|
|
|
+ case 'ENTERPRISE_WX':
|
|
|
+ imageTextItem.content = JSON.parse(JSON.stringify(wxAutoITItemContent))
|
|
|
+ break
|
|
|
}
|
|
|
}
|
|
|
oldContent[selectIndex] = { ...selectCon }
|
|
|
dispatch({ type: 'setCon', params: { content: [...oldContent] } })
|
|
|
}
|
|
|
}, [content, goodsCount])
|
|
|
+
|
|
|
// 配置图文跳转链接按钮字段
|
|
|
- const onSetShelfnewButtonField = useCallback((field: string, value: string) => {
|
|
|
+ const onSetShelfnewButtonField = useCallback((field: string, value: string | number) => {
|
|
|
let newContent = JSON.parse(JSON.stringify(content))
|
|
|
let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
|
|
|
let oldContent = newContent
|
|
|
if (selectIndex !== -1) {
|
|
|
let selectCon = oldContent[selectIndex]
|
|
|
- if (selectCon?.type === '103') {
|
|
|
- let jumpMode = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].jumpMode
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3][field] = value
|
|
|
- if (field === 'btnBorderColorTheme') {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]['borderSize'] = "2"
|
|
|
- }
|
|
|
- if (jumpMode === 'total_jump' && (field === 'subType' || field === 'btnFontType')) {
|
|
|
- selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1][field] = value
|
|
|
- }
|
|
|
- } else if (selectCon?.type === '104') {
|
|
|
- let jumpMode = selectCon.layoutItems.componentItem[0].jumpMode
|
|
|
- selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2][field] = value
|
|
|
- if (field === 'btnBorderColorTheme') {
|
|
|
- selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2]['borderSize'] = "2"
|
|
|
- }
|
|
|
- if (jumpMode === 'total_jump' && (field === 'subType' || field === 'btnFontType')) {
|
|
|
- selectCon.layoutItems.componentItem[1][field] = value
|
|
|
- }
|
|
|
+ let length = selectCon.imageTextItem.length
|
|
|
+ if (length === 2) {
|
|
|
+ let content = selectCon.imageTextItem[goodsCount].content
|
|
|
+ content[field] = value
|
|
|
+ } else if (length === 1) {
|
|
|
+ let content = selectCon.imageTextItem[0].content
|
|
|
+ content[field] = value
|
|
|
}
|
|
|
oldContent[selectIndex] = { ...selectCon }
|
|
|
dispatch({ type: 'setCon', params: { content: [...oldContent] } })
|
|
|
@@ -884,53 +693,27 @@ function AddLandingPage(props: Props) {
|
|
|
let newContent = JSON.parse(JSON.stringify(content))
|
|
|
let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
|
|
|
if (selectIndex !== -1) {
|
|
|
- if (value === '103') {
|
|
|
- newContent[selectIndex] = { ...shelfnewContent2, comptActive: true }
|
|
|
- } else if (value === '104') {
|
|
|
- newContent[selectIndex] = { ...shelfnewContent, comptActive: true }
|
|
|
- }
|
|
|
- dispatch({ type: 'setCon', params: { content: [...newContent] } })
|
|
|
- }
|
|
|
- }, [content])
|
|
|
-
|
|
|
- // 设置对齐方式
|
|
|
- const setAilgin103 = useCallback((align: number) => {
|
|
|
- let newContent = JSON.parse(JSON.stringify(content))
|
|
|
- let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
|
|
|
- if (selectIndex !== -1) {
|
|
|
- let selectCon = newContent[selectIndex]
|
|
|
- selectCon.wxad_align = align
|
|
|
- let componentItem = selectCon?.layoutItems?.componentItem?.map((item: any) => {
|
|
|
- let shelfnewItem = item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- if (align === 0) {
|
|
|
- shelfnewItem = shelfnewItem?.map((oldItem: any, index: number) => {
|
|
|
- if (index === 0) {
|
|
|
- return oldItem
|
|
|
- } else if (index === 1 || index === 2) {
|
|
|
- let { textAlignment, ...newItem } = oldItem
|
|
|
- return newItem
|
|
|
- } else {
|
|
|
- let { horizontalAlignment, ...newItem } = oldItem
|
|
|
- return newItem
|
|
|
+ if (value === '2') {
|
|
|
+ newContent[selectIndex].imageTextItem = [
|
|
|
+ JSON.parse(JSON.stringify({
|
|
|
+ ...imageTextItem,
|
|
|
+ content: {
|
|
|
+ ...ghITItemContent
|
|
|
}
|
|
|
- })
|
|
|
- } else {
|
|
|
- shelfnewItem = shelfnewItem?.map((newItem: any, index: number) => {
|
|
|
- if (index === 0) {
|
|
|
- return newItem
|
|
|
- } else if (index === 1 || index === 2) {
|
|
|
- return { ...newItem, textAlignment: "1" }
|
|
|
- } else {
|
|
|
- return { ...newItem, horizontalAlignment: "1" }
|
|
|
+ })),
|
|
|
+ JSON.parse(JSON.stringify({
|
|
|
+ ...imageTextItem,
|
|
|
+ content: {
|
|
|
+ ...ghITItemContent
|
|
|
}
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
- item.layoutItems.componentItem[0].layoutItems.componentItem = shelfnewItem
|
|
|
- return item
|
|
|
- })
|
|
|
- selectCon.layoutItems.componentItem = componentItem
|
|
|
- newContent[selectIndex] = { ...selectCon }
|
|
|
+ }))
|
|
|
+ ]
|
|
|
+ } else if (value === '1') {
|
|
|
+ newContent[selectIndex].alignMode = 0
|
|
|
+ let imageTextItem = newContent[selectIndex].imageTextItem
|
|
|
+ let newImageTextItem = imageTextItem.splice(0, 1)
|
|
|
+ newContent[selectIndex].imageTextItem = newImageTextItem
|
|
|
+ }
|
|
|
dispatch({ type: 'setCon', params: { content: [...newContent] } })
|
|
|
}
|
|
|
}, [content])
|
|
|
@@ -982,45 +765,39 @@ function AddLandingPage(props: Props) {
|
|
|
if (selectCon) {
|
|
|
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, title, desc, titleColor, descColor, componentItem, appearType, disappearType } = selectCon
|
|
|
- let descType = "text"
|
|
|
- let jumpMode = "btn_jump"
|
|
|
- let shelfnewImgData: { pureImageUrl: string } = { pureImageUrl: '' } // 图片信息
|
|
|
- let shelfnewTitleData: { content: string, fontColor: string } = { content: "", fontColor: "#353535" } // 标题信息
|
|
|
- let shelfnewDescData: { name: string, content: string, fontColor: string } = { name: '', content: "", fontColor: "#B2B2B2" } // 描述信息
|
|
|
- let shelfnewBtData: {
|
|
|
- widgetTypeV2: string, btnTitle: string, btnBgColorTheme: string,
|
|
|
- subType: '17' | '1', btnFontType: '0' | '1',
|
|
|
- btnBorderColorTheme: string, fontColor: string, origBtnJumpUrl: string,
|
|
|
- custorData: any[]
|
|
|
- } = { widgetTypeV2: '', btnFontType: '0', subType: '17', btnTitle: "", btnBgColorTheme: "#07C160", btnBorderColorTheme: "#FFFFFF", fontColor: "#FFFFFF", origBtnJumpUrl: "", custorData: [] }
|
|
|
-
|
|
|
+ styleType, imageTextItem, initHeight, alignMode, activeIndex, title, desc, titleColor, descColor, componentItem, appearType, disappearType } = selectCon
|
|
|
+ let imgTextData: ImageTextItem = {
|
|
|
+ borderColor: '#e5e5e5',
|
|
|
+ titleColor: '#353535',
|
|
|
+ descColor: '#b2b2b2',
|
|
|
+ bgColor: '#ffffff',
|
|
|
+ jumpMode: 'btn_jump',
|
|
|
+ imageUrl: '',
|
|
|
+ title: '',
|
|
|
+ desc: '',
|
|
|
+ subElemType: 'GH',
|
|
|
+ content: {
|
|
|
+ btnTitle: '关注公众号',
|
|
|
+ fontColor: '#FFFFFF',
|
|
|
+ btnBgColorTheme: '#07C160',
|
|
|
+ btnBorderColorTheme: '#FFFFFF',
|
|
|
+ btnFontType: 0,
|
|
|
+ useIcon: 0,
|
|
|
+ fastFollow: 1,
|
|
|
+ paddingTop: 28,
|
|
|
+ paddingBottom: 28,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let imageTextItemIndex = 1;
|
|
|
let custorGroup = []
|
|
|
if (elementType === 'enterprise_wx_auto') {
|
|
|
custorGroup = selectCon?.custorData || []
|
|
|
- } else if (elementType === 'shelfnew') {
|
|
|
- if (type === '104') { // 图文复合组件 单个
|
|
|
- let shelfnewData = layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- jumpMode = layoutItems?.componentItem[0]?.jumpMode
|
|
|
- descType = shelfnewData[1]?.descType
|
|
|
- shelfnewImgData = shelfnewData[0]
|
|
|
- shelfnewTitleData = shelfnewData[1]?.layoutItems?.componentItem[0]
|
|
|
- shelfnewDescData = shelfnewData[1]?.layoutItems?.componentItem[1]
|
|
|
- shelfnewBtData = shelfnewData[1]?.layoutItems?.componentItem[2]
|
|
|
- } else if (type === '103') {
|
|
|
- // goodsCount
|
|
|
- let componentItems = layoutItems.componentItem
|
|
|
- let componentItem = componentItems[goodsCount]
|
|
|
- borderColor = componentItem?.borderColor || "#e5e5e5"
|
|
|
- bgColor = componentItem?.bgColor || "#ffffff"
|
|
|
- jumpMode = componentItem?.layoutItems?.componentItem[0]?.jumpMode
|
|
|
- let shelfnewItem = componentItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- descType = componentItem?.layoutItems?.componentItem[0]?.descType
|
|
|
- shelfnewImgData = shelfnewItem[0]
|
|
|
- shelfnewTitleData = shelfnewItem[1]
|
|
|
- shelfnewDescData = shelfnewItem[2]
|
|
|
- shelfnewBtData = shelfnewItem[3]
|
|
|
+ } else if (elementType === 'IMAGE_TEXT') {
|
|
|
+ imageTextItemIndex = imageTextItem?.length || 1
|
|
|
+ if (imageTextItemIndex === 1) { // 图文复合组件 单个
|
|
|
+ imgTextData = imageTextItem[0]
|
|
|
+ } else if (imageTextItemIndex === 2) {
|
|
|
+ imgTextData = imageTextItem[goodsCount]
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1035,7 +812,7 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-item">
|
|
|
<div className="adui-form-label">广告位</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Radio.Group onChange={(e) => { setCon('adLocation', e.target.value, true) }} value={adLocation} size='small'>
|
|
|
+ <Radio.Group onChange={(e) => { setCon('adLocation', e.target.value) }} value={adLocation} size='small'>
|
|
|
<Radio value='sns'>朋友圈信息流</Radio>
|
|
|
<Radio value='gzh'>公众号及其他</Radio>
|
|
|
</Radio.Group>
|
|
|
@@ -1044,7 +821,7 @@ function AddLandingPage(props: Props) {
|
|
|
{adLocation === 'sns' && <div className="adui-form-item">
|
|
|
<div className="adui-form-label">外层样式</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Select value={outerStyle} style={{ width: 100 }} onChange={(e) => { setCon('outerStyle', e, true) }}>
|
|
|
+ <Select value={outerStyle} style={{ width: 100 }} onChange={(e) => { setCon('outerStyle', e) }}>
|
|
|
<Option value={0}>常规广告</Option>
|
|
|
<Option value={1}>卡片广告</Option>
|
|
|
</Select>
|
|
|
@@ -1518,40 +1295,22 @@ function AddLandingPage(props: Props) {
|
|
|
</div> */}
|
|
|
</div>
|
|
|
:
|
|
|
- elementType === 'shelfnew' ? <div className="widget">
|
|
|
- {/* {imgTextButtonShow ? <>
|
|
|
+ elementType === 'IMAGE_TEXT' ? <div className="widget">
|
|
|
+ {imgTextButtonShow ? <>
|
|
|
<div className="caption section goBack" onClick={() => { setImgTextButtonShow(false) }}>
|
|
|
<SwapLeftOutlined />
|
|
|
<span>返回</span>
|
|
|
</div>
|
|
|
- {shelfnewBtData.widgetTypeV2 === 'gh' || shelfnewBtData.widgetTypeV2 === 'link' || shelfnewBtData.widgetTypeV2 === 'enterprise_wx_auto' ? <>
|
|
|
+ {imgTextData.subElemType === 'GH' || imgTextData.subElemType === 'ENTERPRISE_WX' ? <>
|
|
|
|
|
|
- {shelfnewBtData.widgetTypeV2 === 'link' ? <div className="form section">
|
|
|
- <div className="form-caption">链接设置</div>
|
|
|
- <Input placeholder="以 http:// 或 https:// 开头" value={shelfnewBtData?.origBtnJumpUrl} onChange={(e) => { onSetShelfnewButtonField('origBtnJumpUrl', e.target.value) }} />
|
|
|
- </div> : shelfnewBtData.widgetTypeV2 === 'gh' ? <div className="form section">
|
|
|
+ {imgTextData.subElemType === 'GH' && <div className="form section">
|
|
|
<Space>
|
|
|
- <Switch size="small" checked={shelfnewBtData?.subType === '17' ? true : false} onChange={(e) => { onSetShelfnewButtonField('subType', e ? '17' : '1') }} />
|
|
|
+ <Switch size="small" checked={(imgTextData?.content as ITItemGhSpec)?.fastFollow === 1 ? true : false} onChange={(e) => { onSetShelfnewButtonField('fastFollow', e ? 1 : 0) }} />
|
|
|
一键关注
|
|
|
<Tooltip placement="top" title={'唤起公众号简介的半屏面板，点击其中按钮直接关注公众号'}>
|
|
|
<QuestionCircleOutlined />
|
|
|
</Tooltip>
|
|
|
</Space>
|
|
|
- </div> : <div className="form section">
|
|
|
- <div className="form-caption">客服设置</div>
|
|
|
- <div className="adui-form-item">
|
|
|
- <div className="adui-form-label">客服分配</div>
|
|
|
- <div className="adui-form-control">
|
|
|
- <div className="fl-sb">
|
|
|
- <Button size="small" onClick={clickCustorGroup}>{shelfnewBtData?.custorData?.length > 0 ? '修改客服组' : '选择客服组'}</Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {shelfnewBtData?.custorData?.length > 0 && <div className='adui-form-item custorGroup'>
|
|
|
- {shelfnewBtData?.custorData?.map((item: { label: string, custorData: any[], id: number }) => <div key={item.id}>
|
|
|
- <strong>{item.label}：</strong><span>{item.custorData[0]?.name}</span>
|
|
|
- </div>)}
|
|
|
- </div>}
|
|
|
</div>}
|
|
|
|
|
|
<div className="form section">
|
|
|
@@ -1562,12 +1321,12 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="fl-sb">
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
|
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: '1px solid #d9d9d9', borderRadius: 2, paddingRight: 8 }}>
|
|
|
- <Input maxLength={5} style={{ width: 90 }} bordered={false} value={shelfnewBtData?.btnTitle} onChange={(e) => { onSetShelfnewButtonField('btnTitle', e.target.value) }} /> <span>{shelfnewBtData?.btnTitle?.length}/5</span>
|
|
|
+ <Input maxLength={5} style={{ width: 90 }} bordered={false} value={imgTextData?.content?.btnTitle} onChange={(e) => { onSetShelfnewButtonField('btnTitle', e.target.value) }} /> <span>{imgTextData?.content?.btnTitle?.length}/5</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Radio.Group onChange={(e) => { onSetShelfnewButtonField('btnFontType', e.target.value) }} value={shelfnewBtData?.btnFontType}>
|
|
|
- <Radio.Button value="0">常规</Radio.Button>
|
|
|
- <Radio.Button value="1">加粗</Radio.Button>
|
|
|
+ <Radio.Group onChange={(e) => { onSetShelfnewButtonField('btnFontType', e.target.value) }} value={imgTextData?.content?.btnFontType}>
|
|
|
+ <Radio.Button value={0}>常规</Radio.Button>
|
|
|
+ <Radio.Button value={1}>加粗</Radio.Button>
|
|
|
</Radio.Group>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1575,19 +1334,19 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-item" style={{ alignItems: 'center' }}>
|
|
|
<div className="adui-form-label">字体色</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('fontColor', color) }} color={shelfnewBtData?.fontColor}></ColorPicker><div className="colorShow">{shelfnewBtData?.fontColor}</div></Space>
|
|
|
+ <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('fontColor', color) }} color={imgTextData?.content?.fontColor}></ColorPicker><div className="colorShow">{imgTextData?.content?.fontColor}</div></Space>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="adui-form-item" style={{ alignItems: 'center' }}>
|
|
|
<div className="adui-form-label">边框色</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('btnBorderColorTheme', color) }} color={shelfnewBtData?.btnBorderColorTheme}></ColorPicker><div className="colorShow">{shelfnewBtData?.btnBorderColorTheme}</div></Space>
|
|
|
+ <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('btnBorderColorTheme', color) }} color={imgTextData?.content?.btnBorderColorTheme}></ColorPicker><div className="colorShow">{imgTextData?.content?.btnBorderColorTheme}</div></Space>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="adui-form-item" style={{ alignItems: 'center' }}>
|
|
|
<div className="adui-form-label">背景色</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('btnBgColorTheme', color) }} color={shelfnewBtData?.btnBgColorTheme}></ColorPicker><div className="colorShow">{shelfnewBtData?.btnBgColorTheme}</div></Space>
|
|
|
+ <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('btnBgColorTheme', color) }} color={imgTextData?.content?.btnBgColorTheme}></ColorPicker><div className="colorShow">{imgTextData?.content?.btnBgColorTheme}</div></Space>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1601,11 +1360,11 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-label">类型</div>
|
|
|
<div className="adui-form-control">
|
|
|
<>
|
|
|
- <Radio.Group onChange={(e) => { setShelfnewType(e.target.value) }} value={type}>
|
|
|
- <Radio value='104'>一行1个</Radio>
|
|
|
- <Radio value='103'>一行2个</Radio>
|
|
|
+ <Radio.Group onChange={(e) => { setShelfnewType(e.target.value) }} value={imageTextItemIndex.toString()}>
|
|
|
+ <Radio value='1'>一行1个</Radio>
|
|
|
+ <Radio value='2'>一行2个</Radio>
|
|
|
</Radio.Group>
|
|
|
- {type === '103' && <Radio.Group onChange={(e) => { setGoodsCount(e.target.value) }} value={goodsCount} size='small' style={{ marginTop: 10 }}>
|
|
|
+ {imageTextItemIndex === 2 && <Radio.Group onChange={(e) => { setGoodsCount(e.target.value) }} value={goodsCount} size='small' style={{ marginTop: 10 }}>
|
|
|
<Radio.Button value={0}>商品1</Radio.Button>
|
|
|
<Radio.Button value={1}>商品2</Radio.Button>
|
|
|
</Radio.Group>}
|
|
|
@@ -1619,8 +1378,8 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-label">配图</div>
|
|
|
<div className="adui-form-control">
|
|
|
<div>
|
|
|
- <Button onClick={() => { setCcType(4); setSelectImgVisible(true); setNum(1) }}>上传图片</Button>
|
|
|
- <div style={{ marginTop: 4, fontSize: 12, color: '#636363' }}>{type === '103' ? '尺寸：480像素*480像素' : '尺寸：360像素*360像素'}</div>
|
|
|
+ <Button onClick={() => { setCcType(4); setSelectImgVisible(true); }}>上传图片</Button>
|
|
|
+ <div style={{ marginTop: 4, fontSize: 12, color: '#636363' }}>{imageTextItemIndex === 2 ? '尺寸：480像素*480像素' : '尺寸：360像素*360像素'}</div>
|
|
|
<div style={{ marginTop: 4, fontSize: 12, color: '#636363' }}>格式：不超过300k</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1628,33 +1387,27 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
|
|
|
<div className="adui-form-label" style={{ marginTop: 6 }}>标题</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Input.TextArea placeholder="请输入标题" onChange={(e) => { onShelfnewTxtCon(e.target.value?.replace(/\r|\n/ig, ""), 0, 'content') }} value={shelfnewTitleData?.content} showCount maxLength={type === '104' ? 12 : 8} autoSize />
|
|
|
+ <Input.TextArea placeholder="请输入标题" onChange={(e) => { onShelfnewTxtCon(e.target.value?.replace(/\r|\n/ig, ""), 'title') }} value={imgTextData?.title} showCount maxLength={imageTextItemIndex === 1 ? 12 : 8} autoSize />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div className="adui-form-item">
|
|
|
+ <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
|
|
|
<div className="adui-form-label">描述</div>
|
|
|
<div className="adui-form-control">
|
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
|
- <Radio.Group onChange={onSetShelfnewDescType} value={descType}>
|
|
|
+ <Radio.Group defaultValue='text'>
|
|
|
<Radio value="text">文字</Radio>
|
|
|
- <Radio value="price">价格</Radio>
|
|
|
+ <Radio value="price" disabled>价格</Radio>
|
|
|
</Radio.Group>
|
|
|
- {descType === 'text' ?
|
|
|
- <Input.TextArea placeholder="请输入描述" onChange={(e) => { onShelfnewTxtCon(e.target.value?.replace(/\r|\n/ig, ""), 1, 'content') }} value={shelfnewDescData?.content} showCount maxLength={type === '104' ? 15 : 10} autoSize={{ minRows: 2, maxRows: 2 }} /> :
|
|
|
- <div>
|
|
|
- <Input placeholder="请输入" suffix="元" onChange={(e) => { onShelfnewTxtCon(e.target.value, 1, 'content') }} style={{ width: 150 }} value={shelfnewDescData?.content?.split('￥')[1]} />
|
|
|
- <div style={{ fontSize: 12, color: '#636363', marginTop: 5 }}>价格范围0.01~999,999,999.99元</div>
|
|
|
- </div>
|
|
|
- }
|
|
|
+ <Input.TextArea placeholder="请输入描述" onChange={(e) => { onShelfnewTxtCon(e.target.value?.replace(/\r|\n/ig, ""), 'desc') }} value={imgTextData?.desc} showCount maxLength={imageTextItemIndex === 1 ? 15 : 10} autoSize={{ minRows: 2, maxRows: 2 }} />
|
|
|
</Space>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- {type === '103' && <div className="adui-form-item">
|
|
|
+ {imageTextItemIndex === 2 && <div className="adui-form-item">
|
|
|
<div className="adui-form-label">对齐</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Radio.Group onChange={(e) => { setAilgin103(e.target.value) }} value={wxad_align}>
|
|
|
+ <Radio.Group onChange={(e) => { setCon('alignMode', e.target.value) }} value={alignMode}>
|
|
|
<Radio value={0}>左对齐</Radio>
|
|
|
<Radio value={1}>居中对齐</Radio>
|
|
|
</Radio.Group>
|
|
|
@@ -1666,12 +1419,12 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-control">
|
|
|
<Space style={{ width: '100%' }} size="large" className="shelfnewColor">
|
|
|
<div>
|
|
|
- <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 0, 'fontColor') }} color={shelfnewTitleData?.fontColor}></ColorPicker> <div className="colorShow">{shelfnewTitleData?.fontColor}</div></Space>
|
|
|
+ <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 'titleColor') }} color={imgTextData.titleColor}></ColorPicker> <div className="colorShow">{imgTextData.titleColor}</div></Space>
|
|
|
<div className="colorName">标题</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 1, 'fontColor') }} color={shelfnewDescData?.fontColor}></ColorPicker> <div className="colorShow">{shelfnewDescData?.fontColor}</div></Space>
|
|
|
- <div className="colorName">{shelfnewDescData?.name}</div>
|
|
|
+ <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 'descColor') }} color={imgTextData.descColor}></ColorPicker> <div className="colorShow">{imgTextData.descColor}</div></Space>
|
|
|
+ <div className="colorName">{/*shelfnewDescData?.name*/'描述'}</div>
|
|
|
</div>
|
|
|
</Space>
|
|
|
</div>
|
|
|
@@ -1681,11 +1434,11 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-control">
|
|
|
<Space style={{ width: '100%' }} size="large" className="shelfnewColor">
|
|
|
<div>
|
|
|
- <Space><ColorPicker onColor={(color: string) => { setCon('borderColor', color) }} color={borderColor}></ColorPicker> <div className="colorShow">{borderColor}</div></Space>
|
|
|
+ <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 'borderColor') }} color={imgTextData.borderColor}></ColorPicker> <div className="colorShow">{imgTextData.borderColor}</div></Space>
|
|
|
<div className="colorName">边框</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <Space><ColorPicker onColor={(color: string) => { setCon('bgColor', color) }} color={bgColor}></ColorPicker> <div className="colorShow">{bgColor}</div></Space>
|
|
|
+ <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 'bgColor') }} color={imgTextData.bgColor}></ColorPicker> <div className="colorShow">{imgTextData.bgColor}</div></Space>
|
|
|
<div className="colorName">背景</div>
|
|
|
</div>
|
|
|
</Space>
|
|
|
@@ -1720,7 +1473,7 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-item">
|
|
|
<div className="adui-form-label">跳转方式</div>
|
|
|
<div className="adui-form-control">
|
|
|
- <Radio.Group onChange={onSetShelfnewJumpMode} value={jumpMode}>
|
|
|
+ <Radio.Group onChange={(e) => onShelfnewTxtCon(e.target.value, 'jumpMode')} value={imgTextData.jumpMode}>
|
|
|
<Radio value="btn_jump">按钮跳转</Radio>
|
|
|
<Radio value="total_jump">全局跳转</Radio>
|
|
|
</Radio.Group>
|
|
|
@@ -1730,17 +1483,17 @@ function AddLandingPage(props: Props) {
|
|
|
<div className="adui-form-label">按钮类型</div>
|
|
|
<div className="adui-form-control">
|
|
|
<Space>
|
|
|
- <Select style={{ width: 120 }} value={shelfnewBtData.widgetTypeV2} onChange={(e) => { onSetShelfnewButton(e) }}>
|
|
|
- <Option value="link">跳转链接</Option>
|
|
|
- <Option value="gh">关注公众号</Option>
|
|
|
- <Option value="enterprise_wx_auto">添加商家微信</Option>
|
|
|
+ <Select style={{ width: 120 }} value={imgTextData.subElemType} onChange={(e) => { onSetShelfnewButton(e) }}>
|
|
|
+ {/* <Option value="link">跳转链接</Option> */}
|
|
|
+ <Option value="GH">关注公众号</Option>
|
|
|
+ <Option value="ENTERPRISE_WX">添加商家微信</Option>
|
|
|
</Select>
|
|
|
<Button type="link" size="small" onClick={() => { setImgTextButtonShow(true) }}>配置</Button>
|
|
|
</Space>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </>} */}
|
|
|
+ </>}
|
|
|
</div>
|
|
|
:
|
|
|
elementType === 'FLOAT_BUTTON' ? <div style={{ height: '100%' }}>
|
|
|
@@ -1928,13 +1681,13 @@ function AddLandingPage(props: Props) {
|
|
|
setSliderImgContent([])
|
|
|
setCcType(1)
|
|
|
setSelectImgVisible(true)
|
|
|
- }, [imgSize, scType, content, sliderImgContent])
|
|
|
+ }, [scType, content, sliderImgContent])
|
|
|
|
|
|
/** 选择视频 */
|
|
|
const clickUpdateVideo = useCallback(() => {
|
|
|
setCcType(2)
|
|
|
setSelectImgVisible(true)
|
|
|
- }, [imgSize, scType])
|
|
|
+ }, [scType])
|
|
|
|
|
|
/** 弹窗返回设置图片 */
|
|
|
const setImg = useCallback((value: any[]) => {
|
|
|
@@ -1974,18 +1727,15 @@ function AddLandingPage(props: Props) {
|
|
|
} else if (scType === 4) { // 设置图文复合组件图片
|
|
|
if (selectIndex !== -1) {
|
|
|
let selectCon = oldContent[selectIndex]
|
|
|
- if (selectCon?.type === '104') {
|
|
|
- let componentItem = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- componentItem[0] = {
|
|
|
- ...componentItem[0],
|
|
|
- pureImageUrl: value[0]?.content
|
|
|
- }
|
|
|
+ let length = selectCon?.imageTextItem?.length || 0
|
|
|
+ if (length === 1) {
|
|
|
+ let imageTextItem = selectCon?.imageTextItem[0]
|
|
|
+ imageTextItem.imageUrl = value[0]?.url
|
|
|
oldContent[selectIndex] = { ...selectCon }
|
|
|
dispatch({ type: 'setCon', params: { content: [...oldContent] } })
|
|
|
- } else if (selectCon?.type === '103') {
|
|
|
- let componentItem = selectCon?.layoutItems.componentItem[goodsCount]
|
|
|
- let shelfnewItem = componentItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
|
|
|
- shelfnewItem[0].pureImageUrl = value[0]?.content
|
|
|
+ } else if (length === 2) {
|
|
|
+ let imageTextItem = selectCon?.imageTextItem[goodsCount]
|
|
|
+ imageTextItem.imageUrl = value[0]?.url
|
|
|
oldContent[selectIndex] = { ...selectCon }
|
|
|
dispatch({ type: 'setCon', params: { content: [...oldContent] } })
|
|
|
}
|
|
|
@@ -2065,8 +1815,14 @@ function AddLandingPage(props: Props) {
|
|
|
message.error('客服组按钮按钮文案未填写')
|
|
|
return false
|
|
|
}
|
|
|
- } else if (item?.elementType === "shelfnew") {
|
|
|
- return true
|
|
|
+ } else if (item?.elementType === "IMAGE_TEXT") {
|
|
|
+ return item?.imageTextItem?.every((imageTextItem: ImageTextItem) => {
|
|
|
+ if (imageTextItem?.imageUrl && imageTextItem?.title && imageTextItem?.desc) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ message.error('请完善图文复合组件内容')
|
|
|
+ return false
|
|
|
+ })
|
|
|
} else {
|
|
|
return true
|
|
|
}
|
|
|
@@ -2133,7 +1889,21 @@ function AddLandingPage(props: Props) {
|
|
|
let { elementType, comptActive, activeIndex, ...data } = item
|
|
|
let typeKey = getTypeKey(elementType)
|
|
|
let newItem = { elementType }
|
|
|
- newItem[typeKey] = data
|
|
|
+ if (elementType === 'IMAGE_TEXT') {
|
|
|
+ let { imageTextItem, ...spec } = data as any
|
|
|
+ let newImageTextItem = imageTextItem?.map((item: any) => {
|
|
|
+ let { content, ...newItem } = item
|
|
|
+ let key = getTypeKey(newItem.subElemType)
|
|
|
+ newItem[key] = content
|
|
|
+ return newItem
|
|
|
+ })
|
|
|
+ newItem[typeKey] = {
|
|
|
+ ...spec,
|
|
|
+ imageTextItem: newImageTextItem
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ newItem[typeKey] = data
|
|
|
+ }
|
|
|
return newItem
|
|
|
})
|
|
|
|
|
|
@@ -2265,7 +2035,7 @@ function AddLandingPage(props: Props) {
|
|
|
</div>
|
|
|
<div className={style.title}>营销组件</div>
|
|
|
<div className={style.assembly}>
|
|
|
- {/* <div {...getDragPropsCon(`shelfnew`)}> <ImgText /> <span className="my">图文复合组件</span> </div> */}
|
|
|
+ {/* <div {...getDragPropsCon(`IMAGE_TEXT`)}> <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>
|
|
|
}
|
