Skip to content

M
mr-julyedu
Commit 6e0d7efc by xuzhenghua
Options

kanjia

parent 737a0fc0
Showing with 847 additions and 170 deletions
src/common/Course/index.js
...@@ -8,7 +8,7 @@ const Course = (props) => { ...@@ -8,7 +8,7 @@ const Course = (props) => {
{props.top} {props.top}
<Link to={`/detail?id=${props.id}`}> <Link to={`/detail?id=${props.id}`}>
<img src={props.img} alt=""/> <img src={props.img} alt=""/>
<p className="course-title">{props.title}</p> <p className={`course-title ${props.className}`}>{props.title}</p>
</Link> </Link>
{props.bottom} {props.bottom}
</li> </li>
......
src/components/bargainMiddlePage/bargain-middle-page.scss
...@@ -46,10 +46,20 @@ ...@@ -46,10 +46,20 @@
.bargain-area { .bargain-area {
width: 355px; width: 355px;
height: 247px;
background: $white; background: $white;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 20px;
.bargain-tip {
width: 100%;
height: 45px;
line-height: 45px;
padding-left: 10px;
border-bottom: 1px solid $sp_e7eaf1;
color: $redprice;
font-size: 14px;
}
.des { .des {
display: flex; display: flex;
...@@ -133,7 +143,6 @@ ...@@ -133,7 +143,6 @@
top: 0; top: 0;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
width: 10%;
background: $bg_FADD29; background: $bg_FADD29;
} }
} }
...@@ -159,9 +168,10 @@ ...@@ -159,9 +168,10 @@
-webkit-appearance: none; -webkit-appearance: none;
} }
.invalid-btn{ .invalid-btn {
background: $bg_999; background: $bg_999;
color: $white; color: $white;
font-size: 16px;
box-shadow: none; box-shadow: none;
} }
} }
...@@ -199,7 +209,7 @@ ...@@ -199,7 +209,7 @@
align-items: center; align-items: center;
} }
img { .avatar {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
...@@ -209,6 +219,10 @@ ...@@ -209,6 +219,10 @@
.nickname { .nickname {
margin-right: 10px; margin-right: 10px;
font-size: $font_14; font-size: $font_14;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
} }
.rank-tag { .rank-tag {
...@@ -217,6 +231,7 @@ ...@@ -217,6 +231,7 @@
color: $white; color: $white;
font-size: $font_12; font-size: $font_12;
flex: 0 0 auto; flex: 0 0 auto;
border-radius: 2px;
} }
} }
} }
...@@ -257,12 +272,11 @@ ...@@ -257,12 +272,11 @@
} }
.course-title { .course-title {
margin-bottom: 20px; margin-bottom: 10px;
min-height: 38px;
} }
.course-price { .course-price {
display: flex;
justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -302,14 +316,26 @@ ...@@ -302,14 +316,26 @@
border-radius: 2px; border-radius: 2px;
border: none; border: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
} }
} }
.more { .preferential {
display: inline-block;
width: 100%;
height: 46px;
line-height: 46px;
font-size: $font_16; font-size: $font_16;
color: $color_555; color: $color_555;
text-align: center; text-align: center;
line-height: 46px;
} }
.kanjia-icon {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
} }
\ No newline at end of file
src/components/bargainMiddlePage/index.js
import React, { Component } from 'react'; import React, {Component} from 'react'
import './bargain-middle-page.scss' import './bargain-middle-page.scss'
import classnames from 'classnames' import classnames from 'classnames'
import {HeaderBar, VList} from '@common'
import {Course} from '@common'
import {api, getParam, http} from "@/utils"
import {Toast} from "antd-mobile"
import {Link} from "react-router-dom"
import Ranking from './ranking'
import { VList } from '@common'; class BargainMiddlePage extends Component {
import { Course } from '@common'
const mockData = [ constructor(props) {
{ super(props)
avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556539478374&di=4e2a450acebb612cbdd41ca58004a388&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F23%2F20150623212158_kvzwi.jpeg', this.state = {
nickname: '阿拉克斯007', kanjiaIcon: require('./image/kanjia_icon.png'),
rank: '刀神', courseList: '', // 所有砍价课程
reduced: '25.3元' data: '',
}, bargainData: '',
{ limitPeople: 0,
avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556539478374&di=4e2a450acebb612cbdd41ca58004a388&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F23%2F20150623212158_kvzwi.jpeg', outList: [],
nickname: '阿拉克斯007', list: [],
rank: '刀神', width: '0',
reduced: '25.3元' isShowMore: ''
}, }
{ }
avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556539478374&di=4e2a450acebb612cbdd41ca58004a388&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F23%2F20150623212158_kvzwi.jpeg',
nickname: '阿拉克斯007', componentDidMount() {
rank: '刀神', this.getBargainRankList('144', 1)
reduced: '25.3元' this.getBargainCourse()
}, this.getBargainInfo()
] }
const courseList = [
{
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
title: 'CV就业班 第一期',
original: '1900',
discount: '1299',
isBargainEnd: false,
resultPrice: 99,
status: 0,
},
{
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
title: 'CV就业班 第一期',
original: '1900',
discount: '1299',
isBargainEnd: false,
resultPrice: 99,
status: 1,
isComplete: false
},
{
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
title: 'CV就业班 第一期',
original: '1900',
discount: '1299',
isBargainEnd: false,
resultPrice: 99,
status: 0,
},
{
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
title: 'CV就业班 第一期',
original: '1900',
discount: '1299',
isBargainEnd: false,
resultPrice: 99,
status: 1,
isComplete: true
},
{
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
title: 'CV就业班 第一期',
original: '1900',
discount: '1299',
isBargainEnd: false,
resultPrice: 99,
status: 0,
},
{
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
title: 'CV就业班 第一期',
original: '1900',
discount: '1299',
isBargainEnd: false,
resultPrice: 99,
status: 0,
},
]
// 获取砍价信息
getBargainInfo = () => {
http.get(`${api.home}/m/bargain/info?bargaincode=3133332c343739343131&is_originator=1`).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data,
limitPeople: res.data.data.course.limit_people,
bargainData: res.data.data.bargain,
width: (res.data.data.bargain.bargain_price / res.data.data.bargain.total_price).toFixed(2) * 100 + '%'
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取砍价课程
getBargainCourse = () => {
http.get(`${api.home}/m/bargain/courseList`).then((res) => {
if (res.data.code === 200) {
this.setState({
courseList: res.data.data
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取助理好友
getBargainRankList = (id, type) => {
let data = {
courseId: id,
type: type
}
http.post(`${api.home}/m/bargain/rankList`, data).then((res) => {
if (res.data.code === 200) {
let arr = ['刀神', '刀王', '刀霸']
let newList = res.data.data.out_list.map((item, i) => {
return {
...item,
rank: arr[i]
}
})
this.setState({
list: res.data.data.list,
outList: newList
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 加入购物车
toCart = (id) => {
let data = {
course_id: id
}
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200 || res.data.code === 15001) {
this.props.history.push('/shopcart')
} else {
Toast.info(res.data.msg, 2);
}
})
}
// 查看更多
getMore = () => {
this.setState({
isShowMore: true
})
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({isShowMore: val})
}
class BargainMiddlePage extends Component {
render() { render() {
return ( return (
<div className={'bargain-middle-page'}> <div className={'bargain-middle-page'}>
<HeaderBar title='砍价详情' arrow={true} cart={true}></HeaderBar>
<div className="top"> <div className="top">
<div className="bargain-area"> <div className="bargain-area">
<p className='bargain-tip'>你的好友发现一门精品课程，快来一起帮他砍价：</p>
<ul> <ul>
<VList <VList
info={<CourseDes/>} info={<CourseDes data={this.state.data}/>}
/> />
</ul> </ul>
<div className="bargain-detail"> <div className="bargain-detail">
<div className="top"> <div className="top">
<div> <div>
已砍<span className={'reduced-price'}>56.7元</span> 已砍<span className={'reduced-price'}>{this.state.bargainData.bargain_price}元</span>
</div> </div>
<div> <div>
<span className={'time hour'}>23</span>: {/*<span className={'time hour'}>23</span>:*/}
<span className={'time min'}>59</span>: {/*<span className={'time min'}>59</span>:*/}
<span className={'time sec'}>02</span> {/*<span className={'time sec'}>02</span>*/}
{this.state.bargainData.expire_time}
<span className={'inactive'}>后砍价结束</span> <span className={'inactive'}>后砍价结束</span>
</div> </div>
</div> </div>
<div className="middle"> <div className="middle">
<span/> <span style={{width: this.state.width}}></span>
</div> </div>
<div className="bottom"> <div className="bottom">
再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span 再邀请<span className={'indicator'}>{this.state.bargainData.invite_num}</span>位好友助力即可获得
className={'indicator'}>【砍价神器】</span> <span className={'indicator'}>【砍价神器】</span>
</div> </div>
<div className={'button'}> <div className={'button'}>
<button className={'invalid-btn'}>邀请好友砍价</button> <button className={'invalid-btn'}>邀请好友砍价</button>
...@@ -126,16 +152,17 @@ class BargainMiddlePage extends Component { ...@@ -126,16 +152,17 @@ class BargainMiddlePage extends Component {
<div className="title">砍价记录</div> <div className="title">砍价记录</div>
<ul> <ul>
{ {
mockData.map((item, index) => { this.state.outList && this.state.outList.length > 0 && this.state.outList.map((item, index) => {
return ( return (
<li key={index}> <li key={index}>
<div className="left"> <div className="left">
<img src={item.avatar} alt=""/> <img className='avatar' src={item.avatar_file} alt=""/>
<span className={'nickname'}>{item.nickname}</span> <span className={'nickname'}>{item.user_name}</span>
<span className="rank-tag">{item.rank}</span> <span className="rank-tag">{item.rank}</span>
</div> </div>
<div className="right"> <div className="right">
砍掉<span className={'price'}>{item.reduced}</span> <img className='kanjia-icon' src={this.state.kanjiaIcon} alt=""/>
砍掉<span className={'price'}>{item.amount}</span>
</div> </div>
</li> </li>
) )
...@@ -144,72 +171,87 @@ class BargainMiddlePage extends Component { ...@@ -144,72 +171,87 @@ class BargainMiddlePage extends Component {
} }
</ul> </ul>
<div className="more">查看更多>></div> <div className="more" onClick={this.getMore}>查看更多>></div>
</div> </div>
</div> </div>
<div className="bargain-course-list"> <div className="bargain-course-list">
<div className="title-wrapper"> <div className="title-wrapper">
<div className="title">我要砍价</div> <div className="title">我要砍价</div>
<div className="subtitle">邀请20位以上好友帮忙砍价可获得【砍价神器】</div> <div className="subtitle">邀请{this.state.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</div>
</div> </div>
<ul> <ul>
{ {
courseList.map((item, index) => { this.state.courseList && this.state.courseList.length > 0 && this.state.courseList.map((item, index) => {
return <Course return <Course
data={item} className={'text-overflow-2'}
bottom={
<CourseBottom item={item}/>
}
key={index} key={index}
id={item.course_id}
img={item.image_name}
title={item.course_title}
bottom={<CourseBottom
item={item}
toCart={this.toCart}
/>
}
/> />
}) })
} }
</ul> </ul>
</div> </div>
<p className={'more'}>查看更多精品课程 >></p> <Link to={'/preferential'} className={'preferential'}>查看更多精品课程 >></Link>
{/*更多好友砍价*/}
<Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople} isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>
</div> </div>
); );
} }
} }
function CourseDes() { function CourseDes(props) {
const data = props.data && props.data.course
return ( return (
<div className={'des'}> <div className={'des'}>
<div className="course-title"> <div className="course-title text-overflow-2">
九月机器学习算法【涵盖ML主流算法及其应用 {data.course_title}
</div> </div>
<div className="price-bar"> <div className="price-bar">
<span className={'discount-price'}>￥980</span> <span className={'discount-price'}>￥{data.pay_price}</span>
<span className={'original-price'}>￥1280</span> <span className={'original-price'}>￥{data.course_price}</span>
<button className={'purchase-btn'}>¥99去支付</button> <button className={'purchase-btn'}>¥{data.pay_price}去支付</button>
</div> </div>
</div> </div>
) )
} }
function CourseBottom({item}) { function CourseBottom(props) {
let Buttons let Buttons
if (item.status === 0) { if (props.item.bargain_status === 0) {
Buttons = <button className={'bargain'}>我要砍价</button> Buttons = <button className={'bargain'}>我要砍价</button>
} else if (props.item.bargain_status === 3) {
Buttons = <button className={'bargain'}>去学习</button>
} else { } else {
Buttons = ( Buttons = (
<div className="btns"> <div className="btns">
<button className={classnames('bargain-btn', { <button className={classnames('bargain-btn', {
invalid: item.isComplete invalid: props.item.bargain_status === 2
})}>{item.isComplete ? '砍价结束' : '继续砍价'}</button> })}>{props.item.bargain_status === 2 ? '砍价结束' : '继续砍价'}</button>
<button className={'purchase-btn'}>¥{item.resultPrice}去支付</button> <button onClick={event => props.toCart(props.item.course_id)}
className={'purchase-btn'}>¥{props.item.pay_price}去支付
</button>
</div> </div>
) )
} }
return ( return (
<div className="course-bottom"> <div className="course-bottom">
<div className={'course-price'}> <div className={'course-price'}>
<span className={'discount-price'}>¥{item.discount}</span> <span className={'discount-price'}>¥{props.item.price1}</span>
<span className={'original-price'}>¥{item.original}</span> <span className={'original-price'}>¥{props.item.price0}</span>
</div> </div>
{Buttons} {Buttons}
</div> </div>
) )
} }
export default BargainMiddlePage; export default BargainMiddlePage
\ No newline at end of file \ No newline at end of file
src/components/bargainMiddlePage/ranking/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
class Ranking extends Component {
constructor(props) {
super(props)
this.state = {
kanjiaIcon: require('../image/kanjia_icon.png')
}
}
// 关闭更多窗口
closeMore = () => {
this.props.boxHide(false);
}
render() {
return (
<div className={'ranking-box'}>
{
this.props.isShowMore &&
<MoreList list={this.props.list} limitPeople={this.props.limitPeople} closeMore={this.closeMore}
img={this.props.icon}/>
}
</div>
);
}
}
function MoreList(props) {
return (
<div className="moreMbc">
<div className="content">
<div className="title-box">
好友助力详情
</div>
<ul className='more-bargain-list'>
{
props.list && props.list.length > 0 && props.list.map((item, index) => {
return (
<li key={index} className='bargain-item'>
<img className='avatar' src={item.avatar_file} alt=""/>
<p className='name'>{item.user_name}</p>
<p className='bargain-status'>
<img className='kanjia-icon' src={props.img} alt=""/>
砍掉<span className={'price'}>{item.amount}</span>
</p>
</li>
)
})
}
</ul>
<div className='more-bargain-dec'>
超过{props.limitPeople}位好友助力可获得【砍价神器】
</div>
</div>
<i onClick={props.closeMore} className={'iconfont iconiconfront-2 close'}></i>
</div>
)
}
export default Ranking
\ No newline at end of file
src/components/bargainMiddlePage/ranking/index.scss 0 → 100644
.ranking-box {
.moreMbc {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
height: 340px;
background-color: $white;
border-radius: 3px;
margin: 130px auto 20px auto;
position: relative;
.title-box {
width: 100%;
height: 45px;
text-align: center;
color: $color_202426;
font-size: 16px;
line-height: 45px;
}
.more-bargain-list {
width: 100%;
height: 253px;
overflow: auto;
border-top: 1px solid $sp_e7eaf1;
padding: 0 15px;
background-color: $bg_f5f5f5;
.bargain-item {
border-bottom: 1px solid $sp_e7eaf1;
height: 50px;
display: flex;
position: relative;
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 10px;
margin-right: 10px;
}
.name {
font-size: 14px;
color: $color_333;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 50px;
}
.bargain-status {
line-height: 50px;
color: $color_333;
font-size: 14px;
position: absolute;
right: 0;
}
}
}
}
.more-bargain-dec {
width: 100%;
position: absolute;
bottom: 0;
height: 42px;
font-size: 12px;
color: $color_FF4000;
text-align: center;
line-height: 42px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
}
.kanjia-icon {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
}
\ No newline at end of file
src/components/detail/bargain/bargain.scss
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
.intro-inner { .intro-inner {
width: 341px; width: 341px;
height: 114px; height: 118px;
padding-top: 15px; padding-top: 15px;
background: $bg_FFF8EB; background: $bg_FFF8EB;
border: 1px solid $color_FE2F2F; border: 1px solid $color_FE2F2F;
...@@ -67,13 +67,25 @@ ...@@ -67,13 +67,25 @@
.status-outer { .status-outer {
width: 360px; width: 360px;
height: 134px; padding: 5px;
background: $bg_FE2F2F; background: $bg_FE2F2F;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.status-over {
height: 99px !important;
.time-tobuy {
color: $color_FF4000;
font-size: 12px;
text-align: center;
line-height: 48px;
}
}
.status-inner { .status-inner {
width: 350px; width: 350px;
height: 124px; height: 124px;
...@@ -83,10 +95,22 @@ ...@@ -83,10 +95,22 @@
.first-row { .first-row {
@include row-common; @include row-common;
padding: 10px 0; padding: 13px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.bargain-over {
display: inline-block;
margin-left: 10px;
padding: 0 4px;
height: 18px;
line-height: 18px;
background-color: $bg_666;
border-radius: 2px;
font-size: 12px;
color: $white;
}
.time { .time {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
...@@ -138,6 +162,15 @@ ...@@ -138,6 +162,15 @@
font-size: $font_12; font-size: $font_12;
color: $redprice; color: $redprice;
} }
.name {
font-size: 14px;
color: $color_333;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
.third-row { .third-row {
...@@ -160,19 +193,24 @@ ...@@ -160,19 +193,24 @@
} }
} }
.bargain-success { .overlay .bargain-close {
display: flex; color: #fff;
flex-flow: column; font-size: 22px;
position: absolute; position: relative;
top: 100px;
left: 50%; left: 50%;
transform: translateX(-50%); margin-left: -11px;
}
.bargain-success {
width: 290px; width: 290px;
height: 109px; height: 109px;
padding: 15px 33px; padding: 15px 33px;
background: $white; background: $white;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
margin: 100px auto 20px auto;
.title { .title {
font-size: $font_16; font-size: $font_16;
...@@ -191,4 +229,172 @@ ...@@ -191,4 +229,172 @@
.indicator { .indicator {
color: $color_FE2F2F; color: $color_FE2F2F;
} }
.moreMbc {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
.content {
width: 300px;
height: 340px;
background-color: $white;
border-radius: 3px;
margin: 130px auto 20px auto;
position: relative;
.title-box {
width: 100%;
height: 45px;
text-align: center;
color: $color_202426;
font-size: 16px;
line-height: 45px;
}
.more-bargain-list {
width: 100%;
height: 253px;
overflow: auto;
border-top: 1px solid $sp_e7eaf1;
padding: 0 15px;
background-color: $bg_f5f5f5;
.bargain-item {
border-bottom: 1px solid $sp_e7eaf1;
height: 50px;
display: flex;
position: relative;
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 10px;
margin-right: 10px;
}
.name {
font-size: 14px;
color: $color_333;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 50px;
}
.bargain-status {
line-height: 50px;
color: $color_333;
font-size: 14px;
position: absolute;
right: 0;
}
}
}
}
.more-bargain-dec {
width: 100%;
position: absolute;
bottom: 0;
height: 42px;
font-size: 12px;
color: $color_FF4000;
text-align: center;
line-height: 42px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
}
}
.artifact-box, .use-artifact-box {
padding: 20px 0;
background-color: $bg_fff;
border-radius: 3px;
text-align: center;
margin: 200px auto 20px auto;
.top-tip {
font-size: 16px;
color: $color_333;
height: 16px;
line-height: 16px;
}
.middle-tip {
font-size: 14px;
color: $color_333;
height: 14px;
line-height: 14px;
margin-top: 15px;
}
.btm-tip {
font-size: 14px;
color: $color_666;
height: 14px;
line-height: 14px;
margin-top: 10px;
}
.use-artifact {
background-color: $bg_fff;
width: 84px;
height: 24px;
font-size: 14px;
border: 1px solid $redprice;
border-radius: 12px;
margin: 20px auto 0 auto;
color: $redprice;
}
.tubuy {
display: inline-block;
margin-top: 17px;
width: 81px;
height: 24px;
background-color: $redprice;
border-radius: 12px;
font-size: 16px;
color: $white;
border: none;
}
.indicator {
color: $color_FE2F2F;
}
}
.artifact-box {
width: 300px;
height: 130px;
}
.use-artifact-box {
width: 300px;
height: 148px;
.middle-tip {
color: $color_666;
}
} }
\ No newline at end of file
src/components/detail/bargain/bargainInfo/index.js
...@@ -20,4 +20,4 @@ const BargainInfo = () => { ...@@ -20,4 +20,4 @@ const BargainInfo = () => {
); );
}; };
export default BargainInfo; export default BargainInfo
\ No newline at end of file \ No newline at end of file
src/components/detail/bargain/index.js
import React, { Component } from 'react'; import React, {Component} from 'react'
import './bargain.scss' import './bargain.scss'
import { Flex } from "antd-mobile"; import {Flex, Toast} from "antd-mobile"
import Overlay from '../overlay' import Overlay from '../overlay'
import BargainInfo from './bargainInfo' import BargainInfo from './bargainInfo'
import {Link} from "react-router-dom"
import {api, getParam, http} from "@/utils"
import Ranking from "@/components/bargainMiddlePage/ranking"
class Bargain extends Component { class Bargain extends Component {
state = { constructor(props) {
showCover: false super(props)
this.state = {
isShowOverlay: false,
kanjiaIcon: require('./image/kanjia_icon.png'),
info: '',
outList: [],
list: [],
limitPeople: '',
status: '',
}
}
componentDidMount() {
this.getBargainInfo()
this.getBargainRankList('144', 1)
}
// 获取助理好友
getBargainRankList = (id, type) => {
let data = {
courseId: id,
type: type
}
http.post(`${api.home}/m/bargain/rankList`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
list: res.data.data.list,
outList: res.data.data.out_list[0]
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
//获取砍价信息
getBargainInfo = () => {
let data = {
courseId: getParam('id')
}
http.post(`${api.home}/m/bargain/courseDetail`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
info: res.data.data,
limitPeople: res.data.data.limit_people
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 查看更多
getMore = () => {
this.setState({
isShowMore: true
})
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({isShowMore: val})
}
// 领取砍价神器
toArtifact = () => {
this.setState({
isShowOverlay: true,
status: 1,
})
}
// 使用砍价神器
useArtifact = () => {
this.setState({
isShowOverlay: true,
status: 2,
})
}
// 加入购物车
toCart = () => {
let data = {
course_id: getParam('id')
} }
toggleCover = () => { http.post(`${api.home}/m/cart/add`, data).then((res) => {
this.setState({showCover: !this.state.showCover}); if (res.data.code === 200 || res.data.code === 15001) {
this.props.history.push('/shopcart')
} else {
Toast.info(res.data.msg, 2);
}
})
}
// 我要砍价
iWantBargain = () => {
// 判断用户是否绑定了手机号
// this.props.history.push(`/bargain-middle-page?id=${getParam('id')}`)
this.setState({
isShowOverlay: true,
status: 0,
})
}
// 关闭弹窗
close = () => {
this.setState({
isShowOverlay: false,
status: '',
})
} }
render() { render() {
return ( return (
<div className={'bargain-func'}> <div className={'bargain-func'}>
<BargainIntro
onClick={this.toggleCover} {
this.state.info.bargain_status === 2 &&
<BargainIntro limitPeople={this.state.limitPeople} iWantBargain={this.iWantBargain}/>
}
{
this.state.info.bargain_status === 0 &&
<BargainStatus
info={this.state.info}
outList={this.state.outList}
getMore={this.getMore}
toArtifact={this.toArtifact}
useArtifact={this.useArtifact}
/> />
}
{ {
this.state.showCover && this.state.isShowOverlay &&
<Overlay> <Overlay>
{/*绑定手机号*/}
{
this.state.status === 3 &&
<BargainInfo />
}
{/*砍价成功去分享*/}
{
this.state.status === 0 &&
<BargainSuccess/> <BargainSuccess/>
}
{/*领取砍价神器*/}
{
this.state.status === 1 &&
<Artifact toArtifact={this.toArtifact}/>
}
{/*使用砍价神器*/}
{
this.state.status === 2 &&
<UseArtifact useArtifact={this.useArtifact} toCart={this.toCart}/>
}
{
this.state.status !== 0 &&
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
}
</Overlay> </Overlay>
} }
{/*更多好友砍价*/}
<Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople}
isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>
</div> </div>
); )
} }
} }
function BargainIntro({onClick}) { function BargainIntro(props) {
return ( return (
<div className="intro-outer"> <div className="intro-outer">
<div className="intro-inner"> <div className="intro-inner">
<Flex direction={'column'} justify={'center'} className={'intro-wrapper'}> <Flex direction={'column'} justify={'center'} className={'intro-wrapper'}>
<p> <p>
邀请 邀请
<span className={'indicator'}>20位</span> <span className={'indicator'}>{props.limitPeople}位</span>
好友帮忙砍价可获得 好友帮忙砍价可获得
<span className={'indicator'}>【砍价神器】</span> <span className={'indicator'}>【砍价神器】</span>
</p> </p>
<p>一刀绝杀，砍爆底价</p> <p>一刀绝杀，砍爆底价</p>
<Flex.Item> <Flex.Item>
<button onClick={onClick}>我要砍价</button> <button onClick={props.iWantBargain}>我要砍价</button>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
</div> </div>
...@@ -50,43 +213,79 @@ function BargainIntro({onClick}) { ...@@ -50,43 +213,79 @@ function BargainIntro({onClick}) {
) )
} }
function BargainStatus() { function BargainStatus(props) {
let thirdRow, btn
// is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
if (props.info.is_artifact === 0) {
thirdRow =
<div>再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span className={'indicator'}>【砍价神器】</span></div>
} else if (props.info.is_artifact === 1) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button onClick={props.toArtifact}>立即领取</button>
} else if (props.info.is_artifact === 2) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button onClick={props.useArtifact}>立即使用</button>
}
return ( return (
<div className="status-outer"> <div className="status-outer">
{
props.info.bargain_status === 0 &&
<div className="status-inner"> <div className="status-inner">
<Flex direction={'column'}> <Flex direction={'column'}>
<div className={'first-row'}> <div className={'first-row'}>
<div> <div>
已砍<span className={'indicator'}>59元</span> 已砍<span className={'indicator'}>{props.info.bargain_price}元</span>
<span className={'time hour'}>23</span>: {/*<span className={'time hour'}>23</span>:*/}
<span className={'time min'}>59</span>: {/*<span className={'time min'}>59</span>:*/}
<span className={'time sec'}>02</span> {/*<span className={'time sec'}>02</span>*/}
{props.info.end_time}
后砍价结束 后砍价结束
</div> </div>
<div>15位好友助力></div> <div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
</div> </div>
<div className="sec-row"> <div className="sec-row">
<div> <div>
<img <img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556513873959&di=dde8198548f6157add517042e0225748&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F00%2F1533140084-jtaHBPSIOh.jpg" src={props.outList.avatar_file}
alt=""/> alt=""/>
<span>机器学习集训营</span> <span className='name'>{props.outList.user_name}</span>
</div> </div>
<div> <div>
<div>砍掉<span className={'indicator'}>25.3元</span></div> <div>砍掉<span className={'indicator'}>{props.outList.amount}元</span></div>
<button>继续砍价</button> <button>继续砍价</button>
</div> </div>
</div> </div>
<div className="third-row"> <div className="third-row">
<div> {thirdRow}
再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span {btn}
className={'indicator'}>【砍价神器】</span>
</div> </div>
</Flex>
</div>
}
{
props.info.bargain_status === 1 &&
<div className="status-inner status-over">
{/*<button>立即领取</button>*/} <Flex direction={'column'}>
<div className={'first-row'}>
<div>
已砍<span className={'indicator'}>{props.info.bargain_price}元</span>
<span className='bargain-over'>
砍价结束
</span>
</div>
<div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
</div>
<div className="time-tobuy">
砍价金额将于后清零，请尽快完成支付
</div> </div>
</Flex> </Flex>
</div> </div>
}
</div> </div>
) )
} }
...@@ -108,5 +307,39 @@ function BargainSuccess() { ...@@ -108,5 +307,39 @@ function BargainSuccess() {
) )
} }
{/*领取砍价神器*/
}
function Artifact(props) {
return (
<div className='artifact-box'>
<p className='top-tip'>恭喜你获得【砍价神器】！</p>
<p className='middle-tip'>
您可以使用
<span className={'indicator'}>【砍价神器】</span>
再砍一刀
</p>
<button className='use-artifact' onClick={props.useArtifact}>立即使用</button>
</div>
)
}
function UseArtifact(props) {
return (
<div className='use-artifact-box'>
<p className='top-tip'>厉害了，又砍掉了10元！</p>
<p className='middle-tip'>
你已经砍了
<span className={'indicator'}>109元</span>
没见过你这么能砍的人...
</p>
<p className='btm-tip'>
不能再砍了哦~
</p>
<button className='tubuy' onClick={props.toCart}>去支付</button>
</div>
)
}
export default Bargain; export default Bargain
\ No newline at end of file \ No newline at end of file
src/components/detail/index.js
...@@ -53,8 +53,6 @@ class Detail extends Component { ...@@ -53,8 +53,6 @@ class Detail extends Component {
} }
// 自组件传给父组件的boxHide // 自组件传给父组件的boxHide
boxHide = (val) => { boxHide = (val) => {
this.setState({auditionBox: val, singleBox: val}) this.setState({auditionBox: val, singleBox: val})
...@@ -145,7 +143,10 @@ class Detail extends Component { ...@@ -145,7 +143,10 @@ class Detail extends Component {
{/*砍价*/} {/*砍价*/}
{
this.props.courseInfo && this.props.courseInfo.is_bargain &&
<Bargain/> <Bargain/>
}
{/*课程介绍、大纲*/} {/*课程介绍、大纲*/}
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/> <OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
......
src/components/detail/single/index.js
...@@ -294,4 +294,4 @@ class Single extends Component { ...@@ -294,4 +294,4 @@ class Single extends Component {
} }
export default Single; export default Single
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