ad-manage/src/pages/launchSystemNew/components/lookLanding/index.tsx

import { Carousel, Drawer, Spin } from "antd";
import React, { useEffect, useMemo, useState } from "react"
import { ReactComponent as Topimg } from '@/assets/topimg.svg'
import { ReactComponent as Img } from '@/assets/img.svg'

import style from './index.less'
import '../addLandingPage/index1.less'
import { UserAddOutlined } from "@ant-design/icons";
import { useModel } from "umi";
import { getTypeKey } from "@/utils/utils";

type Props = {
    visible?: boolean,
    onClose?: () => void,
    id: number
}

/**
 * 查看落地页
 * @param props 
 * @returns 
 */
function LookLanding(props: Props) {
    let { visible, onClose, id } = props

    const [pageBackColor, setPageBackColor] = useState<string>('#FFFFFF') // 背景颜色
    const [content, setContent] = useState<any[]>([])  // 内容
    const [globalData, setGlobalData] = useState<any>([])  // 浮窗
    const { get } = useModel('useLaunchAdq.useBdMediaPup')

    useEffect(() => {
        if (id) {
            get.run({ sysMediaId: id, mediaType: 'PAGE' }).then(res => {
                if (res) {
                    const { pageSpecsList, globalSpec } = res
                    setPageBackColor(pageSpecsList[0]?.bgColor)
                    let pageElementsSpecList = pageSpecsList[0]?.pageElementsSpecList
                    setContent(pageElementsSpecList?.map((item: any) => {
                        let typeKey = getTypeKey(item?.elementType)
                        if (typeKey) {
                            let data = item[typeKey] || {}
                            return {
                                elementType: item?.elementType,
                                ...data
                            }
                        }
                        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)
                    }
                }
            })
        }
    }, [id])

    console.log('content---->', content)


    // 顶部组件
    const topCon = useMemo(() => {

        if (content?.length > 0) {
            let { imageUrl, elementType, imageUrlList, videoUrl } = content[0]
            return <>
                {
                    elementType === 'TOP_IMAGE' ? <>
                        <div className={`compt componentType41 ${content[0]?.comptActive && 'comptActive'}`}>
                            <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>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                    </> :
                        elementType === 'TOP_SLIDER' ? <>
                            <div className={`compt componentType101 ${content[0]?.comptActive && 'comptActive'}`}>
                                <div className={'componentWrap'}>
                                    <div className={'componentContent'}>
                                        <Carousel autoplay style={{ width: 375, height: 375 }}>
                                            {imageUrlList?.map((item: any, index: number) => {
                                                return <div style={{ width: 375, height: 375 }} key={index}><img style={{ width: 375, height: 375 }} src={item} /></div>
                                            })}
                                        </Carousel>
                                    </div>
                                </div>
                            </div>
                        </> :
                            elementType === 'TOP_VIDEO' ? <>
                                <div className={`compt componentType61 ${content[0]?.comptActive && 'comptActive'}`}>
                                    <div className={'componentWrap'}>
                                        <div className={'componentContent'}>
                                            {
                                                videoUrl && <div className="videoPlay">
                                                    <video src={videoUrl} style={{ display: 'block', width: '100%', margin: 0 }} />
                                                    <span></span>
                                                </div>
                                            }
                                        </div>
                                    </div>
                                </div>
                            </> : null
                }
            </>
        } else {
            return null
        }
    }, [content])

    const comptCon = () => {
        if (content?.length === 0) {
            return null
        } else {
            return <div className="page-0" style={globalData?.some((item: any) => item?.elementType === 'FLOAT_BUTTON') ? { paddingBottom: 90, minHeight: 510 } : {}}>
                {content.map((value: any, index: number) => {
                    if (value.elementType === 'IMAGE') {
                        let { imageUrl, paddingTop, paddingBottom } = value
                        return <div className={`compt componentType41`} key={index}>
                            <div className={'componentWrap'}>
                                <div className={'componentContent'}>
                                    {
                                        imageUrl ? <img src={imageUrl} style={{ display: 'block', width: '100%', margin: 0, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }} /> : <div className={'default'} style={{ width: 375, height: 222, margin: 0, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                                            <div className={'defaultIcon'} style={{ marginTop: 44 }}>
                                                <Img />
                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                    } else if (value.elementType === 'TEXT') {
                        let { fontSize, fontColor, textAlignment, text, fontStyle, paddingTop, paddingBottom } = value
                        return <div className={`compt componentType1`} key={index}>
                            <div className={'componentWrap'}>
                                <div className={'componentContent'} style={{ backgroundColor: pageBackColor }}>
                                    <div className={'text'} style={{ lineHeight: fontSize * 1.5 + 'px', fontSize: Number(fontSize), color: fontColor, textAlign: textAlignment === 0 ? 'left' : textAlignment === 1 ? 'center' : 'right', fontWeight: fontStyle === 0 ? 'normal' : 'bold', maxWidth: '100%', display: 'block', marginLeft: 24, marginRight: 24, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                                        <div>{text ?
                                            text?.split(/[\r\n]/g)?.map((item: any, index: number) => {
                                                if (item) {
                                                    return <div key={`item${index}`}>
                                                        {item?.split(' ')?.map((item1: any, ind: number) => {
                                                            if (item1) {
                                                                return <span key={`item1${ind}`}>{item1}</span>
                                                            } else {
                                                                return <span key={`item1${ind}`}>&nbsp;</span>
                                                            }
                                                        })}
                                                    </div>
                                                } else {
                                                    return <div key={`item${index}`}>&nbsp;</div>
                                                }
                                            })
                                            : '请输入文本内容'}</div>
                                    </div>
                                    <div className={'textAreaDiv'} style={{ lineHeight: fontSize * 1.5 + 'px', fontSize: Number(fontSize), margin: '11px 24px', marginLeft: 24, marginRight: 24, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                                        <textarea readOnly value={text} className={'textarea'} style={{ color: fontColor, fontWeight: fontStyle === 0 ? 'normal' : 'bold', textAlign: textAlignment === 0 ? 'left' : textAlignment === 1 ? 'center' : 'right', backgroundColor: pageBackColor }}></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    } else if (value.elementType === 'GH' || value.elementType === 'ENTERPRISE_WX') {
                        let { paddingTop, paddingBottom, btnTitle, fontColor, btnBgColorTheme, btnBorderColorTheme, btnFontType, useIcon } = value
                        return <div className={`compt componentType21`} key={index}>
                            <div className={'componentWrap'}>
                                <div className={'componentContent'}>
                                    <div style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                                        <div style={{ textAlign: 'center', lineHeight: 0, maxWidth: '100%', margin: '0 92.5px' }}>
                                            <a style={{
                                                textDecoration: 'none', color: fontColor || 'rgb(255,255,255)', backgroundColor: btnBgColorTheme || 'rgb(7, 193, 96)',
                                                border: ['#FFFFFF', '#ffffff', 'rgb(255, 255, 255)'].indexOf(btnBorderColorTheme) !== -1 ? '0px solid rgb(255, 255, 255)' : `2px solid ${btnBorderColorTheme}`, borderRadius: 4, display: 'flex', alignItems: 'center',
                                                overflow: 'hidden', justifyContent: 'center', whiteSpace: 'pre', fontWeight: btnFontType === 0 ? 'normal' : 'bold',
                                                height: 40, lineHeight: 40, width: '100%', fontSize: 15
                                            }}>{useIcon === '1' && <UserAddOutlined style={{ marginRight: 6 }} />}{btnTitle || ''}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    } else if (value?.elementType === 'shelfnew') {
                        let { paddingTop, paddingBottom, layoutItems, borderColor, bgColor, type, wxad_align, id } = value
                        if (type === '104') {
                            let componentItem = layoutItems?.componentItem[0]?.layoutItems?.componentItem
                            let otherData = componentItem[1]?.layoutItems?.componentItem
                            return <div className={`compt componentType104`} key={id}>
                                <div className={'componentWrap'}>
                                    <div className={'componentContent'}>
                                        <div className={'shelf listType'} style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px', marginLeft: 20, marginRight: 20 }}>
                                            <div className={'shelfItem'} style={{ border: `1px solid ${borderColor || "#e5e5e5"}`, backgroundColor: bgColor || "#ffffff" }}>
                                                <div className={'shelfItemImg'} style={{ marginLeft: 11.5, marginTop: 11.5 }}>
                                                    {componentItem[0]?.pureImageUrl ? <img src={componentItem[0]?.pureImageUrl} style={{ display: 'flex', width: '100%', height: '100%' }} /> : <div className={'default'} style={{ width: '100%', height: '100%' }}>
                                                        <div className={'defaultIcon'} style={{ marginTop: 27, width: 36, height: 36 }}>
                                                            <Img />
                                                        </div>
                                                    </div>}
                                                </div>
                                                <div className={'shelfItemContent'} style={{ margin: '12px 20px 0 12px' }}>
                                                    <p className={'title'} style={{ color: otherData[0]?.fontColor || "#353535", fontSize: 16 }}>{otherData[0]?.content || otherData[0]?.name}</p>
                                                    <p className={'desc'} style={{ color: otherData[1]?.fontColor || "#B2B2B2" }}>{otherData[1]?.content || otherData[1]?.name}</p>
                                                    <div
                                                        className={'btn'}
                                                        style={{
                                                            color: otherData[2]?.fontColor || 'rgb(255, 255, 255)',
                                                            textDecoration: 'none',
                                                            fontWeight: otherData[2]?.btnFontType === '0' ? 'normal' : 'bold',
                                                            backgroundColor: otherData[2]?.btnBgColorTheme || "#07C160",
                                                            border: ['#FFFFFF', '#ffffff', 'rgb(255, 255, 255)'].indexOf(otherData[2]?.btnBorderColorTheme) !== -1 ? '0px solid rgb(255, 255, 255)' : `2px solid ${otherData[2]?.btnBorderColorTheme}`,
                                                            borderRadius: 4
                                                        }}
                                                    >{otherData[2]?.btnTitle}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        } else if (type === '103') {
                            let componentItem = layoutItems?.componentItem
                            return <div className={`compt componentType103`} key={id}>
                                <div className={'componentWrap'}>
                                    <div className={'componentContent'}>
                                        <div className='shelf gridType' style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px', marginLeft: 20 }}>
                                            {
                                                componentItem?.map((item: any, index: number) => {
                                                    let shelfnewItem = item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                                                    return <div className='shelfItem-3q' key={index} style={{ borderWidth: 1, borderStyle: 'solid', borderColor: item?.borderColor, backgroundColor: item?.bgColor || 'rgb(255,255,255)', marginLeft: index === 1 ? 11 : 0 }}>
                                                        <div className='shelfItemImg' style={{ marginLeft: 5.5, marginTop: 5.5 }}>
                                                            {shelfnewItem[0]?.pureImageUrl ? <img src={shelfnewItem[0]?.pureImageUrl} style={{ display: 'flex', width: '100%', height: '100%' }} /> : <div className="default" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                                                <div className={'defaultIcon'} style={{ width: 36, height: 36 }}>
                                                                    <Img />
                                                                </div>
                                                            </div>}
                                                        </div>
                                                        <div className='shelfItemContent' style={{ marginLeft: 12, textAlign: wxad_align === 0 ? 'left' : 'center' }}>
                                                            <p className='title' style={{ color: shelfnewItem[1]?.fontColor || 'rgb(53, 53, 53)', fontSize: 16, marginBottom: 4 }}>{shelfnewItem[1]?.content || shelfnewItem[1]?.name}</p>
                                                            <p className='desc' style={{ color: shelfnewItem[2]?.fontColor || 'rgb(178, 178, 178)', marginBottom: 14 }}>{shelfnewItem[2]?.content || shelfnewItem[2]?.name}</p>
                                                            <p className='btn' style={{
                                                                textDecoration: 'none',
                                                                fontWeight: shelfnewItem[3]?.btnFontType === '0' ? 400 : 'bold',
                                                                color: shelfnewItem[3]?.fontColor || 'rgb(255, 255, 255)',
                                                                backgroundColor: shelfnewItem[3]?.btnBgColorTheme || 'rgb(7,193,96)',
                                                                borderWidth: shelfnewItem[3]?.borderSize ? Number(shelfnewItem[3]?.borderSize) : 0,
                                                                borderStyle: 'solid',
                                                                borderColor: shelfnewItem[3]?.btnBorderColorTheme,
                                                                borderRadius: 4
                                                            }}>{shelfnewItem[3]?.btnTitle}</p>
                                                        </div>
                                                    </div>
                                                })
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        } else {
                            return null
                        }
                    } else {
                        return null
                    }
                })}
                {globalData.map((value: any, index: number) => {
                    if (value?.elementType === 'FLOAT_BUTTON') {
                        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">
                                            {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>
                                                {(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',
                                                backgroundColor: componentItem?.btnBgColorTheme || 'rgb(7, 193, 96)',
                                                width: ((componentItem?.layoutWidth || 160) / 2) + 'px',
                                                textAlign: 'center',
                                                overflow: 'hidden',
                                                whiteSpace: 'pre'
                                            }}>{componentItem?.btnTitle}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                    return null
                })}
            </div>
        }
    }

    return <Drawer
        title="查看"
        placement="right"
        closable={false}
        onClose={() => { onClose && onClose() }}
        visible={visible}
        width={420}
    >
        <Spin spinning={get.loading}>
            <div className={style.page} style={{ backgroundColor: pageBackColor || '#FFFFFF' }}>
                {/* 头部 */}
                {topCon}
                {/* 内容*/}
                <div className={`comptPlaceholder lastChild`} id="comptCon">
                    {comptCon()}
                </div>
            </div>
        </Spin>
    </Drawer>
}

export default React.memo(LookLanding)