Skip to content

M
mr-julyedu
Commit 4a8bbd37 by xuzhenghua
Options

detail

parents b6054945 bec711bf
Showing with 124 additions and 56 deletions
src/components/coupons/Coupon/index.js
...@@ -5,8 +5,8 @@ import classnames from 'classnames' ...@@ -5,8 +5,8 @@ import classnames from 'classnames'
class Coupon extends PureComponent { class Coupon extends PureComponent {
pick = () => { pick = () => {
let {select, invalid} = this.props let {useCoupon, invalid} = this.props
!invalid && select && select(this.props.id) !invalid && useCoupon && useCoupon(this.props.id)
} }
GoToUse = () => { GoToUse = () => {
...@@ -22,7 +22,8 @@ class Coupon extends PureComponent { ...@@ -22,7 +22,8 @@ class Coupon extends PureComponent {
invalid, invalid,
course_title, course_title,
id, id,
selectedCouponId selectedCouponId,
showUseButton
} = this.props } = this.props
return ( return (
...@@ -55,6 +56,7 @@ class Coupon extends PureComponent { ...@@ -55,6 +56,7 @@ class Coupon extends PureComponent {
limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》` limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》`
}</span> }</span>
{ {
showUseButton &&
<button <button
className='use' className='use'
onClick={this.GoToUse} onClick={this.GoToUse}
......
src/components/coupons/Input/index.js
...@@ -4,24 +4,7 @@ import './input.scss' ...@@ -4,24 +4,7 @@ import './input.scss'
import classnames from 'classnames' import classnames from 'classnames'
class Input extends Component { class Input extends Component {
constructor(props) {
super(props)
this.state = {
value: ''
}
}
handleChange = (e) => {
this.setState({
value: e.target.value
})
this.props.onChange(e.target.value)
}
clearInput = () => { clearInput = () => {
this.setState({
value: ''
})
this.props.onChange('') this.props.onChange('')
} }
...@@ -33,15 +16,15 @@ class Input extends Component { ...@@ -33,15 +16,15 @@ class Input extends Component {
type={type} type={type}
className={classnames('custom-input')} className={classnames('custom-input')}
placeholder={placeholder} placeholder={placeholder}
onChange={this.handleChange} onChange={this.props.onChange}
value={this.state.value} value={this.props.value}
/> />
<i <i
className={classnames('iconfont icondanseshixintubiao-3', { className={classnames('iconfont icondanseshixintubiao-3', {
hide: this.state.value.length === 0 hide: this.props.value.length === 0
})} })}
onClick={this.clearInput} onClick={this.clearInput}
></i> />
</div> </div>
); );
} }
......
src/components/coupons/ExchangeBar/exchange-bar.scss → src/components/coupons/RedeemBar/exchange-bar.scss
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border-bottom: 1px solid $border_e7eaf1; border-bottom: 1px solid $border_e7eaf1;
position: fixed; position: absolute;
top: 0; top: 44px;
left: 0; left: 0;
z-index: 10; z-index: 10;
background: $white; background: $white;
......
src/components/coupons/ExchangeBar/index.js → src/components/coupons/RedeemBar/index.js
...@@ -3,19 +3,20 @@ import './exchange-bar.scss' ...@@ -3,19 +3,20 @@ import './exchange-bar.scss'
import Input from '../Input' import Input from '../Input'
import classnames from 'classnames' import classnames from 'classnames'
class ExchangeBar extends Component { class RedeemBar extends Component {
state = {} state = {}
render() { render() {
const {onChange, exchangeCode, exchange} = this.props const {onChange, redeemCode, exchange} = this.props
return ( return (
<div className="exchange-bar"> <div className="exchange-bar">
<Input <Input
placeholder={'请输入优惠码'} placeholder={'请输入优惠码'}
onChange={onChange} onChange={onChange}
value={redeemCode}
/> />
<button className={classnames({ <button className={classnames({
active: exchangeCode && exchangeCode.length > 0 active: redeemCode && redeemCode.length > 0
})} onClick={exchange}>兑换 })} onClick={exchange}>兑换
</button> </button>
</div> </div>
...@@ -23,4 +24,4 @@ class ExchangeBar extends Component { ...@@ -23,4 +24,4 @@ class ExchangeBar extends Component {
} }
} }
export default ExchangeBar; export default RedeemBar;
\ No newline at end of file \ No newline at end of file
src/components/coupons/index.js
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import './coupons.scss' import './coupons.scss'
import ExchangeaBar from "./ExchangeBar"; import RedeemBar from "./RedeemBar";
import Coupon from './Coupon' import Coupon from './Coupon'
import { http, api } from '@/utils' import { http, api, getParam } from '@/utils'
import { WithFullSize } from '@/HOCs' import { WithFullSize } from '@/HOCs'
import { Toast } from 'antd-mobile' import { Toast } from 'antd-mobile'
import { isEmpty } from 'lodash'
import { HeaderBar } from "@/common";
class UseCoupon extends PureComponent { class UseCoupon extends PureComponent {
state = { state = {
selectedCouponId: 0, selectedCouponId: 0,
exchangeCode: '', redeemCode: '',
couponList: [], couponList: [],
valid_coupons: [], valid_coupons: [],
invalid_coupons: [], invalid_coupons: [],
courseId: 139, courseId: getParam('id'),
showUseButton: false
} }
componentDidMount() { componentDidMount() {
const {history, location} = this.props
if (!this.state.courseId) {
location.state && location.state.from ? history.replace(location.state.from) : history.goBack()
}
const {state} = this.props.location const {state} = this.props.location
if (state && state.from) { if (state && state.from) {
switch (state.from) { switch (state.from) {
case '/my' : case '/my' :
this.getMyCoupons(); this.getMyCoupons();
this.setState({
showUseButton: true
})
break; break;
default: default:
this.getAllCoupons(); this.getAllCoupons();
...@@ -34,27 +44,47 @@ class UseCoupon extends PureComponent { ...@@ -34,27 +44,47 @@ class UseCoupon extends PureComponent {
} }
} }
select = val => { handleChange = e => {
this.setState({ let value = e ? e.target.value : ''
selectedCouponId: val === this.state.selectedCouponId ? 0 : val this.setState({redeemCode: value})
})
}
handleChange = val => {
this.setState({exchangeCode: val})
} }
exchange = () => { exchange = () => {
if (this.state.exchangeCode !== '') { if (this.state.redeemCode !== '') {
http.post(`${api.home}/m/coupon/exchange`, { http.post(`${api.home}/m/coupon/exchange`, {
code: this.state.exchangeCode code: this.state.redeemCode
}) })
.then(res => { .then(res => {
const data = res.data const data = res.data
if (data.code === 200) { if (data.code === 200) {
const coupon = data.data
if (this.state.showUseButton) {
this.setState({
couponList: [...state.couponList, coupon],
redeemCode: ''
})
} else {
const coupon = data.data
if (coupon['ctype'] == 2
&& coupon['limit_course'] != this.state.courseId) {
this.setState({ this.setState({
couponList: [data.data, ...this.state.couponList] invalid_coupons: [...this.state.invalid_coupons, coupon],
showUseButton: null
});
} else {
this.setState({
valid_coupons: [...this.state.valid_coupons, coupon],
redeemCode: ''
}) })
}
}
Toast.info('兑换成功') Toast.info('兑换成功')
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
...@@ -71,7 +101,7 @@ class UseCoupon extends PureComponent { ...@@ -71,7 +101,7 @@ class UseCoupon extends PureComponent {
const data = res.data const data = res.data
if (data.code === 200) { if (data.code === 200) {
this.setState({ this.setState({
couponList: data.data couponList: isEmpty(data.data) ? [] : data.data
}) })
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
...@@ -85,14 +115,15 @@ class UseCoupon extends PureComponent { ...@@ -85,14 +115,15 @@ class UseCoupon extends PureComponent {
const data = res.data const data = res.data
if (data.code === 200) { if (data.code === 200) {
const inuse_coupon = data.data.inuse_coupon; const inuse_coupon = data.data['inuse_coupon'];
this.setState({ this.setState({
valid_coupons: inuse_coupon valid_coupons: inuse_coupon
? [...inuse_coupon, ...data.data.valid_coupons] ? [...inuse_coupon, ...data.data.valid_coupons]
: data.data.valid_coupons, : data.data.valid_coupons,
invalid_coupons: data.data.invalid_coupons, invalid_coupons: data.data.invalid_coupons,
selectedCouponId: inuse_coupon ? inuse_coupon[0].id : 0 selectedCouponId: inuse_coupon.length ? inuse_coupon[0].id : 0
}) })
} else { } else {
...@@ -101,8 +132,45 @@ class UseCoupon extends PureComponent { ...@@ -101,8 +132,45 @@ class UseCoupon extends PureComponent {
}) })
} }
useCoupon = (val) => { useCoupon = val => {
const {history} = this.props
const coupon = this.state.couponList.find(item => item.id === val)
if (val) { if (val) {
if (this.state.showUseButton) {
if (coupon['ctype'] === 1) {
history.push(`/classify`)
} else {
history.push(`/detail?id=${coupon['limit_course']}`)
}
} else {
const {courseId, selectedCouponId} = this.state
if (selectedCouponId === val) {
http.post(`${api.home}/m/coupon/cancel`, {
course_id: courseId
}).then(res => {
const data = res.data
if (data.code === 200) {
this.setState({
selectedCouponId: 0
})
} else {
Toast.info(data.msg)
}
})
} else {
http.post(`${api.home}/m/coupon/use`, { http.post(`${api.home}/m/coupon/use`, {
course_id: this.state.courseId, course_id: this.state.courseId,
coupon_id: val coupon_id: val
...@@ -111,21 +179,36 @@ class UseCoupon extends PureComponent { ...@@ -111,21 +179,36 @@ class UseCoupon extends PureComponent {
const data = res && res.data const data = res && res.data
if (data.code === 200) { if (data.code === 200) {
this.setState({selectedCouponId: val})
this.props.history.goBack()
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
} }
}) })
} }
}
} else {
Toast.info('未知错误')
location.reload()
}
} }
render() { render() {
const {state} = this.props.location const {state} = this.props.location
const {showUseButton, selectedCouponId} = this.state
return ( return (
<div className='use-coupon'> <div className='use-coupon'>
<ExchangeaBar onChange={this.handleChange} <HeaderBar title='优惠券' arrow={true}/>
<RedeemBar onChange={this.handleChange}
exchange={this.exchange} exchange={this.exchange}
exchangeCode={this.state.exchangeCode}/> redeemCode={this.state.redeemCode}/>
<div className="coupons-area"> <div className="coupons-area">
<Content <Content
coupons={ coupons={
...@@ -135,9 +218,8 @@ class UseCoupon extends PureComponent { ...@@ -135,9 +218,8 @@ class UseCoupon extends PureComponent {
? this.state.couponList ? this.state.couponList
: this.state.valid_coupons : this.state.valid_coupons
} }
showUseButton={false} showUseButton={showUseButton}
selected={this.state.selected} selectedCouponId={selectedCouponId}
selectedCouponId={this.state.selectedCouponId}
select={this.select} select={this.select}
useCoupon={this.useCoupon} useCoupon={this.useCoupon}
/> />
...@@ -148,7 +230,7 @@ class UseCoupon extends PureComponent { ...@@ -148,7 +230,7 @@ class UseCoupon extends PureComponent {
<div className='invalid-title'>- 不可使用的优惠券 -</div> <div className='invalid-title'>- 不可使用的优惠券 -</div>
<Content <Content
coupons={this.state.invalid_coupons} coupons={this.state.invalid_coupons}
selectedCouponId={this.state.selectedCouponId} selectedCouponId={selectedCouponId}
select={this.select} select={this.select}
purpose={'use'} purpose={'use'}
invalid={'invalid'} invalid={'invalid'}
......
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