Skip to content

M
mr-julyedu
Commit a981fa38 by xuzhenghua
Options

detail

parent 39f37417
Showing with 379 additions and 291 deletions
src/assets/css/variable.scss
......@@ -71,6 +71,7 @@ $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/detail/index.js
......@@ -102,15 +102,15 @@ class Detail extends Component {
{
courseInfo.is_baoming === 1 &&
<div className='group'>
上课QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.course_qq}
上课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>
}
......@@ -133,10 +133,13 @@ class Detail extends Component {
{/*单集购买*/}
<Single singleBox={this.state.singleBox} boxHide={this.boxHide} data={this.state.singMess}
title={courseInfo.course_title}/>
title={courseInfo.course_title}/>
{/*分享赚钱*/}
<ShareRank shareRank={this.state.shareRank} openRanking={this.openRanking} boxHide={this.boxHide}/>
{
courseInfo.is_dist &&
<ShareRank shareRank={this.state.shareRank} openRanking={this.openRanking} boxHide={this.boxHide}/>
}
{/*砍价*/}
<Bargain/>
......
src/components/detail/index.scss
......@@ -113,7 +113,7 @@
}
.group, .vip {
margin: 0 12px;
margin: 10px 12px 0 12px;
padding: 10px 12px;
text-align: center;
color: $white;
......@@ -129,53 +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;
}
}
}
\ No newline at end of file
src/components/detail/outline/index.js
import React, {Component} from 'react'
import {Tabs, WhiteSpace} from 'antd-mobile'
import './index.scss'
import {api, getParam, http} from "@/utils";
class OutLine extends Component {
constructor(props) {
super(props)
this.state = {
stageInfo: []
}
}
htmlDecode = (content) => {
......@@ -14,15 +18,24 @@ class OutLine extends Component {
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
componentDidMount() {
http.get(`${api.home}/m/course/syllabuses/${getParam('id')}`).then((res) => {
if (res.data.code === 200) {
this.setState({
stageInfo: res.data.data
})
}
})
}
render() {
const tabs = [
{title: '介绍'},
{title: '大纲'}
];
let stageInfo = ''
let introduce = ''
if (this.props.data.stage_info && this.props.data.course_info) {
stageInfo = this.props.data.stage_info
if (this.props.data.course_info) {
introduce = this.props.data.course_info
}
return (
......@@ -34,12 +47,12 @@ class OutLine extends Component {
<p>讲师：{introduce.teachers}</p>
<p>课时：{introduce.course_hour}</p>
<p>时间：{introduce.start_time}</p>
<div className='dec' dangerouslySetInnerHTML={{__html:this.htmlDecode(introduce.intro)}}></div>
<div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div>
</div>
{/*大纲*/}
<div className='outline'>
{
stageInfo && stageInfo.length > 0 && stageInfo.map((item, index) => {
this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => {
return (
<div className='stagebox' key={index}>
<h1 className='stage text-overflow-1'>{item.stage_name}</h1>
......@@ -49,37 +62,45 @@ class OutLine extends Component {
<ul key={index}>
<h2 className='classhour'>
<span className='title text-overflow-1'>{item.name}</span>
{/*
class_status
0-未购买未开单集购买
1-未购买已开单集购买
2-已购买直播结束已上传视频
3-已购买未开课、已购买直播结束
4-已购买直播中
5-课程不能试听
6-可试听且有试听权限
7-可试听但无试听权限
*/}
{ // 试听
item.is_video === 1 &&
item.class_status === 7 &&
<span className='btn-right-10 audition'
onClick={this.props.toAudition}>试听
<i className='iconfont iconcelluar'></i>
</span>
}
{ // 未购买未开单集购买：上锁标志，点击提示购买
item.is_class === 0 && item.video_auth === 0 && item.is_video === 0 &&
item.class_status === 0 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i>
}
{ // 未购买已开单集购买：显示单集价格，点击购买单集
item.is_class === 1 && item.video_auth === 0 &&
item.class_status === 1 &&
<span className='btn-right-10 singleset'
onClick={e=>this.props.toSingleset(item)} >¥ {item.class_price}</span>
onClick={e => this.props.toSingleset(item)}>¥ {item.class_price}</span>
}
{
// 已购买直播中：正在直播，点击进入直播间
item.class_status === 4 &&
item.video_auth === 1 && item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i
className='iconfont icondanseshixintubiao-23'></i></span>
}
{
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程
item.video_auth === 1 && item.is_video === 5 &&
item.class_status === 2 &&
<i className='iconfont icondanseshixintubiao-23 icon-right-22'></i>
}
{
// 已购买未开课、已购买直播结束：空
}
</h2>
{
item.point.map((item, index) => {
......
src/components/detail/shareRank/index.js
......@@ -5,12 +5,21 @@ 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) => {
//
// })
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)
})
}
})
}
// 关闭弹窗
......@@ -23,12 +32,17 @@ class ShareRank extends Component {
<div className='share-ranking'>
<span className="title">排行榜：</span>
<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>
{
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>
......@@ -43,12 +57,21 @@ class ShareRank extends Component {
<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>
{
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>
......
src/components/detail/shareRank/index.scss
......@@ -20,7 +20,7 @@
.ranking-mess {
float: left;
margin-right: 20px;
margin-right: 15px;
img {
width: 22px;
......@@ -129,6 +129,22 @@
}
}
}
.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 {
......
src/components/my/index.scss
.my-tab{
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.my-list{
.avatar-wrap{
padding: 15px 20px;
.flex-container {
.my-tab {
width: 100%;
height: 44px;
font-size: $font_16;
background: $bg_f7f9fc;
}
.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-item{
padding-left: 22px;
padding-right: 8px;
}
.am-list-item .am-list-line-multiple{
padding-right: 0px !important;
}
.am-list-thumb{
img{
width: 64px;
height: 64px;
.am-list-thumb {
img {
width: 64px;
height: 64px;
}
}
}
.am-list-brief{
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-brief {
color: $color_333 !important;
}
}
.am-list-line-multiple::after{
background-color: transparent !important;
}
.my-list{
.am-list-body::after{
.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 {
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;
height: 0 !important;
}
}
.am-list-content i{
margin: 0;
margin-top: -4px;
margin-right: 10px;
}
.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 = (
......@@ -50,7 +51,7 @@ function OrderList(props) {
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
......@@ -75,7 +76,7 @@ class Order extends Component {
constructor(props) {
super(props);
this.state = {
perfect: true
}
}
handleClick = () => {
......@@ -94,22 +95,28 @@ class Order extends Component {
>
课程报名
</NavBar>
<div 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">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
{
!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>
</Link>
}
{
this.state.perfect &&
<div className="order-information2">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</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,14 +147,14 @@ 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>
</Flex.Item>
</Flex>
</div>
)
}
......
src/components/order/order.scss
.order-wrapper{
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
}
.order-tab{
.order-wrapper {
width: 100%;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
.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,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: 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{
margin-bottom: 10px;
.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;
margin-bottom: 0px;
}
.order-list{
line-height: 22px;
}
.order-next {
line-height: 22px;
margin-bottom: 0px;
}
.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{
height: 16px;
line-height: 16px;
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-title {
height: 16px;
line-height: 16px;
color: $color_333;
font-size: $font_16;
}
.order-price{
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
.order-content {
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
}
.order-bar{
.order-des {
margin-top: 10px;
}
.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;
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{
font-size: $font_16;
color: $color_333;
.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{
font-size: $font_14;
color: $color_333;
.order-amount-price{
color: $redprice;
}
}
.order-preprice{
font-size: $font_12;
color: $color_555;
}
}
.order-button{
padding-right: 20px;
.order-amount {
font-size: $font_14;
color: $color_333;
.order-amount-price {
color: $redprice;
}
}
.order-preprice {
font-size: $font_12;
color: $color_555;
}
}
.order-button {
width: 110px;
height: 50px;
display: inline-block;
position: relative;
padding: 0;
background-color: $bg_ff9898;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
......@@ -138,51 +169,66 @@
-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{
border-bottom: none;
}
}
.order-prefer{
.am-list{
border-top: 1px solid #e7eaf1;
.content {
border-bottom: none;
}
.order-prefer-text{
}
.order-prefer {
.am-list-line {
padding: 0 15px;
}
}
.order-balanceprice{
}
.order-balanceprice {
color: $color_666;
font-size: $font_12;
.order-money{
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
.order-money {
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
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{
color: $color_333;
font-size: $font_16;
}
.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
},
......
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