Skip to content

M
mr-julyedu
Commit ed228052 by xuzhenghua
Options

优惠券

parent 2d6e62de
Showing with 230 additions and 24 deletions
src/common/VList/index.js
......@@ -12,6 +12,7 @@ const VList = (props) => {
<div className="content">
<div className="cover">
{props.status}
{props.courseExpire}
{props.toDetail
? (<img src={props.img} alt=""/>)
: (<img src={props.img} alt=""/>)
......
src/components/coupons/Coupon/index.js
......@@ -7,11 +7,15 @@ class Coupon extends PureComponent {
pick = () => {
let {useCoupon, invalid} = this.props
!invalid && useCoupon && useCoupon(this.props.id)
}
GoToUse = () => {
this.props.useCoupon(this.props.id)
}
ExchangeCourse = (e) => {
this.props.toExchangeCourse(e,this.props.code)
}
render() {
let {
......@@ -22,6 +26,7 @@ class Coupon extends PureComponent {
invalid,
course_title,
id,
code,
selectedCouponId,
showUseButton
} = this.props
......@@ -56,13 +61,21 @@ class Coupon extends PureComponent {
limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》`
}</span>
{
showUseButton &&
showUseButton && ctype == 1 &&
<button
className='use'
onClick={this.GoToUse}
>立即使用
</button>
}
{
showUseButton && ctype == 2 &&
<button
className='use'
onClick={(e)=>this.ExchangeCourse(e)}
>立即兑换
</button>
}
</div>
</li>
......
src/components/coupons/myCoupons/index.js
import React, { PureComponent } from 'react';
import React, {PureComponent} from 'react';
import './index.scss'
import RedeemBar from "../RedeemBar";
import Coupon from '../Coupon'
import { http, getParam } from '@/utils'
import { WithFullSize } from '@/HOCs'
import { Toast } from 'antd-mobile'
import { isEmpty } from 'lodash'
import { connect } from 'react-redux';
import {http, getParam} from '@/utils'
import {WithFullSize} from '@/HOCs'
import {Toast} from 'antd-mobile'
import {isEmpty} from 'lodash'
import {connect} from 'react-redux';
@connect()
class UseCoupon extends PureComponent {
......@@ -19,11 +19,12 @@ class UseCoupon extends PureComponent {
valid_coupons: [],
invalid_coupons: [],
courseId: getParam('id'),
showUseButton: false
showUseButton: false,
courseCouponExchange: false, // 课程券兑换弹窗
courseCouponData: '' // 兑换课程信息
}
componentDidMount() {
const {history, location} = this.props
const {state} = this.props.location
......@@ -47,6 +48,7 @@ class UseCoupon extends PureComponent {
this.setState({redeemCode: value})
}
// 兑换
exchange = () => {
const {location: {state = {}}} = this.props;
if (this.state.redeemCode !== '') {
......@@ -59,6 +61,13 @@ class UseCoupon extends PureComponent {
const coupon = data.data
if (coupon['ctype'] == 2) {
this.setState({
courseCouponData: coupon,
courseCouponExchange: true,
redeemCode: ''
})
} else {
if (this.state.showUseButton) {
this.setState({
couponList: [...this.state.couponList, coupon],
......@@ -67,21 +76,11 @@ class UseCoupon extends PureComponent {
} else {
const coupon = data.data
if (coupon['ctype'] == 2
&& coupon['limit_course'] != this.state.courseId) {
this.setState({
invalid_coupons: [...this.state.invalid_coupons, coupon],
showUseButton: null
});
} else {
this.setState({
valid_coupons: [...this.state.valid_coupons, coupon],
redeemCode: ''
})
}
}
Toast.info('兑换成功')
if (state.from === '/my') {
this.getMyCoupons()
......@@ -89,6 +88,7 @@ class UseCoupon extends PureComponent {
if (state.from === '/order') {
this.getAllCoupons()
}
}
} else {
Toast.info(data.msg)
}
......@@ -135,6 +135,24 @@ class UseCoupon extends PureComponent {
})
}
// 立即兑换课程
toExchangeCourse = (e,code)=>{
e.stopPropagation();
http.post(`${API['base-api']}/pay/miandan/${code}`, {
}).then(res => {
const data = res.data
if (data.errno === 200) {
this.setState({
courseCouponExchange: true,
courseCouponData:res.data.data
})
this.getMyCoupons()
} else {
Toast.info(data.msg)
}
})
}
useCoupon = val => {
const {history, dispatch} = this.props
const coupon = this.state.couponList.find(item => item.id === val)
......@@ -142,13 +160,11 @@ class UseCoupon extends PureComponent {
if (val) {
if (this.state.showUseButton) {
if (coupon['ctype'] === 1) {
if (coupon['limit_course'] === 0) {
history.push(`/classify`)
} else {
// dispatch(getCourses(coupon['limit_course'], () => {
history.push(`/detail?id=${coupon['limit_course']}`);
return false;
// }));
}
} else {
......@@ -206,6 +222,26 @@ class UseCoupon extends PureComponent {
}
// 开始学习
toStudy = (vCourseId, isHaveVideo) => {
const {history} = this.props;
if (isHaveVideo == 0) {
Toast.info('尚未开课，开课后立即上传课程～', 2)
} else {
history.push(`/play/video?id=${vCourseId}`)
}
this.setState({
courseCouponExchange: false
})
}
// 关闭弹窗
closeFreeCourse = () => {
this.setState({
courseCouponExchange: false
})
}
render() {
const {state} = this.props.location
const {showUseButton, selectedCouponId} = this.state
......@@ -227,6 +263,7 @@ class UseCoupon extends PureComponent {
selectedCouponId={selectedCouponId}
select={this.select}
useCoupon={this.useCoupon}
toExchangeCourse={this.toExchangeCourse}
/>
{
this.state.invalid_coupons.length > 0 &&
......@@ -244,6 +281,11 @@ class UseCoupon extends PureComponent {
)
}
</div>
{
this.state.courseCouponExchange &&
<FreeCouponCourse toStudy={this.toStudy} closeFreeCourse={this.closeFreeCourse}
courseCouponData={this.state.courseCouponData}/>
}
</div>
);
}
......@@ -275,4 +317,29 @@ function Content({coupons, ...rest}) {
)
}
function FreeCouponCourse(props) {
const {toStudy, closeFreeCourse, courseCouponData} = props
return (
<div className="free-coupon-box">
<div className="free-coupon-content">
<div className="coures-content-success"><i className={'iconfont icondanseshixintubiao-5'}/></div>
<div className="coures-content-title">恭喜你课程兑换成功!赶快去学习吧~</div>
<img className="coures-content-img" src={courseCouponData.image_name} alt=""/>
{
courseCouponData.course_expire != 0 &&
<div className="coures-content-tip"><i
className={'iconfont icondanseshixintubiao-8'}/><span>课程有效期：自今日起{courseCouponData.course_expire}天内，请在有效期内学习该课程哦～</span>
</div>
}
<a className='toStudy'
onClick={() => toStudy(courseCouponData.v_course_id, courseCouponData.is_is_start)}>去学习</a>
</div>
<div className="free-coupon-close">
<i className={'iconfont iconiconfront-2'} onClick={() => closeFreeCourse()}/>
</div>
</div>
)
}
export default WithFullSize(UseCoupon);
\ No newline at end of file
src/components/coupons/myCoupons/index.scss
......@@ -17,11 +17,95 @@
text-align: center;
}
.invalid-title{
.invalid-title {
text-align: center;
font-size: $font_12;
line-height: 52px;
color: $color_999;
}
}
.free-coupon-box {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: rgba(0,0,0,.6);
z-index: 11;
.free-coupon-content {
width: 290px;
border-radius: 10px;
background-color: #fff;
padding: 20px;
margin: 150px auto 0 auto;
.coures-content-success {
height: 30px;
line-height: 30px;
i {
font-size: 34px;
color: #09f;
}
}
.coures-content-title {
font-size: 15px;
color: #333;
margin-top: 10px;
}
.coures-content-img {
width: 150px;
height: 108px;
border-radius: 3px;
margin-top: 20px;
}
.coures-content-tip {
color: #FF3131;
font-size: 12px;
margin-top: 20px;
text-align: left;
line-height: 15px;
height: 30px;
i {
display: inline-block;
color: #FF3131;
font-size: 18px;
position: relative;
top: 6px;
}
span{
display: inline-block;
margin-left: 20px;
position: relative;
top: -15px;
}
}
.toStudy {
display: inline-block;
width: 138px;
height: 30px;
line-height: 30px;
background-color: #09f;
border-radius: 15px;
margin-top: 20px;
font-size: 15px;
color: #fff;
}
}
.free-coupon-close {
margin-top: 30px;
i{
font-size: 26px;
color: #fff;
}
}
}
}
\ No newline at end of file
src/components/purchased/index.js
......@@ -82,6 +82,10 @@ class Purchased extends Component {
const status = (
item.is_aist && <span className='status'>返现</span>
)
const courseExpire = (
item.course_expire && item.course_expire!='' &&
<span className='course-expire'>{item.course_expire}</span>
)
return (
<VList
key={index}
......@@ -89,6 +93,7 @@ class Purchased extends Component {
id={item.course_id}
info={Info}
status={status}
courseExpire={courseExpire}
toDetail={this.toCourseDetail}
/>
)
......
src/components/purchased/index.scss
......@@ -110,5 +110,18 @@ html, body, #root {
color: #fff;
background: linear-gradient(to bottom, #FF4000, #FD7700);
}
.course-expire{
display: inline-block;
text-align: center;
position: absolute;
bottom: 10px;
left: 0;
width:92px;
height:20px;
line-height: 21px;
background-color: #FF3A3A;
border-radius:0 10px 10px 0;
color: #fff;
font-size: 12px;
}
}
\ No newline at end of file
src/components/study/myCourses/index.js
......@@ -152,6 +152,10 @@ class MyCourses extends Component {
const status = (
item.is_aist && <span className='status'>返现</span>
)
const courseExpire = (
item.course_expire && item.course_expire!='' &&
<span className='course-expire'>{item.course_expire}</span>
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
......@@ -159,6 +163,7 @@ class MyCourses extends Component {
key={index}
info={Info}
status={status}
courseExpire={courseExpire}
id={item['v_course_id']}
/>
)
......
src/components/study/myCourses/my-courses.scss
......@@ -150,4 +150,18 @@
color: #fff;
background: linear-gradient(to bottom, #FF4000, #FD7700);
}
.course-expire{
display: inline-block;
text-align: center;
position: absolute;
bottom: 10px;
left: 0;
width:92px;
height:20px;
line-height: 21px;
background-color: #FF3A3A;
border-radius:0 10px 10px 0;
color: #fff;
font-size: 12px;
}
}
\ No newline at end of file
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