Skip to content

M
mr-julyedu
Commit c367fc34 by xuzhenghua
Options

detail

parent 02660017
Showing with 512 additions and 227 deletions
package.json
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
"postcss-loader": "3.0.0", "postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0", "postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"qrcode": "^1.3.3",
"react": "^16.8.6", "react": "^16.8.6",
"react-app-polyfill": "^0.2.2", "react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0", "react-dev-utils": "^8.0.0",
......
src/common/OrderList/index.js
...@@ -13,13 +13,13 @@ import './orderlist.scss'; ...@@ -13,13 +13,13 @@ import './orderlist.scss';
*/ */
const OrderItem = ({ info, tab, children, ...restProps }) => { const OrderItem = ({ info, tab, children, src, ...restProps }) => {
return ( return (
<div className='public-list-item'> <div className='public-list-item'>
<div className="public-content"> <div className="public-content">
{tab} {tab}
<div className="public-cover" > <div className="public-cover" >
<img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt="" /> <img src={src} alt="" />
</div> </div>
{info} {info}
</div> </div>
......
src/common/OrderList/orderlist.scss
.public-list-item{ .public-list-item {
margin-top: 5px;
background: $bg_fff; background: $bg_fff;
.public-content{
.public-content {
display: flex; display: flex;
height: 100%; height: 100%;
// margin: 0px 15px;
padding: 10px 0; .public-cover {
.public-cover{
flex: 1 0 auto; flex: 1 0 auto;
margin-right: 15px; margin-right: 15px;
position: relative; position: relative;
img{
width: 125px; width: 125px;
height: 90px; height: 90px;
img {
width: 100%;
height: 100%;
border-radius: 3px; border-radius: 3px;
} }
} }
.order-info {
position: relative;
.order-title {
font-size: 16px;
color: $color_333;
height: 16px;
line-height: 16px;
} }
.order-content {
font-size: 14px;
color: $color_666;
margin-top: 14px;
line-height: 18px;
} }
.public-list-item:first-child{
margin-top: 0px; .order-des {
position: absolute;
bottom: 0;
height: 24px;
line-height: 33px;
.order-newprice {
font-size: 16px;
color: $redprice;
} }
.order-price {
font-size: 12px;
color: $color_999;
margin-left: 15px;
text-decoration: line-through;
}
}
}
}
}
src/components/detail/btnstatus/index.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {api, getParam, http} from "@/utils";
import {Toast} from 'antd-mobile';
import {Link} from 'react-router-dom'
import './index.scss' import './index.scss'
...@@ -11,6 +14,20 @@ class BtnStatus extends Component { ...@@ -11,6 +14,20 @@ class BtnStatus extends Component {
} }
} }
// 加入购物车
toCart = () => {
let data = {
course_id: getParam('id')
}
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200) {
Toast.info('已加入购物车', 2);
} else {
Toast.info(res.data.msg, 2);
}
})
}
render() { render() {
return ( return (
<div> <div>
...@@ -22,8 +39,8 @@ class BtnStatus extends Component { ...@@ -22,8 +39,8 @@ class BtnStatus extends Component {
<i className='iconfont iconerji'></i> <i className='iconfont iconerji'></i>
<span>课程咨询</span> <span>课程咨询</span>
</a> </a>
<button className='btn btn-s bg-FCCD05'>加入购物车</button> <button className='btn btn-s bg-FCCD05' onClick={this.toCart}>加入购物车</button>
<button className='btn btn-s bg-FD7700'>立即报名</button> <Link to='/order' className='btn btn-s bg-FD7700'>立即报名</Link>
</div> </div>
} }
......
src/components/detail/btnstatus/index.scss
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
font-size: 16px; font-size: 16px;
border: none; border: none;
padding: 8px 0; padding: 8px 0;
text-align: center;
} }
.btn-s { .btn-s {
......
src/components/detail/index.js
...@@ -31,7 +31,7 @@ class Detail extends Component { ...@@ -31,7 +31,7 @@ class Detail extends Component {
} }
componentDidUpdate() { componentDidUpdate() {
console.log(this.props.courseInfo.course_info) // console.log(this.props.courseInfo.course_info)
} }
toApp = () => { toApp = () => {
...@@ -138,7 +138,7 @@ class Detail extends Component { ...@@ -138,7 +138,7 @@ class Detail extends Component {
{/*分享赚钱*/} {/*分享赚钱*/}
{ {
courseInfo.is_dist && courseInfo.is_dist &&
<ShareRank 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}/>
} }
{/*砍价*/} {/*砍价*/}
......
src/components/detail/shareRank/index.js
import React, {Component} from 'react' import React, {Component} from 'react'
import './index.scss' import './index.scss'
import {api, getParam, http} from "@/utils"; import {api, getParam, http} from "@/utils";
import {withRouter} from "react-router-dom";
class ShareRank extends Component { class ShareRank extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
list: '', list: '',
rankingslice: '' rankingslice: '',
code: ''
} }
} }
componentDidMount() { 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) { if (res.data.code === 200) {
this.setState({ this.setState({
list: res.data.data, list: res.data.data,
rankingslice: res.data.data.slice(0,2) rankingslice: res.data.data.slice(0, 2),
courseInfo: this.props.data.course_info
})
}
})
// 获取分销码
let data = {
course_id: getParam('id')
}
http.post(`${api.home}/dist/createCode`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
code: res.data.data.code
}) })
} }
}) })
} }
share = () => {
const courseId = getParam('id')
const dist_first = this.state.courseInfo.dist_first_level_ti
const uid = this.state.courseInfo.uid
const dist_code = this.state.code
this.props.history.push(`/shareposter?courseId=${courseId}&dist_first=${dist_first}&uid=${uid}&dist_code=${dist_code}`)
}
// 关闭弹窗 // 关闭弹窗
colse = () => { colse = () => {
this.props.boxHide(false) this.props.boxHide(false)
} }
render() { render() {
let info = ''
if (this.props.data.course_info) {
info = this.props.data.course_info
}
return ( return (
<div className='share-ranking'> <div className='share-ranking'>
<span className="title">排行榜：</span> <span className="title">排行榜：</span>
<div className='ranking-box' onClick={this.props.openRanking}> <div className='ranking-box' onClick={this.props.openRanking}>
{ {
this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item,index)=>{ this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item, index) => {
return( return (
<span key={index} className="ranking-mess"> <span key={index} className="ranking-mess">
<img src={item.head_imgurl} alt=""/> <img src={item.head_imgurl} alt=""/>
<i>{item.amount}元</i> <i>{item.amount}元</i>
...@@ -46,7 +74,7 @@ class ShareRank extends Component { ...@@ -46,7 +74,7 @@ class ShareRank extends Component {
<img className="ranking-ellipsis" <img className="ranking-ellipsis"
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/> src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
</div> </div>
<button className="share">分享赚22元</button> <button className="share" onClick={this.share}>分享赚{info.dist_first_level_ti}元</button>
{ {
this.props.shareRank && this.props.shareRank &&
...@@ -58,8 +86,8 @@ class ShareRank extends Component { ...@@ -58,8 +86,8 @@ class ShareRank extends Component {
</div> </div>
<ul> <ul>
{ {
this.state.list && this.state.list.length > 0 && this.state.list.map((item,index)=>{ this.state.list && this.state.list.length > 0 && this.state.list.map((item, index) => {
return( return (
<li key={index}> <li key={index}>
<img src={item.head_imgurl} alt=""/> <img src={item.head_imgurl} alt=""/>
<span className='course-title'>{item.user_name}</span> <span className='course-title'>{item.user_name}</span>
...@@ -70,7 +98,7 @@ class ShareRank extends Component { ...@@ -70,7 +98,7 @@ class ShareRank extends Component {
} }
</ul> </ul>
<div className='shareBtn'> <div className='shareBtn'>
<button>分享赚67元</button> <button onClick={this.share}>分享赚{info.dist_first_level_ti}元</button>
</div> </div>
</div> </div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i> <i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
...@@ -81,4 +109,4 @@ class ShareRank extends Component { ...@@ -81,4 +109,4 @@ class ShareRank extends Component {
} }
} }
export default ShareRank; export default withRouter(ShareRank);
src/components/detail/shareRank/index.scss
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
text-align: center; text-align: center;
button { button {
border: none; border: none;
width: 105px; padding: 0 10px;
height: 24px; height: 24px;
margin-top: 10px; margin-top: 10px;
background: linear-gradient(90deg, $bg_FF0000 0%, $bg_FF4000 100%); background: linear-gradient(90deg, $bg_FF0000 0%, $bg_FF4000 100%);
......
src/components/detail/single/index.scss
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
line-height: 30px; line-height: 30px;
} }
.btn-18B4ED { .btn-18B4ED {
background-color: $bg_18B4ED; background-color: $bg_18B4ED;
} }
...@@ -135,17 +136,20 @@ ...@@ -135,17 +136,20 @@
font-size: 14px; font-size: 14px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.icondanseshixintubiao-5 { .icondanseshixintubiao-5 {
position: absolute; position: absolute;
right: 0; right: 0;
font-size: 24px; font-size: 24px;
} }
.redioed {
color: #4cd964;
}
.redio { .redio {
color: $border_ccc; color: $border_ccc;
} }
.redioed {
color: #4cd964;
}
} }
} }
} }
...@@ -197,4 +201,32 @@ ...@@ -197,4 +201,32 @@
bottom: 70px; bottom: 70px;
} }
} }
.group {
height: 165px;
margin: 213px auto 22px auto;
text-align: center;
.group-img {
margin-top: 15px;
img {
width: 40px;
height: 40px;
border-radius: 50px;
margin-right: 15px;
}
}
.btn-l {
position: absolute;
width: 240px;
bottom: 20px;
left: 30px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
} }
}
\ No newline at end of file
src/components/sharePoster/index.scss 0 → 100644
.share-poster {
.total-container {
width: 100%;
background-color: $bg_000;
height: 420px;
overflow: hidden;
position: relative;
.placard-img-container {
width: 100%;
height: 840px;
background: $bg_000;
padding-top: 20px;
overflow: hidden;
position: relative;
zoom: 0.5;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
}
.placard-code {
opacity: 0;
}
}
.placard-desc {
width: 100%;
height: 45px;
background: $bg_000;
padding: 0 10px;
.placard-sharetxt {
width: 100%;
height: 100%;
line-height: 20px;
display: inline-block;
font-size: 14px;
color: $white;
.placard-price {
font-size: 14px;
color: $active;
}
}
}
.placard-swiper {
width: 100%;
background-color: $white;
.placard-list {
display: flex;
justify-content: center;
align-items: center;
li {
width: 64px;
height: 64px;
border-radius: 5px;
line-height: 90px;
margin: 20px 15px;
img {
display: inline-block;
width: 64px;
height: 64px;
border-radius: 5px;
}
}
li.active {
width: 64px;
height: 64px;
background: url('./image/choose_pic.png') no-repeat center;
z-index: 1002;
background-size: 64px;
img {
opacity: 0.1;
}
}
}
}
.hide {
display: none;
}
}
\ No newline at end of file
src/components/shopCart/card.scss
.cart-page{ .cart-page {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.cart-tip{
display: flex; .cart-tip {
align-items:center; color: #555;
justify-content: center; margin-top: 140px;
min-height: 60px; text-align: center;
color:#555;
.iconfridge {
font-size: 21px;
}
.cart-mess {
font-size: 12px;
color: $color_666;
}
a {
display: inline-block;
font-size: 16px;
margin-top: 40px;
color: $active;
} }
.edit{
padding-right:10px;
font-size:14px;
} }
.cart-body{
height:100%; .edit {
padding-right: 10px;
font-size: 14px;
}
.cart-body {
height: 100%;
flex: 1; flex: 1;
margin-bottom: 50px; margin-bottom: 50px;
display: flex; display: flex;
background-color: $bg_f5f5f5; background-color: $bg_f5f5f5;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
.cart-main{
width:100%; .cart-main {
>.am-list-item{ width: 100%;
> .am-list-item {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
.am-list-line::after{
.am-list-line::after {
background-color: transparent; background-color: transparent;
} }
} }
>.am-list-item.am-list-item-active{
> .am-list-item.am-list-item-active {
background-color: transparent; background-color: transparent;
} }
.cart-c-title{
.cart-c-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
>div{
flex:1; > div {
flex: 1;
} }
span{
font-size:14px; span {
margin-left:10px; font-size: 14px;
margin-left: 10px;
} }
.next{
width:14px; .next {
height:14px; width: 14px;
height: 14px;
display: inline-block; display: inline-block;
margin-left:10px; margin-left: 10px;
} }
i{
i {
font-style: inherit; font-style: inherit;
font-size:14px; font-size: 14px;
display: block; display: block;
padding:0 10px; padding: 0 10px;
} }
} }
.cart-c-body{
.am-list-item-active{ .cart-c-body {
.am-list-item-active {
background-color: transparent; background-color: transparent;
} }
.am-list-line{
.am-list-line {
padding-right: 0px; padding-right: 0px;
} }
.am-list-content{
.am-list-content {
position: relative; position: relative;
} }
.cart-c-item{
.cart-c-item {
overflow: hidden; overflow: hidden;
position: relative;
margin: 8px 0; margin: 8px 0;
padding-right: 10px; height: 120px;
box-sizing: border-box; padding: 15px 15px 15px 12px;
background-color: $white; background-color: $white;
.cart-c-check{
width:40px; .cart-c-check {
width: 30px;
float: left;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 100%; height: 100%;
box-sizing: border-box;
position: absolute;
} }
} }
.cart-ci-left{
.cart-ci-left {
position: absolute; position: absolute;
top: 0; top: 0;
left: 40px; left: 40px;
...@@ -93,132 +122,155 @@ ...@@ -93,132 +122,155 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img{
height:85px; img {
width:85px; height: 85px;
width: 85px;
display: block; display: block;
border:1px solid #eee; border: 1px solid #eee;
} }
} }
.cart-ci-right{
min-height:87px; .cart-ci-right {
margin-left:135px; min-height: 87px;
margin-right:8px; margin-left: 135px;
.am-stepper-handler{ margin-right: 8px;
.am-stepper-handler {
line-height: 28px; line-height: 28px;
font-size: 14px; font-size: 14px;
width: 26px; width: 26px;
height: 26px; height: 26px;
display:flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.r-title{
font-size:15px; .r-title {
white-space:normal; font-size: 15px;
font-weight:bold; white-space: normal;
overflow : hidden; font-weight: bold;
overflow: hidden;
max-height: 46px; max-height: 46px;
span{
overflow : hidden; span {
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
/* autoprefixer: ignore next */ /* autoprefixer: ignore next */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
white-space:inherit; white-space: inherit;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
} }
.r-step{
.r-step {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.r-price{
color:#ff5b05; .r-price {
font-size:14px; color: #ff5b05;
line-height:30px; font-size: 14px;
span{ line-height: 30px;
font-size:12px;
span {
font-size: 12px;
} }
} }
.span-stepper{
width:100px; .span-stepper {
width: 100px;
} }
.am-stepper-input{
font-size:12px; .am-stepper-input {
font-size: 12px;
} }
} }
} }
} }
} }
} }
.cart-footer{
.cart-footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top:1px solid #eee; border-top: 1px solid #eee;
background-color:rgba(255,255,255,.7); background-color: rgba(255, 255, 255, 1);
height:50px; height: 50px;
.cart-label{
.cart-label {
display: flex; display: flex;
} }
&>div:nth-child(1){
& > div:nth-child(1) {
text-align: center; text-align: center;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding-left: 12px; padding-left: 12px;
div{
div {
font-size: $font_16; font-size: $font_16;
color: $color_333; color: $color_333;
margin-left: 6px; margin-left: 6px;
} }
} }
.all-pirce{
flex:1; .all-pirce {
flex: 1;
margin-right: 20px; margin-right: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
p{
margin:0; p {
padding:0; margin: 0;
padding: 0;
font-size: $font_16; font-size: $font_16;
text-align: right; text-align: right;
width:100%; width: 100%;
span{
color: $color_333; span {
font-size: $font_16; color: $color_666;
font-size: $font_14;
} }
span:nth-child(2){
span:nth-child(2) {
color: $red; color: $red;
} }
} }
} }
&>div:nth-child(3){
& > div:nth-child(3) {
width: 100px; width: 100px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
font-size: $font_16; font-size: $font_16;
background-color: $bg_ff3131; background-color: $bg_ff3131;
color: $white; color: $white;
span{
font-size: 10px; span {
font-weight:400; font-size: 16px;
font-weight: 400;
} }
} }
div.active{
div.active {
background-color: #ff5b05; background-color: #ff5b05;
color:#fff; color: #fff;
}
} }
.am-navbar-light {
background-color: $bg_f7f9fc;
} }
} }
.shopcard-check{
.shopcard-check {
display: flex; display: flex;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
padding-right: 12px; padding-right: 12px;
} }
.card-wrap{
margin-left: 40px;
}
src/components/shopCart/cartItem.js
...@@ -13,33 +13,19 @@ class CartItem extends Component { ...@@ -13,33 +13,19 @@ class CartItem extends Component {
} }
// 改变选择 // 改变选择
onChange(e, id) { onChange(e, id) {
let checked = e.target.checked; let checked = e.target.checked
// console.log(checked,id)
this.props.checkChange(id, checked) this.props.checkChange(id, checked)
} }
// 修改购物车
editCart(it, val) {
}
// 删除购物车
delete(id) {
}
//跳转
goto(id) {
}
//render
render() { render() {
let item = this.props.item let item = this.props.item
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
<p className='order-title'>{item.title}</p> <p className='order-title text-overflow-one'>{item.course_title}</p>
<p className='order-content'>{item.content}</p> <p className='order-content text-overflow-2'>{item.simpledescription}</p>
<p className='order-des'> <p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span> <span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price}</span> <span className='order-price'>¥{item.price0}</span>
</p> </p>
</div> </div>
) )
...@@ -48,14 +34,12 @@ class CartItem extends Component { ...@@ -48,14 +34,12 @@ class CartItem extends Component {
<div className="cart-c-item" > <div className="cart-c-item" >
<div className="cart-c-check"> <div className="cart-c-check">
<Checkbox checked={item.check} onChange={(e) => { <Checkbox checked={item.check} onChange={(e) => {
this.onChange(e, item.id) this.onChange(e, item.course_id)
}} /> }} />
</div> </div>
<div className="card-wrap">
<OrderList info={Info}></OrderList>
<div className="card-wrap">
<OrderList info={Info} src={item.image_name}></OrderList>
</div> </div>
</div> </div>
......
src/components/shopCart/cartList.js
import React, { Component } from 'react' import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import CartItem from './cartItem' import CartItem from './cartItem'
class ShopCard extends Component { class cartList extends Component {
render() { render() {
return ( return (
<div className="cart-main"> <div className="cart-main">
{/* 遍历购物车商品列表 */} {/* 遍历购物车商品列表 */}
<div className="cart-c-body"> <div className="cart-c-body">
{ {
this.props.data.length > 0 ? this.props.data.length < 0 ?
this.props.data.map((item, i) => { this.props.data.map((item, index) => {
return ( return (
<CartItem <CartItem
index={i} index={index}
changeStock={(id, val) => { changeStock={(id, val) => {
this.props.changeStock(id, val) this.props.changeStock(id, val)
}} }}
checkChange={(id, val) => { checkChange={(id, val) => {
this.props.checkChange(id, val) this.props.checkChange(id, val)
}} }}
getCartList={() => { key={index} item={item}/>
this.props.getCartList()
}} key={i} item={item}/>
) )
}) })
: <div className="cart-tip">暂无商品</div> : <div className="cart-tip">
<p><i className='iconfont iconfridge'></i></p>
<p className='cart-mess'>这里是空的，快去逛逛吧~</p>
<Link to='/'>去逛逛</Link>
</div>
} }
</div> </div>
</div> </div>
...@@ -33,4 +36,4 @@ class ShopCard extends Component { ...@@ -33,4 +36,4 @@ class ShopCard extends Component {
} }
} }
export default ShopCard; export default cartList;
\ No newline at end of file \ No newline at end of file
src/components/shopCart/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import { connect } from 'react-redux' import {connect} from 'react-redux'
import { Checkbox, NavBar } from 'antd-mobile' import {Checkbox, NavBar, Modal, Toast} from 'antd-mobile'
//组件 //组件
import ShopCart from './cartList.js' import ShopCart from './cartList.js'
import Loading from '@common/Loading'
//css //css
import './card.scss' import './card.scss'
import classnames from 'classnames' import classnames from 'classnames'
import {api, http} from "@/utils";
const mockData = [ const alert = Modal.alert;
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110',
check: false
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '111',
check: false
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '112',
check: false
}
]
class Cart extends Component { class Cart extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: [],
deleteAll: false, deleteAll: false,
loading: false,
checkedNum: 0, checkedNum: 0,
allPrice: 0, allPrice: 0,
cartNmu: 0, cartNmu: 0,
data: mockData courseIdarr: [] // 选中的课程id
} }
this.checkChange = this.checkChange.bind(this);
this.getCartList = this.getCartList.bind(this);
this.changeStock = this.changeStock.bind(this);
} }
//获取购物车列表
getCartList() {
componentDidMount() {
this.getList()
} }
changeStock() {
getList = () => {
http.get(`${api.home}/m/cart/list`).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data.courses
})
} else {
Toast.info(res.data.msg, 2);
}
})
} }
//全选 //全选
allChange(e) { allChange(e) {
let checked = e.target.checked let checked = e.target.checked
...@@ -75,12 +56,28 @@ class Cart extends Component { ...@@ -75,12 +56,28 @@ class Cart extends Component {
data: newData data: newData
}) })
this.calc(newData) this.calc(newData)
if (checked) {
let arr = []
newData.map((item, i) => {
arr.push(item.course_id)
})
this.setState({
courseIdarr: arr
})
} else {
this.setState({
courseIdarr: []
})
}
} }
//点击 //点击
checkChange(id, check) { checkChange(id, check) {
let newData = this.state.data.map((item, i) => { let newData = this.state.data.map((item, i) => {
if (item.id === id) { if (item.course_id === id) {
return { return {
...item, ...item,
check: check check: check
...@@ -93,7 +90,21 @@ class Cart extends Component { ...@@ -93,7 +90,21 @@ class Cart extends Component {
data: newData data: newData
}) })
this.calc(newData) this.calc(newData)
let arr = []
newData.forEach((item, i) => {
if (item.check) {
arr.push(item.course_id)
this.setState({
courseIdarr: arr
})
} else {
this.setState({
courseIdarr: arr
})
} }
})
}
//计算总价 //计算总价
calc(newData) { calc(newData) {
let allPrice = 0; let allPrice = 0;
...@@ -104,7 +115,7 @@ class Cart extends Component { ...@@ -104,7 +115,7 @@ class Cart extends Component {
i++; i++;
cartNmu += 1; cartNmu += 1;
checkedNum = i; checkedNum = i;
allPrice += parseFloat(item.newprice); allPrice += parseFloat(item.price1);
} }
}) })
this.setState({ this.setState({
...@@ -113,40 +124,53 @@ class Cart extends Component { ...@@ -113,40 +124,53 @@ class Cart extends Component {
cartNmu cartNmu
}) })
} }
//购买
buy() {
// 删除
detail = () => {
if (this.state.courseIdarr.length > 0) {
alert('', '确定从购物车中删除？', [
{text: '取消', onPress: () => console.log('cancel')},
{
text: '确认',
onPress: () => {
console.log(this.state.courseIdarr)
let data = {
course_id: JSON.stringify(this.state.courseIdarr)
}
console.log(data)
http.post(`${api.home}/m/cart/remove`, data).then((res) => {
if (res.data.code === 200) {
this.getList()
} else {
Toast.info(res.data.msg, 2);
} }
deleteAll() { })
} }
//装载组件
componentDidMount() {
this.getCartList()
} }
])
}
}
render() { render() {
return ( return (
<div className="cart-page" style={{ overflow: 'hidden' }}> <div className="cart-page" style={{overflow: 'hidden'}}>
<NavBar <NavBar
style={{ "height": "44px" }} style={{"height": "44px"}}
className="order-tab" className="order-tab"
mode="light" mode="light"
icon={<i style={{"fontSize": '24px'}} className="iconfont iconiconfront-68"></i>} icon={<i style={{"fontSize": '24px'}} className="iconfont iconiconfront-68"></i>}
rightContent={[ rightContent={[
<i key="0" style={{ "fontSize": '24px' }} className="iconfont iconiconfront-56"></i> <i key="0" style={{"fontSize": '24px'}} className="iconfont iconiconfront-56"
onClick={this.detail}></i>
]} ]}
> >
购物车 购物车
</NavBar> </NavBar>
<div className="cart-body"> <div className="cart-body">
{ <ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
this.state.loading ?
<Loading />
:
<ShopCart getCartList={this.getCartList} changeStock={this.changeStock} checkChange={this.checkChange} data={this.state.data}/>
}
{ {
this.state.deleteAll ? this.state.deleteAll ?
...@@ -154,7 +178,7 @@ class Cart extends Component { ...@@ -154,7 +178,7 @@ class Cart extends Component {
<div> <div>
<Checkbox onChange={(e) => { <Checkbox onChange={(e) => {
this.allChange(e) this.allChange(e)
}} /> }}/>
<div>全选</div> <div>全选</div>
</div> </div>
<div></div> <div></div>
...@@ -174,7 +198,7 @@ class Cart extends Component { ...@@ -174,7 +198,7 @@ class Cart extends Component {
<div className="cart-label"> <div className="cart-label">
<Checkbox onChange={(e) => { <Checkbox onChange={(e) => {
this.allChange(e) this.allChange(e)
}} /> }}/>
<div>全选</div> <div>全选</div>
</div> </div>
<div className="all-pirce"> <div className="all-pirce">
...@@ -190,7 +214,7 @@ class Cart extends Component { ...@@ -190,7 +214,7 @@ class Cart extends Component {
this.buy() this.buy()
} }
}}> }}>
去结算<span>({this.state.checkedNum})</span> 结算<span> ( {this.state.checkedNum} ) </span>
</div> </div>
</div> </div>
} }
......
src/router/router-config.js
...@@ -19,6 +19,7 @@ import Passport from '@/components/passport' ...@@ -19,6 +19,7 @@ import Passport from '@/components/passport'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons')) const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study')) const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
const Video = loadable(() => import(/* webpackChunkName: 'video'*/'@/components/video')) const Video = loadable(() => import(/* webpackChunkName: 'video'*/'@/components/video'))
const sharePoster = loadable(() => import(/* webpackChunkName: 'shareposter'*/'@/components/sharePoster'))
export default [ export default [
{ {
...@@ -78,7 +79,8 @@ export default [ ...@@ -78,7 +79,8 @@ export default [
}, },
{ {
path: '/shopcart', path: '/shopcart',
component: ShopCart component: ShopCart,
isPrivate: true
}, },
{ {
path: '/bargain-middle-page', path: '/bargain-middle-page',
...@@ -92,4 +94,8 @@ export default [ ...@@ -92,4 +94,8 @@ export default [
path: '/play', path: '/play',
component: Video component: Video
}, },
{
path: '/shareposter',
component: sharePoster
},
] ]
\ No newline at end of file
src/utils/proxy-config.js
...@@ -25,6 +25,12 @@ const config = { ...@@ -25,6 +25,12 @@ const config = {
production: 'http://passport.julyedu.com', production: 'http://passport.julyedu.com',
proxy: {} proxy: {}
}, },
'pay-api':{
development: '/pay-api',
test: 'http://api-test.julyedu.com',
production: 'https://api.julyedu.com',
proxy: {}
}
} }
module.exports = config module.exports = config
\ 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