75 lines
3.1 KiB
TypeScript
75 lines
3.1 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
|
import { CheckOutlined } from '@ant-design/icons';
|
||
|
|
import './SelectCouponModal.css'
|
||
|
|
import coupon from '../../static/coupon/coupon.png'
|
||
|
|
import bigCoupon from '../../static/coupon/bigCoupon.png'
|
||
|
|
export default function SelectCouponModal() {
|
||
|
|
const [couponId, setCouponId] = useState('')
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<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 }}>共减￥</div>
|
||
|
|
<div style={{ fontSize: 26, fontWeight: 700 }}>100.00</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className='select-use'>
|
||
|
|
<div className='select-use-title'>
|
||
|
|
可使用优惠券
|
||
|
|
</div>
|
||
|
|
<div className='select-use-couBox'>
|
||
|
|
<div
|
||
|
|
// className='use-coupon'
|
||
|
|
className={couponId == '1' ? 'use-coupon select-active' : 'use-coupon'}
|
||
|
|
onClick={() => {
|
||
|
|
// setCouponId('1')
|
||
|
|
if(couponId=='1'){
|
||
|
|
setCouponId('')
|
||
|
|
}else{
|
||
|
|
setCouponId('1')
|
||
|
|
}
|
||
|
|
}}>
|
||
|
|
<div className='use-coupon-left'>
|
||
|
|
<img src={bigCoupon} alt="" width={81} height={73} />
|
||
|
|
<div className='use-coupon-text'>
|
||
|
|
<div className='use-coupon-title'>
|
||
|
|
减100元
|
||
|
|
</div>
|
||
|
|
<div className='use-coupon-time'>
|
||
|
|
有效期至2024.08.29 12:12:07
|
||
|
|
</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 }}>100.00</div>
|
||
|
|
</div>
|
||
|
|
{
|
||
|
|
couponId == '1' ? (
|
||
|
|
<div className='select-box' >
|
||
|
|
<CheckOutlined />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className='noselect-box' >
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|