distribution-management/src/pages/MiniApp/CompConfig/components/classic_books.tsx

import styles from './index.less'
import Header from "./header";
import { Empty, Tag } from "antd";
import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
import { MyIcon } from "@/global";
// 口碑佳作
export function ClassicBooks(props: {
    data: {
        appComponentId: number | string;
        componentType: string;
        showRightButton?: boolean;
        componentName?: string;
        remark?: string;
        configs?: any[];
    }
}) {
    const { data: { configs, componentName, showRightButton } } = props
    return <div className={`${styles.classic_books}`}>
        <Header title={componentName || "经典热书"} showBtn={showRightButton} />
        {configs?.[0]?.bookInfo ? <>
            <div className={styles.list}>
                {
                    configs?.map((item: { bookInfo: { vipFree: any, picUrl: string | undefined; bookName: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; }; }, index: Key | null | undefined) => {
                        return <div key={index} className={styles.box}>
                            <div>
                                {item?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
                                <img src={item?.bookInfo?.picUrl} onError={(e: any) => {
                                    e.target.src = localStorage.getItem("nocover")
                                }} />
                            </div>
                            <span>{item?.bookInfo?.bookName}</span>
                        </div>
                    })
                }
            </div>
        </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
        </div>
        }
    </div>
}