Skip to content

M
mr-julyedu
Commit 2f49609e by xuzhenghua
Options

detail

parent 93d8d984
Showing with 341 additions and 291 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,24 +77,30 @@ class Index extends Component {
// 点击近期直播课程弹出预约提示框
liveCourse = (item) => {
if (item.live_status === 0) {
this.setState({
isShow: true,
islive: true,
roomMess: item
})
const {user} = this.props
const uid = user && user.data && user.data.uid
if (!uid) {
this.props.history.push('/passport/login')
} else {
window.location.href = `http://www-test.julyedu.com/live/m_room/${item.room_id}`
if (item.live_status === 0) {
this.setState({
isShow: true,
islive: true,
roomMess: item
})
} 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>
<div className='lives'>
<h2 className="title">近期直播</h2>
<ScrollBox livesList={this.state.lives} liveCourse={this.liveCourse}/>
</div>
{
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/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,26 +53,28 @@ class Classify extends Component {
return (
<div className='class-box'>
<HeaderBar title='分类' arrow={false} cart={false}></HeaderBar>
<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}/>
<ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2}/>
<div className="vip">
{this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
return (
<Link key={index} to={`/detail?id=${item.course_id}`}>
<img src={item.course_img} alt=""/>
</Link>
)
})
}
</div>
<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}/>
<ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2}/>
<div className="vip">
{this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
return (
<Link key={index} to={`/detail?id=${item.course_id}`}>
<img src={item.course_img} alt=""/>
</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,45 +65,46 @@ class MyOrders extends Component {
return (
<div className='myorders-box'>
<HeaderBar title='我的订单' arrow={true} cart={false}></HeaderBar>
{
this.state.data && this.state.data.length > 0 ?
this.state.data.map((item, index) => {
return (
<div className="order-body" key={index}>
<OrderInfo item={item}/>
{
item.course && item.course.length > 0 && item.course.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title text-overflow-one'>
<Link
to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
</p>
<p className='order-content text-overflow-2'>{item.description}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.pay_amount}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
return (
<div className="order-wrap" key={index}>
<OrderList info={Info} src={item.image_name}
id={item.course_id}></OrderList>
</div>
)
})
}
<PayInfo item={item} cancel={this.cancel}/>
</div>
)
}) : <div className="cart-tip">
<p className='cart-mess'>您还没有订单哦，快去逛逛吧~</p>
<Link to='/classify'>去逛逛</Link>
</div>
}
<Loading isLoading={this.state.isLoading}>
{
this.state.data && this.state.data.length > 0 ?
this.state.data.map((item, index) => {
return (
<div className="order-body" key={index}>
<OrderInfo item={item}/>
{
item.course && item.course.length > 0 && item.course.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title text-overflow-one'>
<Link
to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
</p>
<p className='order-content text-overflow-2'>{item.description}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.pay_amount}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
return (
<div className="order-wrap" key={index}>
<OrderList info={Info} src={item.image_name}
id={item.course_id}></OrderList>
</div>
)
})
}
<PayInfo item={item} cancel={this.cancel}/>
</div>
)
}) : <div className="cart-tip">
<p className='cart-mess'>您还没有订单哦，快去逛逛吧~</p>
<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,62 +84,65 @@ class Preferential extends Component {
return (
<div className='preferential'>
<HeaderSearch></HeaderSearch>
<div className='class-content'>
<WhiteSpace/>
<Loading isLoading={this.state.isLoading}>
<div className='class-content'>
<WhiteSpace/>
<Tabs
tabs={tabs}
animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
<ul>
{this.state.dataList.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
{item.course_title}
</Link>
</p>
<p className='contact text-overflow-2'>{item.course_desc}</p>
<div className='des'>
{!item.is_buy &&
<p className="course-price">
{this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
}
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
<Tabs
tabs={tabs}
animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
<ul>
{this.state.dataList.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
{item.course_title}
</Link>
</p>
<p className='contact text-overflow-2'>{item.course_desc}</p>
<div className='des'>
{!item.is_buy &&
<p className="course-price">
{this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
}
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p>
}
{item.is_buy &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
)
const status = (
<div>
{this.state.courseStatus === 1 &&
<p className='course-status'>砍价减{item.price1}元</p>
}
{item.is_buy &&
<a href="/#" className="isbuy">已购买</a>
{this.state.courseStatus === 2 &&
<p className='course-status'>拼团减{item.price}元</p>
}
</div>
</div>
)
const status = (
<div>
{this.state.courseStatus === 1 &&
<p className='course-status'>砍价减{item.price1}元</p>
}
{this.state.courseStatus === 2 &&
<p className='course-status'>拼团减{item.price}元</p>
}
</div>
)
return (
<VList handleClick={this.handleClick} key={index} img={item.image_name}
id={item.course_id} status={status}
info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
)
return (
<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,38 +41,40 @@ class Purchased extends Component {
return (
<div className='purchased-box'>
<HeaderBar title='已购课程' arrow={true} cart={false}></HeaderBar>
{
this.state.data && this.state.data.length > 0 ?
<div className="purchased-body">
<div className='tip'>加群请备注您的学号：{uid}</div>
{
this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
{item.course_title}
</Link>
</p>
<p className='contact text-overflow-2'>{item.simpledescription}</p>
<div className='des'>
QQ群：{item.course_qq}
<Loading isLoading={this.state.isLoading}>
{
this.state.data && this.state.data.length > 0 ?
<div className="purchased-body">
<div className='tip'>加群请备注您的学号：{uid}</div>
{
this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
{item.course_title}
</Link>
</p>
<p className='contact text-overflow-2'>{item.simpledescription}</p>
<div className='des'>
QQ群：{item.course_qq}
</div>
</div>
</div>
)
return (
<VList key={index} img={item.image_name}
id={item.course_id}
info={Info}></VList>
)
})
}
</div>
: <div className="cart-tip">
<p className='cart-mess'>您还没有课程哦，快去逛逛吧~</p>
<Link to='/classify'>去逛逛</Link>
</div>
}
)
return (
<VList key={index} img={item.image_name}
id={item.course_id}
info={Info}></VList>
)
})
}
</div>
: <div className="cart-tip">
<p className='cart-mess'>您还没有课程哦，快去逛逛吧~</p>
<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,34 +169,36 @@ class Cart extends Component {
<div className="cart-page" style={{overflow: 'hidden'}}>
<HeaderBar title='购物车' arrow={true} cart={false} delete={true} toDelete={this.todelete}></HeaderBar>
<div className="cart-body">
<ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
<div className="cart-footer">
<div className="cart-label">
<Checkbox onChange={(e) => {
this.allChange(e)
}}/>
<div>全选</div>
</div>
<div className="all-pirce">
<p>
<span>合计：</span>
<span>￥{this.state.allPrice}</span>
</p>
<Loading isLoading={this.state.isLoading}>
<div className="cart-body">
<ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
<div className="cart-footer">
<div className="cart-label">
<Checkbox onChange={(e) => {
this.allChange(e)
}}/>
<div>全选</div>
</div>
<div className="all-pirce">
<p>
<span>合计：</span>
<span>￥{this.state.allPrice}</span>
</p>
</div>
<div className={classnames({
'active': this.state.checkedNum > 0
})} onClick={() => {
if (this.state.checkedNum > 0) {
this.tobuy()
}
}}>
结算<span> ( {this.state.checkedNum} ) </span>
</div>
</div>
<div className={classnames({
'active': this.state.checkedNum > 0
})} onClick={() => {
if (this.state.checkedNum > 0) {
this.tobuy()
}
}}>
结算<span> ( {this.state.checkedNum} ) </span>
</div>
</div>
</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