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

import { useState, useEffect } from 'react'
import { CheckOutlined } from '@ant-design/icons';
import './SelectCouponModal.css'
import { get } from '../../util/AjaxUtils'
import {
    Pagination,
    message,
    Button,
    Spin
} from 'antd';
import coupon from '../../static/coupon/coupon.png'
import bigCoupon from '../../static/coupon/bigCoupon.png'
export default function SelectCouponModal(props: any) {
    const [loading,setLoading] = useState(false)
    const [messageApi, contextHolder] = message.useMessage();
    // 分页
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    // 展示的优惠券数组
    const [couponArray, setCouponArray] = useState<any[]>([])
    // 已选优惠券id
    const [selectCouponId, setSelectCouponId] = useState(props.couponId?props.couponId:'')
    // 已选的优惠券优惠金额
    const [sleectCouponNum, setSelectCouponNum] = useState(0)
    // 已选优惠券信息
    const [selectCouponTitle, setSelectCouponTitle] = useState('')
    // 获取优惠券信息
    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: 1,
                    isUsed: 0,
                }
            },
            onBefore() {
                setLoading(true)
            },
            onSuccess(data: any) {
                setTotal(data.data.total)
                // console.log(data.data.rows);
                setCouponArray(data.data.rows)
            },
            onFinally() {
                setLoading(false)
            },
        })
    }
    useEffect(() => {
        getCouponData()
    }, [])
    return (
        <div>
            {contextHolder}
            <div className='select-top'>
                <div className='selectTop-left'>
                    <img src={coupon} alt="" width={39} height={39} style={{ marginLeft: 10 }} />
                    <div className='selectTop-left-title'>
                        优惠券
                    </div>
                </div>
                <div className='selectTop-right' >

                    <div style={{ fontSize: 18, fontWeight: 600, display: sleectCouponNum ? 'unset' : 'none' }}>共减￥</div>
                    <div style={{ fontSize: 26, fontWeight: 700, display: sleectCouponNum ? 'unset' : 'none' }}>{sleectCouponNum.toFixed(2)}</div>

                </div>
            </div>
            <div className='select-use'>
                <div className='select-use-title'>
                    可使用优惠券
                </div>
                <Spin tip="加载中，请稍后..." size="small" spinning={loading}>
                <div className='select-use-couBox'>
                    {couponArray.map((item) => {
                        return (<div
                            key={item.couponId}
                            // className='use-coupon'
                            className={selectCouponId == item.couponId ? 'use-coupon select-active' : 'use-coupon'}
                            onClick={() => {
                                // setCouponId('1')
                                if (selectCouponId == item.couponId) {
                                    setSelectCouponId('')
                                    setSelectCouponNum(0)
                                    setSelectCouponTitle('')
                                } else {
                                    setSelectCouponId(item.couponId)
                                    setSelectCouponNum(item.coupon.amount / 100)
                                    setSelectCouponTitle(item.coupon.title)
                                }
                            }}>
                            <div className='use-coupon-left'>
                                <img src={bigCoupon} alt="" width={81} height={73} />
                                <div className='use-coupon-text'>
                                    <div className='use-coupon-title'>
                                        {/* 减{item.coupon.amount / 100}元 */}
                                        {item.coupon.title}
                                    </div>
                                    <div className='use-coupon-time'>
                                    有效期 : {item.coupon.useGmtStart} 至 {item.coupon.useGmtEnd}
                                    </div>
                                </div>

                            </div>
                            <div className='use-coupon-right'>
                                <div className='coupon-right-num'>
                                    <div style={{ fontSize: 16, fontWeight: 600 }}>减￥</div>
                                    <div style={{ fontSize: 25, fontWeight: 700 }}>{(item.coupon.amount / 100).toFixed(2)}</div>
                                </div>
                                {
                                    selectCouponId == item.couponId ? (
                                        <div className='select-box' >
                                            <CheckOutlined />
                                        </div>
                                    ) : (
                                        <div className='noselect-box' >
                                        </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>
                </Spin>
                <div style={{ display: 'flex', justifyContent: 'flex-end', paddingBottom: 10 }}>
                    <Button size='large'
                        onClick={() => {
                            props.closeModal()
                        }}
                    >取消</Button>
                    <Button size='large' type="primary" style={{ marginLeft: 10 }}
                        onClick={() => {
                            console.log(selectCouponId);
                            if (selectCouponId) {
                                props.setCouponId(selectCouponId)
                                props.setCouponNum(sleectCouponNum)
                                props.setCouponTitle(selectCouponTitle)
                                props.closeModal()
                            } else{
                                props.setCouponId('')
                                props.setCouponNum('')
                                props.setCouponTitle('')
                                props.closeModal()
                            }

                        }}
                    >确定</Button>
                </div>
            </div>
        </div>
    )
}