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

import { useEffect, useState } from 'react'
import './HeadCouponModal.css'
import {
    get,
    getCouponUrl
} 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<any>(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(null)
                        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' }}>
                        {/* <div className='couponList' >
                            <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 }}>100</span>
                                        </div>

                                    </div>
                                </div>
                                <div className='content-right'>
                                    <div style={{ display: 'flex', marginTop: 20, justifyContent: 'space-between' }}>
                                        <div className='content-text'>
                                            可购买平台内任意软著时使用
                                        </div>
                                        <div className='content-rule' onClick={() => {
                                            //   window.open('https://www.aimzhu.com/CouponRule.html')

                                            getCouponUrl()
                                        }}>
                                            使用规则
                                        </div>
                                    </div>
                                    <div className='content-bot'>
                                        <div className='content-time'>
                                            有效期:2008 至 2008
                                        </div>

                                        <div className='content-button' onClick={() => {
                                            props.closeModal()
                                        }}>
                                            去使用
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div> */}
                        {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 style={{ display: 'flex', marginTop: 20, justifyContent: 'space-between' }}>
                                                <div className='content-text'>
                                                    可购买平台内任意软著时使用
                                                </div>
                                                <div className='content-rule' onClick={() => {
                                                    //   window.open('https://www.aimzhu.com/CouponRule.html')

                                                    getCouponUrl()
                                                }}>
                                                    使用规则
                                                </div>
                                            </div>
                                            <div className='content-bot'>
                                                <div className='content-time'>
                                                    有效期 : {item.coupon.useGmtStart} 至 {item.coupon.useGmtEnd}
                                                </div>
                                                <div className='content-button'

                                                    style={{
                                                        background: item.coupon.isEffective ? '#1677FF' : '#d3d3d3',
                                                        cursor: item.coupon.isEffective ? 'pointer' : 'not-allowed',

                                                    }}
                                                    onClick={() => {
                                                        if (item.coupon.isEffective) {
                                                            props.closeModal()
                                                        }
                                                    }}
                                                    title={item.coupon.isEffective ? '' : '不在有效期'}
                                                >
                                                    去使用
                                                </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.useGmtStart} 至 {item.coupon.useGmtEnd}
                                                </div>

                                            </div>
                                            <div className='content-projName' title={item.productName}>
                                                {/* 使用的产品 */}
                                                {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 style={{ display: 'flex', marginTop: 20, justifyContent: 'space-between' }}>
                                                <div className='content-text'>
                                                    可购买平台内任意软著时使用
                                                </div>

                                            </div>
                                            <div className='content-bot'>
                                                <div className='content-time'>
                                                    有效期 : {item.coupon.useGmtStart} 至 {item.coupon.useGmtEnd}
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                    <div className='use-img'
                                        style={{
                                            width:88,
                                            height:76
                                        }}
                                    >
                                        <img src={overdueImg} 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>
                </Spin>
            </div>
        </div>
    )
}