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' ...@@ -4,12 +4,18 @@ import './index.scss'
class HeaderBar extends Component { class HeaderBar extends Component {
toSearch() { toSearch() {
window.location.href ='/search' window.location.href = '/search'
} }
return() { return() {
window.location.href ='/' window.location.href = '/'
}
goShop = () => {
location.replace('/shopcart');
} }
render() { render() {
return ( return (
<div className='preferential'> <div className='preferential'>
...@@ -21,7 +27,7 @@ class HeaderBar extends Component { ...@@ -21,7 +27,7 @@ class HeaderBar extends Component {
onFocus={this.toSearch.bind(this)} onFocus={this.toSearch.bind(this)}
showCancelButton={false} showCancelButton={false}
/> />
<i className={'iconfont icongouwuche-xianxing shopping-cart'}></i> <i className={'iconfont icongouwuche-xianxing shopping-cart'} onClick={this.goShop}></i>
</div> </div>
</div> </div>
) )
......
src/components/Index/index.js
import React, {Component} from 'react' import React, {Component} from 'react'
import {Course} from '../../common' import {Course, CallApp} from '../../common'
import './index.scss' import './index.scss'
import {WithTab} from '@/HOCs' import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper' import Swiper from 'react-mobile-swiper'
...@@ -9,8 +9,7 @@ import {http, api} from '@/utils' ...@@ -9,8 +9,7 @@ import {http, api} from '@/utils'
import LiveRoom from './liveRoom' import LiveRoom from './liveRoom'
import {Link} from "react-router-dom" import {Link} from "react-router-dom"
import {Toast} from 'antd-mobile' import {Toast} from 'antd-mobile'
import {CallApp} from '../../common' import {connect} from "react-redux";
const animateTypes = Swiper.animateTypes const animateTypes = Swiper.animateTypes
...@@ -19,9 +18,9 @@ class Index extends Component { ...@@ -19,9 +18,9 @@ class Index extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
banner: [], banner: [], // 首页banner
lives: [], lives: [], //近期直播
modules: [], modules: [], //首页课程模块儿
isShow: false, isShow: false,
islive: false, islive: false,
roomMess: '', roomMess: '',
...@@ -56,7 +55,11 @@ class Index extends Component { ...@@ -56,7 +55,11 @@ class Index extends Component {
} }
componentDidMount() { componentDidMount() {
// 首页课程 this.getIndexData()
}
// 首页课程
getIndexData = () => {
http.get(`${api.home}/m/home`).then((res) => { http.get(`${api.home}/m/home`).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
...@@ -74,24 +77,30 @@ class Index extends Component { ...@@ -74,24 +77,30 @@ class Index extends Component {
// 点击近期直播课程弹出预约提示框 // 点击近期直播课程弹出预约提示框
liveCourse = (item) => { liveCourse = (item) => {
if (item.live_status === 0) { const {user} = this.props
this.setState({ const uid = user && user.data && user.data.uid
isShow: true, if (!uid) {
islive: true, this.props.history.push('/passport/login')
roomMess: item
})
} else { } 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 // 自组件传给父组件的isshow
colseBox = (val) => { colseBox = (val) => {
this.setState({isShow: val}) this.setState({isShow: val})
} }
// 点击头部搜索跳转到搜索页面
toSearch() { toSearch() {
window.location.href = '/search' this.props.history.push('/search')
} }
render() { render() {
...@@ -131,10 +140,16 @@ class Index extends Component { ...@@ -131,10 +140,16 @@ class Index extends Component {
</div> </div>
<p className="borderTop"></p> <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) => { this.state.modules && this.state.modules.length > 0 && this.state.modules.map((item, index) => {
...@@ -183,6 +198,8 @@ function TopSwiper({bannerList}) { ...@@ -183,6 +198,8 @@ function TopSwiper({bannerList}) {
) )
} }
// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
function CourseList({modules}) { function CourseList({modules}) {
let isOdd = modules.list.length % 2 === 0 let isOdd = modules.list.length % 2 === 0
let filterList = isOdd ? modules.list : modules.list.slice(1) let filterList = isOdd ? modules.list : modules.list.slice(1)
...@@ -198,7 +215,7 @@ function CourseList({modules}) { ...@@ -198,7 +215,7 @@ function CourseList({modules}) {
<a className="more" href={modules.more_page}>更多 ></a> <a className="more" href={modules.more_page}>更多 ></a>
} }
<LazyLoad offset={50}> <LazyLoad offset={50}>
<ul className='course-detail'> <ul className='index-course-detail'>
{ {
!isOdd && !isOdd &&
<div className="category-vip"> <div className="category-vip">
...@@ -231,7 +248,8 @@ function CourseList({modules}) { ...@@ -231,7 +248,8 @@ function CourseList({modules}) {
) )
return ( return (
<Course key={index} top={top} data={item} bottom={bottom} img={item.course_img_small} <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}) { ...@@ -241,6 +259,7 @@ function CourseList({modules}) {
) )
} }
//近期直播
function ScrollBox(props) { function ScrollBox(props) {
return ( return (
<div className='scroll-box'> <div className='scroll-box'>
...@@ -282,4 +301,8 @@ function ScrollBox(props) { ...@@ -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 @@ ...@@ -19,6 +19,7 @@
margin-left: 10px; margin-left: 10px;
width: 88px; width: 88px;
height: 22px; height: 22px;
line-height: 22px;
border: 1px solid $bg_active; border: 1px solid $bg_active;
border-radius: 11px; border-radius: 11px;
background-color: $bg_fff; background-color: $bg_fff;
...@@ -281,7 +282,7 @@ ...@@ -281,7 +282,7 @@
} }
} }
.course-detail { .index-course-detail {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
src/components/Index/liveRoom.js
import React, {Component} from 'react'; import React, {Component} from 'react'
import './index.scss'; import './index.scss'
import {http, api, browser, validateTel} from '@/utils' import {http, api, browser, validateTel} from '@/utils'
import {Toast} from 'antd-mobile' import {Toast} from 'antd-mobile'
...@@ -286,7 +286,7 @@ class LiveRoom extends Component { ...@@ -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 React, {Component} from 'react'
import {VList} from '../../common'; import {VList} from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile'; import {Tabs, WhiteSpace} from 'antd-mobile'
import './courselist.scss'; import './courselist.scss'
import HeaderSearch from '../../common/HeaderSearch/index' import HeaderSearch from '../../common/HeaderSearch/index'
import {http, api, getParam} from "@/utils"; import {http, api, getParam} from "@/utils"
import {Toast} from 'antd-mobile' import {Toast} from 'antd-mobile'
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import Loading from '@/common/Loading'
class Classify extends Component { class Classify extends Component {
...@@ -17,7 +18,8 @@ class Classify extends Component { ...@@ -17,7 +18,8 @@ class Classify extends Component {
arr: [{basics: []}, {advanced: []}], arr: [{basics: []}, {advanced: []}],
allClass: [], allClass: [],
data: [], data: [],
activeTab: decodeURIComponent(getParam('name')) activeTab: decodeURIComponent(getParam('name')),
isLoading: true
} }
} }
...@@ -30,7 +32,7 @@ class Classify extends Component { ...@@ -30,7 +32,7 @@ class Classify extends Component {
// 获取tabs接口 // 获取tabs接口
getTabs = () => { getTabs = () => {
let data = 0 let data = 0
http.get(`${api.home}/m/course/classify/${data}`,) http.get(`${api.home}/m/course/classify/${data}`)
.then((res) => { .then((res) => {
const _this = this const _this = this
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -61,11 +63,12 @@ class Classify extends Component { ...@@ -61,11 +63,12 @@ class Classify extends Component {
// 获取课程接口 // 获取课程接口
getList = () => { 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) { if (res.data.code === 200) {
this.setState(status => ({ this.setState({
data: res.data.data, data: res.data.data,
})); isLoading: false
})
} }
}) })
} }
...@@ -112,73 +115,74 @@ class Classify extends Component { ...@@ -112,73 +115,74 @@ class Classify extends Component {
return ( return (
<div className='class-child'> <div className='class-child'>
<HeaderSearch></HeaderSearch> <HeaderSearch></HeaderSearch>
<div className='class-content'> <Loading isLoading={this.state.isLoading}>
<WhiteSpace/> <div className='class-content'>
<div onClick={this.pulldown.bind(this)}> <WhiteSpace/>
{this.state.ispull ? top : bottom} <div onClick={this.pulldown.bind(this)}>
</div> {this.state.ispull ? top : bottom}
<Tabs </div>
tabs={this.state.allClass} <Tabs
animated={false} tabs={this.state.allClass}
page={page} animated={false}
onChange={(tab) => this.ontabclick(tab)} page={page}
> onChange={(tab) => this.ontabclick(tab)}
<div className='tabs'> >
<ul> <div className='tabs'>
{this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => { <ul>
const Info = ( {this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => {
<div className="info"> const Info = (
<p className='title'> <div className="info">
<Link to={`/detail?id=${item.course_id}`}> <p className='title'>
{item.course_title} <Link to={`/detail?id=${item.course_id}`}>
</Link> {item.course_title}
</p> </Link>
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
{!item.is_buy && <p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p> </p>
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
{!item.is_buy && <p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.is_buy &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
)
const status = (
<div>
{item.bargain_num === 0 && item.groupon_num !== 0 &&
<p className='course-status'>拼团减{item.groupon_num}元</p>
} }
{item.is_buy && {item.bargain_num !== 0 && item.groupon_num === 0 &&
<a href="/#" className="isbuy">已购买</a> <p className='course-status'>砍价减{item.bargain_num}元</p>
} }
</div> </div>
</div> )
) return (
const status = ( <VList key={index} status={status}
<div> img={item.image_name} id={item.course_id}
{item.bargain_num === 0 && item.groupon_num !== 0 && info={Info}></VList>
<p className='course-status'>拼团减{item.groupon_num}元</p> )
} })}
{item.bargain_num !== 0 && item.groupon_num === 0 && </ul>
<p className='course-status'>砍价减{item.bargain_num}元</p> </div>
} </Tabs>
</div> <WhiteSpace/>
) </div>
return ( <div className='mbc-box' style={{display: this.state.display}}>
<VList key={index} status={status} {
img={item.image_name} id={item.course_id} this.state.arr.basics &&
info={Info}></VList> <div className="tabcontent">
) <ClassCourse activeTab={this.state.activeTab} data={this.state.arr.basics.list}
})} title={this.state.arr.basics.name} labelclick={this.labelclick}/>
</ul> <ClassCourse activeTab={this.state.activeTab} data={this.state.arr.advanced.list}
</div> title={this.state.arr.advanced.name} labelclick={this.labelclick}/>
</Tabs> </div>
<WhiteSpace/> }
</div> </div>
<div className='mbc-box' style={{display: this.state.display}}> </Loading>
{
this.state.arr.basics &&
<div className="tabcontent">
<ClassCourse activeTab={this.state.activeTab} data={this.state.arr.basics.list}
title={this.state.arr.basics.name} labelclick={this.labelclick}/>
<ClassCourse activeTab={this.state.activeTab} data={this.state.arr.advanced.list}
title={this.state.arr.advanced.name} labelclick={this.labelclick}/>
</div>
}
</div>
</div> </div>
) )
} }
......
src/components/classify/index.js
...@@ -4,7 +4,8 @@ import './index.scss'; ...@@ -4,7 +4,8 @@ import './index.scss';
import {http, api} from "@/utils"; import {http, api} from "@/utils";
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile' import {Toast} from 'antd-mobile'
import { HeaderBar } from "@/common" import {HeaderBar} from "@/common"
import Loading from '@/common/Loading'
class Classify extends Component { class Classify extends Component {
...@@ -15,15 +16,19 @@ class Classify extends Component { ...@@ -15,15 +16,19 @@ class Classify extends Component {
employment: [], employment: [],
basics: [], basics: [],
advanced: [], advanced: [],
special: [] special: [],
isLoading: true
} }
} }
componentDidMount() { componentDidMount() {
let data = 1 let data = 1
http.get(`${api.home}/m/course/classify/${data}`,).then((res) => { http.get(`${api.home}/m/course/classify/${data}`,).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({
isLoading: false
})
if (res.data.data.common.length > 0) { if (res.data.data.common.length > 0) {
this.setState({ this.setState({
basics: res.data.data.common[0], basics: res.data.data.common[0],
...@@ -48,26 +53,28 @@ class Classify extends Component { ...@@ -48,26 +53,28 @@ class Classify extends Component {
return ( return (
<div className='class-box'> <div className='class-box'>
<HeaderBar title='分类' arrow={false} cart={false}></HeaderBar> <HeaderBar title='分类' arrow={false} cart={false}></HeaderBar>
<ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/> <Loading isLoading={this.state.isLoading}>
<ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/> <ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/>
<ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/> <ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/>
<ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2}/> <ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/>
<div className="vip"> <ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2}/>
{this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => { <div className="vip">
return ( {this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
<Link key={index} to={`/detail?id=${item.course_id}`}> return (
<img src={item.course_img} alt=""/> <Link key={index} to={`/detail?id=${item.course_id}`}>
</Link> <img src={item.course_img} alt=""/>
) </Link>
}) )
})
} }
</div> </div>
</Loading>
</div> </div>
) )
} }
} }
// 课程图片形式展示 点击图片直接跳转课程详情页面
function ClassCourseA({data}) { function ClassCourseA({data}) {
return ( return (
<div className='items-box'> <div className='items-box'>
...@@ -83,6 +90,7 @@ function ClassCourseA({data}) { ...@@ -83,6 +90,7 @@ function ClassCourseA({data}) {
) )
} }
// 课程标签的形式展示 点击标签跳转分类详情页面
function ClassCourseB(props) { function ClassCourseB(props) {
return ( return (
<div className='items-box'> <div className='items-box'>
......
src/components/myOrders/index.js
...@@ -5,15 +5,17 @@ import OrderList from '@/common/OrderList' ...@@ -5,15 +5,17 @@ import OrderList from '@/common/OrderList'
import {http, api} from "@/utils" import {http, api} from "@/utils"
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import {Modal, Toast} from 'antd-mobile' import {Modal, Toast} from 'antd-mobile'
import Loading from '@/common/Loading'
const alert = Modal.alert; const alert = Modal.alert
class MyOrders extends Component { class MyOrders extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: [] data: [],
isLoading: true
} }
} }
...@@ -26,7 +28,8 @@ class MyOrders extends Component { ...@@ -26,7 +28,8 @@ class MyOrders extends Component {
http.get(`${api.home}/m/my/orders/1/1`,).then((res) => { http.get(`${api.home}/m/my/orders/1/1`,).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
data: res.data.data data: res.data.data,
isLoading: false
}) })
} else { } else {
Toast.info(res.data.msg, 2); Toast.info(res.data.msg, 2);
...@@ -62,45 +65,46 @@ class MyOrders extends Component { ...@@ -62,45 +65,46 @@ class MyOrders extends Component {
return ( return (
<div className='myorders-box'> <div className='myorders-box'>
<HeaderBar title='我的订单' arrow={true} cart={false}></HeaderBar> <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) => { this.state.data && this.state.data.length > 0 ?
return ( this.state.data.map((item, index) => {
<div className="order-body" key={index}> return (
<OrderInfo item={item}/> <div className="order-body" key={index}>
{ <OrderInfo item={item}/>
item.course && item.course.length > 0 && item.course.map((item, index) => { {
const Info = ( item.course && item.course.length > 0 && item.course.map((item, index) => {
<div className="order-info"> const Info = (
<p className='order-title text-overflow-one'> <div className="order-info">
<Link <p className='order-title text-overflow-one'>
to={`/detail?id=${item.course_id}`}>{item.course_title}</Link> <Link
</p> to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
<p className='order-content text-overflow-2'>{item.description}</p> </p>
<p className='order-des'> <p className='order-content text-overflow-2'>{item.description}</p>
<span className='order-newprice'>¥{item.pay_amount}</span> <p className='order-des'>
<span className='order-price'>¥{item.price0}</span> <span className='order-newprice'>¥{item.pay_amount}</span>
</p> <span className='order-price'>¥{item.price0}</span>
</div> </p>
) </div>
return ( )
<div className="order-wrap" key={index}> return (
<OrderList info={Info} src={item.image_name} <div className="order-wrap" key={index}>
id={item.course_id}></OrderList> <OrderList info={Info} src={item.image_name}
</div> id={item.course_id}></OrderList>
) </div>
}) )
} })
}
<PayInfo item={item} cancel={this.cancel}/>
</div> <PayInfo item={item} cancel={this.cancel}/>
) </div>
}) : <div className="cart-tip"> )
<p className='cart-mess'>您还没有订单哦，快去逛逛吧~</p> }) : <div className="cart-tip">
<Link to='/classify'>去逛逛</Link> <p className='cart-mess'>您还没有订单哦，快去逛逛吧~</p>
</div> <Link to='/classify'>去逛逛</Link>
} </div>
}
</Loading>
</div> </div>
) )
} }
......
src/components/preferential/index.js
import React, {Component} from 'react' import React, {Component} from 'react'
import {VList} from '../../common' import {VList} from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile' import {Tabs, WhiteSpace, Toast} from 'antd-mobile'
import './index.scss' import './index.scss'
import HeaderSearch from '../../common/HeaderSearch/index' import HeaderSearch from '../../common/HeaderSearch/index'
import {http, api} from "@/utils" import {http, api} from "@/utils"
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile' import Loading from '@/common/Loading'
class Preferential extends Component { class Preferential extends Component {
constructor(props) { constructor(props) {
...@@ -13,6 +13,7 @@ class Preferential extends Component { ...@@ -13,6 +13,7 @@ class Preferential extends Component {
this.state = { this.state = {
dataList: [], dataList: [],
courseStatus: 0, courseStatus: 0,
isLoading: true
} }
} }
...@@ -25,7 +26,8 @@ class Preferential extends Component { ...@@ -25,7 +26,8 @@ class Preferential extends Component {
http.get(`${api.home}/m/home/weekDiscounts`).then((res) => { http.get(`${api.home}/m/home/weekDiscounts`).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
dataList: res.data.data dataList: res.data.data,
isLoading: false
}) })
} else { } else {
Toast.info(res.data.msg, 2) Toast.info(res.data.msg, 2)
...@@ -59,7 +61,6 @@ class Preferential extends Component { ...@@ -59,7 +61,6 @@ class Preferential extends Component {
} }
// tab 切换 // tab 切换
ontabclick = (tab, index) => { ontabclick = (tab, index) => {
console.log(tab, index)
this.state.courseStatus = index this.state.courseStatus = index
switch (index) { switch (index) {
case 0: case 0:
...@@ -73,9 +74,6 @@ class Preferential extends Component { ...@@ -73,9 +74,6 @@ class Preferential extends Component {
} }
} }
handleClick = (courseId) => {
console.log(courseId)
}
render() { render() {
const tabs = [ const tabs = [
...@@ -86,62 +84,65 @@ class Preferential extends Component { ...@@ -86,62 +84,65 @@ class Preferential extends Component {
return ( return (
<div className='preferential'> <div className='preferential'>
<HeaderSearch></HeaderSearch> <HeaderSearch></HeaderSearch>
<div className='class-content'> <Loading isLoading={this.state.isLoading}>
<WhiteSpace/> <div className='class-content'>
<WhiteSpace/>
<Tabs <Tabs
tabs={tabs} tabs={tabs}
animated={false} animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)} onChange={(tab, index) => this.ontabclick(tab, index)}
> >
<div className='tabs'> <div className='tabs'>
<ul> <ul>
{this.state.dataList.map((item, index) => { {this.state.dataList.map((item, index) => {
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title'> <p className='title'>
<Link to={`/detail?id=${item.course_id}`}> <Link to={`/detail?id=${item.course_id}`}>
{item.course_title} {item.course_title}
</Link> </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> </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 && {this.state.courseStatus === 2 &&
<a href="/#" className="isbuy">已购买</a> <p className='course-status'>拼团减{item.price}元</p>
} }
</div> </div>
</div> )
) return (
const status = ( <VList key={index} img={item.image_name}
<div> id={item.course_id} status={status}
{this.state.courseStatus === 1 && info={Info}></VList>
<p className='course-status'>砍价减{item.price1}元</p> )
} })}
{this.state.courseStatus === 2 && </ul>
<p className='course-status'>拼团减{item.price}元</p>
} </div>
</div> </Tabs>
) <WhiteSpace/>
return ( </div>
<VList handleClick={this.handleClick} key={index} img={item.image_name} </Loading>
id={item.course_id} status={status}
info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
</div> </div>
) )
} }
......
src/components/purchased/index.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import './index.scss'; import './index.scss';
import {HeaderBar} from '../../common' import {HeaderBar, VList} from '../../common'
import {VList} from '../../common'
import {http, api} from "@/utils"; import {http, api} from "@/utils";
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile' import {Toast} from 'antd-mobile'
import {connect} from "react-redux" import {connect} from "react-redux"
import Loading from '@/common/Loading'
class Purchased extends Component { class Purchased extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: [] data: [],
isLoading: true
} }
} }
...@@ -24,7 +25,8 @@ class Purchased extends Component { ...@@ -24,7 +25,8 @@ class Purchased extends Component {
http.get(`${api.home}/m/my/courses`,).then((res) => { http.get(`${api.home}/m/my/courses`,).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
data: res.data.data data: res.data.data,
isLoading: false
}) })
} else { } else {
Toast.info(res.data.msg, 2); Toast.info(res.data.msg, 2);
...@@ -39,38 +41,40 @@ class Purchased extends Component { ...@@ -39,38 +41,40 @@ class Purchased extends Component {
return ( return (
<div className='purchased-box'> <div className='purchased-box'>
<HeaderBar title='已购课程' arrow={true} cart={false}></HeaderBar> <HeaderBar title='已购课程' arrow={true} cart={false}></HeaderBar>
{ <Loading isLoading={this.state.isLoading}>
this.state.data && this.state.data.length > 0 ? {
<div className="purchased-body"> this.state.data && this.state.data.length > 0 ?
<div className='tip'>加群请备注您的学号：{uid}</div> <div className="purchased-body">
{ <div className='tip'>加群请备注您的学号：{uid}</div>
this.state.data.map((item, index) => { {
const Info = ( this.state.data.map((item, index) => {
<div className="info"> const Info = (
<p className='title'> <div className="info">
<Link to={`/detail?id=${item.course_id}`}> <p className='title'>
{item.course_title} <Link to={`/detail?id=${item.course_id}`}>
</Link> {item.course_title}
</p> </Link>
<p className='contact text-overflow-2'>{item.simpledescription}</p> </p>
<div className='des'> <p className='contact text-overflow-2'>{item.simpledescription}</p>
QQ群：{item.course_qq} <div className='des'>
QQ群：{item.course_qq}
</div>
</div> </div>
</div> )
) return (
return ( <VList key={index} img={item.image_name}
<VList key={index} img={item.image_name} id={item.course_id}
id={item.course_id} info={Info}></VList>
info={Info}></VList> )
) })
}) }
} </div>
</div> : <div className="cart-tip">
: <div className="cart-tip"> <p className='cart-mess'>您还没有课程哦，快去逛逛吧~</p>
<p className='cart-mess'>您还没有课程哦，快去逛逛吧~</p> <Link to='/classify'>去逛逛</Link>
<Link to='/classify'>去逛逛</Link> </div>
</div> }
} </Loading>
</div> </div>
) )
......
src/components/shopCart/cartList.js
import React, {Component} from 'react' import React, {Component} from 'react'
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import CartItem from './cartItem' import CartItem from './cartItem'
class cartList extends Component { class cartList extends Component {
render() { render() {
return ( return (
......
src/components/shopCart/index.js
...@@ -2,11 +2,8 @@ import React, {Component} from 'react' ...@@ -2,11 +2,8 @@ import React, {Component} from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Checkbox, Modal, Toast} from 'antd-mobile' import {Checkbox, Modal, Toast} from 'antd-mobile'
import {HeaderBar} from '../../common' import {HeaderBar} from '../../common'
import Loading from '@/common/Loading'
//组件
import ShopCart from './cartList.js' import ShopCart from './cartList.js'
//css
import './card.scss' import './card.scss'
import classnames from 'classnames' import classnames from 'classnames'
import {api, http} from "@/utils"; import {api, http} from "@/utils";
...@@ -21,7 +18,8 @@ class Cart extends Component { ...@@ -21,7 +18,8 @@ class Cart extends Component {
checkedNum: 0, checkedNum: 0,
allPrice: 0, allPrice: 0,
cartNmu: 0, cartNmu: 0,
courseIdarr: [] // 选中的课程id courseIdarr: [], // 选中的课程id
isLoading: true
} }
} }
...@@ -31,11 +29,13 @@ class Cart extends Component { ...@@ -31,11 +29,13 @@ class Cart extends Component {
this.getList() this.getList()
} }
// 获取课程列表
getList = () => { getList = () => {
http.get(`${api.home}/m/cart/list`).then((res) => { http.get(`${api.home}/m/cart/list`).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
data: res.data.data.courses data: res.data.data.courses,
isLoading: false
}) })
} else { } else {
Toast.info(res.data.msg, 2); Toast.info(res.data.msg, 2);
...@@ -146,7 +146,6 @@ class Cart extends Component { ...@@ -146,7 +146,6 @@ class Cart extends Component {
{ {
text: '确认', text: '确认',
onPress: () => { onPress: () => {
console.log(this.state.courseIdarr)
let data = { let data = {
course_ids: this.state.courseIdarr course_ids: this.state.courseIdarr
} }
...@@ -170,34 +169,36 @@ class Cart extends Component { ...@@ -170,34 +169,36 @@ class Cart extends Component {
<div className="cart-page" style={{overflow: 'hidden'}}> <div className="cart-page" style={{overflow: 'hidden'}}>
<HeaderBar title='购物车' arrow={true} cart={false} delete={true} toDelete={this.todelete}></HeaderBar> <HeaderBar title='购物车' arrow={true} cart={false} delete={true} toDelete={this.todelete}></HeaderBar>
<div className="cart-body"> <Loading isLoading={this.state.isLoading}>
<ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/> <div className="cart-body">
<ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
<div className="cart-footer">
<div className="cart-label"> <div className="cart-footer">
<Checkbox onChange={(e) => { <div className="cart-label">
this.allChange(e) <Checkbox onChange={(e) => {
}}/> this.allChange(e)
<div>全选</div> }}/>
</div> <div>全选</div>
<div className="all-pirce"> </div>
<p> <div className="all-pirce">
<span>合计：</span> <p>
<span>￥{this.state.allPrice}</span> <span>合计：</span>
</p> <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>
<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> </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