system-copyright-react/src/components/CouponModal/HeadCouponModal.tsx

import { useEffect, useState } from 'react'
import './HeadCouponModal.css'
import { get } from '../../util/AjaxUtils'
import {
    Pagination,
    message,
    Empty,
    Spin
} from 'antd';
// import { useNavigate } from 'react-router-dom';
// import {  Empty } from 'antd'
// import contentImg from '../../static/coupon/content.png'
import useLogo from '../../static/coupon/useLogo.png'
import overdueImg from '../../static/coupon/overdueImg.png'
export default function HeadCouponModal(props: any) {
    const [messageApi, contextHolder] = message.useMessage();
    const [loading,setLoading] = useState(false)
    const [title, setTitle] = useState('未使用')
    // 分页
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    // 是否有效
    const [isEffective, setisEffective] = useState(1)
    const [isUsed, setisUsed] = useState(0)
    // 展示的优惠券数组
    const [couponArray, setCouponArray] = useState<any[]>([])
    // 获取优惠券信息
    const getCouponData = () => {
        get({
            messageApi,
            url: `/api/coupon/user/listpage/self`,
            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
            config: {
                params: {
                    page: page,
                    rows: 10,
                    isEffective,
                    isUsed,
                }
            },
            onBefore() {
                setLoading(true)
            },
            onSuccess(data: any) {
                setTotal(data.data.total)
                setCouponArray(data.data.rows)
            },
            onFinally() {
                setLoading(false)
            },
        })
    }
    useEffect(() => {
        getCouponData()
    }, [])
    useEffect(() => {
        getCouponData()
    }, [page, isEffective, isUsed])
    return (
        <div className='headModal'>
            {contextHolder}
            <div className='headModal-top'>
                <div className={title == '未使用' ? 'top-active' : 'top-title'}
                    onClick={() => {
                        setTitle('未使用')
                        setisUsed(0)
                        setisEffective(1)
                        setPage(1)
                    }}
                >未使用</div>
                <div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                    onClick={() => {
                        setTitle('已使用')
                        setisUsed(1)
                        setisEffective(1)
                        setPage(1)
                    }}
                >已使用</div>
                <div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                    onClick={() => {
                        setTitle('已过期')
                        setisUsed(0)
                        setisEffective(0)
                        setPage(1)
                    }}
                >已过期</div>
            </div>
            <div className='headModal-bot'>
                <Spin tip="加载中，请稍后..." size="small" spinning={loading}>
                    <div style={{ display: title == '未使用' ? 'block' : 'none' }}>
                        {couponArray.map((item) => {
                            return (
                                <div className='couponList' key={item.couponId}>
                                    <div className='content'>
                                        <div className='content-noUse-left'>
                                            <div className='content-left-num'>
                                                <div
                                                    style={{ marginTop: -10 }}
                                                >
                                                    <span style={{ fontSize: 30 }}>￥</span>
                                                    <span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div className='content-right'>
                                            <div className='content-text'>
                                                可购买平台内任意软著时使用
                                            </div>
                                            <div className='content-bot'>
                                                <div className='content-time'>
                                                    有效期:{item.coupon.gmtStart} 至 {item.coupon.gmtEnd}
                                                </div>
                                                <div className='content-button' onClick={() => {
                                                    props.closeModal()
                                                }}>
                                                    去使用
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            )
                        })}

                        <div style={{ display: couponArray.length > 10 ? 'unset' : 'none' }}>
                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                                <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false}
                                    onChange={(value) => {
                                        setPage(value)
                                    }}
                                />
                            </div>
                        </div>
                        <div style={{ display: couponArray.length <= 0 ? 'unset' : 'none' }}>
                            <div className='noDatebox'>
                                <Empty description="暂无    优惠券" />
                            </div>
                        </div>
                    </div>
                    <div style={{ display: title == '已使用' ? 'block' : 'none' }}>
                        {couponArray.map((item) => {
                            return (
                                <div className='couponList' key={item.couponId}>
                                    <div className='content'>
                                        <div className='content-use-left'>
                                            <div className='content-left-num'>
                                                <div
                                                    style={{ marginTop: -10 }}
                                                >
                                                    <span style={{ fontSize: 30 }}>￥</span>
                                                    <span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div className='content-right'>
                                            <div className='content-text' style={{ marginTop: 10 }}>
                                                可购买平台内任意软著时使用
                                            </div>
                                            <div className='content-bot' style={{ marginTop: 5 }}>
                                                <div className='content-time'>
                                                    有效期:{item.coupon.gmtStart} 至 {item.coupon.gmtEnd}
                                                </div>

                                            </div>
                                            <div className='content-projName'>
                                                {/* 使用的产品 */}
                                                {item.productName}
                                            </div>
                                        </div>

                                    </div>
                                    <div className='use-img'>
                                        <img src={useLogo} alt="" width={'100%'} height={'100%'} />
                                    </div>
                                </div>
                            )
                        })}
                        <div style={{ display: couponArray.length > 10 ? 'unset' : 'none' }}>
                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                                <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false}
                                    onChange={(value) => {
                                        setPage(value)
                                    }} />
                            </div>
                        </div>
                        <div style={{ display: couponArray.length <= 0 ? 'unset' : 'none' }}>
                            <div className='noDatebox'>
                                <Empty description="无已使用优惠券" />
                            </div>
                        </div>

                    </div>
                    <div style={{ display: title == '已过期' ? 'block' : 'none' }}>
                        {couponArray.map((item) => {
                            return (
                                <div className='couponList' key={item.couponId}>
                                    <div className='content'>
                                        <div className='content-use-left'>
                                            <div className='content-left-num'>
                                                <div
                                                    style={{ marginTop: -10 }}
                                                >
                                                    <span style={{ fontSize: 30 }}>￥</span>
                                                    <span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div className='content-right'>
                                            <div className='content-text'>
                                                可购买平台内任意软著时使用
                                            </div>
                                            <div className='content-bot'>
                                                <div className='content-time'>
                                                    有效期至:{item.coupon.gmtEnd}
                                                </div>
                                            </div>
                                        </div>
                                        <div className='use-img' style={{ height: 76, width: 88 }}>
                                            <img src={overdueImg} alt="" width={'100%'} height={'100%'} />
                                        </div>
                                    </div>


                                </div>
                            )
                        })}
                        <div style={{ display: couponArray.length > 10 ? 'unset' : 'none' }}>
                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                                <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false}
                                    onChange={(value) => {
                                        setPage(value)
                                    }}
                                />
                            </div>
                        </div>
                        <div style={{ display: couponArray.length <= 0 ? 'unset' : 'none' }}>
                            <div className='noDatebox'>
                                <Empty description="无已过期优惠券" />
                            </div>
                        </div>
                    </div>
                </Spin>
            </div>
        </div>
    )
}