import React, { PureComponent } from 'react' import './coupon.scss' import classnames from 'classnames' class Coupon extends PureComponent { pick = () => { let {useCoupon, invalid} = this.props !invalid && useCoupon && useCoupon(this.props.id) } GoToUse = () => { this.props.useCoupon(this.props.id) } render() { let { ctype, amount, format_expire_time, limit_course, invalid, course_title, id, selectedCouponId, showUseButton } = this.props return ( <li className='coupon' onClick={this.pick}> <div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${ctype}`)}> <p className='type'>{ctype === 1 ? '代金券' : '课程券'}</p> { ctype === 1 ? <p className='denomination'>{amount} <span>元</span></p> : <p className='course-title'>{course_title}</p> } <p className='expire'>有效期至:{format_expire_time}</p> { selectedCouponId === id && <i className={classnames('iconfont icondanseshixintubiao-5', { check: !invalid })} /> } <ul> { new Array(19).fill('a').map((item, index) => { return <li key={index}/> }) } </ul> </div> <div className="coupon-des"> <span className='limit'>{ limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》` }</span> { showUseButton && <button className='use' onClick={this.GoToUse} >立即使用 </button> } </div> </li> ); } } export default Coupon