Skip to content

M
mr-julyedu
Commit 3f991cb0 by zhanghaozhe
Options

优惠券

parent e103d061
Showing with 354 additions and 93 deletions
src/common/deposit/end-expansion-alert/index.js 0 → 100644
import React from 'react'
import { Modal } from 'antd-mobile'
import './index.scss'
export default function ({
start_amount,
limit_amount,
onCancel = () => {
},
onConfirm
}) {
const content = (
<>
<div className="end-expansion-alert-ques">
{`你的${start_amount}元优惠券正在膨胀中，
确定要结束膨胀吗？`}
</div>
<div className="end-expansion-alert-hint">
{`离${limit_amount}元只差一点点了！继续膨胀，优惠更多哦`}
</div>
</>
)
Modal.alert('温馨提示', content, [
{text: '再考虑下', onPress: onCancel, style: {color: '#333'}},
{text: '确定结束膨胀', onPress: onConfirm}
])
}
src/common/deposit/end-expansion-alert/index.scss 0 → 100644
.am-modal {
width: 300px;
&-title {
font-size: 15px;
}
}
.end-expansion-alert {
&-ques {
width: 200px;
margin: 0 auto 20px;
text-align: center;
color: #666;
font-size: 15px;
}
&-hint {
color: #999;
font-size: 12px;
}
}
src/components/coupons/Coupon/coupon.scss
$bg_type1: #FE6161; $bg_voucher: #FE6161;
$bg_type2: #E0B97B; $bg_free: #E0B97B;
$bg_expand: #8361FE;
.coupon { .coupon {
position: relative; position: relative;
margin-bottom: 15px; margin-bottom: 15px;
...@@ -27,13 +28,14 @@ $bg_type2: #E0B97B; ...@@ -27,13 +28,14 @@ $bg_type2: #E0B97B;
} }
} }
.course-title{ .course-title {
width: 68.37%; width: 68.37%;
margin: 0 auto 4px; margin: 0 auto 4px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: $font_16; font-size: $font_16;
text-align: center;
} }
.expire { .expire {
...@@ -43,14 +45,18 @@ $bg_type2: #E0B97B; ...@@ -43,14 +45,18 @@ $bg_type2: #E0B97B;
} }
&.coupon-type1 { &.coupon-type1 {
background: $bg_type1; background: $bg_voucher;
} }
&.coupon-type2 { &.coupon-type2 {
background: $E0B97B; background: $E0B97B;
} }
&.invalid{ &.coupon-type4 {
background: $bg_expand;
}
&.invalid {
background: $color_999; background: $color_999;
} }
...@@ -87,6 +93,44 @@ $bg_type2: #E0B97B; ...@@ -87,6 +93,44 @@ $bg_type2: #E0B97B;
transform: translateY(50%); transform: translateY(50%);
} }
} }
.progress-container {
width: 299px;
margin: 0 auto;
.denomination {
font-size: 15px;
line-height: 1.3em;
color: #F8E71C;
span{
transform: scale(0.9);
}
}
.progress-bar-container {
position: relative;
height: 7px;
background: #5C2FFF;
border-radius: 4px;
overflow: hidden;
margin-bottom: 6px;
.progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #F8E71C;
border-radius: 4px;
}
}
.money {
display: flex;
justify-content: space-between;
}
}
} }
.coupon-des { .coupon-des {
...@@ -117,5 +161,15 @@ $bg_type2: #E0B97B; ...@@ -117,5 +161,15 @@ $bg_type2: #E0B97B;
background: transparent; background: transparent;
-webkit-appearance: none; -webkit-appearance: none;
} }
.stop-expanding {
padding: 3px 8px;
border: 1px solid #FF3131;
border-radius: 10px;
-webkit-appearance: none;
background: transparent;
color: #FF3131;
font-size: 10px;
}
} }
} }
\ No newline at end of file
src/components/coupons/Coupon/index.js
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import './coupon.scss' import './coupon.scss'
import classnames from 'classnames' import classnames from 'classnames'
import { http } from "@/utils"
import showAlert from '@common/deposit/end-expansion-alert'
import {Toast} from 'antd-mobile'
class Coupon extends PureComponent { class Coupon extends PureComponent {
VOUCHER = 1 //代金券
FREE = 2 //免单券
EXPAND = 4 //膨胀全
pick = () => { pick = () => {
let {useCoupon, invalid} = this.props let {useCoupon, invalid} = this.props
!invalid && useCoupon && useCoupon(this.props.id) !invalid && useCoupon && useCoupon(this.props.id)
...@@ -14,73 +22,191 @@ class Coupon extends PureComponent { ...@@ -14,73 +22,191 @@ class Coupon extends PureComponent {
this.props.useCoupon(this.props.id) this.props.useCoupon(this.props.id)
} }
ExchangeCourse = (e) => { ExchangeCourse = (e) => {
this.props.toExchangeCourse(e,this.props.code) this.props.toExchangeCourse(e, this.props.code)
}
stopExpanding = (id, e) => {
const {start_amount, limit_amount} = this.props
e.stopPropagation()
showAlert({
start_amount,
limit_amount,
onConfirm: () => {
http.post(`${API.home}/m/end_expansion`, {
id
})
.then(res => {
const {data} = res
if (data.code == 200) {
this.props.endExpansion(id)
}else {
Toast.info(data.msg)
}
})
}
})
} }
render() { render() {
let { let {
ctype, ctype,
amount, amount,
format_expire_time,
limit_course,
invalid,
course_title, course_title,
showUseButton,
id, id,
code, format_expire_time,
selectedCouponId, start_amount,
showUseButton limit_amount
} = this.props } = this.props
return ( let top, bottom
<li className='coupon' onClick={this.pick}>
<div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${ctype}`)}>
<p className='type'>{ctype === 1 ? '代金券' : '课程券'}</p>
{
ctype === 1 ? <p className='denomination'>{amount} <span>元</span></p>
: <p className='course-title'>{course_title}</p>
} switch (ctype) {
<p className='expire'>有效期至：{format_expire_time}</p> case this.VOUCHER:
{ top = (
selectedCouponId === id && <>
<i className={classnames('iconfont icondanseshixintubiao-5', { <p className='denomination'>{amount} <span>元</span></p>
check: !invalid <p className='expire'>有效期至：{format_expire_time}</p>
})} </>
/>
} )
<ul> bottom = (
<>
<span className={'limit'}>可用于大于代金券金额的课程</span>
{ {
new Array(19).fill('a').map((item, index) => { showUseButton && ctype == this.VOUCHER &&
return <li key={index}/> <button
}) className='use'
onClick={this.GoToUse}
>立即使用
</button>
} }
</ul> </>
</div>
<div className="coupon-des"> )
<span className='limit'>{ break
limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》` case this.FREE:
}</span> top = (
{ <>
showUseButton && ctype == 1 && <p className='course-title'>{course_title}</p>
<button <p className='expire'>有效期至：{format_expire_time}</p>
className='use'
onClick={this.GoToUse} </>
>立即使用 )
</button> bottom = (
} <>
{ <span className={'limit'}>{`仅适用于《${course_title}》`}</span>
showUseButton && ctype == 2 && {
<button showUseButton && ctype == this.FREE &&
className='use' <button
onClick={(e)=>this.ExchangeCourse(e)} className='use'
>立即兑换 onClick={(e) => this.ExchangeCourse(e)}
</button> >立即兑换
} </button>
}
</>
)
break
case this.EXPAND:
if (!start_amount) {
top = (
<>
<p className='denomination'>{amount} <span>元</span></p>
<p className='expire'>有效期至：{format_expire_time}</p>
</>
)
} else {
top = (
<>
<div className="progress-container">
<p className='denomination'>{amount} <span>元</span></p>
<div className={'progress-bar-container'}>
<span className={'progress-bar'}
style={{width: `${Math.round((amount - start_amount) / limit_amount * 100)}%`}}
></span>
</div>
<div className={'money'}>
<span>{start_amount}元</span>
<span>{limit_amount}元</span>
</div>
</div>
</>
)
}
bottom = (
<>
<span className={'limit'}>全场通用</span>
{
start_amount
&& <button className='stop-expanding'
onClick={this.stopExpanding.bind(this, id)}>立即结束膨胀</button>
}
</>
)
break
}
return (
<BaseCoupon
{...this.props}
top={top}
VOUCHER={this.VOUCHER}
FREE={this.FREE}
EXPAND={this.EXPAND}
pick={this.pick}
bottom={bottom}
/>
)
}
}
</div> function BaseCoupon(
</li> {
); pick,
ctype,
invalid,
top,
VOUCHER,
FREE,
EXPAND,
selectedCouponId,
id,
bottom
}) {
let couponTypes = {
[VOUCHER]: '代金券',
[FREE]: '课程券',
[EXPAND]: '膨胀券'
} }
return (
<li className='coupon' onClick={pick}>
<div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${ctype}`)}>
<p className='type'>{couponTypes[ctype]}</p>
{top}
{
selectedCouponId === id &&
<i className={classnames('iconfont icondanseshixintubiao-5', {
check: !invalid
})}
/>
}
<ul>
{
new Array(19).fill('a').map((item, index) => {
return <li key={index}/>
})
}
</ul>
</div>
<div className="coupon-des">
{bottom}
</div>
</li>
)
} }
export default Coupon export default Coupon
\ No newline at end of file
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 {
...@@ -30,7 +30,7 @@ class UseCoupon extends PureComponent { ...@@ -30,7 +30,7 @@ class UseCoupon extends PureComponent {
const {state} = this.props.location const {state} = this.props.location
if (state && state.from) { if (state && state.from) {
if (state.from === '/my') { if (state.from === '/my') {
this.getMyCoupons(); this.getMyCoupons()
this.setState({ this.setState({
showUseButton: true showUseButton: true
}) })
...@@ -38,7 +38,7 @@ class UseCoupon extends PureComponent { ...@@ -38,7 +38,7 @@ class UseCoupon extends PureComponent {
if (!this.state.courseId) { if (!this.state.courseId) {
location.state && location.state.from ? history.replace(location.state.from) : history.goBack() location.state && location.state.from ? history.replace(location.state.from) : history.goBack()
} }
this.getAllCoupons(); this.getAllCoupons()
} }
} }
} }
...@@ -50,7 +50,7 @@ class UseCoupon extends PureComponent { ...@@ -50,7 +50,7 @@ class UseCoupon extends PureComponent {
// 兑换 // 兑换
exchange = () => { exchange = () => {
const {location: {state = {}}} = this.props; const {location: {state = {}}} = this.props
if (this.state.redeemCode !== '') { if (this.state.redeemCode !== '') {
http.post(`${API.home}/m/coupon/exchange`, { http.post(`${API.home}/m/coupon/exchange`, {
code: this.state.redeemCode, code: this.state.redeemCode,
...@@ -88,7 +88,7 @@ class UseCoupon extends PureComponent { ...@@ -88,7 +88,7 @@ class UseCoupon extends PureComponent {
invalid_coupons: [...this.state.invalid_coupons, coupon], invalid_coupons: [...this.state.invalid_coupons, coupon],
showUseButton: null, showUseButton: null,
redeemCode: '' redeemCode: ''
}); })
} else { } else {
this.setState({ this.setState({
valid_coupons: [...this.state.valid_coupons, coupon], valid_coupons: [...this.state.valid_coupons, coupon],
...@@ -109,26 +109,47 @@ class UseCoupon extends PureComponent { ...@@ -109,26 +109,47 @@ class UseCoupon extends PureComponent {
} }
getMyCoupons = () => { getMyCoupons = () => {
http.get(`${API.home}/m/coupon/all`) Promise.all([
.then(res => { http.get(`${API.home}/m/coupon/all`),
const data = res.data http.get(`${API.home}/m/coupon/expansion`)
if (data.code === 200) { ]).then((coupons) => {
this.setState({ let myCoupons = []
couponList: isEmpty(data.data) ? [] : data.data const [allCoupons, expansionCoupons] = coupons
}) const {data: all} = allCoupons
} else { const {data: expansion} = expansionCoupons
Toast.info(data.msg) if (all.code == 200) {
} Array.isArray(all.data) && (myCoupons = myCoupons.concat(all.data))
} else {
Toast.info(all.msg)
}
if (expansion.code == 200) {
Array.isArray(expansion.data)
&& (expansion.data = expansion.data.map(item => (item.ctype = 4, item)))
&& (myCoupons = myCoupons.concat(expansion.data))
} else {
Toast.info(expansion.msg)
}
this.setState({
couponList: myCoupons
}) })
})
} }
getAllCoupons = () => { getAllCoupons = () => {
http.post(`${API.home}/m/coupon/select`, {course_id: this.state.courseId}) Promise.all([
http.post(`${API.home}/m/coupon/select`, {course_id: this.state.courseId}),
http.get(`${API.home}/m/expansion`)
]).then((coupons) => {
})
/*http.post(`${API.home}/m/coupon/select`, {course_id: this.state.courseId})
.then(res => { .then(res => {
const data = res.data const data = res.data
if (data.code === 200) { if (data.code === 200) {
const inuse_coupon = data.data['inuse_coupon']; const inuse_coupon = data.data['inuse_coupon']
this.setState({ this.setState({
...@@ -142,12 +163,13 @@ class UseCoupon extends PureComponent { ...@@ -142,12 +163,13 @@ class UseCoupon extends PureComponent {
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
} }
}) })*/
// http.get(`${API.home}/m/expansion`)
} }
// 立即兑换课程 // 立即兑换课程
toExchangeCourse = (e, code) => { toExchangeCourse = (e, code) => {
e.stopPropagation(); e.stopPropagation()
http.post(`${API['base-api']}/pay/miandan/${code}`, {}).then(res => { http.post(`${API['base-api']}/pay/miandan/${code}`, {}).then(res => {
const data = res.data const data = res.data
if (data.errno === 200) { if (data.errno === 200) {
...@@ -163,7 +185,7 @@ class UseCoupon extends PureComponent { ...@@ -163,7 +185,7 @@ class UseCoupon extends PureComponent {
} }
useCoupon = val => { useCoupon = val => {
const {history, dispatch} = this.props const {history} = this.props
const coupon = this.state.couponList.find(item => item.id === val) const coupon = this.state.couponList.find(item => item.id === val)
if (val) { if (val) {
...@@ -172,8 +194,8 @@ class UseCoupon extends PureComponent { ...@@ -172,8 +194,8 @@ class UseCoupon extends PureComponent {
if (coupon['limit_course'] === 0) { if (coupon['limit_course'] === 0) {
history.push(`/classify`) history.push(`/classify`)
} else { } else {
history.push(`/detail?id=${coupon['limit_course']}`); history.push(`/detail?id=${coupon['limit_course']}`)
return false; return false
} }
} else { } else {
...@@ -233,7 +255,7 @@ class UseCoupon extends PureComponent { ...@@ -233,7 +255,7 @@ class UseCoupon extends PureComponent {
// 开始学习 // 开始学习
toStudy = (vCourseId, isHaveVideo) => { toStudy = (vCourseId, isHaveVideo) => {
const {history} = this.props; const {history} = this.props
if (isHaveVideo == 0) { if (isHaveVideo == 0) {
Toast.info('尚未开课，开课后立即上传课程～', 2) Toast.info('尚未开课，开课后立即上传课程～', 2)
} else { } else {
...@@ -251,6 +273,18 @@ class UseCoupon extends PureComponent { ...@@ -251,6 +273,18 @@ class UseCoupon extends PureComponent {
}) })
} }
endExpansion = id => {
this.setState({
couponList: this.state.couponList.map(item => {
if (item.id === id) {
delete item.start_amount
}
return item
})
})
}
render() { render() {
const {state} = this.props.location const {state} = this.props.location
const {showUseButton, selectedCouponId} = this.state const {showUseButton, selectedCouponId} = this.state
...@@ -273,6 +307,7 @@ class UseCoupon extends PureComponent { ...@@ -273,6 +307,7 @@ class UseCoupon extends PureComponent {
select={this.select} select={this.select}
useCoupon={this.useCoupon} useCoupon={this.useCoupon}
toExchangeCourse={this.toExchangeCourse} toExchangeCourse={this.toExchangeCourse}
endExpansion={this.endExpansion}
/> />
{ {
this.state.invalid_coupons.length > 0 && this.state.invalid_coupons.length > 0 &&
...@@ -296,7 +331,7 @@ class UseCoupon extends PureComponent { ...@@ -296,7 +331,7 @@ class UseCoupon extends PureComponent {
courseCouponData={this.state.courseCouponData}/> courseCouponData={this.state.courseCouponData}/>
} }
</div> </div>
); )
} }
} }
...@@ -351,4 +386,4 @@ function FreeCouponCourse(props) { ...@@ -351,4 +386,4 @@ function FreeCouponCourse(props) {
) )
} }
export default WithFullSize(UseCoupon); export default WithFullSize(UseCoupon)
\ 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