taro-book/src/components/PupPetry/BookBox/BookboxRowSmall.tsx

/**书架中书籍的box容器横小 */

import { Text, View, Image, Button, Navigator } from "@tarojs/components";
import React from 'react'
import './index.less'

export interface BookboxRowSmallProps {
    book_id: number,  // 书ID
    book_name: string, // 书名
    category: string, //书类型
    cover: string, //封面
    intro: string,
    penname: string, // 作者
    sign: string,  //阅读人数
    section: string,//章节
    chapter_name?: string,
    chapter_id?: number
}
function BookboxRowSmall(props: BookboxRowSmallProps) {
    const { book_id, book_name, category, cover, penname, chapter_name, section, chapter_id } = props
    return <View className='book_box_row_small'>
        <Navigator url={`/pages/book/bookArticle/index?book_id=${book_id}&chapter_id=${chapter_id || ''}`} hoverClass="none">
            <Image src={cover} className='img'></Image>
            <View className='right'>
                <Text className='title'>{book_name}</Text>
                <View className='content'>
                    <View className='left'>
                        <Text className='author'>{penname}</Text>
                        <View className='bottom'>
                            {
                                chapter_name ? <>
                                    {/* <Text className='time'>{time}</Text> */}
                                    <Text className='section'>{chapter_name}</Text>
                                </>:<Text className='null'>未读</Text>
                            }
                        </View>
                    </View>
                    <Button className='btn' plain={true}>继续阅读</Button>
                </View>
            </View>
        </Navigator>
    </View>
}

export default React.memo(BookboxRowSmall)