distribution-management/src/pages/MiniApp/CompConfig/components/guess_like.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 GuessLike(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_rec}`}>
        <Header title={componentName || "猜你喜欢"} showBtn={false} />
        {configs?.[0]?.bookInfo ? <>
            <div className={styles.list}>
                {
                    configs?.map((item: { bookInfo: any }, index: Key | null | undefined) => {
                        return <div className={styles.top} key={index}>
                            <span>
                                {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")
                                }} />
                            </span>
                            <div>
                                <strong>{item?.bookInfo?.bookName || "书名"}</strong>
                                <span>{item?.bookInfo?.bookDesc || "描述"}</span>
                                <div>
                                    <span>{item?.bookInfo?.authorInfo?.authorName || item?.bookInfo?.authorName}·{item?.bookInfo?.wordCount}万字·{item?.bookInfo?.bookStatus == 0 ? "连载中" : "完结"}</span>
                                    <Tag >{item?.bookInfo?.labelInfoList?.[0]?.name}</Tag>
                                </div>
                            </div>
                        </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>
}