Skip to content

M
mr-julyedu
Commit 3a1d0878 by xuzhenghua
Options

detail

parent 20e6cbae
Showing with 711 additions and 338 deletions
src/assets/css/variable.scss
......@@ -16,6 +16,8 @@ $color_202426: #202426;
$color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
$color_FF4000: #FF4000;
$color_FF0000: #FF0000;
/*
......@@ -61,7 +63,14 @@ $bg_FADD29: #FADD29;
$bg_E7E7E7: #E7E7E7;
$bg_18B4ED: #18B4ED;
$bg_FF4000: #FF4000;
$bg_FD7700: #FD7700;
$bg_FCCD05: #FCCD05;
$bg_FF9500: #FF9500;
$bg_077FD0: #077FD0;
$bg_0198FE: #0198FE;
$bg_F4AAA7: #F4AAA7;
$bg_E02E24: #E02E24;
$bg_007FD0: #007FD0;
/*
......
src/components/classify/index.js
......@@ -50,9 +50,9 @@ class Classify extends Component {
<div className="vip">
{this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
return (
<a key={index} href='/detail'>
<Link key={index} to={`/detail?id=${item.course_id}`}>
<img src={item.course_img} alt=""/>
</a>
</Link>
)
})
......@@ -69,7 +69,7 @@ function ClassCourseA({data}) {
{
data && data.length > 0 && data.map((item, index) => {
return (
<a href={`/detail?id=${item.course_id}`} key={index} className='item-banner'><img src={item.course_img} alt=""/></a>
<Link to={`/detail?id=${item.course_id}`} key={index} className='item-banner'><img src={item.course_img} alt=""/></Link>
)
})
}
......
src/components/detail/actions.js 0 → 100644
import {api, getParam, http} from "@/utils";
export const RECEIVE_COURSES_DETAIL = 'RECEIVE_COURSES_DETAIL'
export const receiveCourseDetail = payload => ({
type: RECEIVE_COURSES_DETAIL,
payload
})
export const fetchCoursesListIfNeeded = () => (dispatch, getState) => {
dispatch(getCourses({
courseInfo: getState().detailInfo
}))
}
export const getCourses = payload => dispatch => {
return http.get(`${api.home}/m/course/detail/${getParam('id')}`,).then((res) => {
if (res.data.code === 200) {
dispatch(receiveCourseDetail({
...res.data.data
}))
}
})
}
src/components/detail/audition/index.scss
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
.content {
width: 300px;
position: relative;
background-color: $white;
padding-top: 20px;
border-radius: 3px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
i {
font-size: 24px;
.detail-box {
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
position: relative;
background-color: $white;
padding-top: 20px;
border-radius: 3px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
}
.audition-box {
height: 144px;
text-align: center;
margin: 212px auto 22px auto;
.audition-header {
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $color_333;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.audition-dec {
font-size: 14px;
color: $color_666;
margin-top: 10px;
.audition-box {
height: 144px;
text-align: center;
margin: 212px auto 22px auto;
.audition-header {
font-size: 16px;
color: $color_333;
}
.audition-dec {
font-size: 14px;
color: $color_666;
margin-top: 10px;
}
}
}
}
}
\ No newline at end of file
src/components/detail/btnstatus/index.js 0 → 100644
import React, {Component} from 'react';
import './index.scss'
class BtnStatus extends Component {
constructor(props) {
super(props)
this.state = {
isbuy: 1
}
}
render() {
return (
<div>
{/*正常购买*/}
{
this.props.status === 0 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-FCCD05'>加入购物车</button>
<button className='btn btn-s bg-FD7700'>立即报名</button>
</div>
}
{/*已购买*/}
{
this.props.status === 1 &&
<div className='btns-box'>
<a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-m bg-09f'>开始学习</button>
</div>
}
{/*拼团 未开团*/}
{
this.props.status === 2 && this.state.isbuy === 0 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥149</span>
<span>直接购买</span>
</button>
<button className='btn btn-s bg-E02E24'>
<span>¥1</span>
<span>一键开团</span>
</button>
</div>
}
{/*拼团 已开团*/}
{
this.props.status === 2 && this.state.isbuy === 1 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-l bg-E02E24'>
邀请好友参团 23:32:23 后结束
</button>
</div>
}
{/*砍价*/}
{
this.props.status === 3 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥149</span>
<span>直接购买</span>
</button>
{
this.state.isbuy === 0 &&
<button className='btn btn-s bg-E02E24'>
我要砍价
</button>
}
{
this.state.isbuy === 1 &&
<button className='btn btn-s bg-E02E24'>
<span>¥1</span>
<span>去支付</span>
</button>
}
</div>
}
{/*特殊课程*/}
{
this.props.status === 4 &&
<div className='btns-box'>
<a className='consult-l' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
</div>
}
</div>
)
}
}
export default BtnStatus;
\ No newline at end of file
src/components/detail/btnstatus/index.scss 0 → 100644
.detail-box {
.btns-box {
position: fixed;
bottom: 0;
width: 100%;
height: 44px;
background-color: $bg_fff;
display: flex;
justify-content: space-between;
.consult {
display: inline-block;
height: 100%;
background-color: $bg_fff;
text-align: center;
padding-top: 3px;
.iconerji {
display: block;
height: 20px;
line-height: 20px;
font-size: 20px;
color: $active;
}
span {
display: block;
font-size: 12px;
color: $color_555;
}
}
.consult-s {
width: 95px;
}
.consult-m {
width: 50%;
}
.consult-l {
width: 100%;
height: 100%;
line-height: 44px;
text-align: center;
font-size: 18px;
color: $white;
background: linear-gradient(90deg, $bg_active 0%, $bg_007FD0 100%);
i {
font-size: 25px;
margin-right: 10px;
vertical-align: middle;
}
span {
vertical-align: middle;
}
}
.btn {
height: 100%;
color: $white;
font-size: 16px;
border: none;
padding: 8px 0;
}
.btn-s {
width: 140px;
span {
display: block;
}
span:nth-child(1) {
font-size: 14px;
}
span:nth-child(2) {
font-size: 12px;
}
}
.btn-m {
width: 50%;
}
.btn-l {
width: 280px;
}
.bg-FCCD05 {
background: linear-gradient(90deg, $bg_FCCD05 0%, $bg_FF9500 100%);
}
.bg-FD7700 {
background: linear-gradient(90deg, $bg_FD7700 0%, $bg_FF4000 100%);
}
.bg-09f {
background: linear-gradient(90deg, $bg_0198FE 0%, $bg_077FD0 100%);
}
.bg-F4AAA7 {
background-color: $bg-F4AAA7;
}
.bg-E02E24 {
background-color: $bg_E02E24;
}
}
}
\ No newline at end of file
src/components/detail/carousel/index.js 0 → 100644
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
import './index.scss'
import {api, getParam, http} from "@/utils";
class Carouselw extends Component {
constructor(props) {
super(props)
this.state = {
list: []
}
}
componentDidMount() {
const _this = this
_this.getList()
// this.timer = setInterval(function () {
// _this.getList()
// },10000);
}
componentWillUnmount() {
this.timer && clearTimeout(this.timer);
}
// 获取课程接口
getList = () => {
let data = {
course_id: getParam('id')
}
http.post(`${api.home}/m/course/barrages`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
list: res.data.data,
});
}
})
}
render() {
return (
<WingBlank>
<Carousel className="my-carousel"
vertical
dots={false}
autoplay
infinite
>
{
this.state.list &&
<div className="v-item text-overflow-one">
<img src={this.state.list.avatar} alt=""/>
{this.state.list.user_name} {this.state.list.live_msg}
</div>
}
</Carousel>
</WingBlank>
)
}
}
export default Carouselw;
\ No newline at end of file
src/components/detail/carousel/index.scss 0 → 100644
.detail-box {
.my-carousel {
position: absolute!important;
top: 66px;
width: 168px!important;
background: rgba(0, 0, 0, .6);
font-size: 12px;
color: $white;
border-radius: 3px;
padding: 6px 9px;
img {
width: 18px;
height: 18px;
border-radius: 50%;
vertical-align: middle;
margin-right: 7px;
}
}
}
\ No newline at end of file
src/components/detail/index.js
......@@ -6,14 +6,32 @@ import {HeaderBar, ToApp} from '../../common'
import ShareRank from "./shareRank"
import Audition from "./audition"
import Single from "./single"
import BtnStatus from "./btnstatus"
import Carouselw from "./carousel"
import {connect} from "react-redux"
import {fetchCoursesListIfNeeded} from "./actions"
class Detail extends Component {
state = {
isbuy: 0,
isvip: 0,
auditionBox: false,
singleBox: false
constructor(props) {
super(props)
this.state = {
isbuy: 0,
isvip: 0,
auditionBox: false,
singleBox: false,
shareRank: false,
singMess: ''
}
}
componentDidMount() {
this.props.fetchCoursesListIfNeeded()
}
componentDidUpdate() {
console.log(this.props.courseInfo.course_info)
}
toApp = () => {
......@@ -26,38 +44,55 @@ class Detail extends Component {
}));
}
// 点击子组件单集购买按钮
toSingleset = () => {
toSingleset = (item) => {
this.setState(status => ({
singleBox: true,
singMess: item
}));
}
// 打开分销排行榜弹窗
openRanking = () => {
this.setState(status => ({
shareRank: true
}));
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({auditionBox: val,singleBox: val})
this.setState({auditionBox: val, singleBox: val, shareRank: val})
}
render() {
let courseInfo = ''
let service = ''
if (this.props.courseInfo.course_info) {
courseInfo = this.props.courseInfo.course_info
service = this.props.courseInfo.course_info.service
}
return (
<div className='detail-box'>
<ToApp className='toapp' toApp={this.toApp}></ToApp>
<HeaderBar title={'课程详情'}></HeaderBar>
{/*弹幕*/}
<Carouselw></Carouselw>
{/*课程*/}
<div className='course-content'>
<div className='cover'>
<img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg'
<img src={courseInfo.image_name}
alt=""/>
</div>
<div className="info">
<p className='title'>区块链实战[一对一实战 公区块链实战[一对一实战 公...</p>
<p className='contact text-overflow-2'>从零入门区块链和比特币，送干货从零入门</p>
<p className='title'>{courseInfo.course_title}</p>
<p className='contact text-overflow-2'>{courseInfo.simpledescription}</p>
<div className='des'>
{this.state.isbuy === 0 && <p className="course-price">
<span className="new">￥3980</span>
<span className="old">￥5680</span>
{courseInfo.is_baoming === 0 && <p className="course-price">
<span className="new">¥{courseInfo.price1}</span>
<span className="old">¥{courseInfo.price0}</span>
</p>
}
{this.state.isbuy === 1 &&
{courseInfo.is_baoming === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
......@@ -65,9 +100,9 @@ class Detail extends Component {
</div>
{/*正常课程已购买时显示*/}
{
this.state.isbuy === 1 &&
courseInfo.is_baoming === 1 &&
<div className='group'>
上课QQ群：449141326，加群请备注您的学号：479409
上课QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.course_qq}
</div>
}
{/*vip课程显示*/}
......@@ -82,28 +117,47 @@ class Detail extends Component {
{/*服务承诺*/}
<div className='promise'>
<label>服务承诺</label>
<p>直播答疑 · 视频回放 · 讲师助教组长同答疑 · 毕业考核等十多项服务</p>
<p>
{
service && service.length > 0 && service.map((item, index) => {
return (
<span key={index}> {item} </span>
)
})
}
</p>
</div>
{/*试听*/}
<Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>
{/*单集购买*/}
<Single singleBox={this.state.singleBox} boxHide={this.boxHide} data={this.state.singMess}
title={courseInfo.course_title}/>
{/*分享赚钱*/}
<ShareRank/>
<ShareRank shareRank={this.state.shareRank} openRanking={this.openRanking} boxHide={this.boxHide}/>
{/*砍价*/}
<Bargain/>
{/*课程介绍、大纲*/}
<OutLine toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{/*试听*/}
<Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>
{/*单集购买*/}
<Single singleBox={this.state.singleBox} boxHide={this.boxHide}/>
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{/*课程按钮 0正常购买流程，1已购买，2拼团，3砍价, 4特殊课程*/}
<BtnStatus status={0}></BtnStatus>
</div>
)
}
}
export default Detail
const mapStateToProps = state => ({
courseInfo: state.courseInfo
})
const mapDispatchToProps = {
fetchCoursesListIfNeeded
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)
\ No newline at end of file
src/components/detail/index.scss
......@@ -18,7 +18,6 @@
.course-content {
margin: 15px 12px 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid $sp_e7eaf1;
display: flex;
justify-content: space-between;
......@@ -87,8 +86,10 @@
}
.promise {
padding: 15px 12px;
padding: 15px 0;
height: 66px;
border-top: 1px solid #e7eaf1;
margin: 0 12px;
label {
float: left;
......@@ -177,222 +178,4 @@
}
}
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
.content {
width: 300px;
position: relative;
background-color: $white;
padding-top: 20px;
border-radius: 3px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.audition-box {
height: 144px;
text-align: center;
margin: 212px auto 22px auto;
.audition-header {
font-size: 16px;
color: $color_333;
}
.audition-dec {
font-size: 14px;
color: $color_666;
margin-top: 10px;
}
}
.singleset-payment {
height: 305px;
margin: 140px auto 22px auto;
padding: 17px 20px;
.price-box {
padding-bottom: 15px;
border-bottom: 1px solid $sp_ddd;
span {
font-size: 12px;
color: $color_666;
}
p {
height: 22px;
line-height: 22px;
color: $color_FF4000;
font-size: 22px;
text-align: center;
margin-top: 5px;
}
}
.course-info {
font-size: 14px;
p {
height: 14px;
line-height: 14px;
margin-top: 10px;
color: $color_333;
span {
color: $color_666;
}
}
}
.payment-type {
margin-top: 20px;
label {
display: inline-block;
width: 100%;
border-bottom: 1px solid $sp_ddd;
color: $color_666;
font-size: 12px;
padding-bottom: 5px;
}
p {
height: 22px;
line-height: 22px;
margin-top: 10px;
position: relative;
.iconzhifubaox- {
font-size: 22px;
color: #01aaef;
}
.iconweixinzhifu {
font-size: 22px;
color: #3baf34;
}
span {
display: inline-block;
margin-left: 10px;
color: $color_333;
font-size: 14px;
vertical-align: text-bottom;
}
.icondanseshixintubiao-5 {
position: absolute;
right: 0;
font-size: 24px;
}
.redioed {
color: #4cd964;
}
.redio {
color: $border_ccc;
}
}
}
}
.zero {
height: 147px;
margin: 213px auto 22px auto;
text-align: center;
.header {
color: $active;
height: 24px;
line-height: 24px;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.dec {
height: 14px;
line-height: 14px;
color: $color_666;
font-size: 14px;
margin-top: 15px;
}
}
.payment-success {
height: 258px;
margin: 143px auto 22px auto;
padding: 20px 24px;
.dec {
height: 33px;
line-height: 20px;
color: $color_666;
font-size: 14px;
margin-top: 12px;
}
.btn-18B4ED {
bottom: 70px;
}
}
}
}
\ No newline at end of file
src/components/detail/outline/index.scss
......@@ -34,6 +34,12 @@
padding: 15px 12px;
font-size: 14px;
color: $color_555;
p {
margin-bottom: 5px;
}
.dec {
margin-top: 15px;
}
}
.outline {
......@@ -59,6 +65,10 @@
margin-top: 10px;
margin-bottom: 5px;
position: relative;
.title {
display: inline-block;
max-width: 82%;
}
}
.points {
......@@ -117,6 +127,9 @@
.audition {
background: linear-gradient(90deg, $bg_0078FF 0%, $bg_active 100%);
.iconcelluar {
vertical-align: middle;
}
}
.singleset {
......
src/components/detail/reducers.js 0 → 100644
import {RECEIVE_COURSES_DETAIL} from './actions'
const initialState = {
}
export default function detailInfo(state = initialState, action) {
switch (action.type) {
case RECEIVE_COURSES_DETAIL:
let courseInfo = action.payload
return {
...state,
...courseInfo
}
default:
return state
}
}
\ No newline at end of file
src/components/detail/shareRank/index.js
import React, {Component} from 'react'
import './index.scss'
import {api, getParam, http} from "@/utils";
class ShareRank extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
// http.get(`${api.home}/dist/rankList/${getParam('id')`).then((res) => {
//
// })
}
// 关闭弹窗
colse = () => {
this.props.boxHide(false)
}
render() {
return (
<div className='share-ranking'>
<span className="title">排行榜：</span>
<span className="ranking-mess"><img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg"
alt=""/><i>22元</i></span>
<span className="ranking-mess"><img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg"
alt=""/><i>22元</i></span>
<img className="ranking-ellipsis"
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
<div className='ranking-box' onClick={this.props.openRanking}>
<span className="ranking-mess"><img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg"
alt=""/><i>22元</i></span>
<span className="ranking-mess"><img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg"
alt=""/><i>22元</i></span>
<img className="ranking-ellipsis"
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
</div>
<button className="share">分享赚22元</button>
{
this.props.shareRank &&
<div className="shareMbc">
<div className="content">
<div className="title-box">
<span className="lable">赚钱排行榜</span>
<span className="tips">只展示前9名用户</span>
</div>
<ul>
<li>
<img src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/e769a844b4.png" alt=""/>
<span className='course-title'>机器学习集机器学习集</span>
<span className='course-price'>270元</span>
</li>
</ul>
</div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div>
}
</div>
);
}
......
src/components/detail/shareRank/index.scss
......@@ -12,7 +12,14 @@
margin-right: 12px;
}
.ranking-box {
position: relative;
height: 22px;
line-height: 22px;
}
.ranking-mess {
float: left;
margin-right: 20px;
img {
......@@ -45,4 +52,91 @@
color: $red;
background-color: $bg_fff;
}
.shareMbc {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
height: 403px;
background-color: $white;
border-radius: 3px;
margin: 139px auto 20px auto;
.title-box {
width: 100%;
height: 57px;
padding: 15px 0 10px 0;
text-align: center;
.lable {
display: block;
color: $color_333;
font-size: 16px;
height: 16px;
line-height: 16px;
}
.tips {
color: $color_666;
font-size: 12px;
height: 12px;
line-height: 12px;
}
}
ul {
width: 100%;
height: 302px;
background-color: $bg_f5f5f5;
padding: 0 25px 0 20px;
overflow: auto;
li {
height: 60px;
line-height: 60px;
border-bottom: 1px solid $sp_e7eaf1;
img {
width: 44px;
height: 44px;
border-radius: 50%;
float: left;
margin-top: 8px;
}
.course-title {
display: inline-block;
color: $color_333;
font-size: 16px;
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 10px;
}
.course-price {
color: $color_FF0000;
font-size: 16px;
float: right;
}
}
}
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
}
}
src/components/detail/single/index.js
......@@ -2,12 +2,28 @@ import React, {Component} from 'react'
import './index.scss'
class Single extends Component {
state = {
status: 1,
constructor(props) {
super(props)
this.state = {
status: 1
}
}
// 确定购买
toBuy = () => {
this.setState({
status: 2
})
}
// 关闭弹窗
colse = () => {
this.props.boxHide(false);
this.setState({
status: 1
})
}
render() {
return (
<div>
......@@ -19,11 +35,14 @@ class Single extends Component {
<div className='content singleset-payment'>
<div className='price-box'>
<span>实付款：</span>
<p>25元</p>
<p>{this.props.data.class_price}元</p>
</div>
<div className='course-info'>
<p className='text-overflow-1'><span>课程：</span>机器学习</p>
<p className='text-overflow-1'><span>课时：</span>第2课时 决策树与树集成模型法法第2课时 决策树与树集成模型法法
<p className='text-overflow-1'><span>课程：</span>
{this.props.title}
</p>
<p className='text-overflow-1'><span>课时：</span>
{this.props.data.name}
</p>
</div>
<div className='payment-type'>
......@@ -39,7 +58,7 @@ class Single extends Component {
<i className='iconfont icondanseshixintubiao-5 redio'></i>
</p>
</div>
<div className='btn btn-18B4ED'>确认购买</div>
<div className='btn btn-18B4ED' onClick={this.toBuy}>确认购买</div>
</div>
}
{
......
src/components/detail/single/index.scss
......@@ -5,7 +5,7 @@
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
z-index: 2;
.content {
width: 300px;
......
src/store/index.js
import { combineReducers } from 'redux';
import myCourses from '@/components/study/myCourses/reducers'
import courseInfo from '@/components/detail/reducers'
const reducer = combineReducers({
myCourses
myCourses,
courseInfo
});
export default reducer;
\ No newline at end of file
yarn.lock
......@@ -854,6 +854,13 @@
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.4.4":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/template@^7.1.0", "@babel/template@^7.2.2", "@babel/template@^7.4.0":
version "7.4.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b"
......@@ -892,6 +899,14 @@
resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
"@loadable/component@^5.10.1":
version "5.10.1"
resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.10.1.tgz#09613e46d409ffacb3b4403658ed90adbc01ba24"
integrity sha512-nYb38UbPWCWB9R8US4Za0JzgjS1QaY13STJhU7ZUsfO2qG3k5huppVF92eX2iauhfpdrRkCDQqi+Fg/US4FXIg==
dependencies:
"@babel/runtime" "^7.4.4"
hoist-non-react-statics "^3.3.0"
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
......
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