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([]) // 已选优惠券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 (
{contextHolder}
优惠券
共减¥
{sleectCouponNum.toFixed(2)}
可使用优惠券
{couponArray.map((item) => { return (
{ // setCouponId('1') if (selectCouponId == item.couponId) { setSelectCouponId('') setSelectCouponNum(0) setSelectCouponTitle('') } else { setSelectCouponId(item.couponId) setSelectCouponNum(item.coupon.amount / 100) setSelectCouponTitle(item.coupon.title) } }}>
{/* 减{item.coupon.amount / 100}元 */} {item.coupon.title}
有效期 : {item.coupon.useGmtStart} 至 {item.coupon.useGmtEnd}
减¥
{(item.coupon.amount / 100).toFixed(2)}
{ selectCouponId == item.couponId ? (
) : (
) }
) })}
10 ? 'unset' : 'none' }}>
{ setPage(value) }} />
) }