Skip to content

M
mr-julyedu
Commit 6d7eb011 by xuzhenghua
Options

kanjia

parent 9544334e
Showing with 269 additions and 100 deletions
src/components/bargainMiddlePage/bargain-middle-page.scss
...@@ -162,7 +162,20 @@ ...@@ -162,7 +162,20 @@
margin-top: 10px; margin-top: 10px;
} }
button { .artifact-btn {
float: right;
position: relative;
top: -20px;
width: 61px;
height: 24px;
background: $bg_FF4000;
border-radius: 12px;
font-size: 12px;
border: none;
color: $white;
}
.active-btn {
width: 210px; width: 210px;
height: 30px; height: 30px;
box-shadow: 0px 1px 3px 0px rgba(255, 64, 0, 0.5); box-shadow: 0px 1px 3px 0px rgba(255, 64, 0, 0.5);
...@@ -175,10 +188,14 @@ ...@@ -175,10 +188,14 @@
} }
.invalid-btn { .invalid-btn {
width: 210px;
height: 30px;
background: $bg_999; background: $bg_999;
color: $white; color: $white;
font-size: 16px; font-size: 16px;
box-shadow: none; box-shadow: none;
border-radius: 15px;
border: none;
} }
} }
} }
...@@ -273,7 +290,7 @@ ...@@ -273,7 +290,7 @@
.subtitle { .subtitle {
font-size: $font_14; font-size: $font_14;
color: #FF4000; color: $color_FF4000;
} }
} }
...@@ -294,6 +311,9 @@ ...@@ -294,6 +311,9 @@
border: none; border: none;
color: $color_FF4000; color: $color_FF4000;
-webkit-appearance: none; -webkit-appearance: none;
display: inline-block;
text-align: center;
line-height: 30px;
} }
.btns { .btns {
...@@ -304,14 +324,23 @@ ...@@ -304,14 +324,23 @@
width: 80px; width: 80px;
height: 30px; height: 30px;
background: $bg_FADD29; background: $bg_FADD29;
text-align: center;
line-height: 28px;
border: none; border: none;
color: $color_FF4000; color: $color_FF4000;
-webkit-appearance: none; -webkit-appearance: none;
} }
.invalid { .invalid {
width: 80px;
height: 30px;
background: $bg_999; background: $bg_999;
color: $white; color: $white;
border: none;
-webkit-appearance: none;
border-radius: 2px;
} }
.purchase-btn { .purchase-btn {
...@@ -372,9 +401,11 @@ ...@@ -372,9 +401,11 @@
line-height: 12px; line-height: 12px;
} }
button { .bargain-href {
display: inline-block;
width: 260px; width: 260px;
height: 30px; height: 30px;
line-height: 28px;
background-color: $bg_FADD29; background-color: $bg_FADD29;
color: $color_FF4000; color: $color_FF4000;
font-size: 16px; font-size: 16px;
...@@ -538,3 +569,141 @@ ...@@ -538,3 +569,141 @@
} }
.close-bargain-success {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.bargain-success {
width: 290px;
height: 109px;
padding: 15px;
background: $white;
border-radius: 5px;
text-align: center;
margin: 100px auto 20px auto;
position: relative;
p:nth-of-type(2) {
font-size: 14px;
margin-top: 10px;
}
p:nth-of-type(1) {
font-size: 12px;
margin-top: 10px;
}
.indicator {
color: $color_FE2F2F;
}
.iconyindao {
display: inline-block;
width: 60px;
height: 44px;
position: absolute;
top: -60px;
right: 0;
color: $white;
font-size: 40px;
}
.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;
}
}
}
src/components/detail/bargain/bargain.scss
...@@ -99,7 +99,10 @@ ...@@ -99,7 +99,10 @@
color: $color_FF4000; color: $color_FF4000;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
line-height: 48px; padding-top: 10px;
.unit {
color: $color_333;
}
.time { .time {
display: inline-block; display: inline-block;
......
src/components/detail/bargain/index.js
...@@ -3,7 +3,7 @@ import './bargain.scss' ...@@ -3,7 +3,7 @@ import './bargain.scss'
import {Flex, Toast} 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 {differenceInSeconds, differenceInMinutes, differenceInHours} from "date-fns" import {differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays} from "date-fns"
import {api, getParam, http} from "@/utils" import {api, getParam, http} from "@/utils"
import Ranking from "@/components/bargainMiddlePage/ranking" import Ranking from "@/components/bargainMiddlePage/ranking"
import {compose} from "redux" import {compose} from "redux"
...@@ -77,6 +77,7 @@ class Bargain extends Component { ...@@ -77,6 +77,7 @@ class Bargain extends Component {
isShowMore: true isShowMore: true
}) })
} }
// 自组件传给父组件的boxHide // 自组件传给父组件的boxHide
boxHide = (val) => { boxHide = (val) => {
this.setState({isShowMore: val}) this.setState({isShowMore: val})
...@@ -125,22 +126,7 @@ class Bargain extends Component { ...@@ -125,22 +126,7 @@ class Bargain extends Component {
// 我要砍价 // 我要砍价
iWantBargain = () => { iWantBargain = () => {
// 判断用户是否绑定了手机号 this.toKanjia(getParam('id'), 1, 0)
http.get(`${api.home}/sys/userStatus`).then((res) => {
if (res.data.code === 200) {
// 0-都没绑定 1-只绑定公众号 2-只绑定手机号 3-都绑定
if (res.data.data.status === 0 || res.data.data.status === 1) {
this.setState({
isShowOverlay: true,
status: 3,
})
} else {
this.toKanjia(getParam('id'), 1, 0)
}
} else {
Toast.info(res.data.msg, 2)
}
})
} }
// 砍价接口 // 砍价接口
...@@ -150,15 +136,23 @@ class Bargain extends Component { ...@@ -150,15 +136,23 @@ class Bargain extends Component {
type: type, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力 type: type, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: uid // 被助力人id 【自己本人操作传0】 parent_uid: uid // 被助力人id 【自己本人操作传0】
} }
http.post(`${api.home}/m/to_bargain`, data).then((res) => { http.post(`${api.home}/m/bargain/toBargain`, data).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
// this.getBargainInfo()
document.location.reload()
if (type === 2) { if (type === 2) {
this.setState({ this.setState({
isShowOverlay: true, isShowOverlay: true,
status: 2, status: 2,
}) })
} else {
if (res.data.data.user_status === 2) {
this.setState({
isShowOverlay: true,
status: 3,
})
} else {
// this.getBargainInfo()
document.location.reload()
}
} }
} else { } else {
...@@ -206,11 +200,6 @@ class Bargain extends Component { ...@@ -206,11 +200,6 @@ class Bargain extends Component {
<BargainInfo/> <BargainInfo/>
} }
{/*砍价成功去分享*/}
{
this.state.status === 0 &&
<BargainSuccess/>
}
{/*领取砍价神器*/} {/*领取砍价神器*/}
...@@ -266,9 +255,10 @@ function BargainIntro(props) { ...@@ -266,9 +255,10 @@ function BargainIntro(props) {
function BargainStatus(props) { function BargainStatus(props) {
const [hour, setHour] = useState() const [day, setDay] = useState(0)
const [min, setMin] = useState() const [hour, setHour] = useState(0)
const [sec, setSec] = useState() const [min, setMin] = useState(0)
const [sec, setSec] = useState(0)
let thirdRow, btn let thirdRow, btn
...@@ -293,6 +283,7 @@ function BargainStatus(props) { ...@@ -293,6 +283,7 @@ function BargainStatus(props) {
setSec(differenceInSeconds(new Date(date), now) % 60) setSec(differenceInSeconds(new Date(date), now) % 60)
setMin(differenceInMinutes(new Date(date), now) % 60) setMin(differenceInMinutes(new Date(date), now) % 60)
setHour(differenceInHours(new Date(date), now) % 24) setHour(differenceInHours(new Date(date), now) % 24)
setDay(differenceInDays(new Date(date), now) % 24)
}, 1000) }, 1000)
...@@ -308,9 +299,9 @@ function BargainStatus(props) { ...@@ -308,9 +299,9 @@ function BargainStatus(props) {
<div className={'first-row'}> <div className={'first-row'}>
<div> <div>
已砍<span className={'indicator'}>{props.info.bargain_price}元</span> 已砍<span className={'indicator'}>{props.info.bargain_price}元</span>
<span className={'time hour'}>{String(hour).padStart(2,0)}</span> :&nbsp; <span className={'time hour'}>{String(hour).padStart(2, 0)}</span> :&nbsp;
<span className={'time min'}>{String(min).padStart(2,0)}</span> :&nbsp; <span className={'time min'}>{String(min).padStart(2, 0)}</span> :&nbsp;
<span className={'time sec'}>{String(sec).padStart(2,0)}</span> <span className={'time sec'}>{String(sec).padStart(2, 0)}</span>
<span className='over'>后砍价结束</span> <span className='over'>后砍价结束</span>
</div> </div>
<div onClick={props.getMore}>{props.info.assist_num}位好友助力></div> <div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
...@@ -352,9 +343,12 @@ function BargainStatus(props) { ...@@ -352,9 +343,12 @@ function BargainStatus(props) {
</div> </div>
<div className="time-tobuy"> <div className="time-tobuy">
砍价金额将于 砍价金额将于
<span className={'time hour'}>{String(hour).padStart(2,0)}</span> :&nbsp; <span className={'time hour'}>{String(day).padStart(2, 0)}</span><span
<span className={'time min'}>{String(min).padStart(2,0)}</span> :&nbsp; className={'unit'}> 天 </span>
<span className={'time sec'}>{String(sec).padStart(2,0)}</span> <span className={'time min'}>{String(hour).padStart(2, 0)}</span><span
className={'unit'}> 时 </span>
<span className={'time sec'}>{String(min).padStart(2, 0)}</span><span
className={'unit'}>分</span>
后清零，请尽快完成支付 后清零，请尽快完成支付
</div> </div>
</Flex> </Flex>
...@@ -364,22 +358,6 @@ function BargainStatus(props) { ...@@ -364,22 +358,6 @@ function BargainStatus(props) {
) )
} }
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>
)
}
{/*领取砍价神器*/ {/*领取砍价神器*/
} }
......
src/components/detail/btnstatus/index.js
...@@ -27,7 +27,6 @@ class BtnStatus extends Component { ...@@ -27,7 +27,6 @@ class BtnStatus extends Component {
// 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付 // 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
toCart = (type) => { toCart = (type) => {
console.log(type)
let data = { let data = {
course_id: getParam('id') course_id: getParam('id')
}; };
...@@ -38,11 +37,14 @@ class BtnStatus extends Component { ...@@ -38,11 +37,14 @@ class BtnStatus extends Component {
// this.props.getCourses() // this.props.getCourses()
document.location.reload() document.location.reload()
} else { } else {
window.location.href = '/shopcart' // window.location.href = '/shopcart'
this.props.history.replace('/shopcart');
} }
} else if (res.data.code === 15001) { } else if (res.data.code === 15001) {
window.location.href = '/shopcart' // window.location.href = '/shopcart'
this.props.history.replace('/shopcart');
} else { } else {
Toast.info(res.data.msg, 2); Toast.info(res.data.msg, 2);
} }
...@@ -60,20 +62,7 @@ class BtnStatus extends Component { ...@@ -60,20 +62,7 @@ class BtnStatus extends Component {
}) })
} }
} }
// 直接购买 TODO 等弄清楚了逻辑 再和加入购物车合并
toBuy = () => {
let data = {
course_id: getParam('id')
};
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if(res.data.code !== 200) {
Toast.info(res.data.msg, 2);
return;
}
this.props.history.replace('/shopcart');
})
}
// 取消砍价 // 取消砍价
cancel = () => { cancel = () => {
...@@ -105,7 +94,7 @@ class BtnStatus extends Component { ...@@ -105,7 +94,7 @@ class BtnStatus extends Component {
type: 1, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力 type: 1, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: 0 // 被助力人id 【自己本人操作传0】 parent_uid: 0 // 被助力人id 【自己本人操作传0】
} }
http.post(`${api.home}/m/to_bargain`, data).then((res) => { http.post(`${api.home}/m/bargain/toBargain`, data).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
// this.props.getBargainInfo() // this.props.getBargainInfo()
document.location.reload() document.location.reload()
...@@ -160,22 +149,22 @@ class BtnStatus extends Component { ...@@ -160,22 +149,22 @@ class BtnStatus extends Component {
{/*拼团 未开团*/} {/*拼团 未开团*/}
{ {
info.is_baoming === 0 && info.group_status === 3 && info.is_baoming === 0 && info.group_status === 3 &&
<div className='btns-box'> <div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true"> <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i> <i className='iconfont iconerji'></i>
<span>课程咨询</span> <span>课程咨询</span>
</a> </a>
<button className='btn btn-s bg-F4AAA7' onClick={this.toBuy}> <button className='btn btn-s bg-F4AAA7' onClick={e => this.toCart(2)}>
<span>{`¥ ${info.price1}`}</span> <span>{`¥ ${info.price1}`}</span>
<span>直接购买</span> <span>直接购买</span>
</button> </button>
<button className='btn btn-s bg-E02E24'> <button className='btn btn-s bg-E02E24'>
<Link to={`/order?id=${getParam('id')}`}> <Link to={`/order?id=${getParam('id')}`}>
<span>{`¥ ${info.pdd_group_info.price}`}</span> <span>{`¥ ${info.pdd_group_info.price}`}</span>
<span>一键开团</span> <span>一键开团</span>
</Link> </Link>
</button> </button>
</div> </div>
} }
{/*拼团 已开团*/} {/*拼团 已开团*/}
......
src/components/detail/shareRank/index.scss
...@@ -59,16 +59,13 @@ ...@@ -59,16 +59,13 @@
} }
.share { .share {
// position: absolute;
// right: 12px;
// padding: 5px 6px;
border: 1px solid $red; border: 1px solid $red;
border-radius: 3px; border-radius: 3px;
color: $red; color: $red;
background-color: $bg_fff; background-color: $bg_fff;
width: 76px; width: 76px;
height: 22px; height: 22px;
line-height: 22px; line-height: 20px;
text-align: center; text-align: center;
} }
......
src/components/detail/single/index.js
...@@ -2,17 +2,23 @@ import React, {Component} from 'react' ...@@ -2,17 +2,23 @@ import React, {Component} from 'react'
import './index.scss' import './index.scss'
import {api, getParam, http, browser} from "@/utils"; import {api, getParam, http, browser} from "@/utils";
import {Toast} from 'antd-mobile'; import {Toast} from 'antd-mobile';
import {Link} from "react-router-dom"; import {Link, withRouter} from "react-router-dom";
import {compose} from "redux";
import {connect} from "react-redux";
import {differenceInHours, differenceInMinutes, differenceInSeconds} from "date-fns";
class Single extends Component { class Single extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
status: 1, status: 3,
orderId: '', orderId: '',
nowPrice: '', nowPrice: '',
laterPrice: '', laterPrice: '',
hour: '',
min: '',
sec: '',
payType: '0', // 1支付宝 0微信 payType: '0', // 1支付宝 0微信
} }
} }
...@@ -177,6 +183,25 @@ class Single extends Component { ...@@ -177,6 +183,25 @@ class Single extends Component {
} }
render() { render() {
// if (this.state.bargainData.expire_time) {
let date = 1561140170*1000
let now = Date.now()
setInterval(() => {
date -= 1000
let s = differenceInSeconds(new Date(date), now) % 60,
m = differenceInMinutes(new Date(date), now) % 60,
h = differenceInHours(new Date(date), now) % 24
this.setState({
hour: h,
min: m,
sec: s,
})
}, 1000)
// }
return ( return (
<div> <div>
{ {
...@@ -271,17 +296,19 @@ class Single extends Component { ...@@ -271,17 +296,19 @@ class Single extends Component {
<span>参团成功</span> <span>参团成功</span>
</div> </div>
<div className='group-img'> <div className='group-img'>
<img src={this.props.user.data.avatar} alt=""/>
<img <img
src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/vu/image_head/Sv3Vz4B8Tp.jpg' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/images/weekend/train7/ellipsis.png"
alt=""/> alt=""/>
<img <img
src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/vu/image_head/CwJoTNA21g.jpg' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/images/weekend/train7/ellipsis.png"
alt=""/>
<img
src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/vu/image_head/Sv3Vz4B8Tp.jpg'
alt=""/> alt=""/>
</div>
<div className='btn-l btn-FF4000'>
剩余{String(this.state.hour).padStart(2, 0)}：{String(this.state.min).padStart(2, 0)}：{String(this.state.sec).padStart(2, 0)}
邀请好友参团
</div> </div>
<div className='btn-l btn-FF4000'>剩余23：59：23 邀请好友参团</div>
</div> </div>
} }
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i> <i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
...@@ -294,4 +321,10 @@ class Single extends Component { ...@@ -294,4 +321,10 @@ class Single extends Component {
} }
export default Single export default compose(
connect(
state => ({user: state.user}),
null
),
withRouter
)(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