index.js

import React, { Component } from "react"
import "./index.scss"
import { http } from "src/utils"
import { Link } from "react-router-dom"
import { Toast } from "antd-mobile"

class ExpandActiveToast extends Component {
  constructor(props) {
    super(props)
    this.state = {
      expandLength: 0,
      isShowExpand: true,
    }
  }

  componentDidMount() {
    http.get(`${API["base-api"]}/sys/deposit/notice`).then((res) => {
      if (res.data.errno == 200) {
        const { data } = res.data
        this.setState({
          expandLength: data.num,
        })
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
  cleseExpand = () => {
    this.setState({ isShowExpand: false })
  }

  render() {
    return (
      <div>
        {this.state.expandLength > 0 && this.state.isShowExpand && (
          <div className="expand-active-toast">
            <img
              src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/guanggao.png"
              alt=""
            />
            <div className="expand-toast-swiper">
              <p>
                您有<span className="red">{this.state.expandLength}个</span>
                待支付尾款的课程 再不支付就要过期了！
              </p>
            </div>
            <Link to="/final-deposit-order?source=1">查看</Link>

            <img
              onClick={(e) => this.cleseExpand()}
              src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/guanbi.png"
              alt=""
            />
          </div>
        )}
      </div>
    )
  }
}

export default ExpandActiveToast