index.js

import React, {Component} from 'react'
import './index.scss'
import {http} from '@/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