taro-book/src/pages/book/bookDetails/index.tsx

import { Component } from 'react'
import { View, Text, Image, Navigator } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import './index.less'
import BookHead from '@src/components/PupPetry/BookHead'
import { Store } from '@src/app'
import Taro from '@tarojs/taro'
import useApi from '@src/Hook/useApi'
/**书详情 */

type state = {
}
interface Props {
    store: Store;
}
@inject('store')
@observer
class BookDetails extends Component<Props> {
    state: state = {
    }
    onShareAppMessage() {
        return {
            title: '我的好朋友',
            path: 'pages/book/bookDetails/index?bookId' + this.props.store.bookStore.openBookData?.bookId,
            imageUrl: this.props.store.bookStore.openBookData?.picUrl
        }
    }
    componentDidShow(options) {
        Taro.showShareMenu({
            showShareItems: ["shareAppMessage"],
            success: (res) => { console.log("成功") },
            fail: (err) => { console.log("err") }
        });
        let params = Taro.getCurrentInstance()?.router?.params
        let { bookStore, appInfoStore } = this.props.store
        // 获取书籍详情
        if (params?.bookId && !bookStore.openBookData) {
            let { getBookInfo } = useApi(appInfoStore)
            console.log("分享进入")
            getBookInfo(params.bookId)
            console.log(params?.bookId)
        }
    }
    render() {
        let { bookStore } = this.props.store
        let { openBookData } = bookStore
        let describe = `${openBookData?.bookName}·${openBookData?.wordCount ? (openBookData?.wordCount / 10000).toFixed(0) + "万字·" : ""}${openBookData?.bookStatus === 0 ? '连载' : '完本'}`
        return <>
            {
                <View className='book_details'>
                    <View className="details_top">
                        <View className='header'>
                            <View className="back">
                                <Image src={openBookData?.picUrl || ""} className="backImg" mode="widthFix" />
                            </View>
                            <View className="content">
                                <View className='left'>
                                    <Text className='title'>{openBookData?.bookName}</Text>
                                    <Text className='author'>{openBookData?.authorName}</Text>
                                    {/* bookDesc */}
                                    <Text className='author'>{describe}</Text>
                                    <View className='tags'>
                                        {
                                            openBookData?.labelInfoList?.map((item, index) => {
                                                return <Text className='tag' key={index}>{item.name}</Text>
                                            })
                                        }
                                    </View>
                                </View>
                                <View className='right'>
                                    <Image src={openBookData?.picUrl || ""} className='img' />
                                </View>
                            </View>
                        </View>


                        <BookHead title="简介" ></BookHead>
                        <View className='center'>
                            <Text>{openBookData?.bookDesc.replace(/\s/ig, '')}</Text>
                        </View>
                    </View>
                    <View className='btn'>
                        <Navigator url={`/pages/book/bookArticle/index?bookId=${openBookData?.bookId}`} hoverClass="none">
                            <Image src={require('../../../icon/btn.png')} className='img' />
                        </Navigator>
                    </View>
                </View>
            }

        </>
    }
}


export default BookDetails