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

import { useState } from 'react'
import './HeadCouponModal.css'
// 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 [title, setTitle] = useState('未使用')
    return (
        <div className='headModal'>
            <div className='headModal-top'>
                <div className={title == '未使用' ? 'top-active' : 'top-title'}
                    onClick={() => {
                        setTitle('未使用')
                    }}
                >未使用</div>
                <div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                    onClick={() => {
                        setTitle('已使用')
                    }}
                >已使用</div>
                <div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                    onClick={() => {
                        setTitle('已过期')
                    }}
                >已过期</div>
            </div>
            <div className='headModal-bot'>
                <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 className='content-text'>
                                    可购买平台内任意软著时使用
                                </div>
                                <div className='content-bot'>
                                    <div className='content-time'>
                                        2024.08.09  12:15:04
                                    </div>
                                    <div className='content-button' onClick={() => {
                                        props.closeModal()
                                    }}>
                                        去使用
                                    </div>
                                </div>
                            </div>

                        </div>
                        
                    </div>
                    
                    


                    {/* <div className='noDatebox'>
                        <Empty description="暂无优惠券" />
                    </div> */}
                </div>
                <div style={{ display: title == '已使用' ? 'block' : 'none' }}>
                    <div className='couponList'>
                        <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 }}>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'>
                                        2024.08.09  12:15:04
                                    </div>

                                </div>
                                <div className='content-projName'>
                                    xxxxxxx系统
                                </div>
                            </div>

                        </div>
                        <div className='use-img'>
                            <img src={useLogo} alt="" width={'100%'} height={'100%'} />
                        </div>
                    </div>

                </div>
                <div style={{ display: title == '已过期' ? 'block' : 'none' }}>
                    <div className='couponList'>
                        <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 }}>100</span>
                                    </div>

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