Skip to content

M
mr-julyedu
Commit cbaf368e by xuzhenghua
Options

订单

parent c367fc34
Showing with 330 additions and 27 deletions
src/common/OrderList/index.js
import React from 'react';
import './orderlist.scss';
import {Link} from "react-router-dom";
/**
......@@ -13,13 +14,15 @@ import './orderlist.scss';
*/
const OrderItem = ({ info, tab, children, src, ...restProps }) => {
const OrderItem = ({ info, tab, children, src,id, ...restProps }) => {
return (
<div className='public-list-item'>
<div className="public-content">
{tab}
<div className="public-cover" >
<img src={src} alt="" />
<Link to={`/detail?id=${id}`}>
<img src={src} alt="" />
</Link>
</div>
{info}
</div>
......
src/common/OrderList/orderlist.scss
......@@ -6,21 +6,27 @@
height: 100%;
.public-cover {
flex: 1 0 auto;
margin-right: 15px;
position: relative;
width: 125px;
height: 90px;
img {
a {
width: 100%;
height: 100%;
border-radius: 3px;
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
}
}
.order-info {
position: relative;
flex: 1;
.order-title {
font-size: 16px;
......
src/components/detail/btnstatus/index.js
......@@ -2,6 +2,9 @@ import React, {Component} from 'react';
import {api, getParam, http} from "@/utils";
import {Toast} from 'antd-mobile';
import {Link} from 'react-router-dom'
import {getCourses} from "@/components/detail/actions";
import {connect} from "react-redux";
import './index.scss'
......@@ -22,6 +25,8 @@ class BtnStatus extends Component {
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200) {
Toast.info('已加入购物车', 2);
// window.location.reload()
this.props.getCourses();
} else {
Toast.info(res.data.msg, 2);
}
......@@ -29,24 +34,37 @@ class BtnStatus extends Component {
}
render() {
let info = ''
if (this.props.data.course_info) {
info = this.props.data.course_info
}
return (
<div>
{/*正常购买*/}
{
this.props.status === 0 &&
info.is_baoming === 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' onClick={this.toCart}>加入购物车</button>
{
info.in_cart &&
<Link to='/shopcart' className='btn btn-s bg-FCCD05'>去购物车结算</Link>
}
{
!info.in_cart &&
<button className='btn btn-s bg-FCCD05' onClick={this.toCart}>加入购物车</button>
}
<Link to='/order' className='btn btn-s bg-FD7700'>立即报名</Link>
</div>
}
{/*已购买*/}
{
this.props.status === 1 &&
info.is_baoming === 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>
......@@ -117,7 +135,7 @@ class BtnStatus extends Component {
{/*特殊课程*/}
{
this.props.status === 4 &&
info.isbaoming === 0 &&
<div className='btns-box'>
<a className='consult-l' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
......@@ -130,4 +148,7 @@ class BtnStatus extends Component {
}
}
export default BtnStatus;
\ No newline at end of file
export default connect(
null,
{getCourses}
)(BtnStatus);
\ No newline at end of file
src/components/detail/index.js
......@@ -133,12 +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}/>
{/*分享赚钱*/}
{
courseInfo.is_dist &&
<ShareRank data={this.props.courseInfo} shareRank={this.state.shareRank} openRanking={this.openRanking} boxHide={this.boxHide}/>
<ShareRank data={this.props.courseInfo} shareRank={this.state.shareRank}
openRanking={this.openRanking} boxHide={this.boxHide}/>
}
{/*砍价*/}
......@@ -147,8 +148,8 @@ class Detail extends Component {
{/*课程介绍、大纲*/}
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{/*课程按钮 0正常购买流程，1已购买，2拼团，3砍价, 4特殊课程*/}
<BtnStatus status={0}></BtnStatus>
{/*课程按钮*/}
<BtnStatus data={this.props.courseInfo}></BtnStatus>
</div>
)
}
......
src/components/myOrders/index.js 0 → 100644
import React, {Component} from 'react';
import './index.scss';
import {HeaderBar} from '../../common'
import OrderList from '@/common/OrderList';
import {http, api} from "@/utils";
import {Link} from 'react-router-dom'
import {Checkbox, NavBar, Modal, Toast} from 'antd-mobile'
const alert = Modal.alert;
class MyOrders extends Component {
constructor(props) {
super(props)
this.state = {
data: []
}
}
componentDidMount() {
this.getList()
}
// 获取订单
getList = () => {
http.get(`${api.home}/m/my/orders/1/1`,).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data
})
} else {
Toast.info(res.data.msg, 2);
}
})
}
// 取消订单
cancel = (oid) => {
alert('确认取消订单？', '订单取消后，优惠券和抵扣的余额会返回到您的账户。', [
{text: '取消', onPress: () => console.log('cancel')},
{
text: '确认',
onPress: () => {
let data = {
order_id: oid
}
http.post(`${api.home}/m/live/free_list`, data).then((res) => {
if (res.data.code === 200) {
this.getList()
} else {
Toast.info(res.data.msg, 2);
}
})
}
}
])
}
render() {
return (
<div className='myorders-box'>
<HeaderBar title={'我的订单'}></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.simpledescription</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>
)
}
}
function OrderInfo(props) {
let btn
if (props.item.pay_time === '0' && props.item.member_num === 0) {
btn = <span className='oid-status'>等待支付</span>
} else if ((props.item.member_num === props.item.pdd_info.length) && props.item.member_num !== 0) {
btn = <span className='oid-success'>拼团成功</span>
} else {
btn = <span className='oid-success'>支付成功</span>
}
return (
<div className='order-head'>
<span className='oid-num'>订单号：{props.item.oid}</span>
{btn}
</div>
)
}
function PayInfo(props) {
return (
<div className='order-btm'>
<div className='price-info'>
<p>
<span className='payable'>应付：</span>
<span className='price'>¥{props.item.pay_amount}</span>
</p>
<p>
<span className='payable'>已优惠：</span>
<span className='price'>¥{props.item.coupon_amount}</span>
</p>
</div>
{
props.item.pay_time === '0' && props.item.member_num === 0 &&
<div className='btm-right'>
<button className='cancel' onClick={event => props.cancel(props.item.oid)}>取消订单</button>
<Link to='/'>去支付</Link>
</div>
}
{
props.item.member_num !== 0 &&
<div className='btm-right'>
<div className="group">
{
props.item.pdd_info && props.item.pdd_info.length > 0 && props.item.pdd_info.map((item, index) => {
return (
<img
src={item.user_avatar === '' ? 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-spreadtrain8/ellipsis.png' : item.user_avatar}
key={index} alt=""/>
)
})
}
</div>
</div>
}
</div>
)
}
export default MyOrders
src/components/myOrders/index.scss 0 → 100644
.myorders-box {
width: 100%;
background-color: $bg_f5f5f5;
.order-body {
.order-head {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 12px;
display: flex;
justify-content: space-between;
background-color: $bg_fff;
margin-top: 10px;
border-bottom: 1px solid #E7EAF1;
.oid-num {
font-size: 12px;
color: $color_666;
}
.oid-status {
font-size: 14px;
color: $redprice;
}
.oid-success{
font-size: 14px;
color: $color_333;
}
}
.order-wrap {
width: 100%;
padding: 10px 12px;
background-color: $bg_fff;
border-bottom: 1px solid $border_e7eaf1;
}
.order-btm {
width: 100%;
height: 54px;
background-color: $bg_fff;
padding: 0 12px;
display: flex;
justify-content: space-between;
.price-info {
width: 120px;
display: flex;
flex-direction: column;
align-self: center;
.payable {
font-size: 12px;
color: $color_666;
}
.price {
font-size: 14px;
color: $redprice;
}
}
.btm-right {
.cancel, a {
display: inline-block;
width: 90px;
height: 30px;
text-align: center;
font-size: 14px;
background-color: $bg_fff;
border-radius: 4px;
margin-top: 12px;
}
.cancel {
color: $color_333;
border: 1px solid $bg_333;
margin-right: 15px;
}
a {
line-height: 30px;
color: $redprice;
border: 1px solid $redprice;
}
.group {
img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 10px;
margin-left: 10px;
}
}
}
}
}
}
\ No newline at end of file
src/components/shopCart/card.scss
html, body, #root {
height: 100%;
}
.cart-page {
height: 100%;
width: 100%;
......@@ -268,9 +272,3 @@
}
}
.shopcard-check {
display: flex;
justify-items: center;
align-items: center;
padding-right: 12px;
}
src/components/shopCart/cartItem.js
import React, { Component } from 'react';
import { Checkbox } from 'antd-mobile';
import OrderList from '@/common/OrderList';
import {Link} from "react-router-dom";
class CartItem extends Component {
......@@ -21,7 +22,9 @@ class CartItem extends Component {
let item = this.props.item
const Info = (
<div className="order-info">
<p className='order-title text-overflow-one'>{item.course_title}</p>
<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.simpledescription}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.price1}</span>
......@@ -39,7 +42,7 @@ class CartItem extends Component {
</div>
<div className="card-wrap">
<OrderList info={Info} src={item.image_name}></OrderList>
<OrderList info={Info} src={item.image_name} id={item.course_id}></OrderList>
</div>
</div>
......
src/components/shopCart/cartList.js
......@@ -10,7 +10,7 @@ class cartList extends Component {
{/* 遍历购物车商品列表 */}
<div className="cart-c-body">
{
this.props.data.length < 0 ?
this.props.data.length > 0 ?
this.props.data.map((item, index) => {
return (
<CartItem
......
src/components/shopCart/index.js
......@@ -135,9 +135,8 @@ class Cart extends Component {
onPress: () => {
console.log(this.state.courseIdarr)
let data = {
course_id: JSON.stringify(this.state.courseIdarr)
course_ids: this.state.courseIdarr
}
console.log(data)
http.post(`${api.home}/m/cart/remove`, data).then((res) => {
if (res.data.code === 200) {
this.getList()
......
src/router/router-config.js
......@@ -20,7 +20,7 @@ const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/compon
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
const Video = loadable(() => import(/* webpackChunkName: 'video'*/'@/components/video'))
const sharePoster = loadable(() => import(/* webpackChunkName: 'shareposter'*/'@/components/sharePoster'))
const myOrders = loadable(() => import(/* webpackChunkName: 'myorders'*/'@/components/myOrders'))
export default [
{
path: '/',
......@@ -98,4 +98,8 @@ export default [
path: '/shareposter',
component: sharePoster
},
{
path: '/myorders',
component: myOrders
},
]
\ No newline at end of file
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