Skip to content

M
mr-julyedu
Commit 2cc7ff86 by zhanghaozhe
Options

Merge branch 'master' of gitlab.julyedu.com:baiguangyao/mr-julyedu 

# Conflicts:
#	src/utils/index.js
parents e299a048 be6c51d0
Showing with 891 additions and 451 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,15 @@ $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;
$bg_FF0000: #FF0000;
/*
......
src/common/NavBar/index.js
......@@ -6,25 +6,25 @@ const navLinkConfig = [
{
to: '/',
exact: true,
icon: 'iconshouye',
icon: 'iconshouye-xianxing',
text: '首页'
},
{
to: '/classify',
exact: false,
icon: 'iconiconfront-16',
icon: 'iconfenlei-xianxing',
text: '分类'
},
{
to: '/study',
exact: false,
icon: 'iconxuexi',
icon: 'iconxuexi-xianxing',
text: '学习'
},
{
to: '/my',
exact: false,
icon: 'iconhome',
icon: 'iconwode-xianxing',
text: '我的'
}
]
......
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 {
.detail-box {
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
z-index: 2;
.content {
width: 300px;
......@@ -40,27 +41,6 @@
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;
......@@ -77,4 +57,6 @@
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 = {
constructor(props) {
super(props)
this.state = {
isbuy: 0,
isvip: 0,
auditionBox: false,
singleBox: 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,45 +100,67 @@ class Detail extends Component {
</div>
{/*正常课程已购买时显示*/}
{
this.state.isbuy === 1 &&
courseInfo.is_baoming === 1 &&
<div className='group'>
上课QQ群：449141326，加群请备注您的学号：479409
上课QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}
</div>
}
{/*vip课程显示*/}
{
this.state.isvip === 1 &&
courseInfo.vip_range &&
<div className="vip">
<p>已开通年会员：2019/03/02 — 2020/03/02</p>
<p>年会员QQ群：967114537，加群请备注您的学号：479409</p>
<p>已开通年会员：{courseInfo.vip_range}</p>
<p>年会员QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}</p>
</div>
}
{/*服务承诺*/}
<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/>
{
courseInfo.is_dist &&
<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;
......@@ -112,7 +113,7 @@
}
.group, .vip {
margin: 0 12px;
margin: 10px 12px 0 12px;
padding: 10px 12px;
text-align: center;
color: $white;
......@@ -128,271 +129,4 @@
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
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)
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() {
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>
<div className='ranking-box' onClick={this.props.openRanking}>
{
this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item,index)=>{
return(
<span key={index} className="ranking-mess">
<img src={item.head_imgurl} alt=""/>
<i>{item.amount}元</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>
{
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>
);
}
......
src/components/detail/shareRank/index.scss
......@@ -12,8 +12,15 @@
margin-right: 12px;
}
.ranking-box {
position: relative;
height: 22px;
line-height: 22px;
}
.ranking-mess {
margin-right: 20px;
float: left;
margin-right: 15px;
img {
width: 22px;
......@@ -45,4 +52,107 @@
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;
}
}
}
.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;
}
}
}
src/components/detail/single/index.js
import React, {Component} from 'react'
import './index.scss'
import {api, getParam, http, is_weixin} from "@/utils";
class Single extends Component {
state = {
status: 1,
constructor(props) {
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 = () => {
this.props.boxHide(false);
this.setState({
status: 1
})
}
render() {
{console.log(is_weixin(),1)}
return (
<div>
{
......@@ -19,11 +43,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 +66,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/components/my/index.scss
.my-tab{
.flex-container {
.my-tab {
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
}
.my-list {
.avatar-wrap {
padding: 15px 20px;
}
}
.my-isvip{
}
.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-stu {
font-size: 12px;
}
// 修改List组件默认样式
.am-list-item{
// 修改List组件默认样式
.am-list-item {
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
}
.am-list-item .am-list-line-multiple {
padding-right: 0px !important;
}
.am-list-thumb{
img{
}
.am-list-thumb {
img {
width: 64px;
height: 64px;
}
}
.am-list-brief{
}
.am-list-brief {
color: $color_333 !important;
}
.am-list-header{
}
.am-list-header {
padding: 2.5px 0;
background: $bg_f5f5f5;
}
.am-list-content{
i{
}
.am-list-content {
i {
vertical-align: middle;
margin-top: -1px;
display: inline-block;
......@@ -53,21 +62,26 @@
margin: 10px 12px 10px 0;
font-size: 30px !important;
}
}
.am-list-line-multiple::after{
}
.am-list-line-multiple::after {
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
}
.my-list {
.am-list-body::after {
background-color: transparent !important;
}
}
.am-list-content i{
}
.am-list-content i {
margin: 0;
margin-top: -4px;
margin-right: 10px;
}
.am-list-body::before{
}
.am-list-body::before {
background-color: transparent !important;
height: 0 !important;
}
}
\ No newline at end of file
src/components/order/index.js
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import { Link } from 'react-router-dom'
import "./order.scss"
......@@ -37,7 +38,7 @@ const mockData = [
function OrderList(props) {
const listData = props.list;
return (
<div style={{"padding": "0 15px"}}>
<div>
{
listData.map((item, index) => {
const Info = (
......@@ -75,7 +76,7 @@ class Order extends Component {
constructor(props) {
super(props);
this.state = {
perfect: true
}
}
handleClick = () => {
......@@ -94,12 +95,17 @@ class Order extends Component {
>
课程报名
</NavBar>
<div className="order-information">
{
!this.state.perfect &&
<Link to='/orderinfo' className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</div>
<div className="order-information">
</Link>
}
{
this.state.perfect &&
<div className="order-information2">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
......@@ -110,6 +116,7 @@ class Order extends Component {
<div>QQ: 1084251364</div>
</div>
</div>
}
<div className="order-list">
<OrderList list={mockData}/>
</div>
......@@ -121,7 +128,7 @@ class Order extends Component {
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>
</Item>
</List>
......@@ -140,7 +147,7 @@ class Order extends Component {
<span className="order-preprice-price">¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button ">
<button type="button" className="order-button">
<span className="order-button-text">提交订单</span>
</button>
</div>
......
src/components/order/order.scss
.order-wrapper{
.order-wrapper {
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
.order-tab {
color: $black;
background: $bg_f7f9fc;
}
.order-information{
}
.order-information {
display: flex;
width: 100%;
overflow: hidden;
padding: 28px 15px;
padding: 29px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before{
}
.order-information::before {
content: '';
left: 0;
right: 0;
......@@ -26,107 +29,135 @@
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-size: 80px;
}
.order-cell{
}
.order-cell {
width: 50%;
height: 45px;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name{
.name {
margin-bottom: 10px;
}
}
.order-addsize{
font-size: 32px !important;
}
.order-addsize {
font-size: 22px !important;
margin-bottom: 0px;
height: 22px;
color: $active;
}
.order-next{
line-height: 48px;
line-height: 22px;
}
.order-next {
line-height: 22px;
margin-bottom: 0px;
}
.order-list{
}
.order-list {
margin-top: 8px;
background-color: $white;
}
.order-infotext{
.public-content {
padding: 10px 15px;
}
}
.order-infotext {
flex: 1;
line-height: 48px;
height: 22px;
line-height: 22px;
margin-left: 10px;
font-size: $font_16;
color: $color_555;
}
.order-info {
}
.order-info {
color: $color_666;
font-size: $font_14;
.order-title{
.order-title {
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-content{
.order-content {
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des{
.order-des {
margin-top: 10px;
}
.order-newprice{
.order-newprice {
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price{
.order-price {
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
}
.order-bar{
.order-bar {
width: 100%;
position: fixed;
bottom: 0;
z-index: 2;
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
margin-top: 30%;
}
.order-course{
}
.order-course {
margin-left: 20px;
.order-course-text{
.order-course-text {
font-size: $font_16;
color: $color_333;
}
}
.order-bar-text{
}
.order-bar-text {
flex: 1;
font-weight: 500;
text-align: right;
color: #323233;
padding-right: 12px;
.order-amount{
padding-right: 20px;
.order-amount {
font-size: $font_14;
color: $color_333;
.order-amount-price{
.order-amount-price {
color: $redprice;
}
}
.order-preprice{
.order-preprice {
font-size: $font_12;
color: $color_555;
}
}
.order-button{
}
.order-button {
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
color: $white;
......@@ -138,35 +169,28 @@
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
border: 1px solid transparent;
}
.order-button-text{
}
.order-item{
.am-list-item{
padding-left: 15px;
}
}
.v-list-item {
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content{
.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;
font-size: $font_12;
.order-money{
.order-money {
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
......@@ -174,15 +198,37 @@
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;
}
.order-balance{
margin-top: 8px;
.am-list-content{
}
.order-list {
.am-list-item {
padding-left: 0 !important;
}
}
.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
src/router/router-config.js
......@@ -6,6 +6,7 @@ import Classify from '@/components/classify';
import My from '@/components/my';
import CourseList from '@/components/classify/courselist';
import Order from '@/components/order/index';
import Orderinfo from '@/components/order/orderinfo';
import Preferential from '@/components/preferential/index';
import Search from '@/components/search/index'
import SearchResult from '@/components/search/search-result'
......@@ -59,6 +60,10 @@ export default [
component: Order
},
{
path: '/orderinfo',
component: Orderinfo
},
{
path: '/detail',
component: Detail
},
......
src/store/index.js
import { combineReducers } from 'redux';
import myCourses from '@/components/study/myCourses/reducers'
import courseInfo from '@/components/detail/reducers'
import user from './userReducer'
const reducer = combineReducers({
myCourses,
courseInfo,
user
});
......
src/utils/index.js
......@@ -62,3 +62,10 @@ function initCaptcha(cb) {
}
export const is_weixin = () => {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
}
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