Commit 91b43ac2 by wangshuo

合并Dev分支

parents 584bb827 be6c51d0
...@@ -16,6 +16,8 @@ $color_202426: #202426; ...@@ -16,6 +16,8 @@ $color_202426: #202426;
$color_4B4B4B: #4B4B4B; $color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F; $color_FE2F2F: #FE2F2F;
$color_FF4000: #FF4000; $color_FF4000: #FF4000;
$color_FF0000: #FF0000;
/* /*
...@@ -61,7 +63,15 @@ $bg_FADD29: #FADD29; ...@@ -61,7 +63,15 @@ $bg_FADD29: #FADD29;
$bg_E7E7E7: #E7E7E7; $bg_E7E7E7: #E7E7E7;
$bg_18B4ED: #18B4ED; $bg_18B4ED: #18B4ED;
$bg_FF4000: #FF4000; $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;
$bg_FF0000: #FF0000;
/* /*
......
...@@ -6,25 +6,25 @@ const navLinkConfig = [ ...@@ -6,25 +6,25 @@ const navLinkConfig = [
{ {
to: '/', to: '/',
exact: true, exact: true,
icon: 'iconshouye', icon: 'iconshouye-xianxing',
text: '首页' text: '首页'
}, },
{ {
to: '/classify', to: '/classify',
exact: false, exact: false,
icon: 'iconiconfront-16', icon: 'iconfenlei-xianxing',
text: '分类' text: '分类'
}, },
{ {
to: '/study', to: '/study',
exact: false, exact: false,
icon: 'iconxuexi', icon: 'iconxuexi-xianxing',
text: '学习' text: '学习'
}, },
{ {
to: '/my', to: '/my',
exact: false, exact: false,
icon: 'iconhome', icon: 'iconwode-xianxing',
text: '我的' text: '我的'
} }
] ]
......
...@@ -50,9 +50,9 @@ class Classify extends Component { ...@@ -50,9 +50,9 @@ class Classify extends Component {
<div className="vip"> <div className="vip">
{this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => { {this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
return ( return (
<a key={index} href='/detail'> <Link key={index} to={`/detail?id=${item.course_id}`}>
<img src={item.course_img} alt=""/> <img src={item.course_img} alt=""/>
</a> </Link>
) )
}) })
...@@ -69,7 +69,7 @@ function ClassCourseA({data}) { ...@@ -69,7 +69,7 @@ function ClassCourseA({data}) {
{ {
data && data.length > 0 && data.map((item, index) => { data && data.length > 0 && data.map((item, index) => {
return ( 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>
) )
}) })
} }
......
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
}))
}
})
}
.popup-box { .detail-box {
position: fixed; .popup-box {
top: 0; position: fixed;
left: 0; top: 0;
right: 0; left: 0;
bottom: 0; right: 0;
background-color: rgba(0, 0, 0, .6); bottom: 0;
z-index: 1; background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px; .content {
position: relative; width: 300px;
background-color: $white; position: relative;
padding-top: 20px; background-color: $white;
border-radius: 3px; 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 { .close {
font-size: 18px; color: #fff;
margin-left: 10px; font-size: 22px;
vertical-align: text-bottom; position: relative;
left: 50%;
margin-left: -11px;
} }
}
.audition-box { .btn {
height: 144px; position: absolute;
text-align: center; bottom: 24px;
margin: 212px auto 22px auto; left: 83px;
width: 135px;
.audition-header { height: 30px;
border-radius: 3px;
font-size: 16px; font-size: 16px;
color: $color_333; color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
} }
.audition-dec { .audition-box {
font-size: 14px; height: 144px;
color: $color_666; text-align: center;
margin-top: 10px; 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
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
.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
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
.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
...@@ -6,14 +6,32 @@ import {HeaderBar, ToApp} from '../../common' ...@@ -6,14 +6,32 @@ import {HeaderBar, ToApp} from '../../common'
import ShareRank from "./shareRank" import ShareRank from "./shareRank"
import Audition from "./audition" import Audition from "./audition"
import Single from "./single" 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 { class Detail extends Component {
state = {
isbuy: 0, constructor(props) {
isvip: 0, super(props)
auditionBox: false, this.state = {
singleBox: false isbuy: 0,
isvip: 0,
auditionBox: false,
singleBox: false,
shareRank: false,
singMess: ''
}
}
componentDidMount() {
this.props.fetchCoursesListIfNeeded()
}
componentDidUpdate() {
console.log(this.props.courseInfo.course_info)
} }
toApp = () => { toApp = () => {
...@@ -26,38 +44,55 @@ class Detail extends Component { ...@@ -26,38 +44,55 @@ class Detail extends Component {
})); }));
} }
// 点击子组件单集购买按钮 // 点击子组件单集购买按钮
toSingleset = () => { toSingleset = (item) => {
this.setState(status => ({ this.setState(status => ({
singleBox: true, singleBox: true,
singMess: item
})); }));
} }
// 打开分销排行榜弹窗
openRanking = () => {
this.setState(status => ({
shareRank: true
}));
}
// 自组件传给父组件的boxHide // 自组件传给父组件的boxHide
boxHide = (val) => { boxHide = (val) => {
this.setState({auditionBox: val,singleBox: val}) this.setState({auditionBox: val, singleBox: val, shareRank: val})
} }
render() { 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 ( return (
<div className='detail-box'> <div className='detail-box'>
<ToApp className='toapp' toApp={this.toApp}></ToApp> <ToApp className='toapp' toApp={this.toApp}></ToApp>
<HeaderBar title={'课程详情'}></HeaderBar> <HeaderBar title={'课程详情'}></HeaderBar>
{/*弹幕*/}
<Carouselw></Carouselw>
{/*课程*/} {/*课程*/}
<div className='course-content'> <div className='course-content'>
<div className='cover'> <div className='cover'>
<img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' <img src={courseInfo.image_name}
alt=""/> alt=""/>
</div> </div>
<div className="info"> <div className="info">
<p className='title'>区块链实战[一对一实战 公区块链实战[一对一实战 ...</p> <p className='title'>{courseInfo.course_title}</p>
<p className='contact text-overflow-2'>从零入门区块链和比特币,送干货从零入门</p> <p className='contact text-overflow-2'>{courseInfo.simpledescription}</p>
<div className='des'> <div className='des'>
{this.state.isbuy === 0 && <p className="course-price"> {courseInfo.is_baoming === 0 && <p className="course-price">
<span className="new">3980</span> <span className="new">¥{courseInfo.price1}</span>
<span className="old">5680</span> <span className="old">¥{courseInfo.price0}</span>
</p> </p>
} }
{this.state.isbuy === 1 && {courseInfo.is_baoming === 1 &&
<a href="/#" className="isbuy">已购买</a> <a href="/#" className="isbuy">已购买</a>
} }
</div> </div>
...@@ -65,45 +100,67 @@ class Detail extends Component { ...@@ -65,45 +100,67 @@ class Detail extends Component {
</div> </div>
{/*正常课程已购买时显示*/} {/*正常课程已购买时显示*/}
{ {
this.state.isbuy === 1 && courseInfo.is_baoming === 1 &&
<div className='group'> <div className='group'>
上课QQ群:449141326,加群请备注您的学号:479409 上课QQ群:{courseInfo.course_qq},加群请备注您的学号:{courseInfo.uid}
</div> </div>
} }
{/*vip课程显示*/} {/*vip课程显示*/}
{ {
this.state.isvip === 1 && courseInfo.vip_range &&
<div className="vip"> <div className="vip">
<p>已开通年会员:2019/03/02 2020/03/02</p> <p>已开通年会员:{courseInfo.vip_range}</p>
<p>年会员QQ群:967114537,加群请备注您的学号:479409</p> <p>年会员QQ群:{courseInfo.course_qq},加群请备注您的学号:{courseInfo.uid}</p>
</div> </div>
} }
{/*服务承诺*/} {/*服务承诺*/}
<div className='promise'> <div className='promise'>
<label>服务承诺</label> <label>服务承诺</label>
<p>直播答疑 · 视频回放 · 讲师助教组长同答疑 · 毕业考核等十多项服务</p> <p>
{
service && service.length > 0 && service.map((item, index) => {
return (
<span key={index}> {item} </span>
)
})
}
</p>
</div> </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/> {
courseInfo.is_dist &&
<ShareRank shareRank={this.state.shareRank} openRanking={this.openRanking} boxHide={this.boxHide}/>
}
{/*砍价*/} {/*砍价*/}
<Bargain/> <Bargain/>
{/*课程介绍、大纲*/} {/*课程介绍、大纲*/}
<OutLine toAudition={this.toAudition} toSingleset={this.toSingleset}/> <OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{/*试听*/}
<Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>
{/*单集购买*/}
<Single singleBox={this.state.singleBox} boxHide={this.boxHide}/>
{/*课程按钮 0正常购买流程,1已购买,2拼团,3砍价, 4特殊课程*/}
<BtnStatus status={0}></BtnStatus>
</div> </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
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
.course-content { .course-content {
margin: 15px 12px 0 12px; margin: 15px 12px 0 12px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid $sp_e7eaf1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -87,8 +86,10 @@ ...@@ -87,8 +86,10 @@
} }
.promise { .promise {
padding: 15px 12px; padding: 15px 0;
height: 66px; height: 66px;
border-top: 1px solid #e7eaf1;
margin: 0 12px;
label { label {
float: left; float: left;
...@@ -112,7 +113,7 @@ ...@@ -112,7 +113,7 @@
} }
.group, .vip { .group, .vip {
margin: 0 12px; margin: 10px 12px 0 12px;
padding: 10px 12px; padding: 10px 12px;
text-align: center; text-align: center;
color: $white; color: $white;
...@@ -128,271 +129,4 @@ ...@@ -128,271 +129,4 @@
background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%); background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%);
} }
.share-ranking {
height: 60px;
line-height: 25px;
padding: 15px 12px;
border-top: 8px solid $bg_f5f5f5;
display: flex;
position: relative;
font-size: 12px;
.title {
font-size: 14px;
margin-right: 12px;
}
.ranking-mess {
margin-right: 20px;
img {
width: 22px;
height: 22px;
border-radius: 50%;
vertical-align: middle;
}
i {
display: inline-block;
margin-left: 5px;
color: $color_333;
font-style: normal;
}
}
.ranking-ellipsis {
width: 22px;
height: 22px;
border-radius: 50%;
}
.share {
position: absolute;
right: 12px;
padding: 5px 6px;
border: 1px solid $red;
border-radius: 3px;
color: $red;
background-color: $bg_fff;
}
}
.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
...@@ -34,6 +34,12 @@ ...@@ -34,6 +34,12 @@
padding: 15px 12px; padding: 15px 12px;
font-size: 14px; font-size: 14px;
color: $color_555; color: $color_555;
p {
margin-bottom: 5px;
}
.dec {
margin-top: 15px;
}
} }
.outline { .outline {
...@@ -59,6 +65,10 @@ ...@@ -59,6 +65,10 @@
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
.title {
display: inline-block;
max-width: 82%;
}
} }
.points { .points {
...@@ -117,6 +127,9 @@ ...@@ -117,6 +127,9 @@
.audition { .audition {
background: linear-gradient(90deg, $bg_0078FF 0%, $bg_active 100%); background: linear-gradient(90deg, $bg_0078FF 0%, $bg_active 100%);
.iconcelluar {
vertical-align: middle;
}
} }
.singleset { .singleset {
......
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
import React, {Component} from 'react' import React, {Component} from 'react'
import './index.scss' import './index.scss'
import {api, getParam, http} from "@/utils";
class ShareRank extends Component { class ShareRank extends Component {
constructor(props) {
super(props)
this.state = {
list: '',
rankingslice: ''
}
}
componentDidMount() {
http.get(`${api.home}/dist/rankList/${getParam('id')}`).then((res) => {
if (res.data.code === 200) {
this.setState({
list: res.data.data,
rankingslice: res.data.data.slice(0,2)
})
}
})
}
// 关闭弹窗
colse = () => {
this.props.boxHide(false)
}
render() { render() {
return ( return (
<div className='share-ranking'> <div className='share-ranking'>
<span className="title">排行榜:</span> <span className="title">排行榜:</span>
<span className="ranking-mess"><img <div className='ranking-box' onClick={this.props.openRanking}>
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" {
alt=""/><i>22</i></span> this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item,index)=>{
<span className="ranking-mess"><img return(
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" <span key={index} className="ranking-mess">
alt=""/><i>22</i></span> <img src={item.head_imgurl} alt=""/>
<img className="ranking-ellipsis" <i>{item.amount}</i>
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/> </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> <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>
{
this.state.list && this.state.list.length > 0 && this.state.list.map((item,index)=>{
return(
<li key={index}>
<img src={item.head_imgurl} alt=""/>
<span className='course-title'>{item.user_name}</span>
<span className='course-price'>{item.amount}</span>
</li>
)
})
}
</ul>
<div className='shareBtn'>
<button>分享赚67</button>
</div>
</div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div>
}
</div> </div>
); );
} }
......
...@@ -12,8 +12,15 @@ ...@@ -12,8 +12,15 @@
margin-right: 12px; margin-right: 12px;
} }
.ranking-box {
position: relative;
height: 22px;
line-height: 22px;
}
.ranking-mess { .ranking-mess {
margin-right: 20px; float: left;
margin-right: 15px;
img { img {
width: 22px; width: 22px;
...@@ -45,4 +52,107 @@ ...@@ -45,4 +52,107 @@
color: $red; color: $red;
background-color: $bg_fff; 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;
}
}
}
.shareBtn {
width: 100%;
height: 44px;
text-align: center;
button {
border: none;
width: 105px;
height: 24px;
margin-top: 10px;
background: linear-gradient(90deg, $bg_FF0000 0%, $bg_FF4000 100%);
border-radius: 12px;
font-size: 14px;
color: $white;
}
}
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
}
} }
import React, {Component} from 'react' import React, {Component} from 'react'
import './index.scss' import './index.scss'
import {api, getParam, http, is_weixin} from "@/utils";
class Single extends Component { class Single extends Component {
state = { constructor(props) {
status: 1, super(props)
this.state = {
status: 1
}
}
// 确定购买
toBuy = () => {
http.get(`${api.home}/sys/createClassOrder/${this.props.data.video_id}`).then((res) => {
if (res.data.code === 200) {
}
})
// this.setState({
// status: 2
// })
} }
// 关闭弹窗
colse = () => { colse = () => {
this.props.boxHide(false); this.props.boxHide(false);
this.setState({
status: 1
})
} }
render() { render() {
{console.log(is_weixin(),1)}
return ( return (
<div> <div>
{ {
...@@ -19,11 +43,14 @@ class Single extends Component { ...@@ -19,11 +43,14 @@ class Single extends Component {
<div className='content singleset-payment'> <div className='content singleset-payment'>
<div className='price-box'> <div className='price-box'>
<span>实付款:</span> <span>实付款:</span>
<p>25</p> <p>{this.props.data.class_price}</p>
</div> </div>
<div className='course-info'> <div className='course-info'>
<p className='text-overflow-1'><span>课程:</span>机器学习</p> <p className='text-overflow-1'><span>课程:</span>
<p className='text-overflow-1'><span>课时:</span>第2课时 决策树与树集成模型法法第2课时 决策树与树集成模型法 {this.props.title}
</p>
<p className='text-overflow-1'><span>课时:</span>
{this.props.data.name}
</p> </p>
</div> </div>
<div className='payment-type'> <div className='payment-type'>
...@@ -39,7 +66,7 @@ class Single extends Component { ...@@ -39,7 +66,7 @@ class Single extends Component {
<i className='iconfont icondanseshixintubiao-5 redio'></i> <i className='iconfont icondanseshixintubiao-5 redio'></i>
</p> </p>
</div> </div>
<div className='btn btn-18B4ED'>确认购买</div> <div className='btn btn-18B4ED' onClick={this.toBuy}>确认购买</div>
</div> </div>
} }
{ {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
z-index: 1; z-index: 2;
.content { .content {
width: 300px; width: 300px;
......
.my-tab{
width: 100%; .flex-container {
height: 44px; .my-tab {
font-size: $font_16; width: 100%;
background: $bg_f7f9fc; height: 44px;
} font-size: $font_16;
.my-list{ background: $bg_f7f9fc;
.avatar-wrap{ }
padding: 15px 20px;
.my-list {
.avatar-wrap {
padding: 15px 20px;
}
}
.my-isvip {
width: 100%;
height: 43px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-stu {
font-size: 12px;
} }
}
.my-isvip{
width: 100%;
height: 43px;
background-image: url("./image/vip_bg.png");
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
}
.my-stu{
font-size: 12px;
}
// 修改List组件默认样式
.am-list-item {
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple {
padding-right: 0px !important;
}
// 修改List组件默认样式 .am-list-thumb {
.am-list-item{ img {
padding-left: 22px; width: 64px;
padding-right: 8px; height: 64px;
} }
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
} }
}
.am-list-brief{ .am-list-brief {
color: $color_333 !important; color: $color_333 !important;
}
.am-list-header{
padding: 2.5px 0;
background: $bg_f5f5f5;
}
.am-list-content{
i{
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
} }
}
.am-list-line-multiple::after{ .am-list-header {
background-color: transparent !important; padding: 2.5px 0;
} background: $bg_f5f5f5;
.my-list{ }
.am-list-body::after{
.am-list-content {
i {
vertical-align: middle;
margin-top: -1px;
display: inline-block;
margin-right: 12px;
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after {
background-color: transparent !important;
}
.my-list {
.am-list-body::after {
background-color: transparent !important;
}
}
.am-list-content i {
margin: 0;
margin-top: -4px;
margin-right: 10px;
}
.am-list-body::before {
background-color: transparent !important; background-color: transparent !important;
height: 0 !important;
} }
} }
.am-list-content i{ \ No newline at end of file
margin: 0;
margin-top: -4px;
margin-right: 10px;
}
.am-list-body::before{
background-color: transparent !important;
height: 0 !important;
}
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile'; import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index' import { OrderItem } from '@/common/index'
import { Link } from 'react-router-dom'
import "./order.scss" import "./order.scss"
...@@ -37,7 +38,7 @@ const mockData = [ ...@@ -37,7 +38,7 @@ const mockData = [
function OrderList(props) { function OrderList(props) {
const listData = props.list; const listData = props.list;
return ( return (
<div style={{"padding": "0 15px"}}> <div>
{ {
listData.map((item, index) => { listData.map((item, index) => {
const Info = ( const Info = (
...@@ -50,7 +51,7 @@ function OrderList(props) { ...@@ -50,7 +51,7 @@ function OrderList(props) {
</p> </p>
</div> </div>
) )
return ( return (
<OrderItem {...item} key={index} info={Info}> <OrderItem {...item} key={index} info={Info}>
<div className="order-prefer"> <div className="order-prefer">
...@@ -75,7 +76,7 @@ class Order extends Component { ...@@ -75,7 +76,7 @@ class Order extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
perfect: true
} }
} }
handleClick = () => { handleClick = () => {
...@@ -94,22 +95,28 @@ class Order extends Component { ...@@ -94,22 +95,28 @@ class Order extends Component {
> >
课程报名 课程报名
</NavBar> </NavBar>
<div className="order-information"> {
<i className="iconfont iconiconfront-6 order-addsize"></i> !this.state.perfect &&
<div className="order-infotext">完善报名信息</div> <Link to='/orderinfo' className="order-information">
<i className="iconfont iconiconfront-70 order-next"></i> <i className="iconfont iconiconfront-6 order-addsize"></i>
</div> <div className="order-infotext">完善报名信息</div>
<div className="order-information"> <i className="iconfont iconiconfront-70 order-next"></i>
<i className="iconfont iconiconfront-20"></i> </Link>
<div className="order-cell"> }
<div className="name">姓名: 张三</div> {
<div>电话: 13266532323</div> this.state.perfect &&
<div className="order-information2">
</div> <i className="iconfont iconiconfront-20"></i>
<div className="order-cell"> <div className="order-cell">
<div>QQ: 1084251364</div> <div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div> </div>
</div> }
<div className="order-list"> <div className="order-list">
<OrderList list={mockData}/> <OrderList list={mockData}/>
</div> </div>
...@@ -121,7 +128,7 @@ class Order extends Component { ...@@ -121,7 +128,7 @@ class Order extends Component {
extra={<i className="iconfont icondanseshixintubiao-5"></i>} extra={<i className="iconfont icondanseshixintubiao-5"></i>}
> >
余额抵扣 余额抵扣
<span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span> <span className="order-balanceprice"> (账户余额: <i className="order-money">1</i>)</span>
<i className="iconfont iconiconfront-22"></i> <i className="iconfont iconiconfront-22"></i>
</Item> </Item>
</List> </List>
...@@ -140,14 +147,14 @@ class Order extends Component { ...@@ -140,14 +147,14 @@ class Order extends Component {
<span className="order-preprice-price">¥ 200.50</span> <span className="order-preprice-price">¥ 200.50</span>
</div> </div>
</div> </div>
<button type="button" className="order-button "> <button type="button" className="order-button">
<span className="order-button-text">提交订单</span> <span className="order-button-text">提交订单</span>
</button> </button>
</div> </div>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
</div> </div>
) )
} }
......
.order-wrapper{ .order-wrapper {
width: 100%; width: 100%;
margin-bottom: 50px; margin-bottom: 50px;
background-color: $bg_f5f5f5; background-color: $bg_f5f5f5;
}
.order-tab{ .order-tab {
color: $black; color: $black;
background: $bg_f7f9fc; background: $bg_f7f9fc;
} }
.order-information{
.order-information {
display: flex; display: flex;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
padding: 28px 15px; padding: 29px 15px;
color: $color_555; color: $color_555;
background-color: $bg_fff; background-color: $bg_fff;
position: relative; position: relative;
} }
.order-information::before{
.order-information::before {
content: ''; content: '';
left: 0; left: 0;
right: 0; right: 0;
...@@ -26,109 +29,137 @@ ...@@ -26,109 +29,137 @@
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px; background-size: 80px;
} }
.order-cell{
.order-cell {
width: 50%; width: 50%;
height: 45px;
font-size: $font_14; font-size: $font_14;
color: $color_333; color: $color_333;
margin-left: 20px; margin-left: 20px;
line-height: 20px; line-height: 20px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
.name{
margin-bottom: 10px; .name {
margin-bottom: 10px;
} }
} }
.order-addsize{
font-size: 32px !important; .order-addsize {
font-size: 22px !important;
margin-bottom: 0px; margin-bottom: 0px;
height: 22px;
color: $active; color: $active;
} line-height: 22px;
.order-next{ }
line-height: 48px;
margin-bottom: 0px; .order-next {
} line-height: 22px;
.order-list{ margin-bottom: 0px;
}
.order-list {
margin-top: 8px; margin-top: 8px;
background-color: $white; background-color: $white;
} .public-content {
.order-infotext{ padding: 10px 15px;
}
}
.order-infotext {
flex: 1; flex: 1;
line-height: 48px; height: 22px;
line-height: 22px;
margin-left: 10px; margin-left: 10px;
font-size: $font_16; font-size: $font_16;
color: $color_555; color: $color_555;
} }
.order-info {
.order-info {
color: $color_666; color: $color_666;
font-size: $font_14; font-size: $font_14;
.order-title{
height: 16px; .order-title {
line-height: 16px; height: 16px;
color: $color_333; line-height: 16px;
font-size: $font_16; color: $color_333;
} font-size: $font_16;
.order-content{
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
margin-top: 10px;
}
.order-newprice{
color: $redprice;
font-size: $font_16;
margin-right: 15px;
} }
.order-price{
color: $color_999; .order-content {
font-size: $font_12; margin-top: 10px;
text-decoration: line-through; color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des {
margin-top: 10px;
} }
}
.order-bar{ .order-newprice {
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price {
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar {
width: 100%;
position: fixed;
bottom: 0;
z-index: 2;
height: 50px; height: 50px;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
align-items: center; align-items: center;
background-color: $bg_fff; background-color: $bg_fff;
margin-top: 30%; }
}
.order-course{ .order-course {
margin-left: 20px; margin-left: 20px;
.order-course-text{
font-size: $font_16; .order-course-text {
color: $color_333; font-size: $font_16;
color: $color_333;
} }
} }
.order-bar-text{
.order-bar-text {
flex: 1; flex: 1;
font-weight: 500; font-weight: 500;
text-align: right; text-align: right;
color: #323233; color: #323233;
padding-right: 12px; padding-right: 20px;
.order-amount{
font-size: $font_14; .order-amount {
color: $color_333; font-size: $font_14;
.order-amount-price{ color: $color_333;
color: $redprice;
} .order-amount-price {
} color: $redprice;
.order-preprice{ }
font-size: $font_12; }
color: $color_555;
} .order-preprice {
} font-size: $font_12;
.order-button{ color: $color_555;
}
}
.order-button {
width: 110px; width: 110px;
height: 50px; height: 50px;
display: inline-block; display: inline-block;
position: relative;
padding: 0; padding: 0;
background-color: $bg_ff9898; background-color: $bg_ff9898;
color: $white; color: $white;
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
...@@ -138,51 +169,66 @@ ...@@ -138,51 +169,66 @@
-webkit-appearance: none; -webkit-appearance: none;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
border: 1px solid transparent; border: 1px solid transparent;
} }
.order-button-text{
}
.order-item{ .v-list-item {
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
margin-top: 8px; margin-top: 8px;
padding: 10px 15px 0 15px; padding: 10px 15px 0 15px;
.content{
border-bottom: none; .content {
} border-bottom: none;
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
} }
.order-prefer-text{ }
.order-prefer {
.am-list-line {
padding: 0 15px;
} }
} }
.order-balanceprice{
.order-balanceprice {
color: $color_666; color: $color_666;
font-size: $font_12; font-size: $font_12;
.order-money{
color: #ff2121; .order-money {
font-size: $font_12 !important; color: #ff2121;
font-weight: normal; font-size: $font_12 !important;
font-style: inherit; font-weight: normal;
vertical-align: middle; font-style: inherit;
margin: 0; vertical-align: middle;
margin: 0;
} }
} }
.am-list-item .am-list-line .am-list-content{ .am-list-item .am-list-line .am-list-content {
color: $color_333; color: $color_333;
} }
.order-balance{ .order-list {
margin-top: 8px; .am-list-item {
.am-list-content{ padding-left: 0 !important;
color: $color_333;
font-size: $font_16; }
}
.order-balance {
height: 44px;
line-height: 44px;
margin: 8px 0 50px 0;
.am-list-item {
padding-left: 0 !important;
}
.am-list-line {
padding: 0 15px;
}
.am-list-content {
color: $color_333;
font-size: $font_16;
.iconiconfront-22 {
font-size: 18px;
margin-left: 15px;
}
} }
}
} }
\ No newline at end of file
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView } from 'antd-mobile'; import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView } from 'antd-mobile';
import './scholarship.scss'; import './scholarship.scss';
import { isWechat, http, api } from "@/utils"; import { is_weixin, http, api } from "@/utils";
import CategoryItem from './CategoryItem/CategoryItem.js'; import CategoryItem from './CategoryItem/CategoryItem.js';
import SortItem from './SortItem/SortItem.js'; import SortItem from './SortItem/SortItem.js';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
...@@ -56,7 +56,7 @@ class _Scholarship extends Component { ...@@ -56,7 +56,7 @@ class _Scholarship extends Component {
} }
// 提现按钮 根据是否在微信环境中显示提示 // 提现按钮 根据是否在微信环境中显示提示
drawCash = () => { drawCash = () => {
if (isWechat()) { if (is_weixin()) {
this.setState({ this.setState({
drawCashWechat: true drawCashWechat: true
}); });
......
...@@ -6,6 +6,7 @@ import Classify from '@/components/classify'; ...@@ -6,6 +6,7 @@ import Classify from '@/components/classify';
import My from '@/components/my'; import My from '@/components/my';
import CourseList from '@/components/classify/courselist'; import CourseList from '@/components/classify/courselist';
import Order from '@/components/order/index'; import Order from '@/components/order/index';
import Orderinfo from '@/components/order/orderinfo';
import Preferential from '@/components/preferential/index'; import Preferential from '@/components/preferential/index';
import Search from '@/components/search/index' import Search from '@/components/search/index'
import SearchResult from '@/components/search/search-result' import SearchResult from '@/components/search/search-result'
...@@ -61,6 +62,10 @@ export default [ ...@@ -61,6 +62,10 @@ export default [
component: Order component: Order
}, },
{ {
path: '/orderinfo',
component: Orderinfo
},
{
path: '/detail', path: '/detail',
component: Detail component: Detail
}, },
......
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import myCourses from '@/components/study/myCourses/reducers' import myCourses from '@/components/study/myCourses/reducers'
import courseInfo from '@/components/detail/reducers'
import user from './userReducer' import user from './userReducer'
const reducer = combineReducers({ const reducer = combineReducers({
myCourses, myCourses,
courseInfo,
user user
}); });
......
export { default as http } from './http' export {default as http} from './http'
export { default as api } from './api' export {default as api} from './api'
export { html } export {html}
export const getParam = (key, str) => { export const getParam = (key, str) => {
...@@ -22,11 +20,10 @@ const htmlDecode = content => { ...@@ -22,11 +20,10 @@ const htmlDecode = content => {
// 判断是否是微信环境 是返回true;否则返回false // 判断是否是微信环境 是返回true;否则返回false
export const isWechat = () => { export const is_weixin = () => {
var ua = navigator.userAgent.toLowerCase(); var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") { if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true; return true;
} else {
return false;
} }
return false;
} }
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