获取和兑换优惠券

src/components/coupons/Coupon/index.js

@@ -5,12 +5,12 @@ import classnames from 'classnames'
 class Coupon extends PureComponent {
 
     pick = () => {
-        let {purpose, select, invalid} = this.props
-        purpose === 'use' && !invalid && select && select(this.props.id)
+        let {select, invalid} = this.props
+        !invalid && select && select(this.props.id)
     }
 
     GoToUse = () => {
-        this.props.toUse(this.props.id)
+        this.props.useCoupon(this.props.id)
     }
 
     render() {
@@ -19,15 +19,12 @@ class Coupon extends PureComponent {
             amount,
             format_expire_time,
             limit_course,
-            selected,
             invalid,
-            purpose,
             course_title,
             id,
             selectedCouponId
         } = this.props
 
-
         return (
             <li className='coupon' onClick={this.pick}>
                 <div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${ctype}`)}>
@@ -39,9 +36,9 @@ class Coupon extends PureComponent {
                     }
                     <p className='expire'>有效期至：{format_expire_time}</p>
                     {
-                        purpose === 'use' &&
+                        selectedCouponId === id &&
                         <i className={classnames('iconfont icondanseshixintubiao-5', {
-                            check: (selected && !invalid) && (selectedCouponId === id)
+                            check: !invalid
                         })}
                         />
                     }
@@ -58,7 +55,6 @@ class Coupon extends PureComponent {
                         limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》`
                     }</span>
                     {
-                        purpose === 'exchange' &&
                         <button
                             className='use'
                             onClick={this.GoToUse}

src/components/coupons/index.js

@@ -7,52 +7,16 @@ import { http, api } from '@/utils'
 import { WithFullSize } from '@/HOCs'
 import { Toast } from 'antd-mobile'
 
-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 PureComponent {
 
     state = {
-        selected: true,
         selectedCouponId: 0,
         exchangeCode: '',
         couponList: [],
         valid_coupons: [],
         invalid_coupons: [],
-        inuse_coupon: []
+        courseId: 139,
     }
 
     componentDidMount() {
@@ -71,12 +35,8 @@ class UseCoupon extends PureComponent {
     }
 
     select = val => {
-        this.setState(state => {
-            console.log(state.selected, state.selectedCouponId)
-            return {
-                selected: !state.selected,
-                selectedCouponId: val
-            }
+        this.setState({
+            selectedCouponId: val === this.state.selectedCouponId ? 0 : val
         })
     }
 
@@ -97,7 +57,7 @@ class UseCoupon extends PureComponent {
                         })
                         Toast.info('兑换成功')
                     } else {
-                        Toast.fail(data.msg)
+                        Toast.info(data.msg)
                     }
                 })
         } else {
@@ -111,35 +71,52 @@ class UseCoupon extends PureComponent {
                 const data = res.data
                 if (data.code === 200) {
                     this.setState({
-                        couponList: data.data,
-                        selectedCouponId: data.data[0].id
+                        couponList: data.data
                     })
                 } else {
-                    Toast.fail(data.msg)
+                    Toast.info(data.msg)
                 }
             })
     }
 
     getAllCoupons = () => {
-        http.post(`${api.home}/m/coupon/select`, {course_id: 139})
+        http.post(`${api.home}/m/coupon/select`, {course_id: this.state.courseId})
             .then(res => {
                 const data = res.data
                 if (data.code === 200) {
 
+                    const inuse_coupon = data.data.inuse_coupon;
+
                     this.setState({
-                        valid_coupons: data.data.valid_coupons,
+                        valid_coupons: inuse_coupon
+                            ? [...inuse_coupon, ...data.data.valid_coupons]
+                            : data.data.valid_coupons,
                         invalid_coupons: data.data.invalid_coupons,
-                        inuse_coupon: data.data.inuse_coupon
+                        selectedCouponId: inuse_coupon ? inuse_coupon[0].id : 0
                     })
 
                 } else {
-                    Toast.fail(data.msg)
+                    Toast.info(data.msg)
                 }
             })
     }
 
-    selectCoupon = () => {
+    useCoupon = (val) => {
+        if (val) {
+            http.post(`${api.home}/m/coupon/use`, {
+                course_id: this.state.courseId,
+                coupon_id: val
+            })
+                .then(res => {
+                    const data = res && res.data
+                    if (data.code === 200) {
+
 
+                    } else {
+                        Toast.info(data.msg)
+                    }
+                })
+        }
     }
 
     render() {
@@ -151,12 +128,18 @@ class UseCoupon extends PureComponent {
                               exchangeCode={this.state.exchangeCode}/>
                 <div className="coupons-area">
                     <Content
-                        coupons={state && state.from && state.from === '/my' ? this.state.couponList : this.state.valid_coupons}
+                        coupons={
+                            state
+                            && state.from
+                            && state.from === '/my'
+                                ? this.state.couponList
+                                : this.state.valid_coupons
+                        }
                         showUseButton={false}
                         selected={this.state.selected}
                         selectedCouponId={this.state.selectedCouponId}
                         select={this.select}
-                        purpose={'use'}
+                        useCoupon={this.useCoupon}
                     />
                     {
                         this.state.invalid_coupons.length > 0 &&
@@ -165,7 +148,6 @@ class UseCoupon extends PureComponent {
                                 <div className='invalid-title'>- 不可使用的优惠券 -</div>
                                 <Content
                                     coupons={this.state.invalid_coupons}
-                                    selected={this.state.selected}
                                     selectedCouponId={this.state.selectedCouponId}
                                     select={this.select}
                                     purpose={'use'}
@@ -180,7 +162,7 @@ class UseCoupon extends PureComponent {
     }
 }
 
-function Content({coupons, selected, ...rest}) {
+function Content({coupons, ...rest}) {
     if (coupons.length === 0) {
         return (
             <div className='empty'>
@@ -196,7 +178,6 @@ function Content({coupons, selected, ...rest}) {
                         <Coupon
                             key={item.id}
                             {...item}
-                            selected={selected}
                             id={item.id}
                             {...rest}
                         />