Skip to content

M
mr-julyedu
Commit 32916ae4 by zhanghaozhe
Options

Merge branch 'earnest-money' into deposit-migrate 

# Conflicts:
#	src/common/deposit/end-expansion-alert/index.js
#	src/components/coupons/Coupon/index.js
#	src/router/router-config.js
parents 487f473c 04745c79
Showing with 1847 additions and 15 deletions
src/components/Index/expandActiveToast/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
import {http} from '@/utils'
import { Link } from "react-router-dom"
import {Toast} from "antd-mobile";
class ExpandActiveToast extends Component {
constructor(props) {
super(props);
this.state = {
expandLength: 0,
isShowExpand:true
}
}
componentDidMount() {
http.get(`${API['base-api']}/sys/deposit/notice`).then((res) => {
if (res.data.errno == 200) {
const {data} = res.data
this.setState({
expandLength: data.num
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
cleseExpand = () => {
this.setState({isShowExpand: false})
}
render() {
return (
<div>
{
this.state.expandLength > 0 && this.state.isShowExpand &&
<div className="expand-active-toast">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/guanggao.png" alt=''/>
<div className="expand-toast-swiper">
<p>您有<span className="red">{this.state.expandLength}个</span>待支付尾款的课程 再不支付就要过期了！</p>
</div>
<Link to='/expandorder?sourcenum=1'>查看</Link>
<img
onClick={e => this.cleseExpand()}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/guanbi.png"
alt=''
/>
</div>
}
</div>
);
}
}
export default ExpandActiveToast
src/components/Index/expandActiveToast/index.scss 0 → 100644
.expand-active-toast {
font-size: 14px;
background-color: #e8f6ff;
display: flex;
justify-content: space-between;
padding: 0 15px;
height: 33px;
line-height: 33px;
margin-bottom: 10px;
.expand-toast-swiper {
width: 240px;
overflow: hidden;
position: relative;
p {
width: 375px;
position: absolute;
-webkit-animation: scollLeft 10s linear 0s infinite;
}
}
.red {
color: #ff3131;
}
img {
width: 15px;
height: 15px;
margin-top: 9px;
}
a {
display: inline-block;
width: 44px;
height: 22px;
background: linear-gradient(90deg, #0099ff 0%, #0080ff 100%);
border-radius: 11px;
color: #fff;
font-size: 12px;
line-height: 22px;
margin-top: 5px;
text-align: center;
}
@-webkit-keyframes scollLeft {
from {
right: -100%;
}
to {
right: 100%;
}
}
@keyframes scollLeft {
from {
right: -100%;
}
to {
right: 100%;
}
}
@-moz-keyframes scollLeft {
from {
right: -100%;
}
to {
right: 100%;
}
}
@-o-keyframes scollLeft {
from {
right: -100%;
}
to {
right: 100%;
}
}
}
src/components/Index/index.js
...@@ -11,6 +11,7 @@ import { Link } from "react-router-dom" ...@@ -11,6 +11,7 @@ import { Link } from "react-router-dom"
import { Toast } from 'antd-mobile' import { Toast } from 'antd-mobile'
import { connect } from "react-redux"; import { connect } from "react-redux";
import TopSwiper from './TopSwiper' import TopSwiper from './TopSwiper'
import ExpandActiveToast from './expandActiveToast'
// const animateTypes = Swiper.animateTypes // const animateTypes = Swiper.animateTypes
...@@ -135,6 +136,10 @@ class Index extends Component { ...@@ -135,6 +136,10 @@ class Index extends Component {
/> />
</div> </div>
<div className='zw_height'></div>
<ExpandActiveToast/>
<div className='index-swiper'> <div className='index-swiper'>
{ {
this.state.banner && this.state.banner.length > 0 && this.state.banner && this.state.banner.length > 0 &&
......
src/components/Index/index.scss
...@@ -38,8 +38,11 @@ ...@@ -38,8 +38,11 @@
} }
} }
.zw_height {
height: 44px;
}
.index-swiper { .index-swiper {
margin-top: 44px;
height: 168px; height: 168px;
.swiper-container { .swiper-container {
......
src/components/detail/btnstatus/index.js
...@@ -243,6 +243,41 @@ class BtnStatus extends Component { ...@@ -243,6 +243,41 @@ class BtnStatus extends Component {
}) })
} }
// 付定金 付尾款
expandPay = (info,type)=>{
// type 等于1是定金 等于2是尾款
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
if(type == 1){
this.props.history.push(
'/course/smallOrder',
{
id: getParam('id'),
isexpand: 1,
sourcenum: 1
}
)
} else {
let timeStamp = Date.parse(new Date()) / 1000;
if (timeStamp >= info.start_timestamp) {
this.props.history.push(
'/expandorder',
{
id: getParam('id'),
sourcenum: 1
}
)
} else {
Toast.info("付尾款时间将在" + info.final_start_time + "开启",2);
}
}
}
}
render() { render() {
// data 课程信息；barInfo 砍价信息 // data 课程信息；barInfo 砍价信息
const { user = {}, toCart } = this.props; const { user = {}, toCart } = this.props;
...@@ -271,6 +306,22 @@ class BtnStatus extends Component { ...@@ -271,6 +306,22 @@ class BtnStatus extends Component {
</div> </div>
} }
{/* 定金课程 is_deposit 是否定金课程 0-否 1-付定金 2-付尾款*/}
{
info.is_baoming === 0 && info.is_deposit != 0 &&
<div className='btns-box'>
<a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji' />
<span>课程咨询</span>
</a>
<div className='btn btn-m bg-FD7700' onClick={()=>this.expandPay(info.deposit_info,info.is_deposit)}>
{info.is_deposit == 1 ? '立即付定金':'立即付尾款'}
</div>
</div>
}
{/*已购买*/} {/*已购买*/}
{ {
info.is_baoming === 1 && info.is_baoming === 1 &&
......
src/components/detail/deposit/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
import {connect} from "react-redux"
import {withRouter} from 'react-router-dom'
import {compose} from "redux"
class Deposit extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
const {courseInfo} = this.props;
let info = ''
if (courseInfo) {
info = courseInfo.deposit_info
}
return (
<div className="buy-expand">
<p className="buy-time">付定金时间：{info.deposit_start_time}-{info.deposit_end_time}</p>
<p className="buy-time">付尾款时间：{info.final_start_time}-{info.final_end_time}</p>
<div className="expand-bgimg">
<img
className="four-year"
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/4year.png"
alt=''
/>
<span className="dingjin">定金{info.deposit_amount}元，可抵扣{info.deduction_amount}元</span>
<p className="small">
到手价最低：¥
<span>{info.low_price}</span>
</p>
<p className="else-tip">另可获得最高{info.deposit_coupon}元代金券进行叠加</p>
</div>
</div>
);
}
}
export default compose(
connect(
state => ({
user: state.user
}),
null
),
withRouter
)(Deposit)
src/components/detail/deposit/index.scss 0 → 100644
.buy-expand {
margin-top: 5px;
.buy-time {
color: #999;
font-size: 12px;
text-align: left;
padding-left: 15px;
margin-bottom: 8px;
}
.expand-bgimg {
position: relative;
width: 100%;
height: 70px;
background-size: cover;
background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/detail-expand-bg.png");
.four-year {
width: 104px;
height: 32px;
position: absolute;
left: 12px;
top: 7px;
}
.dingjin {
color: #f5f5f5;
font-size: 15px;
position: absolute;
right: 12px;
top: 20px;
}
.small {
color: #f5f5f5;
font-size: 14px;
position: absolute;
left: 12px;
bottom: 6px;
span {
font-size: 18px;
}
}
.else-tip {
color: #f5f5f5;
font-size: 12px;
position: absolute;
right: 12px;
bottom: 10px;
}
}
}
src/components/detail/index.js
...@@ -10,6 +10,7 @@ import Single from "./single" ...@@ -10,6 +10,7 @@ import Single from "./single"
import SingleSuccess from './single/singleSuccess'; import SingleSuccess from './single/singleSuccess';
import BtnStatus from "./btnstatus" import BtnStatus from "./btnstatus"
import Barrage from './barrage' import Barrage from './barrage'
import Deposit from './deposit'
import {connect} from "react-redux" import {connect} from "react-redux"
import {getCourses, addCourseToCart} from "./actions" import {getCourses, addCourseToCart} from "./actions"
import {getParam, http, browser, wxShare} from "@/utils" import {getParam, http, browser, wxShare} from "@/utils"
...@@ -19,6 +20,7 @@ import {delCountryNum} from './../country/countryRedux'; ...@@ -19,6 +20,7 @@ import {delCountryNum} from './../country/countryRedux';
import RedPacket from './redPacket'; import RedPacket from './redPacket';
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import ExpandActiveToast from "../Index/expandActiveToast";
class Detail extends Component { class Detail extends Component {
...@@ -475,6 +477,10 @@ class Detail extends Component { ...@@ -475,6 +477,10 @@ class Detail extends Component {
cart={true} cart={true}
toHref={href} toHref={href}
/> />
<ExpandActiveToast/>
<CallApp className='toapp' path={`/detail/id=${getParam('id')}`} /> <CallApp className='toapp' path={`/detail/id=${getParam('id')}`} />
{/*弹幕*/} {/*弹幕*/}
...@@ -500,10 +506,13 @@ class Detail extends Component { ...@@ -500,10 +506,13 @@ class Detail extends Component {
<span className="old">¥{course_info.price0}</span> <span className="old">¥{course_info.price0}</span>
</p> </p>
} }
{/*{*/} {
{/*course_info.is_baoming === 1 &&*/} !!course_info.is_deposit && course_info.is_deposit!= 0 &&
{/*<span className="isbuy">已购买</span>*/} <div className="openExpand">
{/*}*/} 支付定金￥{course_info.deposit_info.deposit_amount}，可抵扣￥{course_info.deposit_info.deduction_amount}
</div>
}
</div> </div>
</div> </div>
</div> </div>
...@@ -550,6 +559,15 @@ class Detail extends Component { ...@@ -550,6 +559,15 @@ class Detail extends Component {
</div> </div>
} }
{/*定金相关信息*/}
{
!!course_info.is_deposit && course_info.is_deposit!= 0 &&
<Deposit courseInfo={course_info}/>
}
{/*服务承诺*/} {/*服务承诺*/}
<div className='promise'> <div className='promise'>
<label>服务承诺</label> <label>服务承诺</label>
......
src/components/detail/index.scss
...@@ -222,4 +222,11 @@ ...@@ -222,4 +222,11 @@
} }
} }
} }
.openExpand {
font-size: 14px;
color: #ff2121;
font-weight: 500;
width: 215px;
}
} }
\ No newline at end of file
src/components/expand/callback.js 0 → 100644
import React, {Component} from 'react'
import './callback.scss'
import {http, getParam} from '@/utils'
import {Toast} from 'antd-mobile'
import {connect} from "react-redux";
class ExpandCallback extends Component {
state = {
data: ''
}
componentDidMount() {
this.getIndexData()
}
// 获取膨胀券相关
getIndexData = () => {
http.post(`${API['base-api']}/m/deposit/coupon`, {order_id: getParam('order_id')}).then((res) => {
if (res.data.errno == 200) {
const {data} = res.data
this.setState({
data: data,
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 邀请好友助力
invitation = (url) => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
window.location.href = url
}
}
render() {
let data = this.state.data
return (
<div className="callback-box">
<div className="banner"></div>
<div className="content">
<div className="title">恭喜你，获得一张</div>
<div className="coupon">
<p className="coupon-name">膨胀券</p>
<p className="coupon-price"><span>{data.amount}</span>元</p>
<p className="coupon-time">有效期至：{data.expire_time}</p>
</div>
<div className="tip">
<ul>
{
new Array(19).fill('1').map((item, index) => {
return <li key={index}/>
})
}
</ul>
全场通用
</div>
<div className="expand">
<span className="expand-small">{data.amount}</span>元
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand.png" alt=""/>
<span className="expand-big">{data.limit_amount}</span>元
</div>
<button className="invitation"
onClick={() => this.invitation(data.share_url)}>邀请好友助力，{data.amount}元变{data.limit_amount}元
</button>
<div className="active-time">活动时间：{data.start_time}-{data.end_time}</div>
<div className="active-tip">送助力好友{data.limit_amount}元！</div>
</div>
</div>
)
}
}
export default connect(
state => ({
user: state.user
}),
)(ExpandCallback)
src/components/expand/callback.scss 0 → 100644
.callback-box {
width: 100%;
height: 100%;
position: relative;
.banner {
width: 100%;
height: 258px;
background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/bg-img.png");
background-repeat: no-repeat;
background-size: contain;
}
.content {
position: absolute;
top: 13px;
left: 10px;
width: 355px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .06);
padding: 18px 10px 25px 10px;
.title {
text-align: center;
color: #FF3131;
font-size: 18px;
font-weight:500;
}
.coupon {
background-color: #8361FE;
width: 335px;
height: 95px;
border-radius: 3px 3px 0 0;
margin-top: 10px;
padding: 10px 12px;
color: #fff;
p {
width: 100%;
text-align: center;
font-size: 12px;
}
.coupon-name {
text-align: left;
font-size: 14px;
height: 16px;
line-height: 16px;
}
.coupon-price {
height: 28px;
line-height: 28px;
span {
font-size: 26px;
}
}
.coupon-time {
margin-top: 3px;
}
}
.tip {
width: 335px;
height: 37px;
padding-left: 12px;
text-align: left;
font-size: 12px;
color: #666;
line-height: 37px;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
border-radius: 0 0 3px 3px;
position: relative;
ul {
position: absolute;
top: -5px;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
}
}
.expand {
color: #FF3131;
margin-top: 15px;
font-size: 22px;
text-align: center;
img {
margin: 0 15px;
}
.expand-big {
font-size: 30px;
}
}
.invitation {
width: 320px;
height: 44px;
background-color: #8361FE;
border-radius: 4px;
font-size: 16px;
color: #fff;
margin-top: 15px;
border: none;
}
.active-time {
color: #999;
font-size: 14px;
margin-top: 10px;
text-align: center;
}
.active-tip {
color: #8361FE;
font-size: 16px;
margin-top: 13px;
text-align: center;
}
}
}
src/components/expand/share.js 0 → 100644
import React, {Component} from 'react'
import './share.scss'
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 = {
isShow: false, //活动规则
step: 0, // 区分弹窗
data: '', //膨胀券相关
courseList: [], // 预售课程列表
isshowMore: true, // 是否显示查看更多
pageCount: 1, // 页码
helpData: '',// 帮助好友助力数据
courseListMore: '', // 所有课程
}
componentDidMount() {
this.getListorData()
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',
})
}
// 获取膨胀券相关
getListorData = () => {
http.get(`${API['base-api']}/sys/help_list/${getParam('deposit_code')}`).then((res) => {
const {data, errno, msg} = res.data
if (errno == 200) {
this.setState({
data: data
})
} else {
Toast.info(msg, 2)
}
})
}
// 获取课程列表
getCourseList = () => {
const _this = this
http.get(`${API['base-api']}/anniversary2019/pre_course`).then((res) => {
const {data, errno, msg} = res.data
if (errno == 200) {
if (JSON.stringify(data) == '{}') {
_this.setState({
isshowMore: false,
courseList: []
})
} else if (data.length <= 6) {
_this.setState({
isshowMore: false,
courseList: data
})
} else {
_this.setState({
isshowMore: true,
courseList: data.slice(0, 6),
courseListMore: data
})
}
} else {
Toast.info(msg, 2)
}
})
}
// 获取更多课程
getMoreCourseList = () => {
this.setState({
courseList: this.state.courseListMore,
isshowMore: false
})
}
// 立即付定金
expandPaydj = (courseId) => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
this.props.history.push(
'/course/smallOrder',
{
id: courseId,
isexpand: 1,
sourcenum: 1
}
)
}
}
// 立即付尾款
expandPaywk = (courseId, time, day) => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
let timeStamp = Date.parse(new Date()) / 1000;
if (timeStamp >= time) {
this.props.history.push(
'/expandorder',
{
id: courseId,
sourcenum: 1
}
)
} else {
Toast.info("付尾款时间将在" + day + "开启", 2);
}
}
}
// 去学习
tostudy = (courseId) => {
this.props.history.push(`/getDetail?id=${courseId}`)
}
// 显示活动规则
showRule = () => {
this.setState({
isShow: true,
step: 1
})
}
// 邀请好友
share = () => {
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: 0
})
}
}
// 帮好友助力
helpFriend = (id) => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
http.post(`${API['base-api']}/sys/help/${id}`).then((res) => {
const {data, errno, msg} = res.data
if (errno == 200) {
this.setState({
isShow: true,
step: 2,
helpData: data
})
console.log(data)
} else if (errno === 17018 || errno === 17020) {
this.setState({
isShow: true,
step: 4
})
} else {
Toast.info(msg, 2)
}
})
}
}
// 结束助力
isendExpand = (data) => {
const {user, history} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
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)
}
})
}
})
}
}
// 关闭弹窗
close = () => {
this.setState({
isShow: false
})
}
render() {
const {isShow, step, data, courseList, isshowMore, helpData} = this.state
return (
<div className="expand-box">
<div className="banner">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/zl-banner.png" alt=""/>
<span onClick={() => this.showRule()}/>
</div>
<div className="all-contnet">
<div className="content">
{/*进度||膨胀券*/}
{
<ExpansionStatus data={data}/>
}
{/*button*/}
{
<ButtonStatus data={data} share={this.share} helpFriend={this.helpFriend}
isendExpand={this.isendExpand}/>
}
</div>
{/*好友助力列表*/}
{
(data.oneself === 1 || data.help_list && data.help_list.length !== 0) &&
<FriendList data={data}/>
}
{/*预售课程列表*/}
{
<CourseList data={courseList}
isshowMore={isshowMore}
getMoreCourseList={this.getMoreCourseList}
expandPaydj={this.expandPaydj}
expandPaywk={this.expandPaywk}
tostudy={this.tostudy}
/>
}
</div>
{
isShow &&
<div className='mbc-box'>
{
step === 0 &&
<ShareBox close={this.close} share={this.share} data={data}/>
}
{
step === 1 &&
<ActiveRule/>
}
{
step === 2 &&
<AssistanceSuccess share={this.share} data={data} helpData={helpData}/>
}
{
step === 4 &&
<AssistanceErron close={this.close}/>
}
{
(step === 1 || step === 2) &&
<img className="close"
onClick={() => this.close()}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/Public/img/guanbi_icon.png"
alt=""/>
}
</div>
}
</div>
)
}
}
// 活动规则
function ActiveRule() {
return (
<div className='content active-rule'>
<div className="title">活动规则</div>
<p>1、本活动期间，可以助力1位好友不同课程发起的膨胀，但是只能为同一好友；</p>
<p>2、好友发起膨胀后，可以随时终止膨胀；</p>
<p>3、膨胀券膨胀完成后，以优惠券形式发放到参与活动的账号（包括所有助力好友），该膨胀券为全场通用券，可在购买任一课程后进行抵扣（包括已付定金课程）；</p>
<p>4、如有疑问，可联系七月在线客服微信：julyedukefu；</p>
<p>*本活动最终解释权归七月在线所有</p>
</div>
)
}
// 邀请好友 分享弹窗
function ShareBox(props) {
const {close, data} = props
return (
<div className='content'>
<div onClick={() => close()} className="fiexd"></div>
<div className="share-box">
{
browser.isWeixin &&
<img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/share/throw_icon.png" alt=""/>
}
<p>邀请好友助力</p>
<p>膨胀券翻倍膨胀，{data.start_amount}元变{data.limit_amount}元！</p>
<span>送助力好友{data.limit_amount}元</span>
</div>
</div>
)
}
//助力成功弹窗
function AssistanceSuccess(props) {
const {helpData, share, data} = props
return (
<div className='content assistance-success'>
<div className="title">助力成功</div>
<p className="add-price">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/add-money.png" alt=""/>
+{helpData.help_amount}
</p>
<p className="all-price">
<span>{helpData.sale_amount}</span>元
</p>
<p className="assistance-tip">感谢你的助力，你们离{data.limit_amount}元又更近了哦！<br/>可以邀请其他小伙伴一起助力～</p>
<button onClick={() => share()}>邀请更多好友拿{data.limit_amount}元</button>
</div>
)
}
// 助力失败弹窗
function AssistanceErron(props) {
const {close} = props
return (
<div className="content assistance-erron">
<div className="title">温馨提示</div>
<p>很遗憾～</p>
<p>你已经帮别的好友助过力了，</p>
<p>不能再帮这位好友助力！</p>
<button onClick={() => close()}>知道了</button>
</div>
)
}
// 判断是否结束膨胀
function ExpansionStatus(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) {
return (
<ProgressData data={data}/>
)
} else {
return (
<EndExpansion data={data}/>
)
}
}
// 没有结束膨胀的情况
function ProgressData(props) {
const data = props.data
return (
<div>
<div className="user-mess">
<img src={data.avatar_file} alt="user"/>
帮我助力，送你{data.limit_amount}元
</div>
<div className="progress-box">
<div className="progress-base">
<span className="progress-active"
style={{width: (data.amount - data.start_amount) / data.limit_amount * 100 + '%'}}>
<span className="ending">
<span className="tip">{data.amount}元 <i/></span>
</span>
</span>
</div>
<div className="progress-price">
<span>{data.start_amount}元</span>
<span>{data.limit_amount}元</span>
</div>
</div>
{
data.help_list.length === 0 &&
<div className="help-mess no">还没有好友为{data.oneself === 1 ? '你' : 'Ta'}助力哦～</div>
}
{
data.help_list.length > 0 &&
<div className="help-mess has">已有<span className="FF19A0">{data.help_list.length}</span>位好友助力</div>
}
</div>
)
}
// 结束膨胀的情况
function EndExpansion(props) {
const data = props.data
return (
<div className='coupon-box'>
<div className="coupon">
<p className="coupon-name">红包膨胀优惠券</p>
<p className="coupon-price"><span>{data.amount}</span>元</p>
<p className="coupon-time">有效期至：{data.expire_time}</p>
</div>
<div className="tip">
<ul>
{
new Array(19).fill('1').map((item, index) => {
return <li key={index}/>
})
}
</ul>
全场通用
</div>
<p className="over-mess">该礼券已成功发放至账户</p>
<p className="over-mess">可在七月在线pc/app-我的-优惠券查看</p>
</div>
)
}
// 按钮
function ButtonStatus(props) {
const {data, share, helpFriend, isendExpand} = props
// data.oneself 判断是否是自己 0帮好友助力 1自己
// data.is_help 是否已经帮好友助力 0 未助力 1已助力
// data.s_end: 0 判断活动是否结束 0否1是
// data.is_end_expansion: 0,是否是自己结束膨胀 0否1是
return (
<div>
{
data.is_end === 0 &&
<div className='btns'>
{
data.oneself === 1 && data.is_end_expansion === 0 &&
<button className="active" onClick={() => share()}>邀请好友助力</button>
}
{
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.amount === data.limit_amount &&
<button className="over">达到膨胀上限，快去使用吧</button>
}
{
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_expansion === 0 &&
<button className="active" onClick={() => share()}>邀请更多好友拿{data.limit_amount}元</button>
}
{
data.oneself === 0 && data.is_end_expansion === 1 && data.amount === data.limit_amount &&
<button className="over">达到膨胀上限，快去使用吧</button>
}
{
data.oneself === 0 && data.is_end_expansion === 1 && data.amount !== data.limit_amount &&
<button className="over">你的好友已结束助力</button>
}
</div>
}
{
data.is_end === 1 &&
<div className="btns">
<button className="over">活动已结束</button>
</div>
}
{
data.is_end === 0 && data.is_end_expansion === 0 && data.oneself === 1 &&
<div className="overBtn">
<p onClick={() => isendExpand(data)}>结束助力使用礼券</p>
</div>
}
</div>
)
}
// 好友助力列表
function FriendList(props) {
const data = props.data
return (
<div className="friend-list">
<p className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-right.png" alt=""/>
<span>好友助力</span>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-left.png" alt=""/>
</p>
{
data.help_list.length === 0 &&
<div className="null-list">
<p className="tips first-tips">还没有好友为你助力,</p>
<p className="tips">赶紧去邀请好友吧！</p>
</div>
}
{
data.help_list.length > 0 &&
<div className="all-list">
<p className="friend-status"><span className="FF19A0">{data.help_list.length}</span>位好友共助力<span
className="FF19A0">{data.amount - data.start_amount}</span>元</p>
<ul className="all-list-box">
{
data.help_list.map((item, index) => {
return (
<li className="item" key={index}>
<img className="avait" src={item.avatar} alt=""/>
<span className="time">助力时间：{item.add_time}</span>
<span className="zlprice FF19A0">{item.amount}元</span>
</li>
)
})
}
</ul>
</div>
}
</div>
)
}
//预售课程
function CourseList(props) {
const {data, isshowMore, getMoreCourseList, expandPaydj, expandPaywk, tostudy} = props
return (
<div className="advance-sale-course">
<p className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-right.png" alt=""/>
<span>预售课程</span>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-left.png" alt=""/>
</p>
<div className="course-list">
<ul>
{
data.map((item, index) => {
return (
<li className="course-item" key={index}>
<Link to={`/getDetail?id=${item.course_id}`}>
<img className="course-img" src={item.image_name} alt=""/>
</Link>
<p className="old-price">原价:<span>¥{item.price}</span></p>
<p className="handsel">定金¥{item.deposit_amount}，可抵扣¥{item.deduction_amount}</p>
<div className="btn">
{
item.is_buy === 0 &&
<a className="to-expand-buy1"
onClick={() => expandPaydj(item.course_id)}>立即付定金</a>
}
{
item.is_buy === 1 &&
<a className="to-expand-buy2"
onClick={() => expandPaywk(item.course_id, item.start_timestamp, item.final_start_time)}>立即付尾款</a>
}
{
item.is_buy === 2 &&
<button className="to-study"
onClick={() => tostudy(item.course_id)}>开始学习</button>
}
</div>
</li>
)
})
}
</ul>
</div>
{
isshowMore &&
<div className="more">
<div onClick={() => getMoreCourseList()}>
查看更多
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-btm.png"
alt=""/>
</div>
</div>
}
</div>
)
}
export default connect(
state => ({
user: state.user
}),
)(ExpandShare)
src/components/expand/share.scss 0 → 100644
.expand-box {
width: 100%;
height: 100%;
position: relative;
.FF19A0{
color: #FF19A0;
}
.banner {
width: 100%;
height: 323px;
position: relative;
z-index: 1;
span {
position: absolute;
top: 48px;
right: 22px;
width: 30px;
height: 83px;
}
}
.all-contnet {
position: absolute;
top: 180px;
width: 100%;
background-color: #f5f5f5;
.content {
position: relative;
z-index: 2;
background-color: #fff;
width: 355px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .06);
padding: 17px 19px;
border-radius: 8px 8px 4px 4px;
margin-left: 10px;
.user-mess {
text-align: left;
color: #111;
font-size: 14px;
img {
width: 24px;
height: 24px;
border-radius: 50%;
vertical-align: middle;
margin-right: 9px;
}
}
.progress-box {
margin-top: 50px;
.progress-base {
width: 318px;
height: 8px;
line-height: 8px;
background-color: #DCDCDC;
border-radius: 4px;
text-align: left;
.progress-active {
display: inline-block;
height: 100%;
border-radius: 4px;
background-color: #FF19A0;
padding-left: 10px;
position: relative;
.ending {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fff;
position: absolute;
right: 0;
top: -3px;
border: 3px solid #FF19A0;
.tip {
display: inline-block;
width: 55px;
height: 20px;
line-height: 21px;
background-color: #FF19A0;
border-radius: 3px;
position: absolute;
top: -30px;
left: -23px;
text-align: center;
color: #fff;
i {
display: inline-block;
width: 6px;
height: 6px;
background-color: #FF19A0;
transform: rotate(45deg);
position: absolute;
bottom: -3px;
left: 50%;
margin-left: -3px;
}
}
}
}
}
.progress-price {
width: 100%;
display: flex;
justify-content: space-between;
color: #FF19A0;
font-size: 14px;
margin-top: 3px;
}
}
.help-mess {
font-size: 15px;
margin-top: 10px;
text-align: center;
}
.no {
color: #666;
}
.has {
color: #000011;
}
.coupon-box {
.coupon {
background-color: #8361FE;
width: 316px;
height: 85px;
border-radius: 3px 3px 0 0;
padding: 10px 12px;
color: #fff;
p {
width: 100%;
text-align: center;
font-size: 12px;
}
.coupon-name {
text-align: left;
font-size: 14px;
height: 16px;
line-height: 16px;
}
.coupon-price {
height: 28px;
line-height: 28px;
span {
font-size: 26px;
}
}
}
.tip {
width: 316px;
height: 33px;
padding-left: 12px;
text-align: left;
font-size: 12px;
color: #666;
line-height: 33px;
background-color: #fff;
box-shadow: 0 6px 12px 0 rgba(131, 97, 254, 0.1);
border-radius: 0 0 3px 3px;
position: relative;
margin-bottom: 16px;
ul {
position: absolute;
top: -5px;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
}
}
.over-mess {
text-align: center;
font-size: 12px;
color: #333;
}
}
.btns {
button {
width: 318px;
height: 44px;
border-radius: 22px;
box-shadow: 0 6px 12px 0 rgba(131, 97, 254, 0.1);
color: #fff;
font-size: 16px;
border: none;
}
.active {
margin-top: 25px;
background-color: #8361FE;
}
.over {
margin-top: 15px;
background-color: #CCCCCC;
}
}
.overBtn {
width: 100%;
margin-top: 15px;
font-size: 14px;
color: #666;
text-decoration: underline;
text-align: center;
}
}
.friend-list {
width: 100%;
margin-top: 12px;
padding: 17px 28px 24px 28px;
background-color: #fff;
.title {
font-size: 18px;
color: #111;
font-weight: 500;
text-align: center;
margin: 0 5px;
img {
width: 59px;
height: 11px;
vertical-align: middle;
}
span {
margin: 0 10px;
}
}
.null-list {
text-align: center;
margin-bottom: 20px;
.tips {
font-size: 15px;
color: #999;
margin-top: 5px;
}
.first-tips {
margin-top: 35px;
}
}
.all-list {
margin-top: 10px;
.friend-status {
font-size: 14px;
color: #333;
text-align: center;
}
.all-list-box {
margin-top: 7px;
width: 100%;
.item {
margin-top: 15px;
height: 24px;
line-height: 24px;
text-align: left;
font-size: 14px;
.avait {
width: 24px;
height: 24px;
border-radius: 50%;
vertical-align: middle;
}
.time {
margin-left: 26px;
}
.zlprice {
float: right;
}
}
}
}
}
.advance-sale-course {
width: 100%;
margin-top: 12px;
background-color: #fff;
padding: 15px 10px 20px 10px;
.title {
text-align: center;
font-size: 18px;
color: #111;
font-weight: 500;
img {
width: 59px;
height: 11px;
vertical-align: middle;
}
span {
margin: 0 10px;
}
}
.course-list {
margin-top: 15px;
ul {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
.course-item {
width: 48.4%;
background-color: #fff;
padding-bottom: 14px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .06);
border-radius: 2px;
margin-bottom: 10px;
text-align: left;
margin-top: 0;
.course-img {
width: 100%;
height: 124px;
border-radius: 2px;
}
.old-price {
margin-top: 8px;
font-size: 12px;
color: #999;
padding-left: 10px;
span {
font-size: 15px;
color: #FF3131;
}
}
.handsel {
margin-top: 5px;
font-size: 12px;
color: #666;
padding-left: 10px;
}
.btn {
width: 100%;
padding: 0 10px;
margin-top: 12px;
button {
width: 100%;
height: 27px;
border-radius: 2px;
font-size: 12px;
color: #fff;
border: none;
}
.to-expand-buy1, .to-expand-buy2 {
display: inline-block;
width: 100%;
text-align: center;
height: 27px;
line-height: 27px;
border-radius: 2px;
font-size: 12px;
color: #fff;
}
.to-expand-buy1 {
background-color: #8361FE;
}
.to-expand-buy2 {
background-color: #FF4000;
}
.to-study {
background-color: #0099FF;
}
}
}
}
}
.more {
font-size: 14px;
color: #666;
height: 56px;
line-height: 56px;
text-align: center;
div {
width: 130px;
margin: auto;
}
img {
width: 13px;
height: 12px;
margin-left: 8px;
margin-top: -3px;
vertical-align: middle;
}
}
}
}
.mbc-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 3;
.content {
border-radius: 8px;
background-color: #fff;
margin: 0 auto 24px auto;
width: 300px;
.title {
text-align: center;
font-size: 21px;
color: #333;
font-weight: 600;
}
}
.active-rule {
margin-top: 122px;
padding: 20px;
p {
text-align: left;
font-size: 14px;
color: #666;
margin-top: 15px;
}
}
.fiexd {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.share-box {
padding: 17px 0 20px 0;
margin-top: 100px;
text-align: center;
position: relative;
img {
position: absolute;
width: 60px;
height: 44px;
right: 0;
top: -48px;
}
p {
color: #333;
font-size: 15px;
margin-bottom: 10px;
height: 17px;
line-height: 17px;
}
span {
display: inline-block;
color: #999;
font-size: 12px;
margin-top: 10px;
height: 14px;
line-height: 14px;
}
}
.assistance-success {
margin-top: 197px;
text-align: center;
padding: 20px 0;
.add-price {
margin-top: 10px;
color: #FF3131;
font-size: 12px;
img {
width:8px;
height: 12px;
vertical-align: text-top;
}
}
.all-price {
margin-top: 10px;
color: #FF3131;
font-size: 12px;
span {
font-size: 30px;
}
}
.assistance-tip {
margin-top: 10px;
color: #999;
font-size: 14px;
}
button {
width: 225px;
height:36px;
background-color: #8361FE;
box-shadow: 0 6px 12px 0 rgba(131, 97, 254, .1);
border-radius: 18px;
color: #fff;
font-size: 15px;
margin-top: 20px;
}
}
.assistance-erron {
margin-top: 220px;
text-align: center;
padding: 20px 0;
.title {
margin-bottom: 15px;
}
p {
color: #666;
font-size: 14px;
margin-top: 8px;
}
button {
margin-top: 15px;
width: 146px;
height: 33px;
background-color: #8361FE;
border-radius: 17px;
color: #fff;
font-size: 15px;
}
}
.close {
width: 30px;
height: 30px;
position: absolute;
left: 50%;
margin-left: -15px;
}
}
}
\ No newline at end of file
src/components/myOrders/index.js
...@@ -16,6 +16,7 @@ const alert = Modal.alert ...@@ -16,6 +16,7 @@ const alert = Modal.alert
@connect() @connect()
class MyOrders extends Component { class MyOrders extends Component {
page = 1 page = 1
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
...@@ -31,7 +32,7 @@ class MyOrders extends Component { ...@@ -31,7 +32,7 @@ class MyOrders extends Component {
} }
getMore = debounce(() => { getMore = debounce(() => {
if(this.state.data.length % 10 === 0){ if (this.state.data.length % 10 === 0) {
this.getList(++this.page) this.getList(++this.page)
} }
}, 200) }, 200)
...@@ -74,7 +75,7 @@ class MyOrders extends Component { ...@@ -74,7 +75,7 @@ class MyOrders extends Component {
} }
toCourseDetail = (id) => { toCourseDetail = (id) => {
const { dispatch, history } = this.props; const {dispatch, history} = this.props;
// dispatch(getCourses(id, () => { // dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`); history.push(`/detail?id=${id}`);
return false; return false;
...@@ -88,7 +89,7 @@ class MyOrders extends Component { ...@@ -88,7 +89,7 @@ class MyOrders extends Component {
<HeaderBar title='我的订单' arrow={true} cart={false}></HeaderBar> <HeaderBar title='我的订单' arrow={true} cart={false}></HeaderBar>
<Loading isLoading={this.state.isLoading}> <Loading isLoading={this.state.isLoading}>
{ {
this.state.data && JSON.stringify(this.state.data) !== '[{}]'? this.state.data && JSON.stringify(this.state.data) !== '[{}]' ?
<InfiniteScroll <InfiniteScroll
pageStart={0} pageStart={0}
hasMore={true} hasMore={true}
...@@ -104,10 +105,9 @@ class MyOrders extends Component { ...@@ -104,10 +105,9 @@ class MyOrders extends Component {
item.course && item.course.length > 0 && item.course.map((item, index) => { item.course && item.course.length > 0 && item.course.map((item, index) => {
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
<p className='order-title text-overflow-one' onClick={() => this.toCourseDetail(item.course_id)}> <p className='order-title text-overflow-one'
{/* <Link to={`/detail?id=${item.course_id}`}> */} onClick={() => this.toCourseDetail(item.course_id)}>
{item.course_title} {item.course_title}
{/* </Link> */}
</p> </p>
<p className='order-content text-overflow-2'>{item.description}</p> <p className='order-content text-overflow-2'>{item.description}</p>
<p className='order-des'> <p className='order-des'>
...@@ -133,6 +133,14 @@ class MyOrders extends Component { ...@@ -133,6 +133,14 @@ class MyOrders extends Component {
} }
<PayInfo item={item} cancel={this.cancel}/> <PayInfo item={item} cancel={this.cancel}/>
{
item.type == 5 &&
<div className={'expand-pay-wk'}>
<span className={'expand-pay-time'}>{item.final_end_time}结束付尾款</span>
<span>还需支付尾款</span>
</div>
}
</div> </div>
) )
}) })
...@@ -167,11 +175,20 @@ function OrderInfo(props) { ...@@ -167,11 +175,20 @@ function OrderInfo(props) {
} }
function PayInfo(props) { function PayInfo(props) {
// type 0普通订单 1团购 2小团 3砍价 4单集购买 5定金课定金 6定金课尾款
let type = ''
if (props.item.type == 5) {
type = '（定金）'
}
if (props.item.type == 6) {
type = '（尾款）'
}
return ( return (
<div className='order-btm'> <div className='order-btm'>
<div className='price-info'> <div className='price-info'>
<p> <p>
<span className='payable'>应付：</span> <span className='payable'>应付{type}：</span>
<span className='price'>¥{props.item.pay_amount}</span> <span className='price'>¥{props.item.pay_amount}</span>
</p> </p>
<p> <p>
......
src/components/myOrders/index.scss
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
font-size: 14px; font-size: 14px;
color: $redprice; color: $redprice;
} }
.oid-success{
.oid-success {
font-size: 14px; font-size: 14px;
color: $color_333; color: $color_333;
} }
...@@ -37,8 +38,9 @@ ...@@ -37,8 +38,9 @@
background-color: $bg_fff; background-color: $bg_fff;
border-bottom: 1px solid $border_e7eaf1; border-bottom: 1px solid $border_e7eaf1;
} }
.order-info { .order-info {
.order-des{ .order-des {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
...@@ -53,7 +55,7 @@ ...@@ -53,7 +55,7 @@
justify-content: space-between; justify-content: space-between;
.price-info { .price-info {
width: 120px; width: 150px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: center; align-self: center;
...@@ -105,6 +107,26 @@ ...@@ -105,6 +107,26 @@
} }
} }
} }
.expand-pay-wk {
height: 35px;
background-color: $bg_fff;
line-height: 35px;
padding: 0 10px;
font-size: 12px;
display: flex;
justify-content: space-between;
border-top: 1px solid #E7EAF1;
span {
color: #999;
}
.expand-pay-time {
color: #09f;
}
}
} }
.cart-tip { .cart-tip {
......
src/router/router-config.js
...@@ -31,6 +31,8 @@ const CampTest = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/compo ...@@ -31,6 +31,8 @@ const CampTest = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/compo
const CampResolve = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/components/video/camp/campResolve')) const CampResolve = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/components/video/camp/campResolve'))
const ShareCourse = loadable(() => import(/* webpackChunkName: 'ShareCourse'*/'@/components/ShareCourse/index')) const ShareCourse = loadable(() => import(/* webpackChunkName: 'ShareCourse'*/'@/components/ShareCourse/index'))
const Country = loadable(() => import(/* webpackChunkName: 'Country' */'@/components/country/index')) const Country = loadable(() => import(/* webpackChunkName: 'Country' */'@/components/country/index'))
const ExpandCallback = loadable(() => import('@/components/expand/callback'))
const ExpandShare = loadable(() => import('@/components/expand/share'))
export default [ export default [
{ {
path: '/', path: '/',
...@@ -177,4 +179,14 @@ export default [ ...@@ -177,4 +179,14 @@ export default [
path: '/deposit-pay-order', path: '/deposit-pay-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@/components/deposit-pay-order')) component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@/components/deposit-pay-order'))
}, },
// 定金支付之后
{
path: '/expand/callback',
component: ExpandCallback
},
// 定金-邀请好友助力
{
path: '/expand/index',
component: ExpandShare
},
] ]
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