distribution-management/src/pages/MiniApp/CompConfig/components/hot_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 HotBooks(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.hot_books}`}>
        <Header title={componentName || "今日热书"} showBtn={showRightButton} />
        {configs?.[0]?.bookInfo ? <>
            <div className={styles.top}>
                <span>
                    {configs?.[0]?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
                    <img src={configs?.[0]?.bookInfo?.picUrl} onError={(e: any) => {
                        e.target.src = localStorage.getItem("nocover")
                    }} />
                </span>
                <div>
                    <strong>{configs?.[0]?.bookInfo?.bookName || "书名"}</strong>
                    <span>{configs?.[0]?.bookInfo?.bookDesc || "描述"}</span>
                    <div>
                        <span>{configs?.[0]?.bookInfo?.authorInfo?.authorName || configs?.[0]?.bookInfo?.authorName }·{configs?.[0]?.bookInfo?.wordCount}万字·{configs?.[0]?.bookInfo?.bookStatus == 0 ? "连载中" : "完结"}</span>
                        <Tag >{configs?.[0]?.bookInfo?.labelInfoList?.[0]?.name}</Tag>
                    </div>
                </div>
            </div>
            <div className={styles.list}>
                {
                    configs?.filter((i: any, eq: number) => eq != 0)?.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>
}