Commit c367fc34 by xuzhenghua

detail

parent 02660017
......@@ -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;
background: $bg_fff;
.public-content{
display: flex;
height: 100%;
// margin: 0px 15px;
padding: 10px 0;
.public-cover{
flex: 1 0 auto;
margin-right: 15px;
position: relative;
img{
width: 125px;
height: 90px;
border-radius: 3px;
}
}
}
.public-list-item {
background: $bg_fff;
.public-content {
display: flex;
height: 100%;
.public-cover {
flex: 1 0 auto;
margin-right: 15px;
position: relative;
width: 125px;
height: 90px;
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
}
.public-list-item:first-child{
margin-top: 0px;
.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;
}
.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%);
......
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
position: relative;
background-color: $white;
padding-top: 20px;
border-radius: 3px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
position: relative;
background-color: $white;
padding-top: 20px;
border-radius: 3px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
i {
font-size: 24px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.singleset-payment {
height: 305px;
margin: 140px auto 22px auto;
padding: 17px 20px;
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
.price-box {
padding-bottom: 15px;
border-bottom: 1px solid $sp_ddd;
i {
font-size: 24px;
span {
font-size: 12px;
color: $color_666;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
p {
height: 22px;
line-height: 22px;
color: $color_FF4000;
font-size: 22px;
text-align: center;
margin-top: 5px;
}
}
.singleset-payment {
height: 305px;
margin: 140px auto 22px auto;
padding: 17px 20px;
.course-info {
font-size: 14px;
.price-box {
padding-bottom: 15px;
border-bottom: 1px solid $sp_ddd;
p {
height: 14px;
line-height: 14px;
margin-top: 10px;
color: $color_333;
span {
font-size: 12px;
color: $color_666;
}
}
}
.payment-type {
margin-top: 20px;
p {
height: 22px;
line-height: 22px;
color: $color_FF4000;
label {
display: inline-block;
width: 100%;
border-bottom: 1px solid $sp_ddd;
color: $color_666;
font-size: 12px;
padding-bottom: 5px;
}
p {
height: 22px;
line-height: 22px;
margin-top: 10px;
position: relative;
.iconzhifubaox- {
font-size: 22px;
text-align: center;
margin-top: 5px;
color: #01aaef;
}
}
.course-info {
font-size: 14px;
.iconweixinzhifu {
font-size: 22px;
color: #3baf34;
}
p {
height: 14px;
line-height: 14px;
margin-top: 10px;
span {
display: inline-block;
margin-left: 10px;
color: $color_333;
span {
color: $color_666;
}
font-size: 14px;
vertical-align: text-bottom;
}
}
.payment-type {
margin-top: 20px;
.icondanseshixintubiao-5 {
position: absolute;
right: 0;
font-size: 24px;
}
label {
display: inline-block;
width: 100%;
border-bottom: 1px solid $sp_ddd;
color: $color_666;
font-size: 12px;
padding-bottom: 5px;
.redio {
color: $border_ccc;
}
p {
height: 22px;
line-height: 22px;
margin-top: 10px;
position: relative;
.iconzhifubaox- {
font-size: 22px;
color: #01aaef;
}
.iconweixinzhifu {
font-size: 22px;
color: #3baf34;
}
span {
display: inline-block;
margin-left: 10px;
color: $color_333;
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;
}
}
}
}
.zero {
height: 147px;
margin: 213px auto 22px auto;
text-align: center;
.header {
color: $active;
height: 24px;
line-height: 24px;
.zero {
height: 147px;
margin: 213px auto 22px auto;
text-align: center;
i {
font-size: 24px;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
i {
font-size: 24px;
}
.dec {
height: 14px;
line-height: 14px;
color: $color_666;
font-size: 14px;
margin-top: 15px;
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.payment-success {
height: 258px;
margin: 143px auto 22px auto;
padding: 20px 24px;
.dec {
height: 33px;
line-height: 20px;
color: $color_666;
font-size: 14px;
margin-top: 12px;
}
.dec {
height: 14px;
line-height: 14px;
color: $color_666;
font-size: 14px;
margin-top: 15px;
}
}
.payment-success {
height: 258px;
margin: 143px auto 22px auto;
padding: 20px 24px;
.dec {
height: 33px;
line-height: 20px;
color: $color_666;
font-size: 14px;
margin-top: 12px;
}
.btn-18B4ED {
bottom: 70px;
.btn-18B4ED {
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;
}
}
}
\ No newline at end of file
.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
......@@ -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,15 +34,13 @@ 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>
<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'
import ShopCart from './cartList.js'
//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() {
}
deleteAll() {
}
//装载组件
componentDidMount() {
this.getCartList()
// 删除
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);
}
})
}
}
])
}
}
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,18 +178,18 @@ class Cart extends Component {
<div>
<Checkbox onChange={(e) => {
this.allChange(e)
}} />
}}/>
<div>全选</div>
</div>
<div></div>
<div className={classnames({
'active': this.state.cartNmu > 0
})}
onClick={() => {
if (this.state.cartNmu > 0) {
this.delete()
}
}}>
})}
onClick={() => {
if (this.state.cartNmu > 0) {
this.delete()
}
}}>
删除<span>({this.state.cartNmu})</span>
</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,12 +214,12 @@ class Cart extends Component {
this.buy()
}
}}>
去结算<span>({this.state.checkedNum})</span>
结算<span> ( {this.state.checkedNum} ) </span>
</div>
</div>
}
</div>
</div>
)
......
......@@ -19,6 +19,7 @@ import Passport from '@/components/passport'
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 [
{
......@@ -78,7 +79,8 @@ export default [
},
{
path: '/shopcart',
component: ShopCart
component: ShopCart,
isPrivate: true
},
{
path: '/bargain-middle-page',
......@@ -92,4 +94,8 @@ export default [
path: '/play',
component: Video
},
{
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