search-result.js

import React, { PureComponent } from "react"
import SearchHeader from "./searchHead"
import VList from "src/common/VList"
import { http, getParam } from "src/utils"
import "./search-result.scss"
import Recommendation from "./recommendation"
import throttle from "lodash/throttle"

const ForwardRefSearchHead = React.forwardRef((props, ref) => {
  return <SearchHeader {...props} forwardedRef={ref} />
})

const Bottom = ({ item }) => {
  return (
    <div className="bottom">
      <span className="price">¥{item.price1}</span>
      <span className="stale-price">¥{item.price0}</span>
    </div>
  )
}

class SearchResult extends PureComponent {
  prevScrollY = 0
  searchHead = React.createRef()
  swipeUp = "up"
  swipeDown = "down"

  state = {
    courseList: [],
    value: decodeURIComponent(getParam("word")) || "",
    searchHistory: JSON.parse(localStorage.getItem("searchHistory")) || [],
    fixedHeader: false,
    searchHeadStyle: { top: 0 },
    swipeDirection: this.swipeUp,
    isHide: false,
    basicTop: 0,
    resultCount: 0,
  }

  componentDidMount() {
    this.getCourses(getParam("word"))
    document.addEventListener("scroll", this.handleScroll)
  }

  componentWillUnmount() {
    document.removeEventListener("scroll", this.handleScroll)
  }

  getCourses = (word) => {
    http
      .get(`${API["search-api"]}/search/${word}?type=v2-course&page=1`)
      .then((res) => {
        const data = res.data

        if (data.errno === 0) {
          this.setState({
            courseList: data.data.info["search_data"].course,
            resultCount: data.data.info["search_data"].num,
          })
        }
      })
  }

  handleClick = (id) => {
    this.props.history.push(`/detail?id=${id}`)
  }

  handleSearch = () => {
    this.state.value && this.getCourses(this.state.value)
  }

  handleChange = (value) => {
    this.setState({ value })
  }

  toCourseDetail = (id) => {
    const { history } = this.props
    history.push(`/detail?id=${id}`)
  }

  handleScroll = throttle(() => {
    let y = window.scrollY < 0 ? 0 : window.scrollY,
      h = this.searchHead.current.offsetHeight
    if (y > this.prevScrollY) {
      this.setState({
        searchHeadStyle: {
          top: `${-h}px`,
        },
      })
    }
    if (y < this.prevScrollY) {
      this.setState({
        searchHeadStyle: {
          top: 0,
        },
      })
    }
    // if (y < this.prevScrollY) {
    //     if (this.state.swipeDirection === this.swipeDown) {
    //         y <= headY && this.state.searchHeadStyle.position !== 'fixed' &&
    //         this.setState({
    //             searchHeadStyle: {
    //                 top: `0`,
    //                 position: 'fixed'
    //             }
    //         })
    //     } else {
    //         this.setState({
    //             swipeDirection: this.swipeDown
    //         }, () => {
    //             if (this.state.swipeDirection === this.swipeDown) {
    //                 let h = y > document.querySelector('body').offsetHeight? document.querySelector('body').offsetHeight: y;
    //                 let h1 = this.searchHead.current.offsetHeight
    //                     this.setState({
    //                         searchHeadStyle: {
    //                             // top: `${h > headY ? h - h1 : h}px`
    //                             top: `${y}px`
    //                         }
    //                     })

    //             }
    //         })
    //     }
    // } else {
    //     this.state.swipeDirection !== this.swipeUp &&
    //     this.setState({
    //         swipeDirection: this.swipeUp,
    //         searchHeadStyle: {
    //             position: 'absolute',
    //             top: `${y}px`
    //         }
    //     })
    // }
    this.prevScrollY = y
  }, 0)

  render() {
    const { courseList, isHide, resultCount } = this.state

    return (
      <div className={"search-result"}>
        <ForwardRefSearchHead
          handleSearch={this.handleSearch}
          value={this.state.value}
          handleChange={this.handleChange}
          searchHistory={this.state.searchHistory}
          style={this.state.searchHeadStyle}
          ref={this.searchHead}
          isHide={isHide}
        />
        {resultCount > 0 && (
          <div className="result-count">共{resultCount}个结果</div>
        )}
        {courseList && courseList.length > 0 ? (
          <ul>
            {courseList.map((item, index) => {
              const Info = (
                <div className="info">
                  <p
                    className="title text-overflow-2"
                    dangerouslySetInnerHTML={{
                      __html:
                        item.highlight?.course_title?.length > 0
                          ? item.highlight.course_title[0]
                          : item.course_title,
                    }}
                  ></p>
                  <p className="des text-overflow-1">
                    {item.simpledescription}
                  </p>
                  <Bottom item={item} />
                </div>
              )
              const status =
                item["bargain_num"] || item["groupon_num"] ? (
                  <div className="status">
                    {item["bargain_num"] === 0
                      ? `砍价减${item["groupon_num"]}元`
                      : `拼团减${item["bargain_num"]}元`}
                  </div>
                ) : null
              return (
                <VList
                  img={item.image_name}
                  toDetail={this.toCourseDetail}
                  key={index}
                  info={Info}
                  id={item["course_id"]}
                  status={status}
                />
              )
            })}
          </ul>
        ) : (
          <div className="empty">
            <img src={require("./image/ss_empty.png")} alt="" />
            抱歉，没有搜到相关内容！
          </div>
        )}
        <Recommendation />
      </div>
    )
  }
}

export default SearchResult