第三个

import React, { Component } from 'react'
import axios from 'axios';
import "./itemdetail.scss"
// import "../../../public/out.css"
class ItemDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            pinPlist: [],//评论数组
            pinlunNUm:0,//评论数量
            pageIndex: 0,
            pageSize: 10,
            clientId: '',
            quantity: 1, //数量 接口的参数
            alldata: {
                material: [], // 食用材料
                step: [], //步骤
                dish: {
                    data: [] //作业
                },
            },
            Randcontent: []
        }
    }
    //绑定输入框的数量
    inputchange(e) {
        let value = e.targrt.value
        this.setState({
            quantity: value
        })
    }
    //加号
    addNum() {
        this.setState({
            quantity: this.state.quantity + 1
        }, () => {
            this.getDetail()
        })
    }
    //减号
    jian() {
        let num = this.state.quantity
        num -= 1
        if (num < 1) {
            num = 1
        }
        this.setState({
            quantity: num
        }, () => {
            this.getDetail()
        })
    }
    //点赞
    giveaLike(item) {
        var formData = new FormData()
        let obj = {
            contentId: item,
            csrfToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc4NDAyNTAxOSwiaWF0IjoxNTk0NzIyNjE5fQ.yYoxfvv1ci1UdiDPxr2WpntU1Ib2rFZnFtRBYmq7XGg'
        }
        for (const key in obj) {
            formData.append(key, obj[key])
        }
        axios.post('https://api.hongbeibang.com/v2/content/like?_t=1595386213653', formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(function (res) {
            console.log(res)
        }).catch(function (error) {
            console.log(error)
        })
    }
    //评论
    getcomment() {
        let _this = this
        axios.get(`https://api.hongbeibang.com/comment/getFloor?pageIndex=${this.state.pageIndex}&pageSize=500&contentId=7430792`)
            .then(function (res) {
                console.log(res.data.data.data)
                _this.setState({
                    pinPlist: res.data.data.data,
                    pinlunNUm:res.data.data.count
                })
            })
            .catch(function (error) {
                console.log(error)
        })
    }
    getChildren = (data) => {
        return data.map((item, index) => {
            if (item.comments) {
                return (
                    <div key={index}>
                        {item.clientName}:{item.coverSummary}
                    </div>
                )
            }
        })
    }
    getMenuNodes = (menuList) => {
        return menuList.map((item, index) => {
            // if(!item.comments){
            //     return (
            //         <div key={index} className="pinglun-item">
            //             <img src={item.clientImage} alt=""/>
            //             <span>{item.clientName}</span>
            //             <span>{item.createTime}</span>
            //             <div>
            //                 {item.coverSummary}
            //             </div>
            //         </div>
            //     )
            // }else{
            return (
                <div key={index} className="pinglun-item">
                    <img src={item.clientImage} alt="" />
                    <span>{item.clientName}</span>
                    <span>{item.createTime}</span>
                    <div>
                        {item.coverSummary}
                    </div>
                    <div className="huifu">
                        {
                            // this.getChildren(item.comments.data)
                            item.comments.data.map((item, index) => {
                                return (
                                    <div key={index}>
                                        {item.clientName}:{item.coverSummary}
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            )
            // }
        })
    }
    render() {
        return (
            <div className="itemDetail">
                <div className="itemDetail_header">
                    <span><img src={require('../image/back.png')} alt="" /></span>
                    <div className="itemDetail_header-right">
                        <div className="itemDetail_header-rightbtn">收藏</div>
                    </div>
                </div>
                <div className="itemDetail_content">
                    <div className="itemDetail_content1">
                        <div className="imgandName">
                            <img src={this.state.alldata.image} alt="" />
                            <div className="itemName">{this.state.alldata.coverTitle}</div>
                            <div className="personName">
                                <div className="care-btn">+关注</div>
                                <div className="head-image">
                                    <img src={this.state.alldata.clientImage} alt="" />
                                </div>
                                <div className="personName-name">
                                    <div>{this.state.alldata.clientName}</div>
                                </div>
                                <div className="message-personName">
                                    {this.state.alldata.coverSummary}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="itemDetail_content2">
                        <div className="eat-materials">食用材料</div>
                        <div className="computed">
                            <div className="jiajian">
                                <div className="jia" onClick={this.jian.bind(this)}>
                                    <div></div>
                                </div>
                                <div className="showinput">
                                    <input type="text" value={this.state.quantity} onChange={this.inputchange.bind(this)} />
                                </div>
                                <div className="jian" onClick={this.addNum.bind(this)}>
                                    <div className="div1"></div>
                                    <div className="div2"></div>
                                </div>
                            </div>
                        </div>
                        <div className="usenum">
                            {
                                this.state.alldata.material.map((item, index) => {
                                    return (
                                        <div className="useitem" key={index}>
                                            <div className="useritem-name">{item.name}</div>
                                            <div className="useritem-name">{item.weight}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="steps">
                            {
                                this.state.alldata.step.map((item, index) => {
                                    return (
                                        <div className="step-item" key={index}>
                                            <div className="step-item-name">步骤{index + 1}</div>
                                            <img src={item.image} alt="" />
                                            <div className="step-item-tips">{item.text}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="small-tip">
                            小贴士
                        </div>
                        <div className="tip-content">{this.state.alldata.tip}</div>

                    </div>
                    <div className="homework">
                        <div className="homework-title">
                            <div className="homework-title_left">作业</div>
                            <div className="homework-title_right">查看全部</div>
                        </div>
                        <div className="homework-content">
                            <div className="content-out">
                                <div className="content-inside">
                                    {
                                        this.state.alldata.dish.data.map((item, index) => {
                                            return (
                                                <div className="homework-item" key={index}>
                                                    <img className="first-img" src={item.coverImage} alt="" />
                                                    <div className="person-img">
                                                        <img src={item.clientImage} alt="" />
                                                        <span className="client-name">{item.clientName}</span>
                                                    </div>
                                                    <div className="homework-item_tip">{item.coverSummary}</div>
                                                    <div className="zan" onClick={this.giveaLike.bind(this, item.contentId)}>
                                                        <img src={require('../image/zan.png')} alt="" />
                                                        <span className="zannum">{item.likeNum}</span>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* 推荐 */}
                    {/* <div>
                        <div>推荐</div>
                        {
                            this.state.Randcontent.map((item,index)=>{
                                return(
                                    <div key={index}>
                                        <img src={item.coverImage} alt=""/>
                                        <div>{item.buyNum}在学</div>
                                        <div>{item.coverTitle}底下的字</div>
                                    </div>
                                )
                        })}
                    </div> */}
                    {/* 评论 */}
                    <div className="pinglun">
                        <div>
                            {/* 点赞数在 最开始的第一个接口里 */}
                            <span>点赞数：{this.state.alldata.likeNum}</span>
                            {/* 打赏数在 最开始的第一个接口里 */}
                            <span>打赏数{this.state.alldata.rewardNum}</span>
                            {/* 评论数在评论的接口里 */}
                            <span>评论数{this.state.pinlunNUm}</span>
                        </div>
                        {
                            this.state.pinPlist.map((item, index) => {
                                return (
                                    <div key={index} className="pinglun-item">
                                        <img src={item.clientImage} alt="" />
                                        <span>{item.clientName}</span>
                                        <span>{item.createTime}</span>
                                        <div>
                                            {item.coverSummary}
                                        </div>
                                        <div className="huifu">
                                            {
                                                item.comments.data.map((item1, index1) => {
                                                    return (
                                                        <div key={index1}>
                                                            {item1.clientName}回复{item1.commentClientName}:{item1.coverSummary}
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
    //整体数据的接口
    getDetail() {
        let _this = this
        axios.get(`https://api.hongbeibang.com/recipe/get?contentId=${this.props.match.params.id}&quantity=${this.state.quantity}`)
            .then(function (res) {
                _this.setState({
                    alldata: res.data.data.recipe,
                })
                // 拿到clienId 传给作者食谱那个方法
                _this.getauthorRecipe(res.data.data.recipe.clientId)
            })
            .catch(function (error) {
                console.log(error)
            })
    }
    //作者食谱的接口方法，
    getauthorRecipe(id) {
        let _this = this
        axios.get(`https://api.hongbeibang.com/client/getRecipe?pageIndex=0&pageSize=10&clientId=${id}`)
            .then(function (res) {
                // console.log(res.data.data.cookClient.recipe.data)
            })
            .catch(function (error) {
                console.log(error)
            })
    }
    //推荐
    getRandcontent() {
        let _this = this
        axios.get(`https://api.hongbeibang.com/recommend/getRandContent?type=3&pageSize=10
        `)
            .then(function (res) {
                _this.setState({
                    Randcontent: res.data.data.data
                }, () => {
                    // console.log(_this.state.Randcontent)
                })
            })
            .catch(function (error) {
                console.log(error)
            })
    }
    componentDidMount() {
        this.getDetail()
        this.getcomment()
        this.getRandcontent()
    }
}

export default ItemDetail