Skip to content

M
mr-julyedu
Commit 3b1fa6e0 by zhanghaozhe
Options

优惠券

parent d1042772
Showing with 107 additions and 52 deletions
src/components/coupons/Coupon/coupon.scss
...@@ -3,7 +3,7 @@ $bg_type2: #E0B97B; ...@@ -3,7 +3,7 @@ $bg_type2: #E0B97B;
.coupon { .coupon {
position: relative; position: relative;
margin-bottom: 15px; margin-bottom: 15px;
box-shadow: 0px 2px 16px -8px; box-shadow: 0px 2px 12px -8px;
.coupon-info { .coupon-info {
position: relative; position: relative;
...@@ -25,6 +25,15 @@ $bg_type2: #E0B97B; ...@@ -25,6 +25,15 @@ $bg_type2: #E0B97B;
} }
} }
.course-title{
width: 68.37%;
margin: 0 auto 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: $font_16;
}
.expire { .expire {
text-align: center; text-align: center;
font-size: $font_12; font-size: $font_12;
...@@ -86,9 +95,13 @@ $bg_type2: #E0B97B; ...@@ -86,9 +95,13 @@ $bg_type2: #E0B97B;
align-items: center; align-items: center;
.limit { .limit {
width: 63.81%;
font-size: $font_12; font-size: $font_12;
vertical-align: middle; vertical-align: middle;
color: $color_666; color: $color_666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.use { .use {
......
src/components/coupons/Coupon/index.js
...@@ -6,36 +6,41 @@ class Coupon extends PureComponent { ...@@ -6,36 +6,41 @@ class Coupon extends PureComponent {
pick = () => { pick = () => {
let {purpose, select, invalid} = this.props let {purpose, select, invalid} = this.props
purpose === 'use' && !invalid && select && select(this.props.index) purpose === 'use' && !invalid && select && select(this.props.id)
} }
GoToUse = () => { GoToUse = () => {
this.props.toUse(this.props.index) this.props.toUse(this.props.id)
} }
render() { render() {
let { let {
type, ctype,
couponName, amount,
denomination, format_expire_time,
expire_time, limit_course,
limit,
selected, selected,
index,
invalid, invalid,
purpose purpose,
course_title,
id
} = this.props } = this.props
return ( return (
<li className='coupon' onClick={this.pick}> <li className='coupon' onClick={this.pick}>
<div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${type}`)}> <div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${ctype}`)}>
<p className='type'>{couponName}</p> <p className='type'>{ctype === 1 ? '代金券' : '课程券'}</p>
<p className='denomination'>{denomination} <span>元</span></p> {
<p className='expire'>有效期至：{expire_time}</p> ctype === 1 ? <p className='denomination'>{amount} <span>元</span></p>
: <p className='course-title'>{course_title}</p>
}
<p className='expire'>有效期至：{format_expire_time}</p>
{ {
purpose === 'use' && purpose === 'use' &&
<i className={classnames('iconfont icondanseshixintubiao-5', { <i className={classnames('iconfont icondanseshixintubiao-5', {
check: (selected !== undefined && !invalid) && (selected === index) check: (selected !== undefined && !invalid) && (selected === id)
})} })}
/> />
} }
...@@ -48,7 +53,9 @@ class Coupon extends PureComponent { ...@@ -48,7 +53,9 @@ class Coupon extends PureComponent {
</ul> </ul>
</div> </div>
<div className="coupon-des"> <div className="coupon-des">
<span className='limit'>{limit}</span> <span className='limit'>{
limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》`
}</span>
{ {
purpose === 'exchange' && purpose === 'exchange' &&
<button <button
......
src/components/coupons/ExchangeBar/index.js
...@@ -4,23 +4,19 @@ import Input from '../Input' ...@@ -4,23 +4,19 @@ import Input from '../Input'
import classnames from 'classnames' import classnames from 'classnames'
class ExchangeBar extends Component { class ExchangeBar extends Component {
constructor(props) { state = {}
super(props)
this.state = {}
}
render() { render() {
const {onChange, exchangeCode} = this.props const {onChange, exchangeCode, exchange} = this.props
return ( return (
<div className="exchange-bar"> <div className="exchange-bar">
<Input <Input
placeholder={'请输入优惠码'} placeholder={'请输入优惠码'}
onChange={onChange} onChange={onChange}
type={'number'}
/> />
<button className={classnames({ <button className={classnames({
active: exchangeCode && exchangeCode.length > 0 active: exchangeCode && exchangeCode.length > 0
})}>兑换 })} onClick={exchange}>兑换
</button> </button>
</div> </div>
); );
......
src/components/coupons/coupons.scss
.use-coupon { .use-coupon {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: 100%;
.coupons-area { .coupons-area {
padding: 72px 12px; padding: 72px 12px 0px;
background: $bg_f5f5f5; //background: $bg_f5f5f5;
flex: 1 1 auto; flex: 1 1 auto;
.empty { .empty {
...@@ -12,6 +13,7 @@ ...@@ -12,6 +13,7 @@
line-height: 211px; line-height: 211px;
font-size: $font_12; font-size: $font_12;
color: $color_666; color: $color_666;
text-align: center;
} }
.invalid-title{ .invalid-title{
......
src/components/coupons/index.js
...@@ -4,6 +4,8 @@ import './coupons.scss' ...@@ -4,6 +4,8 @@ import './coupons.scss'
import ExchangeaBar from "./ExchangeBar"; import ExchangeaBar from "./ExchangeBar";
import Coupon from './Coupon' import Coupon from './Coupon'
import { http, api } from '@/utils' import { http, api } from '@/utils'
import { WithFullSize } from '@/HOCs'
import { Toast } from 'antd-mobile'
const mockData = { const mockData = {
valid: [ valid: [
...@@ -46,60 +48,95 @@ class UseCoupon extends PureComponent { ...@@ -46,60 +48,95 @@ class UseCoupon extends PureComponent {
state = { state = {
selected: 0, selected: 0,
exchangeCode: '', exchangeCode: '',
couponList: [] couponList: [],
valid_coupons: [],
invalid_coupons: [],
inuse_coupon: []
} }
componentDidMount() { componentDidMount() {
this.getMyCoupons() const {state} = this.props.location
.then(res => { if (state && state.from) {
const data = res.data switch (state.from) {
if (data.code === 200) { case '/my' :
this.setState({ this.getMyCoupons();
couponList: data.data break;
}) }
} }
})
} }
select = (val) => { select = val => {
console.log(val) console.log(val)
this.setState({ this.setState({
selected: val selected: val
}) })
} }
handleChange = (val) => { handleChange = val => {
this.setState({exchangeCode: val}) this.setState({exchangeCode: val})
} }
exchange = () => {
if (this.state.exchangeCode !== '') {
http.post(`${api.home}/m/coupon/exchange`, {
code: this.state.exchangeCode
})
.then(res => {
const data = res.data
if (data.code === 200) {
this.setState({
couponList: [data.data, ...this.state.couponList]
})
Toast.info('兑换成功')
} else {
Toast.fail(data.msg)
}
})
} else {
Toast.info('请输入兑换码')
}
}
getMyCoupons = () => { getMyCoupons = () => {
return http.get(`${api.home}/m/coupon/all`) http.get(`${api.home}/m/coupon/all`)
.then(res => {
const data = res.data
if (data.code === 200) {
this.setState({
couponList: data.data,
selected: data.data[0].id
})
} else {
Toast.fail(data.msg)
}
})
} }
selectCoupon = () => { selectCoupon = () => {
} }
render() { render() {
return ( return (
<div className='use-coupon'> <div className='use-coupon'>
<ExchangeaBar onChange={this.handleChange}/> <ExchangeaBar onChange={this.handleChange}
exchange={this.exchange}
exchangeCode={this.state.exchangeCode}/>
<div className="coupons-area"> <div className="coupons-area">
<Content <Content
coupons={mockData.valid} coupons={this.state.couponList}
showUseButton={false} showUseButton={false}
selected={this.state.selected} selected={this.state.selected}
select={this.select} select={this.select}
purpose={'use'} purpose={'use'}
/> />
{ {
mockData.invalid.length > 0 && this.state.invalid_coupons.length > 0 &&
( (
<> <>
<div className='invalid-title'>- 不可使用的优惠券 -</div> <div className='invalid-title'>- 不可使用的优惠券 -</div>
<Content <Content
coupons={mockData.invalid} coupons={this.state.invalid_coupons}
selected={this.state.selected} selected={this.state.selected}
select={this.select} select={this.select}
purpose={'use'} purpose={'use'}
...@@ -125,13 +162,13 @@ function Content({coupons, selected, ...rest}) { ...@@ -125,13 +162,13 @@ function Content({coupons, selected, ...rest}) {
return ( return (
<ul> <ul>
{ {
coupons.map((item, index) => { coupons.map(item => {
return ( return (
<Coupon <Coupon
key={index} key={item.id}
{...item} {...item}
selected={selected} selected={selected}
index={index} id={item.id}
{...rest} {...rest}
/> />
) )
...@@ -141,4 +178,4 @@ function Content({coupons, selected, ...rest}) { ...@@ -141,4 +178,4 @@ function Content({coupons, selected, ...rest}) {
) )
} }
export default UseCoupon; export default WithFullSize(UseCoupon);
\ No newline at end of file \ No newline at end of file
src/components/my/index.js
...@@ -76,19 +76,19 @@ class My extends PureComponent { ...@@ -76,19 +76,19 @@ class My extends PureComponent {
<i className="iconfont iconiconfront-24"></i> <i className="iconfont iconiconfront-24"></i>
课程订单 课程订单
</Item> </Item>
<Item
arrow="horizontal"
>
<Link to={{ <Link to={{
pathname: '/use-coupons', pathname: '/coupons',
state: { state: {
from: this.props.location.pathname from: this.props.location.pathname
} }
}}> }}>
<Item
arrow="horizontal"
>
<i className="iconfont iconiconfront-52"></i> <i className="iconfont iconiconfront-52"></i>
优惠券 优惠券
</Link>
</Item> </Item>
</Link>
</List> </List>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment