exchange-coupons

src/components/coupons/Coupon/coupon.scss → src/components/coupons/common/Coupon/coupon.scss

@@ -34,11 +34,27 @@ $bg_type2: #E0B97B;
         &.coupon-type1 {
             background: $bg_type1;
         }
+
         &.coupon-type2 {
             background: $E0B97B;
         }
 
 
+        & > .iconfont {
+            $size: 22px;
+            position: absolute;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+            width: $size;
+            height: $size;
+            display: none;
+        }
+
+        .check {
+            display: block;
+        }
+
         ul {
             position: absolute;
             bottom: 0;
@@ -76,8 +92,8 @@ $bg_type2: #E0B97B;
             padding: 3px 8px;
             font-size: $font_12;
             color: $border_f31;
-            border:1px solid $border_f31;
-            border-radius:10px;
+            border: 1px solid $border_f31;
+            border-radius: 10px;
             background: transparent;
             -webkit-appearance: none;
         }

src/components/coupons/Coupon/index.js → src/components/coupons/common/Coupon/index.js

@@ -3,13 +3,19 @@ import './coupon.scss'
 import classnames from 'classnames'
 
 
-const Coupon = ({type, couponName, denomination, expire_time, limit, onClick}) => {
+const Coupon = ({type, couponName, denomination, expire_time, limit, onClick, showUseButton, selected}) => {
+    let style = {
+        visibility: showUseButton ? 'visible' : 'hidden'
+    }
     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>
                     {
                         new Array(19).fill('a').map((item, index) => {
@@ -20,7 +26,11 @@ const Coupon = ({type, couponName, denomination, expire_time, limit, onClick}) =
             </div>
             <div className="coupon-des">
                 <span className='limit'>{limit}</span>
-                <button className='use' onClick={onClick}>立即使用</button>
+                <button
+                    className='use'
+                    onClick={onClick}
+                    style={style}
+                >立即使用</button>
             </div>
         </li>
     );

src/components/coupons/common/ExchangeBar/exchange-bar.scss

+.exchange-bar {
+    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;
+        }
+    }
+}
\ No newline at end of file

src/components/coupons/common/ExchangeBar/index.js

+import React, { Component } from 'react';
+import './exchange-bar.scss'
+import Input from '../Input'
+import classnames from 'classnames'
+
+class ExchangeBar extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        const {onChange, exchangeNum} = this.props
+        return (
+            <div className="exchange-bar">
+                <Input
+                    placeholder={'请输入优惠码'}
+                    onChange={onChange}
+                    type={'number'}
+                />
+                <button className={classnames({
+                    active: exchangeNum.length > 0
+                })}>兑换
+                </button>
+            </div>
+        );
+    }
+}
+
+export default ExchangeBar;
\ No newline at end of file

src/components/coupons/index.js → src/components/coupons/exchange-coupons/index.js

@@ -3,9 +3,8 @@ import './coupons.scss'
 
 // import { Toast } from "antd-mobile";
 
-import Input from "./Input"
-import classnames from 'classnames'
-import Coupon from './Coupon'
+import Coupon from '../common/Coupon'
+import ExchangeBar from '../common/ExchangeBar'
 
 
 const mockData = [
@@ -26,7 +25,7 @@ const mockData = [
 ]
 
 
-class Coupons extends Component {
+class ExchangeCoupons extends Component {
     constructor(props) {
         super(props)
         this.state = {
@@ -49,18 +48,15 @@ class Coupons extends Component {
     render() {
         return (
             <div id='coupons'>
-                <div className="exchange">
-                    <Input
-                        placeholder={'请输入优惠码'}
-                        onChange={this.onChange}
-                        type={'number'}
-                    />
-                    <button className={classnames({
-                        active: this.state.exchangeNum.length > 0
-                    })}>兑换
-                    </button>
-                </div>
-                <Content coupons={mockData} onClick={this.useCoupon}/>
+                <ExchangeBar
+                    onChange={this.onChange}
+                    exchangeNum={this.state.exchangeNum}
+                />
+                <Content
+                    coupons={mockData}
+                    onClick={this.useCoupon}
+                    showUseButton={true}
+                />
             </div>
         );
     }
@@ -77,7 +73,7 @@ function Empty() {
     )
 }
 
-function Content({coupons,onClick}) {
+function Content({coupons, onClick, ...rest}) {
     if (coupons.length === 0) {
         return <Empty/>
     }
@@ -85,7 +81,11 @@ function Content({coupons,onClick}) {
         <ul className='coupon-list'>
             {
                 mockData.map((item, index) => {
-                    return <Coupon {...item} key={index} onClick={onClick}/>
+                    return <Coupon
+                        {...item}
+                        key={index}
+                        onClick={onClick}
+                        {...rest}/>
                 })
             }
         </ul>
@@ -96,4 +96,4 @@ function Content({coupons,onClick}) {
     return Toast.info(text, 1)
 }*/
 
-export default Coupons;
\ No newline at end of file
+export default ExchangeCoupons;
\ No newline at end of file

src/router.js

@@ -8,7 +8,7 @@ import Study from './components/study';
 import My from './components/my';
 import CourseList from './components/classify/courselist';
 import Examination from './components/examination'
-import Coupons from './components/coupons'
+import ExchangeCoupons from './components/coupons/exchange-coupons'
 
 
 const router = () => (
@@ -21,7 +21,7 @@ const router = () => (
             <Route path='/my' component={My}></Route>
             <Route path='/courselist' component={CourseList}></Route>
             <Route path='/examination' component={Examination}></Route>
-            <Route path='/coupons' component={Coupons}></Route>
+            <Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
         </Switch>
         <Menu/>
     </Router>