Skip to content

M
mr-julyedu
Commit 2f49609e by xuzhenghua
Options

detail

parent 93d8d984
Showing with 108 additions and 58 deletions
src/common/HeaderSearch/index.js
......@@ -4,12 +4,18 @@ import './index.scss'
class HeaderBar extends Component {
toSearch() {
window.location.href ='/search'
window.location.href = '/search'
}
return() {
window.location.href ='/'
window.location.href = '/'
}
goShop = () => {
location.replace('/shopcart');
}
render() {
return (
<div className='preferential'>
......@@ -21,7 +27,7 @@ class HeaderBar extends Component {
onFocus={this.toSearch.bind(this)}
showCancelButton={false}
/>
<i className={'iconfont icongouwuche-xianxing shopping-cart'}></i>
<i className={'iconfont icongouwuche-xianxing shopping-cart'} onClick={this.goShop}></i>
</div>
</div>
)
......
src/components/Index/index.js
import React, {Component} from 'react'
import {Course} from '../../common'
import {Course, CallApp} from '../../common'
import './index.scss'
import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper'
......@@ -9,8 +9,7 @@ import {http, api} from '@/utils'
import LiveRoom from './liveRoom'
import {Link} from "react-router-dom"
import {Toast} from 'antd-mobile'
import {CallApp} from '../../common'
import {connect} from "react-redux";
const animateTypes = Swiper.animateTypes
......@@ -19,9 +18,9 @@ class Index extends Component {
constructor(props) {
super(props)
this.state = {
banner: [],
lives: [],
modules: [],
banner: [], // 首页banner
lives: [], //近期直播
modules: [], //首页课程模块儿
isShow: false,
islive: false,
roomMess: '',
......@@ -56,7 +55,11 @@ class Index extends Component {
}
componentDidMount() {
this.getIndexData()
}
// 首页课程
getIndexData = () => {
http.get(`${api.home}/m/home`).then((res) => {
if (res.data.code === 200) {
this.setState({
......@@ -74,6 +77,11 @@ class Index extends Component {
// 点击近期直播课程弹出预约提示框
liveCourse = (item) => {
const {user} = this.props
const uid = user && user.data && user.data.uid
if (!uid) {
this.props.history.push('/passport/login')
} else {
if (item.live_status === 0) {
this.setState({
isShow: true,
......@@ -83,15 +91,16 @@ class Index extends Component {
} else {
window.location.href = `http://www-test.julyedu.com/live/m_room/${item.room_id}`
}
}
}
// 自组件传给父组件的isshow
colseBox = (val) => {
this.setState({isShow: val})
}
// 点击头部搜索跳转到搜索页面
toSearch() {
window.location.href = '/search'
this.props.history.push('/search')
}
render() {
......@@ -131,10 +140,16 @@ class Index extends Component {
</div>
<p className="borderTop"></p>
{
this.state.lives && this.state.lives.length > 0 &&
<div className='lives'>
<h2 className="title">近期直播</h2>
<ScrollBox livesList={this.state.lives} liveCourse={this.liveCourse}/>
</div>
}
{
this.state.modules && this.state.modules.length > 0 && this.state.modules.map((item, index) => {
......@@ -183,6 +198,8 @@ function TopSwiper({bannerList}) {
)
}
// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
function CourseList({modules}) {
let isOdd = modules.list.length % 2 === 0
let filterList = isOdd ? modules.list : modules.list.slice(1)
......@@ -198,7 +215,7 @@ function CourseList({modules}) {
<a className="more" href={modules.more_page}>更多 ></a>
}
<LazyLoad offset={50}>
<ul className='course-detail'>
<ul className='index-course-detail'>
{
!isOdd &&
<div className="category-vip">
......@@ -231,7 +248,8 @@ function CourseList({modules}) {
)
return (
<Course key={index} top={top} data={item} bottom={bottom} img={item.course_img_small}
title={item.course_title} id={item.course_id}></Course>
title={item.course_title} id={item.course_id}
className='text-overflow-2'></Course>
)
})
}
......@@ -241,6 +259,7 @@ function CourseList({modules}) {
)
}
//近期直播
function ScrollBox(props) {
return (
<div className='scroll-box'>
......@@ -282,4 +301,8 @@ function ScrollBox(props) {
)
}
export default WithTab(Index)
export default connect(
state => ({user: state.user}),
null
)(WithTab(Index))
src/components/Index/index.scss
......@@ -19,6 +19,7 @@
margin-left: 10px;
width: 88px;
height: 22px;
line-height: 22px;
border: 1px solid $bg_active;
border-radius: 11px;
background-color: $bg_fff;
......@@ -281,7 +282,7 @@
}
}
.course-detail {
.index-course-detail {
width: 100%;
display: flex;
justify-content: space-between;
......
src/components/Index/liveRoom.js
import React, {Component} from 'react';
import './index.scss';
import React, {Component} from 'react'
import './index.scss'
import {http, api, browser, validateTel} from '@/utils'
import {Toast} from 'antd-mobile'
......@@ -286,7 +286,7 @@ class LiveRoom extends Component {
}
export default LiveRoom;
export default LiveRoom
src/components/classify/courselist.js
import React, {Component} from 'react';
import {VList} from '../../common';
import {Tabs, WhiteSpace} from 'antd-mobile';
import './courselist.scss';
import React, {Component} from 'react'
import {VList} from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile'
import './courselist.scss'
import HeaderSearch from '../../common/HeaderSearch/index'
import {http, api, getParam} from "@/utils";
import {http, api, getParam} from "@/utils"
import {Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
import Loading from '@/common/Loading'
class Classify extends Component {
......@@ -17,7 +18,8 @@ class Classify extends Component {
arr: [{basics: []}, {advanced: []}],
allClass: [],
data: [],
activeTab: decodeURIComponent(getParam('name'))
activeTab: decodeURIComponent(getParam('name')),
isLoading: true
}
}
......@@ -30,7 +32,7 @@ class Classify extends Component {
// 获取tabs接口
getTabs = () => {
let data = 0
http.get(`${api.home}/m/course/classify/${data}`,)
http.get(`${api.home}/m/course/classify/${data}`)
.then((res) => {
const _this = this
if (res.data.code === 200) {
......@@ -61,11 +63,12 @@ class Classify extends Component {
// 获取课程接口
getList = () => {
http.get(`${api.home}/m/course/list/${getParam('id')}`,).then((res) => {
http.get(`${api.home}/m/course/list/${getParam('id')}`).then((res) => {
if (res.data.code === 200) {
this.setState(status => ({
this.setState({
data: res.data.data,
}));
isLoading: false
})
}
})
}
......@@ -112,6 +115,7 @@ class Classify extends Component {
return (
<div className='class-child'>
<HeaderSearch></HeaderSearch>
<Loading isLoading={this.state.isLoading}>
<div className='class-content'>
<WhiteSpace/>
<div onClick={this.pulldown.bind(this)}>
......@@ -178,7 +182,7 @@ class Classify extends Component {
</div>
}
</div>
</Loading>
</div>
)
}
......
src/components/classify/index.js
......@@ -4,7 +4,8 @@ import './index.scss';
import {http, api} from "@/utils";
import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile'
import { HeaderBar } from "@/common"
import {HeaderBar} from "@/common"
import Loading from '@/common/Loading'
class Classify extends Component {
......@@ -15,15 +16,19 @@ class Classify extends Component {
employment: [],
basics: [],
advanced: [],
special: []
special: [],
isLoading: true
}
}
componentDidMount() {
let data = 1
http.get(`${api.home}/m/course/classify/${data}`,).then((res) => {
if (res.data.code === 200) {
this.setState({
isLoading: false
})
if (res.data.data.common.length > 0) {
this.setState({
basics: res.data.data.common[0],
......@@ -48,6 +53,7 @@ class Classify extends Component {
return (
<div className='class-box'>
<HeaderBar title='分类' arrow={false} cart={false}></HeaderBar>
<Loading isLoading={this.state.isLoading}>
<ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/>
<ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/>
<ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/>
......@@ -60,14 +66,15 @@ class Classify extends Component {
</Link>
)
})
}
</div>
</Loading>
</div>
)
}
}
// 课程图片形式展示 点击图片直接跳转课程详情页面
function ClassCourseA({data}) {
return (
<div className='items-box'>
......@@ -83,6 +90,7 @@ function ClassCourseA({data}) {
)
}
// 课程标签的形式展示 点击标签跳转分类详情页面
function ClassCourseB(props) {
return (
<div className='items-box'>
......
src/components/myOrders/index.js
......@@ -5,15 +5,17 @@ import OrderList from '@/common/OrderList'
import {http, api} from "@/utils"
import {Link} from 'react-router-dom'
import {Modal, Toast} from 'antd-mobile'
import Loading from '@/common/Loading'
const alert = Modal.alert;
const alert = Modal.alert
class MyOrders extends Component {
constructor(props) {
super(props)
this.state = {
data: []
data: [],
isLoading: true
}
}
......@@ -26,7 +28,8 @@ class MyOrders extends Component {
http.get(`${api.home}/m/my/orders/1/1`,).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data
data: res.data.data,
isLoading: false
})
} else {
Toast.info(res.data.msg, 2);
......@@ -62,6 +65,7 @@ class MyOrders extends Component {
return (
<div className='myorders-box'>
<HeaderBar title='我的订单' arrow={true} cart={false}></HeaderBar>
<Loading isLoading={this.state.isLoading}>
{
this.state.data && this.state.data.length > 0 ?
this.state.data.map((item, index) => {
......@@ -100,7 +104,7 @@ class MyOrders extends Component {
<Link to='/classify'>去逛逛</Link>
</div>
}
</Loading>
</div>
)
}
......
src/components/preferential/index.js
import React, {Component} from 'react'
import {VList} from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile'
import {Tabs, WhiteSpace, Toast} from 'antd-mobile'
import './index.scss'
import HeaderSearch from '../../common/HeaderSearch/index'
import {http, api} from "@/utils"
import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile'
import Loading from '@/common/Loading'
class Preferential extends Component {
constructor(props) {
......@@ -13,6 +13,7 @@ class Preferential extends Component {
this.state = {
dataList: [],
courseStatus: 0,
isLoading: true
}
}
......@@ -25,7 +26,8 @@ class Preferential extends Component {
http.get(`${api.home}/m/home/weekDiscounts`).then((res) => {
if (res.data.code === 200) {
this.setState({
dataList: res.data.data
dataList: res.data.data,
isLoading: false
})
} else {
Toast.info(res.data.msg, 2)
......@@ -59,7 +61,6 @@ class Preferential extends Component {
}
// tab 切换
ontabclick = (tab, index) => {
console.log(tab, index)
this.state.courseStatus = index
switch (index) {
case 0:
......@@ -73,9 +74,6 @@ class Preferential extends Component {
}
}
handleClick = (courseId) => {
console.log(courseId)
}
render() {
const tabs = [
......@@ -86,6 +84,7 @@ class Preferential extends Component {
return (
<div className='preferential'>
<HeaderSearch></HeaderSearch>
<Loading isLoading={this.state.isLoading}>
<div className='class-content'>
<WhiteSpace/>
......@@ -132,16 +131,18 @@ class Preferential extends Component {
</div>
)
return (
<VList handleClick={this.handleClick} key={index} img={item.image_name}
<VList key={index} img={item.image_name}
id={item.course_id} status={status}
info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
</Loading>
</div>
)
}
......
src/components/purchased/index.js
import React, {Component} from 'react';
import './index.scss';
import {HeaderBar} from '../../common'
import {VList} from '../../common'
import {HeaderBar, VList} from '../../common'
import {http, api} from "@/utils";
import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile'
import {connect} from "react-redux"
import Loading from '@/common/Loading'
class Purchased extends Component {
constructor(props) {
super(props)
this.state = {
data: []
data: [],
isLoading: true
}
}
......@@ -24,7 +25,8 @@ class Purchased extends Component {
http.get(`${api.home}/m/my/courses`,).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data
data: res.data.data,
isLoading: false
})
} else {
Toast.info(res.data.msg, 2);
......@@ -39,6 +41,7 @@ class Purchased extends Component {
return (
<div className='purchased-box'>
<HeaderBar title='已购课程' arrow={true} cart={false}></HeaderBar>
<Loading isLoading={this.state.isLoading}>
{
this.state.data && this.state.data.length > 0 ?
<div className="purchased-body">
......@@ -71,6 +74,7 @@ class Purchased extends Component {
<Link to='/classify'>去逛逛</Link>
</div>
}
</Loading>
</div>
)
......
src/components/shopCart/cartList.js
import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import CartItem from './cartItem'
class cartList extends Component {
render() {
return (
......
src/components/shopCart/index.js
......@@ -2,11 +2,8 @@ import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Checkbox, Modal, Toast} from 'antd-mobile'
import {HeaderBar} from '../../common'
//组件
import Loading from '@/common/Loading'
import ShopCart from './cartList.js'
//css
import './card.scss'
import classnames from 'classnames'
import {api, http} from "@/utils";
......@@ -21,7 +18,8 @@ class Cart extends Component {
checkedNum: 0,
allPrice: 0,
cartNmu: 0,
courseIdarr: [] // 选中的课程id
courseIdarr: [], // 选中的课程id
isLoading: true
}
}
......@@ -31,11 +29,13 @@ class Cart extends Component {
this.getList()
}
// 获取课程列表
getList = () => {
http.get(`${api.home}/m/cart/list`).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data.courses
data: res.data.data.courses,
isLoading: false
})
} else {
Toast.info(res.data.msg, 2);
......@@ -146,7 +146,6 @@ class Cart extends Component {
{
text: '确认',
onPress: () => {
console.log(this.state.courseIdarr)
let data = {
course_ids: this.state.courseIdarr
}
......@@ -170,6 +169,7 @@ class Cart extends Component {
<div className="cart-page" style={{overflow: 'hidden'}}>
<HeaderBar title='购物车' arrow={true} cart={false} delete={true} toDelete={this.todelete}></HeaderBar>
<Loading isLoading={this.state.isLoading}>
<div className="cart-body">
<ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
......@@ -198,6 +198,7 @@ class Cart extends Component {
</div>
</div>
</Loading>
</div>
......
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