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'
import BookStore from "@src/store/book"
import { setReadLog } from "@src/utils/loginSto";
export interface BookboxRowSmallProps {
    bookId: number,//书ID
    authorName: string,//作者
    bookName: string,//书名称
    bookDesc: string,//描述
    picUrl: string,//封面
    bookStatus: number,//完本|连载状态
    wordCount: number,//字数
    labelInfoList: { name: string }[],//标签
    readLogId: string,//上次阅读的记录
}
function BookboxRowSmall(props: BookboxRowSmallProps) {
    const { bookName, picUrl, bookDesc, labelInfoList, authorName, bookId, wordCount, bookStatus, readLogId } = props
    const click = () => {
        BookStore.setData({ openBookData: props })
        if (readLogId) {
            setReadLog({ [bookId]: readLogId })
        }
    }
    return <View className='book_box_row_small' onClick={click} style={{ margin: 0 }}>
        <Navigator url={`/pages/book/bookArticle/index?bookId=${bookId}}`} hoverClass="none">
            <Image src={picUrl} className='img'></Image>
            <View className='right'>
                <Text className='title'>{bookName}</Text>
                <View className='content'>
                    <View className='left'>
                        <Text className='author'>{authorName}</Text>
                        <View className='bottom'>
                            {
                                true ? <>
                                    <Text className='time'>{123}</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)