Skip to content

M
mr-julyedu
Commit d12e8806 by zhanghaozhe
Options

coupons

parent 5b54c38f
Showing with 227 additions and 65 deletions
src/components/coupons/common/Coupon/coupon.scss
......@@ -38,6 +38,10 @@ $bg_type2: #E0B97B;
&.coupon-type2 {
background: $E0B97B;
}
&.invalid{
background: $color_999;
}
& > .iconfont {
......
src/components/coupons/common/Coupon/index.js
import React from 'react'
import React, { Component } from 'react'
import './coupon.scss'
import classnames from 'classnames'
class Coupon extends Component {
const Coupon = ({type, couponName, denomination, expire_time, limit, onClick, showUseButton, selected}) => {
let style = {
visibility: showUseButton ? 'visible' : 'hidden'
constructor(props) {
super(props)
}
return (
<li className='coupon'>
<div className={classnames('coupon-info', `coupon-type${type}`)}>
<p className='type'>{couponName}</p>
<p className='denomination'>{denomination} <span>元</span></p>
<p className='expire'>有效期至：{expire_time}</p>
<i className={classnames('iconfont icondanseshixintubiao-5', {
check: selected
})}></i>
<ul>
pick = () => {
let {purpose, select, invalid} = this.props
purpose === 'use' && !invalid && select && select(this.props.index)
}
GoToUse = () => {
this.props.toUse(this.props.index)
}
render() {
let {
type,
couponName,
denomination,
expire_time,
limit,
selected,
index,
invalid,
purpose
} = 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>
{
purpose === 'use' &&
<i className={classnames('iconfont icondanseshixintubiao-5', {
check: (selected != undefined && !invalid) && (selected === index)
})}></i>
}
<ul>
{
new Array(19).fill('a').map((item, index) => {
return <li key={index}></li>
})
}
</ul>
</div>
<div className="coupon-des">
<span className='limit'>{limit}</span>
{
new Array(19).fill('a').map((item, index) => {
return <li key={index}></li>
})
purpose === 'exchange' &&
<button
className='use'
onClick={this.GoToUse}
>立即使用
</button>
}
</ul>
</div>
<div className="coupon-des">
<span className='limit'>{limit}</span>
<button
className='use'
onClick={onClick}
style={style}
>立即使用</button>
</div>
</li>
);
};
</div>
</li>
);
}
}
export default Coupon
\ No newline at end of file
src/components/coupons/common/ExchangeBar/index.js
......@@ -19,7 +19,7 @@ class ExchangeBar extends Component {
type={'number'}
/>
<button className={classnames({
active: exchangeNum.length > 0
active: exchangeNum && exchangeNum.length > 0
})}>兑换
</button>
</div>
......
src/components/coupons/common/Input/index.js
......@@ -2,7 +2,6 @@ import React, { Component } from 'react';
import './input.scss'
import classnames from 'classnames'
import * as PropTypes from 'prop-types'
class Input extends Component {
constructor(props) {
......@@ -48,11 +47,6 @@ class Input extends Component {
}
}
Input.propTypes = {
type: PropTypes.string,
placeholder: PropTypes.string,
onChange: PropTypes.any
}
Input.defaultProps = {type: 'text', placeholder: ''}
......
src/components/coupons/exchange-coupons/coupons.scss
......@@ -3,30 +3,6 @@
display: flex;
flex-flow: column;
.exchange {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px 12px;
border-bottom: 1px solid $border_e7eaf1;
button {
display: inline-block;
width: 84px;
height: 36px;
line-height: 36px;
font-size: $font_16;
color: $white;
background-color: $bg_ccc;
border: none;
-webkit-appearance: none;
&.active {
background-color: $active;
}
}
}
.empty {
padding-top: 140px;
background: $bg_f5f5f5;
......
src/components/coupons/exchange-coupons/index.js
......@@ -37,8 +37,8 @@ class ExchangeCoupons extends Component {
this.setState({exchangeNum: val})
}
useCoupon = () => {
useCoupon = (val) => {
console.log(val)
}
componentDidMount() {
......@@ -54,8 +54,9 @@ class ExchangeCoupons extends Component {
/>
<Content
coupons={mockData}
onClick={this.useCoupon}
toUse={this.useCoupon}
showUseButton={true}
purpose={'exchange'}
/>
</div>
);
......@@ -85,7 +86,9 @@ function Content({coupons, onClick, ...rest}) {
{...item}
key={index}
onClick={onClick}
{...rest}/>
{...rest}
index={index}
/>
})
}
</ul>
......
src/components/coupons/use-coupons/index.js 0 → 100644
import React, { Component } from 'react';
import './use-coupon.scss'
import ExchangeaBar from "../common/ExchangeBar";
import Coupon from '../common/Coupon'
const mockData = {
valid: [
{
type: 1,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
{
type: 2,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
],
invalid: [
{
type: 1,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
{
type: 1,
couponName: '代金券',
expire_time: '2017-12-31',
limit: '可用于大于代金券金额的课程',
denomination: '5'
},
]
}
class UseCoupon extends Component {
constructor(props) {
super(props)
this.state = {
selected: 0
}
}
select = (val) => {
console.log(val)
this.setState({
selected: val
})
}
componentDidMount() {
document.getElementsByClassName('tabbar')[0].style.display = 'none'
}
render() {
return (
<div className='use-coupon'>
<ExchangeaBar/>
<div className="coupons-area">
<Content
coupons={mockData.valid}
showUseButton={false}
selected={this.state.selected}
select={this.select}
purpose={'use'}
/>
{
mockData.invalid.length > 0 &&
(
<>
<div className='invalid-title'>- 不可使用的优惠券 -</div>
<Content
coupons={mockData.invalid}
selected={this.state.selected}
select={this.select}
purpose={'use'}
invalid={'invalid'}
/>
</>
)
}
</div>
</div>
);
}
}
function Content({coupons, selected, ...rest}) {
if (coupons.length === 0) {
return (
<div className='empty'>
<p>暂无可使用的优惠券</p>
</div>
)
}
return (
<ul>
{
coupons.map((item, index) => {
return (
<Coupon
key={index}
{...item}
selected={selected}
index={index}
{...rest}
></Coupon>
)
})
}
</ul>
)
}
export default UseCoupon;
\ No newline at end of file
src/components/coupons/use-coupons/use-coupon.scss 0 → 100644
.use-coupon {
height: 100%;
display: flex;
flex-flow: column;
.coupons-area {
padding: 15px 12px;
background: $bg_f5f5f5;
flex: 1;
.empty {
min-height: 211px;
line-height: 211px;
font-size: $font_12;
color: $color_666;
}
.invalid-title{
text-align: center;
font-size: $font_12;
line-height: 52px;
color: $color_999;
}
}
}
\ No newline at end of file
src/router.js
......@@ -9,6 +9,7 @@ import My from './components/my';
import CourseList from './components/classify/courselist';
import Examination from './components/examination'
import ExchangeCoupons from './components/coupons/exchange-coupons'
import UseCoupon from './components/coupons/use-coupons'
const router = () => (
......@@ -22,6 +23,7 @@ const router = () => (
<Route path='/courselist' component={CourseList}></Route>
<Route path='/examination' component={Examination}></Route>
<Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
<Route path='/use-coupon' component={UseCoupon}></Route>
</Switch>
<Menu/>
</Router>
......
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