tmp

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

-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import './coupon.scss'
 import classnames from 'classnames'
 
-class Coupon extends Component {
+class Coupon extends PureComponent {
 
     pick = () => {
         let {purpose, select, invalid} = this.props

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

@@ -10,7 +10,7 @@ class ExchangeBar extends Component {
     }
 
     render() {
-        const {onChange, exchangeNum} = this.props
+        const {onChange, exchangeCode} = this.props
         return (
             <div className="exchange-bar">
                 <Input
@@ -19,7 +19,7 @@ class ExchangeBar extends Component {
                     type={'number'}
                 />
                 <button className={classnames({
-                    active: exchangeNum && exchangeNum.length > 0
+                    active: exchangeCode && exchangeCode.length > 0
                 })}>兑换
                 </button>
             </div>

src/components/coupons/exchange-coupons/coupons.scss

@@ -19,6 +19,6 @@
     }
 
     .coupon-list {
-        padding: 15px 12px;
+        padding: 72px 12px 0;
     }
 }
\ No newline at end of file

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

-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import './coupons.scss'
 
 // import { Toast } from "antd-mobile";
@@ -25,32 +25,25 @@ const mockData = [
 ]
 
 
-class ExchangeCoupons extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            exchangeNum: ''
-        }
+class ExchangeCoupons extends PureComponent {
+    state = {
+        exchangeCode: ''
     }
 
     onChange = (val) => {
-        this.setState({exchangeNum: val})
+        this.setState({exchangeCode: val})
     }
 
     useCoupon = (val) => {
         console.log(val)
     }
 
-    componentDidMount() {
-        document.getElementsByClassName('tabbar')[0].style.display = 'none'
-    }
-
     render() {
         return (
             <div id='coupons'>
                 <ExchangeBar
                     onChange={this.onChange}
-                    exchangeNum={this.state.exchangeNum}
+                    exchangeCode={this.state.exchangeCode}
                 />
                 <Content
                     coupons={mockData}

src/components/coupons/use-coupons/index.js

@@ -3,8 +3,7 @@ import './use-coupon.scss'
 
 import ExchangeaBar from "../common/ExchangeBar";
 import Coupon from '../common/Coupon'
-import { WithFullSize } from '@/HOCs'
-
+import { http, api } from '@/utils'
 
 const mockData = {
     valid: [
@@ -44,12 +43,22 @@ const mockData = {
 
 class UseCoupon extends Component {
 
-    constructor(props) {
-        super(props)
-        this.state = {
+    state = {
         selected: 0,
-            exchangeNum: ''
+        exchangeCode: '',
+        couponList: []
+    }
+
+    componentDidMount(){
+        http.get(`${api.home}/m/coupon/all`)
+            .then(res => {
+                const data = res.data
+                if(data.code === 200){
+                    this.setState({
+                        couponList: data.data
+                    })
                 }
+            })
     }
 
     select = (val) => {
@@ -60,7 +69,7 @@ class UseCoupon extends Component {
     }
 
     handleChange = (val) => {
-        this.setState({exchangeNum: val})
+        this.setState({exchangeCode: val})
     }
 
     render() {
@@ -123,4 +132,4 @@ function Content({coupons, selected, ...rest}) {
     )
 }
 
-export default WithFullSize(UseCoupon);
\ No newline at end of file
+export default UseCoupon;
\ No newline at end of file

src/components/coupons/use-coupons/use-coupon.scss

 .use-coupon {
-    height: 100%;
     display: flex;
     flex-flow: column;
 
     .coupons-area {
-        padding: 15px 12px;
+        padding: 72px 12px;
         background: $bg_f5f5f5;
         flex: 1 1 auto;