Skip to content

M
mr-julyedu
Commit 04745c79 by xuzhenghua
Options

dingjin

parent b3a70193
Showing with 601 additions and 225 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_type2: #E0B97B;
$bg_voucher: #FE6161;
$bg_free: #E0B97B;
$bg_expand: #8361FE;
.coupon {
position: relative;
margin-bottom: 15px;
......@@ -27,13 +28,14 @@ $bg_type2: #E0B97B;
}
}
.course-title{
.course-title {
width: 68.37%;
margin: 0 auto 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: $font_16;
text-align: center;
}
.expire {
......@@ -43,14 +45,18 @@ $bg_type2: #E0B97B;
}
&.coupon-type1 {
background: $bg_type1;
background: $bg_voucher;
}
&.coupon-type2 {
background: $E0B97B;
}
&.invalid{
&.coupon-type4 {
background: $bg_expand;
}
&.invalid {
background: $color_999;
}
......@@ -87,6 +93,44 @@ $bg_type2: #E0B97B;
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 {
......@@ -117,5 +161,15 @@ $bg_type2: #E0B97B;
background: transparent;
-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 './coupon.scss'
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 {
VOUCHER = 1 //代金券
FREE = 2 //免单券
EXPAND = 4 //膨胀全
pick = () => {
let {useCoupon, invalid} = this.props
!invalid && useCoupon && useCoupon(this.props.id)
......@@ -14,73 +22,191 @@ class Coupon extends PureComponent {
this.props.useCoupon(this.props.id)
}
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() {
let {
ctype,
amount,
format_expire_time,
limit_course,
invalid,
course_title,
showUseButton,
id,
code,
selectedCouponId,
showUseButton
format_expire_time,
start_amount,
limit_amount
} = this.props
return (
<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>
let top, bottom
}
<p className='expire'>有效期至：{format_expire_time}</p>
{
selectedCouponId === id &&
<i className={classnames('iconfont icondanseshixintubiao-5', {
check: !invalid
})}
/>
}
<ul>
switch (ctype) {
case this.VOUCHER:
top = (
<>
<p className='denomination'>{amount} <span>元</span></p>
<p className='expire'>有效期至：{format_expire_time}</p>
</>
)
bottom = (
<>
<span className={'limit'}>可用于大于代金券金额的课程</span>
{
new Array(19).fill('a').map((item, index) => {
return <li key={index}/>
})
showUseButton && ctype == this.VOUCHER &&
<button
className='use'
onClick={this.GoToUse}
>立即使用
</button>
}
</ul>
</div>
<div className="coupon-des">
<span className='limit'>{
limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》`
}</span>
{
showUseButton && ctype == 1 &&
<button
className='use'
onClick={this.GoToUse}
>立即使用
</button>
}
{
showUseButton && ctype == 2 &&
<button
className='use'
onClick={(e)=>this.ExchangeCourse(e)}
>立即兑换
</button>
}
</>
)
break
case this.FREE:
top = (
<>
<p className='course-title'>{course_title}</p>
<p className='expire'>有效期至：{format_expire_time}</p>
</>
)
bottom = (
<>
<span className={'limit'}>{`仅适用于《${course_title}》`}</span>
{
showUseButton && ctype == this.FREE &&
<button
className='use'
onClick={(e) => this.ExchangeCourse(e)}
>立即兑换
</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>
</li>
);
function BaseCoupon(
{
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
\ No newline at end of file
export default Coupon
src/components/coupons/Coupon/index.js.bak 0 → 100644
import React, { PureComponent } from 'react'
import './coupon.scss'
import classnames from 'classnames'
class Coupon extends PureComponent {
VOUCHER = 1 //代金券
FREE = 2 //免单券
EXPAND = 4 //膨胀全
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 {
ctype,
amount,
format_expire_time,
limit_course,
invalid,
course_title,
id,
code,
selectedCouponId,
showUseButton
} = this.props
return (
<li className='coupon' onClick={this.pick}>
<div className={classnames('coupon-info', invalid ? 'invalid' : `coupon-type${ctype}`)}>
<p className='type'>{ctype === this.VOUCHER ? '代金券' : '课程券'}</p>
{
ctype === this.VOUCHER ? <p className='denomination'>{amount} <span>元</span></p>
: <p className='course-title'>{course_title}</p>
}
<p className='expire'>有效期至：{format_expire_time}</p>
{
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">
<span className='limit'>{
limit_course === 0 ? '可用于大于代金券金额的课程' : `仅适用于《${course_title}》`
}</span>
{
showUseButton && ctype == this.VOUCHER &&
<button
className='use'
onClick={this.GoToUse}
>立即使用
</button>
}
{
showUseButton && ctype == this.FREE &&
<button
className='use'
onClick={(e) => this.ExchangeCourse(e)}
>立即兑换
</button>
}
</div>
</li>
)
}
}
function BaseCoupon(
{
pick,
ctype,
invalid,
top,
VOUCHER,
FREE,
EXPAND,
limitMessage,
bottomButton
}) {
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}
<ul>
{
new Array(19).fill('a').map((item, index) => {
return <li key={index}/>
})
}
</ul>
</div>
<div className="coupon-des">
<span className='limit'>
{limitMessage}
</span>
{bottomButton}
</div>
</li>
)
}
export default Coupon
src/components/coupons/myCoupons/index.js
import React, {PureComponent} from 'react';
import React, { PureComponent } from 'react'
import './index.scss'
import RedeemBar from "../RedeemBar";
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 {
......@@ -30,7 +30,7 @@ class UseCoupon extends PureComponent {
const {state} = this.props.location
if (state && state.from) {
if (state.from === '/my') {
this.getMyCoupons();
this.getMyCoupons()
this.setState({
showUseButton: true
})
......@@ -38,7 +38,7 @@ class UseCoupon extends PureComponent {
if (!this.state.courseId) {
location.state && location.state.from ? history.replace(location.state.from) : history.goBack()
}
this.getAllCoupons();
this.getAllCoupons()
}
}
}
......@@ -50,7 +50,7 @@ class UseCoupon extends PureComponent {
// 兑换
exchange = () => {
const {location: {state = {}}} = this.props;
const {location: {state = {}}} = this.props
if (this.state.redeemCode !== '') {
http.post(`${API.home}/m/coupon/exchange`, {
code: this.state.redeemCode,
......@@ -88,7 +88,7 @@ class UseCoupon extends PureComponent {
invalid_coupons: [...this.state.invalid_coupons, coupon],
showUseButton: null,
redeemCode: ''
});
})
} else {
this.setState({
valid_coupons: [...this.state.valid_coupons, coupon],
......@@ -109,45 +109,72 @@ class UseCoupon extends PureComponent {
}
getMyCoupons = () => {
http.get(`${API.home}/m/coupon/all`)
.then(res => {
const data = res.data
if (data.code === 200) {
this.setState({
couponList: isEmpty(data.data) ? [] : data.data
})
} else {
Toast.info(data.msg)
}
Promise.all([
http.get(`${API.home}/m/coupon/all`),
http.get(`${API.home}/m/coupon/expansion`)
]).then((coupons) => {
let myCoupons = []
const [allCoupons, expansionCoupons] = coupons
const {data: all} = allCoupons
const {data: expansion} = expansionCoupons
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 = () => {
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'];
Promise.all([
http.post(`${API.home}/m/coupon/select`, {course_id: this.state.courseId}),
http.get(`${API.home}/m/coupon/expansion`)
]).then((coupons) => {
const [selectCoupons, expansionCoupons] = coupons
const {data: select} = selectCoupons
const {data: expansion} = expansionCoupons
if (select.code === 200) {
const inuse_coupon = select.data['inuse_coupon']
this.setState({
valid_coupons: inuse_coupon
? [...inuse_coupon, ...select.data.valid_coupons]
: select.data.valid_coupons,
invalid_coupons: select.data.invalid_coupons,
selectedCouponId: inuse_coupon.length ? inuse_coupon[0].id : 0
})
} else {
Toast.info(data.msg)
}
if (expansion.code == 200) {
Array.isArray(expansion.data)
&& (expansion.data = expansion.data.map(item => (item.ctype = 4, item)))
&& (this.setState({
valid_coupons: this.state.valid_coupons.concat(expansion.data)
}))
} else {
Toast.info(expansion.msg)
}
this.setState({
valid_coupons: inuse_coupon
? [...inuse_coupon, ...data.data.valid_coupons]
: data.data.valid_coupons,
invalid_coupons: data.data.invalid_coupons,
selectedCouponId: inuse_coupon.length ? inuse_coupon[0].id : 0
})
} else {
Toast.info(data.msg)
}
})
})
}
// 立即兑换课程
toExchangeCourse = (e, code) => {
e.stopPropagation();
e.stopPropagation()
http.post(`${API['base-api']}/pay/miandan/${code}`, {}).then(res => {
const data = res.data
if (data.errno === 200) {
......@@ -163,7 +190,7 @@ class UseCoupon extends PureComponent {
}
useCoupon = val => {
const {history, dispatch} = this.props
const {history} = this.props
const coupon = this.state.couponList.find(item => item.id === val)
if (val) {
......@@ -172,8 +199,8 @@ class UseCoupon extends PureComponent {
if (coupon['limit_course'] === 0) {
history.push(`/classify`)
} else {
history.push(`/detail?id=${coupon['limit_course']}`);
return false;
history.push(`/detail?id=${coupon['limit_course']}`)
return false
}
} else {
......@@ -233,7 +260,7 @@ class UseCoupon extends PureComponent {
// 开始学习
toStudy = (vCourseId, isHaveVideo) => {
const {history} = this.props;
const {history} = this.props
if (isHaveVideo == 0) {
Toast.info('尚未开课，开课后立即上传课程～', 2)
} else {
......@@ -251,6 +278,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() {
const {state} = this.props.location
const {showUseButton, selectedCouponId} = this.state
......@@ -273,6 +312,7 @@ class UseCoupon extends PureComponent {
select={this.select}
useCoupon={this.useCoupon}
toExchangeCourse={this.toExchangeCourse}
endExpansion={this.endExpansion}
/>
{
this.state.invalid_coupons.length > 0 &&
......@@ -296,7 +336,7 @@ class UseCoupon extends PureComponent {
courseCouponData={this.state.courseCouponData}/>
}
</div>
);
)
}
}
......@@ -351,4 +391,4 @@ function FreeCouponCourse(props) {
)
}
export default WithFullSize(UseCoupon);
\ No newline at end of file
export default WithFullSize(UseCoupon)
src/components/expand/callback.js
......@@ -6,7 +6,6 @@ import {connect} from "react-redux";
class ExpandCallback extends Component {
state = {
list: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
data: ''
}
......@@ -56,10 +55,8 @@ class ExpandCallback extends Component {
<div className="tip">
<ul>
{
this.state.list.map((item, index) => {
return (
<li key={index}></li>
)
new Array(19).fill('1').map((item, index) => {
return <li key={index}/>
})
}
</ul>
......
src/components/expand/share.js
import React, {Component} from 'react'
import './share.scss'
import {http, getParam, browser} from '@/utils'
import {http, getParam, browser, wxShare} from '@/utils'
import {Toast} from 'antd-mobile'
import {connect} from "react-redux";
import {Link} from "react-router-dom";
import showAlert from '@common/deposit/end-expansion-alert'
class ExpandShare extends Component {
state = {
......@@ -14,12 +15,19 @@ class ExpandShare extends Component {
isshowMore: true, // 是否显示查看更多
pageCount: 1, // 页码
helpData: '',// 帮助好友助力数据
list: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
courseListMore: '', // 所有课程
}
componentDidMount() {
this.getListorData()
this.getCourseList(1, 6)
this.getCourseList()
wxShare({
title: '七月在线4岁啦，80元红包等你来拿！',
desc: '重磅好课1元购，大奖、红包轰趴7天7夜',
link: window.location.href,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/shareimg.png',
})
}
// 获取膨胀券相关
......@@ -38,23 +46,26 @@ class ExpandShare extends Component {
}
// 获取课程列表
getCourseList = (page, num) => {
getCourseList = () => {
const _this = this
http.get(`${API['base-api']}/anniversary2019/pre_course/${page}/${num}`).then((res) => {
http.get(`${API['base-api']}/anniversary2019/pre_course`).then((res) => {
const {data, errno, msg} = res.data
if (errno == 200) {
if (data.length === 0) {
if (JSON.stringify(data) == '{}') {
_this.setState({
isshowMore: false,
courseList: []
})
} else if (data.length <= 6) {
_this.setState({
isshowMore: false
isshowMore: false,
courseList: data
})
} else {
let arr = []
data.forEach(function (item, index) {
arr.push(item)
_this.setState({
courseList: arr,
isshowMore: true
})
_this.setState({
isshowMore: true,
courseList: data.slice(0, 6),
courseListMore: data
})
}
} else {
......@@ -66,12 +77,10 @@ class ExpandShare extends Component {
// 获取更多课程
getMoreCourseList = () => {
const _this = this
alert(2)
_this.setState({
pageCount: _this.state.pageCount + 1
this.setState({
courseList: this.state.courseListMore,
isshowMore: false
})
_this.getCourseList(_this.state.pageCount, 6)
}
// 立即付定金
expandPaydj = (courseId) => {
......@@ -91,7 +100,7 @@ class ExpandShare extends Component {
}
}
// 立即付尾款
expandPaywk = (courseId, time) => {
expandPaywk = (courseId, time, day) => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
......@@ -108,7 +117,7 @@ class ExpandShare extends Component {
}
)
} else {
Toast.info("付尾款时间将在" + info.final_start_time + "开启", 2);
Toast.info("付尾款时间将在" + day + "开启", 2);
}
}
}
......@@ -154,6 +163,8 @@ class ExpandShare extends Component {
step: 2,
helpData: data
})
console.log(data)
} else if (errno === 17018 || errno === 17020) {
this.setState({
isShow: true,
......@@ -167,15 +178,37 @@ class ExpandShare extends Component {
}
// 结束助力
isendExpand=()=>{
isendExpand = (data) => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
this.setState({
isShow: true,
step: 3
const {amount, limit_amount, id} = data
showAlert({
amount,
limit_amount,
onCancel: () => {
this.setState({
isShow: false
})
},
onConfirm: () => {
http.post(`${API['base-api']}/sys/end_expansion`, {
id
})
.then(res => {
const {errno, msg} = res.data
if (errno == 200) {
this.setState({
isShow: false
})
this.getListorData()
} else {
Toast.info(msg)
}
})
}
})
}
}
......@@ -189,7 +222,7 @@ class ExpandShare extends Component {
render() {
const {isShow, step, data, list, courseList, isshowMore} = this.state
const {isShow, step, data, courseList, isshowMore, helpData} = this.state
return (
<div className="expand-box">
<div className="banner">
......@@ -200,11 +233,12 @@ class ExpandShare extends Component {
<div className="content">
{/*进度||膨胀券*/}
{
<ExpansionStatus data={data} list={list}/>
<ExpansionStatus data={data}/>
}
{/*button*/}
{
<ButtonStatus data={data} share={this.share} helpFriend={this.helpFriend} isendExpand={this.isendExpand}/>
<ButtonStatus data={data} share={this.share} helpFriend={this.helpFriend}
isendExpand={this.isendExpand}/>
}
</div>
{/*好友助力列表*/}
......@@ -239,11 +273,7 @@ class ExpandShare extends Component {
{
step === 2 &&
<AssistanceSuccess share={this.share} helpData={helpData}/>
}
{
step === 3 &&
<AssistanceErron close={this.close}/>
<AssistanceSuccess share={this.share} data={data} helpData={helpData}/>
}
{
step === 4 &&
......@@ -300,7 +330,7 @@ function ShareBox(props) {
//助力成功弹窗
function AssistanceSuccess(props) {
const {helpData, share} = props
const {helpData, share, data} = props
return (
<div className='content assistance-success'>
<div className="title">助力成功</div>
......@@ -331,10 +361,9 @@ function AssistanceErron(props) {
)
}
// 判断是否结束膨胀
function ExpansionStatus(props) {
const {data, list} = props
const {data} = props
//is_end: 0 判断活动是否结束 0否1是
// is_end_expansion: 0,是否是自己结束膨胀 0否1是
if (data.is_end === 0 && data.is_end_expansion === 0) {
......@@ -343,7 +372,7 @@ function ExpansionStatus(props) {
)
} else {
return (
<EndExpansion data={data} list={list}/>
<EndExpansion data={data}/>
)
}
}
......@@ -388,7 +417,6 @@ function ProgressData(props) {
// 结束膨胀的情况
function EndExpansion(props) {
const data = props.data
const list = props.list
return (
<div className='coupon-box'>
<div className="coupon">
......@@ -397,15 +425,13 @@ function EndExpansion(props) {
<p className="coupon-time">有效期至：{data.expire_time}</p>
</div>
<div className="tip">
<ul>
{
list.map((item, index) => {
return (
<li key={index}/>
)
})
}
</ul>
<ul>
{
new Array(19).fill('1').map((item, index) => {
return <li key={index}/>
})
}
</ul>
全场通用
</div>
<p className="over-mess">该礼券已成功发放至账户</p>
......@@ -416,7 +442,7 @@ function EndExpansion(props) {
// 按钮
function ButtonStatus(props) {
const {data, share, helpFriend,isendExpand} = props
const {data, share, helpFriend, isendExpand} = props
// data.oneself 判断是否是自己 0帮好友助力 1自己
// data.is_help 是否已经帮好友助力 0 未助力 1已助力
// data.s_end: 0 判断活动是否结束 0否1是
......@@ -431,30 +457,30 @@ function ButtonStatus(props) {
<button className="active" onClick={() => share()}>邀请好友助力</button>
}
{
data.oneself === 1 && data.is_end_expansion === 1 && data.start_amount !== data.limit_amount &&
data.oneself === 1 && data.is_end_expansion === 1 && data.amount !== data.limit_amount &&
<button className="over">您已结束膨胀</button>
}
{
data.oneself === 1 && data.is_end_expansion === 1 && data.start_amount === data.limit_amount &&
data.oneself === 1 && data.is_end_expansion === 1 && data.amount === data.limit_amount &&
<button className="over">达到膨胀上限，快去使用吧</button>
}
{
data.oneself === 0 && data.is_help === 0 && data.is_end_expansio === 0 &&
data.oneself === 0 && data.is_help === 0 && data.is_end_expansion === 0 &&
<button className="active" onClick={() => helpFriend(data.id)}>帮ta助力</button>
}
{
data.oneself === 0 && data.is_help === 1 && data.is_end_expansio === 0 &&
data.oneself === 0 && data.is_help === 1 && data.is_end_expansion === 0 &&
<button className="active" onClick={() => share()}>邀请更多好友拿{data.limit_amount}元</button>
}
{
data.oneself === 0 && data.is_end_expansio === 1 && data.start_amount === data.limit_amount &&
data.oneself === 0 && data.is_end_expansion === 1 && data.amount === data.limit_amount &&
<button className="over">达到膨胀上限，快去使用吧</button>
}
{
data.oneself === 0 && data.is_end_expansio === 1 && data.start_amount !== data.limit_amount &&
data.oneself === 0 && data.is_end_expansion === 1 && data.amount !== data.limit_amount &&
<button className="over">你的好友已结束助力</button>
}
......@@ -470,7 +496,7 @@ function ButtonStatus(props) {
{
data.is_end === 0 && data.is_end_expansion === 0 && data.oneself === 1 &&
<div className="overBtn">
<p onClick={() => isendExpand()}>结束助力使用礼券</p>
<p onClick={() => isendExpand(data)}>结束助力使用礼券</p>
</div>
}
......@@ -535,9 +561,9 @@ function CourseList(props) {
data.map((item, index) => {
return (
<li className="course-item" key={index}>
<a href={`/getDetail?id=${item.course_id}`}>
<Link to={`/getDetail?id=${item.course_id}`}>
<img className="course-img" src={item.image_name} alt=""/>
</a>
</Link>
<p className="old-price">原价:<span>¥{item.price}</span></p>
<p className="handsel">定金¥{item.deposit_amount}，可抵扣¥{item.deduction_amount}</p>
<div className="btn">
......@@ -549,7 +575,7 @@ function CourseList(props) {
{
item.is_buy === 1 &&
<a className="to-expand-buy2"
onClick={() => expandPaywk(item.course_id, item.update_time)}>立即付尾款</a>
onClick={() => expandPaywk(item.course_id, item.start_timestamp, item.final_start_time)}>立即付尾款</a>
}
{
item.is_buy === 2 &&
......
src/components/expand/share.scss
......@@ -2,7 +2,9 @@
width: 100%;
height: 100%;
position: relative;
.FF19A0{
color: #FF19A0;
}
.banner {
width: 100%;
height: 323px;
......@@ -232,6 +234,7 @@
font-size: 14px;
color: #666;
text-decoration: underline;
text-align: center;
}
}
......@@ -253,6 +256,9 @@
height: 11px;
vertical-align: middle;
}
span {
margin: 0 10px;
}
}
.null-list {
......@@ -276,6 +282,7 @@
.friend-status {
font-size: 14px;
color: #333;
text-align: center;
}
.all-list-box {
......@@ -329,6 +336,9 @@
height: 11px;
vertical-align: middle;
}
span {
margin: 0 10px;
}
}
.course-list {
......@@ -590,60 +600,6 @@
}
.end-expand {
padding-top: 20px;
height: 184px;
margin-top: 197px;
text-align: center;
position: relative;
.end-expand-toast {
color: #202426;
font-size: 15px;
font-weight: 400;
}
.areYouSure {
margin-top:18px;
color: #666;
font-size: 15px;
}
.end-expand-mess {
margin-top: 22px;
color: #999;
font-size: 12px;
}
.buttons {
position: absolute;
bottom: 0;
width: 100%;
height:40px;
border-top: 1px solid #DDD;
button {
width: 148px;
height: 100%;
font-size: 15px;
background: #fff;
border: none;
}
:nth-child(1) {
border-right: 1px solid #DDD;
color: #333;
border-radius: 0 0 0 8px;
}
:nth-child(2) {
color: #0099FF;
border-radius: 0 0 8px 0;
}
}
}
.close {
width: 30px;
height: 30px;
......
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