Skip to content

M
mr-julyedu
Commit 3b1fa6e0 by zhanghaozhe
Options

优惠券

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