Skip to content

M
mr-julyedu
Commit ed228052 by xuzhenghua
Options

优惠券

parent 2d6e62de
Showing with 262 additions and 56 deletions
src/common/VList/index.js
...@@ -3,8 +3,8 @@ import './index.scss' ...@@ -3,8 +3,8 @@ import './index.scss'
const VList = (props) => { const VList = (props) => {
return ( return (
<li <li
className='v-list-item' className='v-list-item'
onClick={() => { onClick={() => {
typeof props.toDetail === 'function' && props.toDetail(props.id) typeof props.toDetail === 'function' && props.toDetail(props.id)
}} }}
...@@ -12,6 +12,7 @@ const VList = (props) => { ...@@ -12,6 +12,7 @@ const VList = (props) => {
<div className="content"> <div className="content">
<div className="cover"> <div className="cover">
{props.status} {props.status}
{props.courseExpire}
{props.toDetail {props.toDetail
? (<img src={props.img} alt=""/>) ? (<img src={props.img} alt=""/>)
: (<img src={props.img} alt=""/>) : (<img src={props.img} alt=""/>)
......
src/components/coupons/Coupon/index.js
...@@ -7,11 +7,15 @@ class Coupon extends PureComponent { ...@@ -7,11 +7,15 @@ class Coupon extends PureComponent {
pick = () => { pick = () => {
let {useCoupon, invalid} = this.props let {useCoupon, invalid} = this.props
!invalid && useCoupon && useCoupon(this.props.id) !invalid && useCoupon && useCoupon(this.props.id)
} }
GoToUse = () => { GoToUse = () => {
this.props.useCoupon(this.props.id) this.props.useCoupon(this.props.id)
} }
ExchangeCourse = (e) => {
this.props.toExchangeCourse(e,this.props.code)
}
render() { render() {
let { let {
...@@ -22,6 +26,7 @@ class Coupon extends PureComponent { ...@@ -22,6 +26,7 @@ class Coupon extends PureComponent {
invalid, invalid,
course_title, course_title,
id, id,
code,
selectedCouponId, selectedCouponId,
showUseButton showUseButton
} = this.props } = this.props
...@@ -56,13 +61,21 @@ class Coupon extends PureComponent { ...@@ -56,13 +61,21 @@ class Coupon extends PureComponent {
limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》` limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》`
}</span> }</span>
{ {
showUseButton && showUseButton && ctype == 1 &&
<button <button
className='use' className='use'
onClick={this.GoToUse} onClick={this.GoToUse}
>立即使用 >立即使用
</button> </button>
} }
{
showUseButton && ctype == 2 &&
<button
className='use'
onClick={(e)=>this.ExchangeCourse(e)}
>立即兑换
</button>
}
</div> </div>
</li> </li>
......
src/components/coupons/myCoupons/index.js
import React, { PureComponent } from 'react'; import React, {PureComponent} from 'react';
import './index.scss' import './index.scss'
import RedeemBar from "../RedeemBar"; import RedeemBar from "../RedeemBar";
import Coupon from '../Coupon' import Coupon from '../Coupon'
import { http, getParam } from '@/utils' import {http, getParam} from '@/utils'
import { WithFullSize } from '@/HOCs' import {WithFullSize} from '@/HOCs'
import { Toast } from 'antd-mobile' import {Toast} from 'antd-mobile'
import { isEmpty } from 'lodash' import {isEmpty} from 'lodash'
import { connect } from 'react-redux'; import {connect} from 'react-redux';
@connect() @connect()
class UseCoupon extends PureComponent { class UseCoupon extends PureComponent {
...@@ -19,11 +19,12 @@ class UseCoupon extends PureComponent { ...@@ -19,11 +19,12 @@ class UseCoupon extends PureComponent {
valid_coupons: [], valid_coupons: [],
invalid_coupons: [], invalid_coupons: [],
courseId: getParam('id'), courseId: getParam('id'),
showUseButton: false showUseButton: false,
courseCouponExchange: false, // 课程券兑换弹窗
courseCouponData: '' // 兑换课程信息
} }
componentDidMount() { componentDidMount() {
const {history, location} = this.props const {history, location} = this.props
const {state} = this.props.location const {state} = this.props.location
...@@ -47,6 +48,7 @@ class UseCoupon extends PureComponent { ...@@ -47,6 +48,7 @@ class UseCoupon extends PureComponent {
this.setState({redeemCode: value}) this.setState({redeemCode: value})
} }
// 兑换
exchange = () => { exchange = () => {
const {location: {state = {}}} = this.props; const {location: {state = {}}} = this.props;
if (this.state.redeemCode !== '') { if (this.state.redeemCode !== '') {
...@@ -59,35 +61,33 @@ class UseCoupon extends PureComponent { ...@@ -59,35 +61,33 @@ class UseCoupon extends PureComponent {
const coupon = data.data const coupon = data.data
if (this.state.showUseButton) { if (coupon['ctype'] == 2) {
this.setState({ this.setState({
couponList: [...this.state.couponList, coupon], courseCouponData: coupon,
courseCouponExchange: true,
redeemCode: '' redeemCode: ''
}) })
} else { } else {
if (this.state.showUseButton) {
const coupon = data.data
if (coupon['ctype'] == 2
&& coupon['limit_course'] != this.state.courseId) {
this.setState({ this.setState({
invalid_coupons: [...this.state.invalid_coupons, coupon], couponList: [...this.state.couponList, coupon],
showUseButton: null redeemCode: ''
}); })
} else { } else {
const coupon = data.data
this.setState({ this.setState({
valid_coupons: [...this.state.valid_coupons, coupon], valid_coupons: [...this.state.valid_coupons, coupon],
redeemCode: '' redeemCode: ''
}) })
} }
Toast.info('兑换成功')
} if (state.from === '/my') {
Toast.info('兑换成功') this.getMyCoupons()
if (state.from === '/my') { }
this.getMyCoupons() if (state.from === '/order') {
} this.getAllCoupons()
if (state.from === '/order') { }
this.getAllCoupons()
} }
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
...@@ -135,6 +135,24 @@ class UseCoupon extends PureComponent { ...@@ -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 => { useCoupon = val => {
const {history, dispatch} = this.props const {history, dispatch} = this.props
const coupon = this.state.couponList.find(item => item.id === val) const coupon = this.state.couponList.find(item => item.id === val)
...@@ -142,13 +160,11 @@ class UseCoupon extends PureComponent { ...@@ -142,13 +160,11 @@ class UseCoupon extends PureComponent {
if (val) { if (val) {
if (this.state.showUseButton) { if (this.state.showUseButton) {
if (coupon['ctype'] === 1) { if (coupon['limit_course'] === 0) {
history.push(`/classify`) history.push(`/classify`)
} else { } else {
// dispatch(getCourses(coupon['limit_course'], () => { history.push(`/detail?id=${coupon['limit_course']}`);
history.push(`/detail?id=${coupon['limit_course']}`); return false;
return false;
// }));
} }
} else { } else {
...@@ -206,6 +222,26 @@ class UseCoupon extends PureComponent { ...@@ -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() { render() {
const {state} = this.props.location const {state} = this.props.location
const {showUseButton, selectedCouponId} = this.state const {showUseButton, selectedCouponId} = this.state
...@@ -227,6 +263,7 @@ class UseCoupon extends PureComponent { ...@@ -227,6 +263,7 @@ class UseCoupon extends PureComponent {
selectedCouponId={selectedCouponId} selectedCouponId={selectedCouponId}
select={this.select} select={this.select}
useCoupon={this.useCoupon} useCoupon={this.useCoupon}
toExchangeCourse={this.toExchangeCourse}
/> />
{ {
this.state.invalid_coupons.length > 0 && this.state.invalid_coupons.length > 0 &&
...@@ -244,6 +281,11 @@ class UseCoupon extends PureComponent { ...@@ -244,6 +281,11 @@ class UseCoupon extends PureComponent {
) )
} }
</div> </div>
{
this.state.courseCouponExchange &&
<FreeCouponCourse toStudy={this.toStudy} closeFreeCourse={this.closeFreeCourse}
courseCouponData={this.state.courseCouponData}/>
}
</div> </div>
); );
} }
...@@ -275,4 +317,29 @@ function Content({coupons, ...rest}) { ...@@ -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); export default WithFullSize(UseCoupon);
\ No newline at end of file
src/components/coupons/myCoupons/index.scss
.use-coupon { .use-coupon {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: 100%; height: 100%;
background-color: #f5f5f5; background-color: #f5f5f5;
.coupons-area { .coupons-area {
padding: 72px 12px 0px; padding: 72px 12px 0px;
background: $bg_f5f5f5; background: $bg_f5f5f5;
flex: 1 1 auto; flex: 1 1 auto;
.empty { .empty {
min-height: 211px; min-height: 211px;
line-height: 211px; line-height: 211px;
font-size: $font_12; font-size: $font_12;
color: $color_666; color: $color_666;
text-align: center; text-align: center;
}
.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;
}
.invalid-title{ .coures-content-img {
text-align: center; width: 150px;
font-size: $font_12; height: 108px;
line-height: 52px; border-radius: 3px;
color: $color_999; 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 { ...@@ -82,6 +82,10 @@ class Purchased extends Component {
const status = ( const status = (
item.is_aist && <span className='status'>返现</span> item.is_aist && <span className='status'>返现</span>
) )
const courseExpire = (
item.course_expire && item.course_expire!='' &&
<span className='course-expire'>{item.course_expire}</span>
)
return ( return (
<VList <VList
key={index} key={index}
...@@ -89,6 +93,7 @@ class Purchased extends Component { ...@@ -89,6 +93,7 @@ class Purchased extends Component {
id={item.course_id} id={item.course_id}
info={Info} info={Info}
status={status} status={status}
courseExpire={courseExpire}
toDetail={this.toCourseDetail} toDetail={this.toCourseDetail}
/> />
) )
......
src/components/purchased/index.scss
...@@ -110,5 +110,18 @@ html, body, #root { ...@@ -110,5 +110,18 @@ html, body, #root {
color: #fff; color: #fff;
background: linear-gradient(to bottom, #FF4000, #FD7700); 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 { ...@@ -152,6 +152,10 @@ class MyCourses extends Component {
const status = ( const status = (
item.is_aist && <span className='status'>返现</span> item.is_aist && <span className='status'>返现</span>
) )
const courseExpire = (
item.course_expire && item.course_expire!='' &&
<span className='course-expire'>{item.course_expire}</span>
)
return ( return (
<VList img={item.image_name} <VList img={item.image_name}
handleClick={this.handleClick} handleClick={this.handleClick}
...@@ -159,6 +163,7 @@ class MyCourses extends Component { ...@@ -159,6 +163,7 @@ class MyCourses extends Component {
key={index} key={index}
info={Info} info={Info}
status={status} status={status}
courseExpire={courseExpire}
id={item['v_course_id']} id={item['v_course_id']}
/> />
) )
......
src/components/study/myCourses/my-courses.scss
...@@ -150,4 +150,18 @@ ...@@ -150,4 +150,18 @@
color: #fff; color: #fff;
background: linear-gradient(to bottom, #FF4000, #FD7700); 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