index.js

import React, { Component } from "react"
import { WingBlank } from "antd-mobile"

import "./index.scss"
import { getParam, http } from "src/utils"

// 课程页面滚动广告
class Barrage extends Component {
  timer
  barageTimer

  constructor(props) {
    super(props)
    this.state = {
      list: [],
      isShowBarrage: false,
    }
  }

  setupBarrage = () => {
    const periods = [
      { start: 0, end: 7, interval: 60000 },
      { start: 7, end: 8, interval: 30000 },
      { start: 8, end: 23, interval: 15000 },
      { start: 23, end: 24, interval: 30000 },
    ]
    const now = new Date(Date.now()).getHours()
    for (let period of periods) {
      if (now >= period.start && now <= period.end) {
        this.timer = setTimeout(() => {
          this.getList()
        }, period.interval)
        break
      }
    }
  }

  componentDidUpdate(prevProps) {
    const { isShow } = this.props
    const { isShow: prevIsShow } = prevProps
    if (prevIsShow !== isShow && isShow !== undefined) {
      if (isShow) {
        setTimeout(() => {
          this.getList()
        }, 5000)
      }
      this.componentDidUpdate = null
    }
  }

  componentWillUnmount() {
    this.timer && clearTimeout(this.timer)
    this.barageTimer && clearTimeout(this.barageTimer)
  }

  // 获取课程接口
  getList = () => {
    let data = {
      course_id: getParam("id"),
    }
    http.post(`${API.home}/m/course/barrages`, data).then((res) => {
      if (res.data.code === 200) {
        this.setState(
          {
            list: res.data.data,
            isShowBarrage: true,
          },
          () => {
            this.barageTimer = setTimeout(() => {
              this.setState({ isShowBarrage: !this.state.isShowBarrage })
              this.setupBarrage()
            }, 5000)
          }
        )
      }
    })
  }

  render() {
    return (
      <WingBlank>
        <div
          className="my-carousel"
          style={{ opacity: this.state.isShowBarrage ? 1 : 0 }}
        >
          {this.state.list && (
            <div className="v-item text-overflow-one">
              <img src={this.state.list.avatar} alt="" />
              {this.state.list.user_name} {this.state.list.live_msg}
            </div>
          )}
        </div>
        {/*
                <Carousel className="my-carousel"
                          vertical
                          dots={false}
                          autoplay
                          infinite
                >
                    {
                        this.state.list &&
                        <div className="v-item text-overflow-one">
                            <img src={this.state.list.avatar} alt=""/>
                            {this.state.list.user_name} {this.state.list.live_msg}
                        </div>
                    }

                </Carousel>
*/}
      </WingBlank>
    )
  }
}

export default Barrage