coupons

src/components/coupons/Coupon/coupon.scss

+$bg_type1: #FE6161;
+$bg_type2: #E0B97B;
+.coupon {
+    position: relative;
+    margin-bottom: 15px;
+    box-shadow: 0px 2px 16px -8px;
+
+    .coupon-info {
+        position: relative;
+        height: 95px;
+        padding: 10px 15px;
+        color: $white;
+
+        .type {
+            font-size: $font_14;
+        }
+
+        .denomination {
+            font-size: $font_26;
+            line-height: $font_26;
+            text-align: center;
+
+            span {
+                font-size: $font_12;
+            }
+        }
+
+        .expire {
+            text-align: center;
+            font-size: $font_12;
+            line-height: $font_16;
+        }
+
+        &.coupon-type1 {
+            background: $bg_type1;
+        }
+        &.coupon-type2 {
+            background: $E0B97B;
+        }
+
+
+        ul {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+
+            li {
+                $dot_width: 10px;
+                width: $dot_width;
+                height: $dot_width;
+                border-radius: 50%;
+                background: $white;
+                transform: translateY(50%);
+            }
+        }
+    }
+
+    .coupon-des {
+        padding: 10px 15px;
+        background: $white;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .limit {
+            font-size: $font_12;
+            vertical-align: middle;
+            color: $color_666;
+        }
+
+        .use {
+            display: inline-block;
+            padding: 3px 8px;
+            font-size: $font_12;
+            color: $border_f31;
+            border:1px solid $border_f31;
+            border-radius:10px;
+            background: transparent;
+            -webkit-appearance: none;
+        }
+    }
+}
\ No newline at end of file

src/components/coupons/Coupon/index.js

+import React from 'react'
+import './coupon.scss'
+import classnames from 'classnames'
+
+
+const Coupon = ({type, couponName, denomination, expire_time, limit, onClick}) => {
+    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>
+                <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>
+                <button className='use' onClick={onClick}>立即使用</button>
+            </div>
+        </li>
+    );
+};
+
+export default Coupon
\ No newline at end of file

src/components/coupons/Input/index.js

+import React, { Component } from 'react';
+import './input.scss'
+
+import classnames from 'classnames'
+import * as PropTypes from 'prop-types'
+
+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('')
+    }
+
+    render() {
+        let {type, placeholder} = this.props
+        return (
+            <div className='custom-input-wrapper'>
+                <input
+                    type={type}
+                    className={classnames('custom-input')}
+                    placeholder={placeholder}
+                    onChange={this.handleChange}
+                    value={this.state.value}
+                />
+                <i
+                    className={classnames('iconfont icondanseshixintubiao-3', {
+                        hide: this.state.value.length === 0
+                    })}
+                    onClick={this.clearInput}
+                ></i>
+            </div>
+        );
+    }
+}
+
+Input.propTypes = {
+    type: PropTypes.string,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.any
+}
+
+Input.defaultProps = {type: 'text', placeholder: ''}
+
+export default Input;
\ No newline at end of file

src/components/coupons/Input/input.scss

+.custom-input-wrapper {
+    position: relative;
+
+    .custom-input {
+        width: 255px;
+        height: 36px;
+
+        padding-left: 10px;
+
+        border: 1px solid $border_ddd;
+        border-radius: 3px;
+
+        font-size: $font_12;
+
+        -webkit-appearance: none;
+
+
+        &::-webkit-input-placeholder {
+            color: $color_999;
+        }
+    }
+
+    .iconfont {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: $font_14;
+        color: $bg_ccc;
+    }
+
+    .hide {
+        display: none;
+    }
+}
\ No newline at end of file

src/components/coupons/coupons.scss

+#coupons {
+    height: 100%;
+    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;
+        flex: 1;
+        text-align: center;
+        color: $color_666;
+        font-size: $font_12;
+
+        .iconfont {
+            color: #ef4d4e;
+            font-size: $font_16;
+        }
+
+    }
+
+    .coupon-list {
+        padding: 15px 12px;
+    }
+}
\ No newline at end of file

src/components/coupons/index.js

+import React, { Component } from 'react'
+import './coupons.scss'
+
+// import { Toast } from "antd-mobile";
+
+import Input from "./Input"
+import classnames from 'classnames'
+import Coupon from './Coupon'
+
+
+const mockData = [
+    {
+        type: 1,
+        couponName: '代金券',
+        expire_time: '2017-12-31',
+        limit: '可用于大于代金券金额的课程',
+        denomination: '5'
+    },
+    {
+        type: 2,
+        couponName: '代金券',
+        expire_time: '2017-12-31',
+        limit: '可用于大于代金券金额的课程',
+        denomination: '5'
+    },
+]
+
+
+class Coupons extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            exchangeNum: ''
+        }
+    }
+
+    onChange = (val) => {
+        this.setState({exchangeNum: val})
+    }
+
+    useCoupon = () => {
+
+    }
+
+    componentDidMount() {
+        document.getElementsByClassName('tabbar')[0].style.display = 'none'
+    }
+
+    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}/>
+            </div>
+        );
+    }
+}
+
+function Empty() {
+    return (
+        <div className='empty'>
+            <div>
+                <p><i className='iconfont iconfrench_fries'></i></p>
+                <p>静待活动，什么券都有~</p>
+            </div>
+        </div>
+    )
+}
+
+function Content({coupons,onClick}) {
+    if (coupons.length === 0) {
+        return <Empty/>
+    }
+    return (
+        <ul className='coupon-list'>
+            {
+                mockData.map((item, index) => {
+                    return <Coupon {...item} key={index} onClick={onClick}/>
+                })
+            }
+        </ul>
+    )
+}
+
+/*function Text({text}) {
+    return Toast.info(text, 1)
+}*/
+
+export default Coupons;
\ No newline at end of file

src/router.js

@@ -8,6 +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'
 
 
 const router = () => (
@@ -20,6 +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>
         </Switch>
         <Menu/>
     </Router>

src/styles/variable.scss

@@ -37,6 +37,7 @@ $bg_000: #000;
 $bg_f4f4f4: #f4f4f4;
 $bg_f5f5f5: #f5f5f5;
 $bg_f7f9fc: #f7f9fc;
+$bg_ccc: #ccc;
 
 
 /*
@@ -50,6 +51,9 @@ $sp_e7eaf1: #e7eaf1;
  *  @ 边框颜色
  */
 $border_ddd: #ddd;
+$border_e7eaf1: #E7EAF1;
+$border_f31: #f31;
+
 
 
 /*