courselist.js

/* eslint-disable default-case */
import React, { Component } from "react"
import { VList } from "../../common"
import { Tabs, WhiteSpace, Toast } from "antd-mobile"
import "./courselist.scss"
import HeaderSearch from "../../common/HeaderSearch/index"
import { http, getParam } from "src/utils"
import Loading from "src/common/Loading"
import { connect } from "react-redux"
import { StickyContainer, Sticky } from "react-sticky"

function stopScroll(e) {
  e.preventDefault()
}

@connect(({ user }) => ({
  user,
}))
class Classify extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ispull: false,
      display: "none",
      // arr: [{ basics: [] }, { advanced: [] }],
      arr: [{ basics: [] }],

      allClass: [],
      data: [],
      activeTab: decodeURIComponent(getParam("name")),
      isLoading: true,
      top: 44,
    }
  }

  componentDidMount() {
    this.getTabs()
    this.getList()

    const el = document.querySelector(".search-nav")
    this.setState({
      top: el.offsetHeight,
    })
  }

  componentWillUnmount() {
    document.removeEventListener("touchmove", stopScroll)
  }

  // 获取tabs接口
  // getTabs = () => {
  //   let data = 0
  //   http
  //     .get(`${API.home}/m/course/classify/${data}`)
  //     .then((res) => {
  //       const _this = this
  //       if (res.data.code === 200) {
  //         if (res.data.data.common.length > 0) {
  //           console.log(res.data.data.common)
  //           let arr = ["basics", "advanced"]
  //           let arr2 = [{ basics: [] }, { advanced: [] }]
  //           let arr3 = []
  //           arr.forEach(function (item, index) {
  //             arr2[item] = res.data.data.common[index]
  //             res.data.data.common[index].list.forEach(function (item, index) {
  //               arr3.push({ title: item.c_name, id: item.c_id })
  //             })
  //           })
  //           _this.setState({
  //             arr: arr2,
  //             allClass: arr3,
  //           })
  //         }
  //       } else {
  //         Toast.info(res.data.msg, 2)
  //       }
  //     })
  //     .catch((err) => {
  //       console.log(err)
  //     })
  // }
  getTabs = () => {
    let data = 0
    http
      .get(`${API.home}/m/course/classify/${data}`)
      .then((res) => {
        const _this = this
        if (res.data.code === 200) {
          if (res.data.data.common.length > 0) {
            console.log(res.data.data.common[0].list)
            let arr = ["basics"]
            let arr2 = [{ basics: [] }]
            let arr3 = []
            arr.forEach(function (item, index) {
              arr2[item] = res.data.data.common[index]
              res.data.data.common[index].list.forEach(function (item, index) {
                arr3.push({ title: item.c_name, id: item.c_id })
              })
            })
            _this.setState({
              arr: res.data.data.common,
              allClass: arr3,
            })
          }
          console.log(this.state.arr.basics,999)

        } else {
          Toast.info(res.data.msg, 2)
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }

  // 获取课程接口
  getList = () => {
    const _this = this
    _this.setState((state, props) => ({
      isLoading: true,
    }))
    http.get(`${API.home}/m/course/list/${getParam("id")}`).then((res) => {
      if (res.data.code === 200) {
        _this.setState({
          data: res.data.data,
          isLoading: false,
        })
      }
    })
  }

  // 点击横向滚动tab查询
  ontabclick = (tab) => {
    this.props.history.push(`/courselist?id=${tab.id}&name=${tab.title}`)
    this.getList()
    this.setState({
      activeTab: decodeURIComponent(getParam("name")),
    })
  }

  // 上下展示
  pulldown = () => {
    this.setState(
      (status) => ({
        ispull: !status.ispull,
        display: status.ispull ? "none" : "block",
      }),
      () => {
        this.state.ispull
          ? document.addEventListener("touchmove", stopScroll, {
              passive: false,
            })
          : document.removeEventListener("touchmove", stopScroll)
      }
    )
  }

  // 弹窗里面tab点击查询
  labelclick = (item) => {
    this.props.history.push(`/courselist?id=${item.c_id}&name=${item.c_name}`)
    this.getList()
    this.setState((status) => ({
      ispull: !status.ispull,
      display: status.ispull ? "none" : "block",
      activeTab: decodeURIComponent(getParam("name")),
    }))
  }

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

  toClassify = () => {
    this.props.history.replace("/classify")
  }

  render() {
    const { user = {} } = this.props
    let isLogin = user.data && user.data.uid ? true : false
    const bottom = <i className={"iconfont iconiconfront-69 pull-down"}></i>
    const top = <i className={"iconfont iconiconfront-71 pull-down"}></i>

    let page = this.state.allClass.findIndex(
      (item) => item.title === this.state.activeTab
    )
    return (
      <div className="class-child">
        <HeaderSearch isLogin={isLogin} toHref={this.toClassify} />
        <Loading isLoading={this.state.isLoading}>
          <div className="class-content">
            {/* <WhiteSpace/> */}
            <div onClick={this.pulldown.bind(this)}>
              {this.state.ispull ? top : bottom}
            </div>
            <StickyContainer>
              {/* <Tabs
                                tabs={this.state.allClass}
                                animated={false}
                                page={page}
                                onChange={(tab) => this.ontabclick(tab)}
                                renderTabBar={props => <div className={'custom-render-bar'}>
                                    <Tabs.DefaultTabBar {...props}/>
                                </div>}
                            > */}
              <Tabs
                tabs={this.state.allClass}
                animated={false}
                page={page}
                onChange={(tab) => this.ontabclick(tab)}
                renderTabBar={(props) => {
                  return (
                    <Sticky>
                      {({ style }) => {
                        return (
                          <div
                            style={{
                              ...style,
                              top: `${this.state.top}px`,
                              zIndex: 1,
                            }}
                          >
                            <Tabs.DefaultTabBar {...props} />
                          </div>
                        )
                      }}
                    </Sticky>
                  )
                }}
              >
                <div className="tabs">
                  <ul>
                    {this.state.data &&
                      this.state.data.length > 0 &&
                      this.state.data.map((item, index) => {
                        const Info = (
                          <div className="info">
                            <p
                              className="title text-overflow-2"
                              onClick={() =>
                                this.toCourseDetail(item.course_id)
                              }
                            >
                              {item.course_title}
                            </p>
                            <p className="contact text-overflow-1">
                              {item.desc}
                            </p>
                            <div className="des">
                              {item.is_restricted ? (
                                <LimitFree course={item} />
                              ) : item.is_buy ? (
                                <span className="isbuy">已购买</span>
                              ) : (
                                <p className="course-price">
                                  <span className="new">¥{item.price1}</span>
                                  <span className="old">¥{item.price0}</span>
                                </p>
                              )}
                            </div>
                          </div>
                        )
                        const status = !item.is_buy && (
                          <div>
                            {item.bargain_num === 0 &&
                              item.groupon_num !== 0 && (
                                <p className="course-status">
                                  拼团减{item.groupon_num}元
                                </p>
                              )}
                            {item.bargain_num !== 0 &&
                              item.groupon_num === 0 && (
                                <p className="course-status">
                                  砍价减{item.bargain_num}元
                                </p>
                              )}
                            {item.is_aist && (
                              <span className="return_cash"></span>
                            )}
                          </div>
                        )
                        return (
                          <VList
                            key={index}
                            status={status}
                            img={item.image_name}
                            id={item.course_id}
                            info={Info}
                            toDetail={this.toCourseDetail}
                          />
                        )
                      })}
                  </ul>
                </div>
              </Tabs>
            </StickyContainer>
            <WhiteSpace />
          </div>
          <div className="mbc-box" style={{ display: this.state.display }}>
            {this.state.arr!==[] && (
              <div className="tabcontent">
                <ClassCourse
                  activeTab={this.state.activeTab}
                  data={this.state.arr[0].list}
                  title={this.state.arr[0].name}
                  labelclick={this.labelclick}
                />
                {/* <ClassCourse
                  activeTab={this.state.activeTab}
                  data={this.state.arr.advanced.list}
                  title={this.state.arr.advanced.name}
                  labelclick={this.labelclick}
                /> */}
              </div>
            )}
          </div>
        </Loading>
      </div>
    )
  }
}

function ClassCourse(props) {
  return (
    <div className="class-course">
      <p className="course-items-title">{props.title}</p>
      <div className="items-box">
        {props.data &&
          props.data.length > 0 &&
          props.data.map((item, index) => {
            return (
              <span
                className={
                  props.activeTab === item.c_name
                    ? "active-label"
                    : "item-label"
                }
                key={index}
                onClick={(e) => props.labelclick(item)}
              >
                {item.c_name}
              </span>
            )
          })}
      </div>
    </div>
  )
}

function LimitFreeStatus({ course }) {
  /*
   *  limit-free-status: 0-未领取 1-已领取 2-已过期
   *
   * */
  switch (course.limit_free_status) {
    case 0:
      return (
        <div className="limit-free">
          <span>限时免费</span>
          <span>¥{course.price0}</span>
        </div>
      )
    case 1:
      return <div>已领取</div>
    case 2:
      return (
        <p className="course-price">
          <span className="new">¥{course.price1}</span>
          <span className="old">¥{course.price0}</span>
        </p>
      )
  }
}

function LimitFree({ course }) {
  if (course.is_buy) {
    if (course.limit_free_status === 1) {
      return <div className={"isbuy"}>已领取</div>
    } else {
      return <div className={"isbuy"}>已购买</div>
    }
  } else {
    return <LimitFreeStatus course={course} />
  }
}

export default Classify