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