Skip to content

M
mr-julyedu
Commit aef9e67e by zhanghaozhe
Options

砍价

parent 8bd9ba2b
Showing with 599 additions and 7 deletions
src/components/bargainMiddlePage/bargain-middle-page.scss 0 → 100644
.bargain-middle-page {
background: $bg_f4f4f4;
padding-bottom: 50px;
.indicator {
color: $color_FE2F2F;
}
.price {
color: $redprice;
}
.discount-price {
color: $redprice;
font-size: $font_16;
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;
}
.bargain-area {
width: 355px;
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-records {
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;
}
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 {
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;
margin-bottom: 10px;
}
.subtitle {
font-size: $font_14;
color: #FF4000;
}
}
.course-title {
margin-bottom: 20px;
}
.course-price {
display: flex;
justify-content: space-between;
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;
}
}
}
.more {
font-size: $font_16;
color: $color_555;
text-align: center;
line-height: 46px;
}
}
\ No newline at end of file
src/components/bargainMiddlePage/index.js 0 → 100644
import React, { Component } from 'react';
import './bargain-middle-page.scss'
import classnames from 'classnames'
import { VList } from '@common';
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,
},
]
class BargainMiddlePage extends Component {
render() {
return (
<div className={'bargain-middle-page'}>
<div className="top">
<div className="bargain-area">
<ul>
<VList
info={<CourseDes/>}
/>
</ul>
<div className="bargain-detail">
<div className="top">
<div>
已砍<span className={'reduced-price'}>56.7元</span>
</div>
<div>
<span className={'time hour'}>23</span>:
<span className={'time min'}>59</span>:
<span className={'time sec'}>02</span>
<span className={'inactive'}>后砍价结束</span>
</div>
</div>
<div className="middle">
<span/>
</div>
<div className="bottom">
再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span
className={'indicator'}>【砍价神器】</span>
</div>
<div className={'button'}>
<button className={'invalid-btn'}>邀请好友砍价</button>
</div>
</div>
</div>
<div className="bargain-records">
<div className="title">砍价记录</div>
<ul>
{
mockData.map((item, index) => {
return (
<li key={index}>
<div className="left">
<img src={item.avatar} alt=""/>
<span className={'nickname'}>{item.nickname}</span>
<span className="rank-tag">{item.rank}</span>
</div>
<div className="right">
砍掉<span className={'price'}>{item.reduced}</span>
</div>
</li>
)
})
}
</ul>
<div className="more">查看更多>></div>
</div>
</div>
<div className="bargain-course-list">
<div className="title-wrapper">
<div className="title">我要砍价</div>
<div className="subtitle">邀请20位以上好友帮忙砍价可获得【砍价神器】</div>
</div>
<ul>
{
courseList.map((item, index) => {
return <Course
data={item}
bottom={
<CourseBottom item={item}/>
}
key={index}
/>
})
}
</ul>
</div>
<p className={'more'}>查看更多精品课程 >></p>
</div>
);
}
}
function CourseDes() {
return (
<div className={'des'}>
<div className="course-title">
九月机器学习算法【涵盖ML主流算法及其应用
</div>
<div className="price-bar">
<span className={'discount-price'}>￥980</span>
<span className={'original-price'}>￥1280</span>
<button className={'purchase-btn'}>¥99去支付</button>
</div>
</div>
)
}
function CourseBottom({item}) {
let Buttons
if (item.status === 0) {
Buttons = <button className={'bargain'}>我要砍价</button>
} else {
Buttons = (
<div className="btns">
<button className={classnames('bargain-btn', {
invalid: item.isComplete
})}>{item.isComplete ? '砍价结束' : '继续砍价'}</button>
<button className={'purchase-btn'}>¥{item.resultPrice}去支付</button>
</div>
)
}
return (
<div className="course-bottom">
<div className={'course-price'}>
<span className={'discount-price'}>¥{item.discount}</span>
<span className={'original-price'}>¥{item.original}</span>
</div>
{Buttons}
</div>
)
}
export default BargainMiddlePage;
\ No newline at end of file
src/components/detail/bargain/bargain.scss
......@@ -8,7 +8,7 @@
-webkit-appearance: none;
}
@mixin row-common{
@mixin row-common {
width: 100%;
padding: 0 10px;
border-bottom: 1px solid $border_e7eaf1;
......@@ -140,21 +140,55 @@
}
}
.third-row{
.third-row {
@include row-common;
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border: none;
button{
button {
@include clean-button-style;
padding: 3px 9px;
border:1px solid $border_f31;
border-radius:11px;
border: 1px solid $border_f31;
border-radius: 11px;
color: $border_f31;
font-size: $font_12;
}
}
}
}
.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 {
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;
}
}
\ No newline at end of file
src/components/detail/bargain/index.js
......@@ -21,7 +21,7 @@ class Bargain extends Component {
{
this.state.showCover &&
<Overlay>
<BargainInfo/>
<BargainSuccess/>
</Overlay>
}
</div>
......@@ -91,5 +91,22 @@ function BargainStatus() {
)
}
function BargainSuccess() {
return (
<div className="bargain-success">
<p className={'title'}>
恭喜你，一刀砍了
<span className={'indicator'}>39.8元</span>
</p>
<p>分享到微信群邀请更多好友帮忙砍价</p>
<p>
超过20位好友助力可获得
<span className={'indicator'} style={{color: '#FF4000'}}>【砍价神器】</span>
哦
</p>
</div>
)
}
export default Bargain;
\ No newline at end of file
src/components/detail/overlay/index.js
......@@ -33,7 +33,10 @@ class Overlay extends Component {
render() {
return ReactDom.createPortal(
(<div className={'overlay'} ref={el => this.overlayBox = el}>{this.props.children}</div>),
(<div className={'overlay'}
ref={el => this.overlayBox = el}
style={{top: `${window.scrollY}px`}}
>{this.props.children}</div>),
root
)
}
......
src/router.js
......@@ -16,6 +16,7 @@ import ExchangeCoupons from './components/coupons/exchange-coupons'
import UseCoupon from './components/coupons/use-coupons'
import OrderInfo from './components/order/orderinfo';
import ShopCard from './components/shopCard/index';
import BargainMiddlePage from './components/bargainMiddlePage';
const router = (props) => (
......@@ -36,6 +37,7 @@ const router = (props) => (
<Route path='/use-coupon' component={UseCoupon}></Route>
<Route path='/orderinfo' component={OrderInfo}></Route>
<Route path='/shopcard' component={ShopCard}></Route>
<Route path='/bargain-middle-page' component={BargainMiddlePage}></Route>
</Switch>
<Menu/>
</Router>
......
src/styles/variable.scss
......@@ -15,6 +15,7 @@ $color_bbb: #BBB;
$color_202426: #202426;
$color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
$color_FF4000: #FF4000;
/*
......@@ -57,6 +58,7 @@ $bg_FFE400: #FFE400;
$bg_FFA200: #FFA200;
$bg_FE2F2F: #FE2F2F;
$bg_FADD29: #FADD29;
$bg_E7E7E7: #E7E7E7;
/*
......
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