Skip to content

M
mr-julyedu
Commit 6e0d7efc by xuzhenghua
Options

kanjia

parent 737a0fc0
Showing with 1281 additions and 604 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
.bargain-middle-page { .bargain-middle-page {
background: $bg_f4f4f4; background: $bg_f4f4f4;
padding-bottom: 50px; padding-bottom: 50px;
.indicator { .indicator {
color: $color_FE2F2F; color: $color_FE2F2F;
} }
.price { .price {
color: $redprice; color: $redprice;
} }
.discount-price { .discount-price {
color: $redprice; color: $redprice;
font-size: $font_16; font-size: $font_16;
margin-right: 14px; margin-right: 14px;
}
.original-price {
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
& > .top {
width: 100%;
padding: 10px;
background: $bg_FE2F2F;
margin-bottom: 18px;
.purchase-btn {
position: absolute;
right: 0;
bottom: 2px;
height: 22px;
padding: 3px 4px;
color: $white;
font-size: $font_12;
border: none;
border-radius: 11px;
background: $bg_ff3131;
-webkit-appearance: none;
} }
.original-price {
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
.bargain-area {
width: 355px;
background: $white;
border-radius: 3px;
margin-bottom: 10px;
padding-bottom: 20px;
& > .top { .bargain-tip {
width: 100%; width: 100%;
padding: 10px; height: 45px;
background: $bg_FE2F2F; line-height: 45px;
margin-bottom: 18px; padding-left: 10px;
border-bottom: 1px solid $sp_e7eaf1;
color: $redprice;
font-size: 14px;
}
.des {
display: flex;
flex-flow: column;
justify-content: space-between;
}
.v-list-item {
padding-right: 7px;
margin-bottom: 7px;
margin-top: 0;
.cover {
margin-right: 10px;
}
.purchase-btn { .content {
position: absolute; border-bottom: 1px solid $border_e7eaf1;
right: 0;
bottom: 2px;
height: 22px;
padding: 3px 4px;
color: $white;
font-size: $font_12;
border: none;
border-radius: 11px;
background: $bg_ff3131;
-webkit-appearance: none;
} }
}
.course-title {
font-size: $font_14;
}
.bargain-area { .price-bar {
width: 355px; position: relative;
height: 247px; }
background: $white;
border-radius: 3px;
margin-bottom: 10px;
.des {
display: flex;
flex-flow: column;
justify-content: space-between;
}
.v-list-item {
padding-right: 7px;
margin-bottom: 7px;
margin-top: 0;
.cover {
margin-right: 10px;
}
.content {
border-bottom: 1px solid $border_e7eaf1;
}
}
.course-title {
font-size: $font_14;
}
.price-bar {
position: relative;
}
.bargain-detail {
display: flex;
flex-flow: column;
padding: 0 10px;
.top {
display: flex;
justify-content: space-between;
margin-bottom: 7px;
& > div:nth-child(1) {
font-size: $font_16;
}
}
.reduced-price {
color: $redprice;
}
.time {
display: inline-block;
width: 20px;
height: 18px;
background: $bg_666;
border-radius: 2px;
text-align: center;
line-height: 18px;
font-size: $font_12;
color: $white;
}
.sec {
margin-right: 6px;
}
.inactive {
color: $color_999;
}
.middle {
position: relative;
width: 335px;
height: 8px;
background: $bg_E7E7E7;
border-radius: 4px;
overflow: hidden;
margin-bottom: 7px;
span {
position: absolute;
left: 0;
top: 0;
display: inline-block;
height: 100%;
width: 10%;
background: $bg_FADD29;
}
}
.bottom {
font-size: $font_14;
margin-bottom: 7px;
}
.button {
display: flex;
justify-content: center;
}
button {
width: 210px;
height: 30px;
box-shadow: 0px 1px 3px 0px rgba(255, 64, 0, 0.5);
background: $bg_FADD29;
border-radius: 15px;
border: none;
color: $bg_ff3131;
-webkit-appearance: none;
}
.invalid-btn{
background: $bg_999;
color: $white;
box-shadow: none;
}
}
}
} .bargain-detail {
display: flex;
flex-flow: column;
padding: 0 10px;
.bargain-records { .top {
width: 355px; display: flex;
height: 236px; justify-content: space-between;
background: #FFF9EC; margin-bottom: 7px;
border-radius: 3px;
.title { & > div:nth-child(1) {
height: 44px;
line-height: 44px;
font-size: $font_16; font-size: $font_16;
border-bottom: $sp_ddd; }
text-align: center;
border-bottom: 1px solid $border_ddd;
} }
ul { .reduced-price {
padding: 0 10px; color: $redprice;
li {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
border-bottom: 1px solid $border_ddd;
.left, .right {
display: flex;
align-items: center;
}
img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 11px;
}
.nickname {
margin-right: 10px;
font-size: $font_14;
}
.rank-tag {
padding: 2px 5px;
background: $bg_FE2F2F;
color: $white;
font-size: $font_12;
flex: 0 0 auto;
}
}
} }
.more { .time {
color: $color_555; display: inline-block;
font-size: $font_14; width: 20px;
text-align: center; height: 18px;
line-height: 40px; background: $bg_666;
border-radius: 2px;
text-align: center;
line-height: 18px;
font-size: $font_12;
color: $white;
} }
}
.bargain-course-list { .sec {
background: $white; margin-right: 6px;
padding: 15px; }
.inactive {
color: $color_999;
}
ul { .middle {
display: flex; position: relative;
flex-wrap: wrap; width: 335px;
height: 8px;
background: $bg_E7E7E7;
border-radius: 4px;
overflow: hidden;
margin-bottom: 7px;
li:nth-child(odd) { span {
margin-right: 15px; position: absolute;
} left: 0;
top: 0;
display: inline-block;
height: 100%;
background: $bg_FADD29;
}
} }
.title-wrapper { .bottom {
text-align: center; font-size: $font_14;
margin-bottom: 7px;
}
.title { .button {
font-size: $font_16; display: flex;
margin-bottom: 10px; justify-content: center;
} }
.subtitle { button {
font-size: $font_14; width: 210px;
color: #FF4000; height: 30px;
} box-shadow: 0px 1px 3px 0px rgba(255, 64, 0, 0.5);
background: $bg_FADD29;
border-radius: 15px;
border: none;
color: $bg_ff3131;
-webkit-appearance: none;
} }
.course-title { .invalid-btn {
margin-bottom: 20px; background: $bg_999;
color: $white;
font-size: 16px;
box-shadow: none;
} }
}
}
.course-price { }
display: flex;
justify-content: space-between; .bargain-records {
margin-bottom: 10px; width: 355px;
height: 236px;
background: #FFF9EC;
border-radius: 3px;
.title {
height: 44px;
line-height: 44px;
font-size: $font_16;
border-bottom: $sp_ddd;
text-align: center;
border-bottom: 1px solid $border_ddd;
}
ul {
padding: 0 10px;
li {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
border-bottom: 1px solid $border_ddd;
.left, .right {
display: flex;
align-items: center;
} }
.bargain { .avatar {
width: 165px; width: 30px;
height: 30px; height: 30px;
background: $bg_FADD29; border-radius: 50%;
border-radius: 2px; margin-right: 11px;
border: none; }
color: $color_FF4000;
-webkit-appearance: none; .nickname {
margin-right: 10px;
font-size: $font_14;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
} }
.btns { .rank-tag {
display: flex; padding: 2px 5px;
justify-content: space-between; background: $bg_FE2F2F;
color: $white;
.bargain-btn { font-size: $font_12;
width: 80px; flex: 0 0 auto;
height: 30px; border-radius: 2px;
background: $bg_FADD29;
border: none;
color: $color_FF4000;
-webkit-appearance: none;
}
.invalid {
background: $bg_999;
color: $white;
}
.purchase-btn {
width: 80px;
height: 30px;
background: $color_FF4000;
color: $white;
border-radius: 2px;
border: none;
-webkit-appearance: none;
}
} }
}
} }
.more { .more {
color: $color_555;
font-size: $font_14;
text-align: center;
line-height: 40px;
}
}
.bargain-course-list {
background: $white;
padding: 15px;
ul {
display: flex;
flex-wrap: wrap;
li:nth-child(odd) {
margin-right: 15px;
}
}
.title-wrapper {
text-align: center;
.title {
font-size: $font_16; font-size: $font_16;
color: $color_555; margin-bottom: 10px;
text-align: center; }
line-height: 46px;
.subtitle {
font-size: $font_14;
color: #FF4000;
}
}
.course-title {
margin-bottom: 10px;
min-height: 38px;
}
.course-price {
margin-bottom: 10px;
} }
.bargain {
width: 165px;
height: 30px;
background: $bg_FADD29;
border-radius: 2px;
border: none;
color: $color_FF4000;
-webkit-appearance: none;
}
.btns {
display: flex;
justify-content: space-between;
.bargain-btn {
width: 80px;
height: 30px;
background: $bg_FADD29;
border: none;
color: $color_FF4000;
-webkit-appearance: none;
}
.invalid {
background: $bg_999;
color: $white;
}
.purchase-btn {
width: 80px;
height: 30px;
background: $color_FF4000;
color: $white;
border-radius: 2px;
border: none;
-webkit-appearance: none;
}
}
}
.preferential {
display: inline-block;
width: 100%;
height: 46px;
line-height: 46px;
font-size: $font_16;
color: $color_555;
text-align: center;
}
.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 = [
{
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',
rank: '刀神',
reduced: '25.3元'
},
{
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',
rank: '刀神',
reduced: '25.3元'
},
{
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',
rank: '刀神',
reduced: '25.3元'
},
]
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,
},
]
constructor(props) {
super(props)
this.state = {
kanjiaIcon: require('./image/kanjia_icon.png'),
courseList: '', // 所有砍价课程
data: '',
bargainData: '',
limitPeople: 0,
outList: [],
list: [],
width: '0',
isShowMore: ''
}
}
componentDidMount() {
this.getBargainRankList('144', 1)
this.getBargainCourse()
this.getBargainInfo()
}
// 获取砍价信息
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
.bargain-func { .bargain-func {
padding: 8px; padding: 8px;
border-top: 8px solid $bg_f5f5f5; border-top: 8px solid $bg_f5f5f5;
@mixin clean-button-style { @mixin clean-button-style {
background: transparent; background: transparent;
border: none; border: none;
-webkit-appearance: none; -webkit-appearance: none;
}
@mixin row-common {
width: 100%;
padding: 0 10px;
border-bottom: 1px solid $border_e7eaf1;
}
.intro-outer {
width: 360px;
height: 133px;
border: 5px solid $color_FE2F2F;
display: flex;
justify-content: center;
align-items: center;
}
.intro-inner {
width: 341px;
height: 118px;
padding-top: 15px;
background: $bg_FFF8EB;
border: 1px solid $color_FE2F2F;
border-radius: 3px;
& > div {
height: 100%;
} }
@mixin row-common { p {
width: 100%; font-size: $font_14;
padding: 0 10px;
border-bottom: 1px solid $border_e7eaf1;
} }
.intro-outer { p:nth-child(1) {
width: 360px; margin-bottom: 3px;
height: 133px;
border: 5px solid $color_FE2F2F;
display: flex;
justify-content: center;
align-items: center;
} }
.intro-inner { p:nth-child(2) {
width: 341px; margin-bottom: 5px;
height: 114px; }
padding-top: 15px;
background: $bg_FFF8EB;
border: 1px solid $color_FE2F2F;
border-radius: 3px;
& > div {
height: 100%;
}
p { button {
font-size: $font_14; @include clean-button-style;
} width: 210px;
height: 39px;
border-radius: 20px;
box-shadow: 0 5px $bg_FFA200;
background: $bg_FFE400;
font-size: $font_16;
color: $color_FE2F2F;
}
}
p:nth-child(1) { .indicator {
margin-bottom: 3px; color: $color_FE2F2F;
} }
p:nth-child(2) {
margin-bottom: 5px;
}
.status-outer {
width: 360px;
padding: 5px;
background: $bg_FE2F2F;
display: flex;
justify-content: center;
align-items: center;
}
button { .status-over {
@include clean-button-style; height: 99px !important;
width: 210px;
height: 39px; .time-tobuy {
border-radius: 20px; color: $color_FF4000;
box-shadow: 0 5px $bg_FFA200; font-size: 12px;
background: $bg_FFE400; text-align: center;
font-size: $font_16; line-height: 48px;
color: $color_FE2F2F;
}
} }
.indicator { }
color: $color_FE2F2F;
.status-inner {
width: 350px;
height: 124px;
padding: 0 10px;
background: $white;
border-radius: 3px;
.first-row {
@include row-common;
padding: 13px 0;
display: flex;
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 {
display: inline-block;
width: 20px;
height: 18px;
background: $bg_666;
border-radius: 2px;
text-align: center;
line-height: 18px;
font-size: $font_12;
color: $white;
}
.hour {
margin-left: 7px;
}
.sec {
margin-right: 5px;
}
} }
.sec-row {
@include row-common;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
.status-outer { & > div {
width: 360px;
height: 134px;
background: $bg_FE2F2F;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
} }
.status-inner { img {
width: 350px; width: 30px;
height: 124px; height: 30px;
padding: 0 10px; margin-right: 10px;
background: $white; border-radius: 50%;
}
button {
@include clean-button-style;
width: 62px;
height: 26px;
margin-left: 7px;
background: $bg_FADD29;
border-radius: 3px; border-radius: 3px;
font-size: $font_12;
color: $redprice;
}
.first-row { .name {
@include row-common; font-size: 14px;
padding: 10px 0; color: $color_333;
display: flex; max-width: 130px;
justify-content: space-between; overflow: hidden;
text-overflow: ellipsis;
.time { white-space: nowrap;
display: inline-block; }
width: 20px; }
height: 18px;
background: $bg_666;
border-radius: 2px;
text-align: center;
line-height: 18px;
font-size: $font_12;
color: $white;
}
.hour {
margin-left: 7px;
}
.sec {
margin-right: 5px;
}
}
.sec-row { .third-row {
@include row-common; @include row-common;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 0; padding: 7px 0;
border: none;
& > div {
display: flex;
justify-content: space-between;
align-items: center;
}
img {
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
}
button {
@include clean-button-style;
width: 62px;
height: 26px;
margin-left: 7px;
background: $bg_FADD29;
border-radius: 3px;
font-size: $font_12;
color: $redprice;
}
}
.third-row { button {
@include row-common; @include clean-button-style;
display: flex; padding: 3px 9px;
justify-content: space-between; border: 1px solid $border_f31;
align-items: center; border-radius: 11px;
padding: 7px 0; color: $border_f31;
border: none; font-size: $font_12;
}
button {
@include clean-button-style;
padding: 3px 9px;
border: 1px solid $border_f31;
border-radius: 11px;
color: $border_f31;
font-size: $font_12;
}
}
} }
}
}
.overlay .bargain-close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
} }
.bargain-success { .bargain-success {
display: flex;
flex-flow: column;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 290px;
height: 109px;
padding: 15px 33px;
background: $white;
border-radius: 5px;
text-align: center;
.title { width: 290px;
font-size: $font_16; height: 109px;
margin-bottom: 5px; padding: 15px 33px;
} background: $white;
border-radius: 5px;
text-align: center;
margin: 100px auto 20px auto;
.title {
font-size: $font_16;
margin-bottom: 5px;
}
p:nth-of-type(2) {
font-size: $font_14;
margin-bottom: 15px;
}
p:nth-of-type(3) {
font-size: $font_12;
}
.indicator {
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;
}
}
}
p:nth-of-type(2) {
font-size: $font_14;
margin-bottom: 15px;
} }
p:nth-of-type(3) { .more-bargain-dec {
font-size: $font_12; width: 100%;
position: absolute;
bottom: 0;
height: 42px;
font-size: 12px;
color: $color_FF4000;
text-align: center;
line-height: 42px;
} }
.indicator {
color: $color_FE2F2F; .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)
}
})
} }
toggleCover = () => {
this.setState({showCover: !this.state.showCover});
//获取砍价信息
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')
}
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);
}
})
}
// 我要砍价
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.showCover && 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.isShowOverlay &&
<Overlay> <Overlay>
<BargainSuccess/> {/*绑定手机号*/}
{
this.state.status === 3 &&
<BargainInfo />
}
{/*砍价成功去分享*/}
{
this.state.status === 0 &&
<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">
<div className="status-inner">
<Flex direction={'column'}> {
<div className={'first-row'}> props.info.bargain_status === 0 &&
<div> <div className="status-inner">
已砍<span className={'indicator'}>59元</span>
<span className={'time hour'}>23</span>: <Flex direction={'column'}>
<span className={'time min'}>59</span>: <div className={'first-row'}>
<span className={'time sec'}>02</span> <div>
后砍价结束 已砍<span className={'indicator'}>{props.info.bargain_price}元</span>
</div> {/*<span className={'time hour'}>23</span>:*/}
<div>15位好友助力></div> {/*<span className={'time min'}>59</span>:*/}
</div> {/*<span className={'time sec'}>02</span>*/}
<div className="sec-row"> {props.info.end_time}
<div> 后砍价结束
<img </div>
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" <div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
alt=""/>
<span>机器学习集训营</span>
</div> </div>
<div> <div className="sec-row">
<div>砍掉<span className={'indicator'}>25.3元</span></div> <div>
<button>继续砍价</button> <img
src={props.outList.avatar_file}
alt=""/>
<span className='name'>{props.outList.user_name}</span>
</div>
<div>
<div>砍掉<span className={'indicator'}>{props.outList.amount}元</span></div>
<button>继续砍价</button>
</div>
</div> </div>
</div> <div className="third-row">
<div className="third-row"> {thirdRow}
<div> {btn}
再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span
className={'indicator'}>【砍价神器】</span>
</div> </div>
</Flex>
</div>
}
{/*<button>立即领取</button>*/} {
</div> props.info.bargain_status === 1 &&
</Flex> <div className="status-inner status-over">
</div>
<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>
</Flex>
</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 {
{/*砍价*/} {/*砍价*/}
<Bargain/> {
this.props.courseInfo && this.props.courseInfo.is_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