Commit 99d545a8 by wangshuo

拉取最新分支

parents ffb989e8 c367fc34
......@@ -51,6 +51,7 @@
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1",
"qrcode": "^1.3.3",
"react": "^16.8.6",
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
......
......@@ -13,13 +13,13 @@ import './orderlist.scss';
*/
const OrderItem = ({ info, tab, children, ...restProps }) => {
const OrderItem = ({ info, tab, children, src, ...restProps }) => {
return (
<div className='public-list-item'>
<div className="public-content">
{tab}
<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>
{info}
</div>
......
.public-list-item{
margin-top: 5px;
.public-list-item {
background: $bg_fff;
.public-content{
.public-content {
display: flex;
height: 100%;
// margin: 0px 15px;
padding: 10px 0;
.public-cover{
.public-cover {
flex: 1 0 auto;
margin-right: 15px;
position: relative;
img{
width: 125px;
height: 90px;
img {
width: 100%;
height: 100%;
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;
}
}
}
}
}
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'
......@@ -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() {
return (
<div>
......@@ -22,8 +39,8 @@ class BtnStatus extends Component {
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-FCCD05'>加入购物车</button>
<button className='btn btn-s bg-FD7700'>立即报名</button>
<button className='btn btn-s bg-FCCD05' onClick={this.toCart}>加入购物车</button>
<Link to='/order' className='btn btn-s bg-FD7700'>立即报名</Link>
</div>
}
......
......@@ -65,6 +65,7 @@
font-size: 16px;
border: none;
padding: 8px 0;
text-align: center;
}
.btn-s {
......
......@@ -31,7 +31,7 @@ class Detail extends Component {
}
componentDidUpdate() {
console.log(this.props.courseInfo.course_info)
// console.log(this.props.courseInfo.course_info)
}
toApp = () => {
......@@ -138,7 +138,7 @@ class Detail extends Component {
{/*分享赚钱*/}
{
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}/>
}
{/*砍价*/}
......
import React, {Component} from 'react'
import './index.scss'
import {api, getParam, http} from "@/utils";
import {withRouter} from "react-router-dom";
class ShareRank extends Component {
constructor(props) {
super(props)
this.state = {
list: '',
rankingslice: ''
rankingslice: '',
code: ''
}
}
componentDidMount() {
// 获取排行榜
http.get(`${api.home}/dist/rankList/${getParam('id')}`).then((res) => {
if (res.data.code === 200) {
this.setState({
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 = () => {
this.props.boxHide(false)
}
render() {
let info = ''
if (this.props.data.course_info) {
info = this.props.data.course_info
}
return (
<div className='share-ranking'>
<span className="title">排行榜:</span>
<div className='ranking-box' onClick={this.props.openRanking}>
{
this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item,index)=>{
return(
this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item, index) => {
return (
<span key={index} className="ranking-mess">
<img src={item.head_imgurl} alt=""/>
<i>{item.amount}</i>
......@@ -46,7 +74,7 @@ class ShareRank extends Component {
<img className="ranking-ellipsis"
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
</div>
<button className="share">分享赚22</button>
<button className="share" onClick={this.share}>分享赚{info.dist_first_level_ti}</button>
{
this.props.shareRank &&
......@@ -58,8 +86,8 @@ class ShareRank extends Component {
</div>
<ul>
{
this.state.list && this.state.list.length > 0 && this.state.list.map((item,index)=>{
return(
this.state.list && this.state.list.length > 0 && this.state.list.map((item, index) => {
return (
<li key={index}>
<img src={item.head_imgurl} alt=""/>
<span className='course-title'>{item.user_name}</span>
......@@ -70,7 +98,7 @@ class ShareRank extends Component {
}
</ul>
<div className='shareBtn'>
<button>分享赚67</button>
<button onClick={this.share}>分享赚{info.dist_first_level_ti}</button>
</div>
</div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
......@@ -81,4 +109,4 @@ class ShareRank extends Component {
}
}
export default ShareRank;
export default withRouter(ShareRank);
......@@ -136,7 +136,7 @@
text-align: center;
button {
border: none;
width: 105px;
padding: 0 10px;
height: 24px;
margin-top: 10px;
background: linear-gradient(90deg, $bg_FF0000 0%, $bg_FF4000 100%);
......
......@@ -36,6 +36,7 @@
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
......@@ -135,17 +136,20 @@
font-size: 14px;
vertical-align: text-bottom;
}
.icondanseshixintubiao-5 {
position: absolute;
right: 0;
font-size: 24px;
}
.redioed {
color: #4cd964;
}
.redio {
color: $border_ccc;
}
.redioed {
color: #4cd964;
}
}
}
}
......@@ -197,4 +201,32 @@
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
.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
.cart-page{
.cart-page {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.cart-tip{
display: flex;
align-items:center;
justify-content: center;
min-height: 60px;
color:#555;
.cart-tip {
color: #555;
margin-top: 140px;
text-align: center;
.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;
margin-bottom: 50px;
display: flex;
background-color: $bg_f5f5f5;
overflow-y: auto;
position: relative;
.cart-main{
width:100%;
>.am-list-item{
.cart-main {
width: 100%;
> .am-list-item {
border-bottom: 1px solid #eee;
.am-list-line::after{
.am-list-line::after {
background-color: transparent;
}
}
>.am-list-item.am-list-item-active{
> .am-list-item.am-list-item-active {
background-color: transparent;
}
.cart-c-title{
.cart-c-title {
display: flex;
align-items: center;
justify-content: space-between;
>div{
flex:1;
> div {
flex: 1;
}
span{
font-size:14px;
margin-left:10px;
span {
font-size: 14px;
margin-left: 10px;
}
.next{
width:14px;
height:14px;
.next {
width: 14px;
height: 14px;
display: inline-block;
margin-left:10px;
margin-left: 10px;
}
i{
i {
font-style: inherit;
font-size:14px;
font-size: 14px;
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;
}
.am-list-line{
.am-list-line {
padding-right: 0px;
}
.am-list-content{
.am-list-content {
position: relative;
}
.cart-c-item{
.cart-c-item {
overflow: hidden;
position: relative;
margin: 8px 0;
padding-right: 10px;
box-sizing: border-box;
height: 120px;
padding: 15px 15px 15px 12px;
background-color: $white;
.cart-c-check{
width:40px;
.cart-c-check {
width: 30px;
float: left;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
box-sizing: border-box;
position: absolute;
}
}
.cart-ci-left{
.cart-ci-left {
position: absolute;
top: 0;
left: 40px;
......@@ -93,132 +122,155 @@
display: flex;
justify-content: center;
align-items: center;
img{
height:85px;
width:85px;
img {
height: 85px;
width: 85px;
display: block;
border:1px solid #eee;
border: 1px solid #eee;
}
}
.cart-ci-right{
min-height:87px;
margin-left:135px;
margin-right:8px;
.am-stepper-handler{
.cart-ci-right {
min-height: 87px;
margin-left: 135px;
margin-right: 8px;
.am-stepper-handler {
line-height: 28px;
font-size: 14px;
width: 26px;
height: 26px;
display:flex;
display: flex;
justify-content: center;
align-items: center;
}
.r-title{
font-size:15px;
white-space:normal;
font-weight:bold;
overflow : hidden;
.r-title {
font-size: 15px;
white-space: normal;
font-weight: bold;
overflow: hidden;
max-height: 46px;
span{
overflow : hidden;
span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
white-space:inherit;
white-space: inherit;
-webkit-line-clamp: 2;
}
}
.r-step{
.r-step {
display: flex;
justify-content: space-between;
.r-price{
color:#ff5b05;
font-size:14px;
line-height:30px;
span{
font-size:12px;
.r-price {
color: #ff5b05;
font-size: 14px;
line-height: 30px;
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;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
border-top:1px solid #eee;
background-color:rgba(255,255,255,.7);
height:50px;
.cart-label{
border-top: 1px solid #eee;
background-color: rgba(255, 255, 255, 1);
height: 50px;
.cart-label {
display: flex;
}
&>div:nth-child(1){
& > div:nth-child(1) {
text-align: center;
height: 50px;
line-height: 50px;
padding-left: 12px;
div{
div {
font-size: $font_16;
color: $color_333;
margin-left: 6px;
}
}
.all-pirce{
flex:1;
.all-pirce {
flex: 1;
margin-right: 20px;
display: flex;
align-items: center;
p{
margin:0;
padding:0;
p {
margin: 0;
padding: 0;
font-size: $font_16;
text-align: right;
width:100%;
span{
color: $color_333;
font-size: $font_16;
width: 100%;
span {
color: $color_666;
font-size: $font_14;
}
span:nth-child(2){
span:nth-child(2) {
color: $red;
}
}
}
&>div:nth-child(3){
& > div:nth-child(3) {
width: 100px;
line-height: 50px;
text-align: center;
font-size: $font_16;
background-color: $bg_ff3131;
color: $white;
span{
font-size: 10px;
font-weight:400;
span {
font-size: 16px;
font-weight: 400;
}
}
div.active{
div.active {
background-color: #ff5b05;
color:#fff;
color: #fff;
}
}
.am-navbar-light {
background-color: $bg_f7f9fc;
}
}
.shopcard-check{
.shopcard-check {
display: flex;
justify-items: center;
align-items: center;
padding-right: 12px;
}
.card-wrap{
margin-left: 40px;
}
......@@ -13,33 +13,19 @@ class CartItem extends Component {
}
// 改变选择
onChange(e, id) {
let checked = e.target.checked;
// console.log(checked,id)
let checked = e.target.checked
this.props.checkChange(id, checked)
}
// 修改购物车
editCart(it, val) {
}
// 删除购物车
delete(id) {
}
//跳转
goto(id) {
}
//render
render() {
let item = this.props.item
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-title text-overflow-one'>{item.course_title}</p>
<p className='order-content text-overflow-2'>{item.simpledescription}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
<span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
......@@ -48,14 +34,12 @@ class CartItem extends Component {
<div className="cart-c-item" >
<div className="cart-c-check">
<Checkbox checked={item.check} onChange={(e) => {
this.onChange(e, item.id)
this.onChange(e, item.course_id)
}} />
</div>
<div className="card-wrap">
<OrderList info={Info}></OrderList>
<div className="card-wrap">
<OrderList info={Info} src={item.image_name}></OrderList>
</div>
</div>
......
import React, { Component } from 'react'
import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import CartItem from './cartItem'
class ShopCard extends Component {
class cartList extends Component {
render() {
return (
<div className="cart-main">
{/* 遍历购物车商品列表 */}
<div className="cart-c-body">
{
this.props.data.length > 0 ?
this.props.data.map((item, i) => {
this.props.data.length < 0 ?
this.props.data.map((item, index) => {
return (
<CartItem
index={i}
index={index}
changeStock={(id, val) => {
this.props.changeStock(id, val)
}}
checkChange={(id, val) => {
this.props.checkChange(id, val)
}}
getCartList={() => {
this.props.getCartList()
}} key={i} item={item}/>
key={index} 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>
......@@ -33,4 +36,4 @@ class ShopCard extends Component {
}
}
export default ShopCard;
\ No newline at end of file
export default cartList;
\ No newline at end of file
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Checkbox, NavBar } from 'antd-mobile'
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Checkbox, NavBar, Modal, Toast} from 'antd-mobile'
//组件
import ShopCart from './cartList.js'
import Loading from '@common/Loading'
//css
import './card.scss'
import classnames from 'classnames'
import {api, http} from "@/utils";
const mockData = [
{
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
}
]
const alert = Modal.alert;
class Cart extends Component {
constructor(props) {
super(props)
this.state = {
data: [],
deleteAll: false,
loading: false,
checkedNum: 0,
allPrice: 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) {
let checked = e.target.checked
......@@ -75,12 +56,28 @@ class Cart extends Component {
data: 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) {
let newData = this.state.data.map((item, i) => {
if (item.id === id) {
if (item.course_id === id) {
return {
...item,
check: check
......@@ -93,7 +90,21 @@ class Cart extends Component {
data: 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) {
let allPrice = 0;
......@@ -104,7 +115,7 @@ class Cart extends Component {
i++;
cartNmu += 1;
checkedNum = i;
allPrice += parseFloat(item.newprice);
allPrice += parseFloat(item.price1);
}
})
this.setState({
......@@ -113,40 +124,53 @@ class Cart extends Component {
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() {
return (
<div className="cart-page" style={{ overflow: 'hidden' }}>
<div className="cart-page" style={{overflow: 'hidden'}}>
<NavBar
style={{ "height": "44px" }}
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i style={{"fontSize": '24px'}} className="iconfont iconiconfront-68"></i>}
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>
<div className="cart-body">
{
this.state.loading ?
<Loading />
:
<ShopCart getCartList={this.getCartList} changeStock={this.changeStock} checkChange={this.checkChange} data={this.state.data}/>
}
<ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
{
this.state.deleteAll ?
......@@ -154,7 +178,7 @@ class Cart extends Component {
<div>
<Checkbox onChange={(e) => {
this.allChange(e)
}} />
}}/>
<div>全选</div>
</div>
<div></div>
......@@ -174,7 +198,7 @@ class Cart extends Component {
<div className="cart-label">
<Checkbox onChange={(e) => {
this.allChange(e)
}} />
}}/>
<div>全选</div>
</div>
<div className="all-pirce">
......@@ -190,7 +214,7 @@ class Cart extends Component {
this.buy()
}
}}>
去结算<span>({this.state.checkedNum})</span>
结算<span> ( {this.state.checkedNum} ) </span>
</div>
</div>
}
......
......@@ -21,6 +21,7 @@ import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
const Video = loadable(() => import(/* webpackChunkName: 'video'*/'@/components/video'))
const sharePoster = loadable(() => import(/* webpackChunkName: 'shareposter'*/'@/components/sharePoster'))
export default [
{
......@@ -80,7 +81,8 @@ export default [
},
{
path: '/shopcart',
component: ShopCart
component: ShopCart,
isPrivate: true
},
{
path: '/bargain-middle-page',
......@@ -102,4 +104,8 @@ export default [
path: '/document',
component: DrawDocument
},
{
path: '/shareposter',
component: sharePoster
},
]
\ No newline at end of file
......@@ -25,6 +25,12 @@ const config = {
production: 'http://passport.julyedu.com',
proxy: {}
},
'pay-api':{
development: '/pay-api',
test: 'http://api-test.julyedu.com',
production: 'https://api.julyedu.com',
proxy: {}
}
}
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