Skip to content

M
mr-julyedu
Commit 2eb91ebe by zhanghaozhe
Options

Merge branch 'master' into pre

parents 117bcaa1 93d8d984
Showing with 775 additions and 326 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/bargainMiddlePage/index.js
import React, {Component, useState} from 'react' import React, {Component} from 'react'
import './bargain-middle-page.scss' import './bargain-middle-page.scss'
import classnames from 'classnames'
import {HeaderBar, VList} from '@common' import {HeaderBar, VList} from '@common'
import {Course} from '@common' import {Course} from '@common'
import {api, getParam, http} from "@/utils" import {api, getParam, http, browser} from "@/utils"
import {Flex, Toast} from "antd-mobile" import {Toast} from "antd-mobile"
import {Link, withRouter} from "react-router-dom" import {Link, withRouter} from "react-router-dom"
import Ranking from './ranking' import Ranking from './ranking'
import {differenceInSeconds, differenceInMinutes, differenceInHours} from "date-fns" import {differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays} from "date-fns"
import Overlay from '../detail/overlay' import Overlay from '../detail/overlay'
import {compose} from "redux" import {compose} from "redux"
import {connect} from "react-redux";
class BargainMiddlePage extends Component { class BargainMiddlePage extends Component {
...@@ -18,7 +18,7 @@ class BargainMiddlePage extends Component { ...@@ -18,7 +18,7 @@ class BargainMiddlePage extends Component {
super(props) super(props)
this.state = { this.state = {
isShowOverlay: false, isShowOverlay: false,
isOriginator: getParam('is_originator'), isOriginator: '',
kanjiaIcon: require('./image/kanjia_icon.png'), kanjiaIcon: require('./image/kanjia_icon.png'),
courseList: '', // 所有砍价课程 courseList: '', // 所有砍价课程
data: '', data: '',
...@@ -31,12 +31,17 @@ class BargainMiddlePage extends Component { ...@@ -31,12 +31,17 @@ class BargainMiddlePage extends Component {
status: '', status: '',
hour: '', hour: '',
min: '', min: '',
sec: '' sec: '',
day: '',
amount: '',
firendBaigainPrice: true,
isshowYindao: false,
isLoaidng: true
} }
} }
componentDidMount() { componentDidMount() {
this.getBargainRankList('144', 1) this.getBargainRankList(getParam('id'), 1)
this.getBargainCourse() this.getBargainCourse()
this.getBargainInfo() this.getBargainInfo()
} }
...@@ -48,6 +53,7 @@ class BargainMiddlePage extends Component { ...@@ -48,6 +53,7 @@ class BargainMiddlePage extends Component {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
data: res.data.data, data: res.data.data,
isOriginator: res.data.data.is_originator,
originatorUid: res.data.data.originator_uid, originatorUid: res.data.data.originator_uid,
limitPeople: res.data.data.course.limit_people, limitPeople: res.data.data.course.limit_people,
bargainData: res.data.data.bargain, bargainData: res.data.data.bargain,
...@@ -151,52 +157,54 @@ class BargainMiddlePage extends Component { ...@@ -151,52 +157,54 @@ class BargainMiddlePage 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() // is_success =0一切正常 =1 不能在砍了 =2关注公众号,可以再砍一刀！
this.setState({
amount: res.data.data.amount
})
if (type === 2) { if (type === 2) {
this.setState({ this.setState({
isShowOverlay: true, isShowOverlay: true,
status: 6 status: 6
}) })
} }
if (type === 3) {
this.userStatus() if (res.data.data.is_success === 1) {
}
if (type === 4) {
this.setState({ this.setState({
isShowOverlay: true, isShowOverlay: true,
status: 3 status: 4
}) })
} else if (res.data.data.is_success === 2) {
if (type === 3) {
this.setState({
isShowOverlay: true,
status: 2
})
} else if (type === 4) {
this.setState({
isShowOverlay: true,
status: 1,
firendBaigainPrice: false
})
}
} else if (res.data.data.is_success === 0) {
if (type === 3) {
this.setState({
isShowOverlay: true,
status: 2
})
} else if (type === 4) {
this.setState({
isShowOverlay: true,
status: 3
})
}
} }
// this.setState({ this.getBargainInfo()
// isShowOverlay: true,
// status: 4
// })
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取用户状态
userStatus = () => {
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 === 2) {
this.setState({
isShowOverlay: true,
status: 1
})
} else {
this.setState({
isShowOverlay: true,
status: 2
})
}
} else { } else {
Toast.info(res.data.msg, 2) Toast.info(res.data.msg, 2)
} }
...@@ -214,6 +222,14 @@ class BargainMiddlePage extends Component { ...@@ -214,6 +222,14 @@ class BargainMiddlePage extends Component {
this.toKanjia(getParam('id'), 4, this.state.originatorUid) this.toKanjia(getParam('id'), 4, this.state.originatorUid)
} }
// 邀请好友砍价
shareFriendBargain = () => {
this.setState({
isShowOverlay: true,
status: 7,
isshowYindao: browser.isWeixin ? true : false
})
}
// 关闭弹窗 // 关闭弹窗
close = () => { close = () => {
...@@ -224,7 +240,6 @@ class BargainMiddlePage extends Component { ...@@ -224,7 +240,6 @@ class BargainMiddlePage extends Component {
} }
render() { render() {
let h, m, s
if (this.state.bargainData.expire_time) { if (this.state.bargainData.expire_time) {
let date = this.state.bargainData.expire_time * 1000 let date = this.state.bargainData.expire_time * 1000
...@@ -233,11 +248,13 @@ class BargainMiddlePage extends Component { ...@@ -233,11 +248,13 @@ class BargainMiddlePage extends Component {
date -= 1000 date -= 1000
let s = differenceInSeconds(new Date(date), now) % 60, let s = differenceInSeconds(new Date(date), now) % 60,
m = differenceInMinutes(new Date(date), now) % 60, m = differenceInMinutes(new Date(date), now) % 60,
h = differenceInHours(new Date(date), now) % 24 h = differenceInHours(new Date(date), now) % 24,
d = differenceInDays(new Date(date), now) % 24
this.setState({ this.setState({
hour: h, hour: h,
min: m, min: m,
sec: s sec: s,
day: d
}) })
}, 1000) }, 1000)
...@@ -252,40 +269,44 @@ class BargainMiddlePage extends Component { ...@@ -252,40 +269,44 @@ class BargainMiddlePage extends Component {
className={'indicator'}>【砍价神器】</span></div> className={'indicator'}>【砍价神器】</span></div>
} else if (this.state.bargainData.is_artifact === 1) { } else if (this.state.bargainData.is_artifact === 1) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div> thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button onClick={this.toArtifact}>立即领取</button> btn = <button className={'artifact-btn'} onClick={this.toArtifact}>立即领取</button>
} else if (this.state.bargainData.is_artifact === 2) { } else if (this.state.bargainData.is_artifact === 2) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div> thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button onClick={this.useArtifact}>立即使用</button> btn = <button className={'artifact-btn'} onClick={this.useArtifact}>立即使用</button>
} }
let bargainBtn let bargainBtn
if (this.state.isOriginator === '2' && this.state.data.assist_status === 0) { if (this.state.isOriginator !== 1 && this.state.data.assist_status === 0 && this.state.data.bargain_status === 0) {
bargainBtn = <button onClick={this.friendBargainFirst}>帮好友砍一刀</button> bargainBtn = <button className='active-btn' onClick={this.friendBargainFirst}>帮好友砍一刀</button>
} else if (this.state.isOriginator === '2' && this.state.data.assist_status === 1) { } else if (this.state.isOriginator !== 1 && this.state.data.assist_status === 1) {
bargainBtn = <button onClick={this.friendBargainSecond}>再砍一刀</button> bargainBtn = <button className='active-btn' onClick={this.friendBargainSecond}>再砍一刀</button>
} else if (this.state.isOriginator === '2' && this.state.data.assist_status === 2) { } else if (this.state.isOriginator !== 1 && this.state.data.assist_status === 2) {
bargainBtn = <button className={'invalid-btn'}>已帮好友助力</button> bargainBtn = <button className={'invalid-btn'}>已帮好友助力</button>
} else if (this.state.data.bargain_status === 1 || this.state.data.bargain_status === 2) { } else if (this.state.data.bargain_status === 1 || this.state.data.bargain_status === 2) {
bargainBtn = <button className={'invalid-btn'}>砍价结束</button> bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
} else if (this.state.isOriginator === '1' && this.state.data.bargain_status === 0) { } else if (this.state.isOriginator === 1 && this.state.data.bargain_status === 0) {
bargainBtn = <button>邀请好友砍价</button> bargainBtn = <button className='active-btn' onClick={this.shareFriendBargain}>邀请好友砍价</button>
} }
return ( return (
<div className={'bargain-middle-page'}> <div className={'bargain-middle-page'}>
<HeaderBar title='砍价详情' arrow={true} cart={true}></HeaderBar> <HeaderBar title='砍价详情' arrow={true} cart={true}></HeaderBar>
{/*<Loading isLoading={this.state.isLoaidng}>*/}
<div className="top"> <div className="top">
<div className="bargain-area"> <div className="bargain-area">
{ {
this.state.isOriginator === '2' && this.state.isOriginator !== 1 &&
<p className='bargain-tip'>你的好友发现一门精品课程，快来一起帮他砍价：</p> <p className='bargain-tip'>你的好友发现一门精品课程，快来一起帮他砍价：</p>
} }
<ul> <ul>
<VList <VList
info={<CourseDes data={this.state.data} toCart={this.toCart}/>} info={<CourseDes
isOriginator={this.state.isOriginator}
data={this.state.data}
toCart={this.toCart}/>}
/> />
</ul> </ul>
<div className="bargain-detail"> <div className="bargain-detail">
...@@ -296,7 +317,6 @@ class BargainMiddlePage extends Component { ...@@ -296,7 +317,6 @@ class BargainMiddlePage extends Component {
{ {
this.state.data.bargain_status === 0 && this.state.data.bargain_status === 0 &&
<div> <div>
{this.state.time}
<span <span
className={'time hour'}>{String(this.state.hour).padStart(2, 0)}</span> :&nbsp; className={'time hour'}>{String(this.state.hour).padStart(2, 0)}</span> :&nbsp;
<span <span
...@@ -306,7 +326,7 @@ class BargainMiddlePage extends Component { ...@@ -306,7 +326,7 @@ class BargainMiddlePage extends Component {
</div> </div>
} }
{ {
this.state.data.bargain_status === 1 && this.state.isOriginator === '1' && this.state.data.bargain_status === 1 && this.state.isOriginator === 1 &&
<span className={'inactive'}>砍价结束</span> <span className={'inactive'}>砍价结束</span>
} }
...@@ -315,22 +335,23 @@ class BargainMiddlePage extends Component { ...@@ -315,22 +335,23 @@ class BargainMiddlePage extends Component {
<span style={{width: this.state.width}}></span> <span style={{width: this.state.width}}></span>
</div> </div>
{ {
this.state.isOriginator === '1' && this.state.data.bargain_status === 0 && this.state.isOriginator === 1 && this.state.data.bargain_status === 0 &&
<div> <div>
<div className='third-row'> {thirdRow}
{thirdRow} {btn}
</div>
<div>
{btn}
</div>
</div> </div>
} }
{ {
this.state.isOriginator === '1' && this.state.data.bargain_status === 1 && this.state.isOriginator === 1 && this.state.data.bargain_status === 1 &&
<div> <div>
砍价金额将于 砍价金额将于
{h} : {m} : {s} <span className={'time hour'}>{String(this.state.day).padStart(2, 0)}</span><span
className={'unit'}> 天 </span>
<span className={'time min'}>{String(this.state.hour).padStart(2, 0)}</span><span
className={'unit'}> 时 </span>
<span className={'time sec'}>{String(this.state.min).padStart(2, 0)}</span><span
className={'unit'}>分</span>
后清零，请尽快完成支付 后清零，请尽快完成支付
</div> </div>
} }
...@@ -367,7 +388,7 @@ class BargainMiddlePage extends Component { ...@@ -367,7 +388,7 @@ class BargainMiddlePage extends Component {
<div className="more" onClick={this.getMore}>查看更多>></div> <div className="more" onClick={this.getMore}>查看更多>></div>
</div> </div>
</div> </div>
<div className="bargain-course-list"> <div className="bargain-course-list" id='bargainCourse'>
<div className="title-wrapper"> <div className="title-wrapper">
<div className="title">我要砍价</div> <div className="title">我要砍价</div>
<div className="subtitle">邀请{this.state.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</div> <div className="subtitle">邀请{this.state.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</div>
...@@ -403,26 +424,40 @@ class BargainMiddlePage extends Component { ...@@ -403,26 +424,40 @@ class BargainMiddlePage extends Component {
this.state.isShowOverlay && this.state.isShowOverlay &&
<Overlay> <Overlay>
{/*砍价成功去分享*/}
{
this.state.status === 7 &&
<BargainSuccess isshowYindao={this.state.isshowYindao} limitPeople={this.state.limitPeople}
close={this.close}/>
}
{/*引导关注公众号*/} {/*引导关注公众号*/}
{ {
this.state.status === 1 && this.state.status === 1 &&
<PublicNumber/> <PublicNumber
money={this.state.amount}
avatar={this.props.user.data.avatar}
firendBaigainPrice={this.state.firendBaigainPrice}/>
} }
{/*好友成功砍第一刀*/} {/*好友成功砍第一刀*/}
{ {
this.state.status === 2 && this.state.status === 2 &&
<BargainFirst bargainSecond={this.friendBargainSecond}/> <BargainFirst
bargainSecond={this.friendBargainSecond}
money={this.state.amount}
/>
} }
{/*好友成功砍第二刀*/} {/*好友成功砍第二刀*/}
{ {
this.state.status === 3 && this.state.status === 3 &&
<BargainSecond/> <BargainSecond close={this.close} money={this.state.amount}/>
} }
{/*不能在砍了*/} {/*不能在砍了*/}
{ {
this.state.status === 4 && this.state.status === 4 &&
<NotBargain/> <NotBargain close={this.close} limitPeople={this.state.limitPeople}/>
} }
{/*领取砍价神器*/} {/*领取砍价神器*/}
{ {
...@@ -432,17 +467,18 @@ class BargainMiddlePage extends Component { ...@@ -432,17 +467,18 @@ class BargainMiddlePage extends Component {
{/*使用砍价神器*/} {/*使用砍价神器*/}
{ {
this.state.status === 6 && this.state.status === 6 &&
<UseArtifact toCart={this.toCart}/> <UseArtifact toCart={this.toCart} money={this.state.amount}
allMoney={this.state.bargainData.bargain_price}/>
} }
{ {
this.state.status !== 0 && this.state.status !== 7 &&
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i> <i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
} }
</Overlay> </Overlay>
} }
{/*</Loading>*/}
</div> </div>
); );
...@@ -457,11 +493,13 @@ function CourseDes(props) { ...@@ -457,11 +493,13 @@ function CourseDes(props) {
{data.course_title} {data.course_title}
</div> </div>
<div className="price-bar"> <div className="price-bar">
<span className={'discount-price'}>￥{data.pay_price}</span> <span className={'discount-price'}>￥{data.course_price}</span>
<span className={'original-price'}>￥{data.course_price}</span> {
<button className={'purchase-btn'} props.isOriginator === 1 &&
onClick={props.toCart}>¥{data.pay_price}去支付 <button className={'purchase-btn'}
</button> onClick={props.toCart}>¥{data.pay_price}去支付
</button>
}
</div> </div>
</div> </div>
) )
...@@ -469,16 +507,27 @@ function CourseDes(props) { ...@@ -469,16 +507,27 @@ function CourseDes(props) {
function CourseBottom(props) { function CourseBottom(props) {
let Buttons let Buttons
if (props.item.bargain_status === 0) { if (props.item.bargain_status === 2) {
Buttons = <button className={'bargain'}>我要砍价</button> Buttons = <Link to={`/detail?id=${props.item.course_id}`} className={'bargain'}>我要砍价</Link>
} else if (props.item.bargain_status === 3) { } else if (props.item.bargain_status === 3) {
Buttons = <button className={'bargain'}>去学习</button> Buttons = <Link to={`/play?id=${props.item.course_id}`} className={'bargain'}>去学习</Link>
} else { } else {
Buttons = ( Buttons = (
<div className="btns"> <div className="btns">
<button className={classnames('bargain-btn', { {/*<button className={classnames('bargain-btn', {invalid: props.item.bargain_status === 2})}>*/}
invalid: props.item.bargain_status === 2 {/*{props.item.bargain_status === 2 ? '砍价结束' : '继续砍价'}*/}
})}>{props.item.bargain_status === 2 ? '砍价结束' : '继续砍价'}</button> {/*</button>*/}
{
props.item.bargain_status === 1 &&
<button className='invalid'>砍价结束</button>
}
{
props.item.bargain_status === 0 &&
<Link to={`/detail?id=${props.item.course_id}`} className={'bargain-btn'}>继续砍价</Link>
}
<button onClick={props.toCart} <button onClick={props.toCart}
className={'purchase-btn'}>¥{props.item.pay_price}去支付 className={'purchase-btn'}>¥{props.item.pay_price}去支付
</button> </button>
...@@ -497,12 +546,16 @@ function CourseBottom(props) { ...@@ -497,12 +546,16 @@ function CourseBottom(props) {
} }
function PublicNumber() { function PublicNumber(props) {
return ( return (
<div className='bargain-public-number'> <div className='bargain-public-number'>
<img className='avait' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
alt=""/> <img className='avait' src={props.avatar} alt=""/>
<p className='status-title ff4'>谢谢你帮我砍了5.6元！</p>
{
props.firendBaigainPrice &&
<p className='status-title ff4'>谢谢你帮我砍了{props.money}元！</p>
}
<p className='status-dec'>关注公众号，可以再砍一刀哦~</p> <p className='status-dec'>关注公众号，可以再砍一刀哦~</p>
<img className='public-number-img' <img className='public-number-img'
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""/> src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""/>
...@@ -514,38 +567,34 @@ function BargainFirst(props) { ...@@ -514,38 +567,34 @@ function BargainFirst(props) {
return ( return (
<div className='bargain-first'> <div className='bargain-first'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/> <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='status-title'>谢谢你帮我砍了<span className='ff4'>5.6元</span>！</p> <p className='status-title'>谢谢你帮我砍了<span className='ff4'>{props.money}元</span>！</p>
<p className='status-dec'>你还可以帮我再砍一刀哦~</p> <p className='status-dec'>你还可以帮我再砍一刀哦~</p>
<button onClick={props.bargainSecond}>再砍一刀</button> <button className='bargain-href' onClick={props.bargainSecond}>再砍一刀</button>
</div> </div>
) )
} }
function BargainSecond() { function BargainSecond(props) {
return ( return (
<div className='bargain-second'> <div className='bargain-second'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/> <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='status-title'>厉害了，又帮好友砍掉<span className='ff4'>5.6元</span>！</p> <p className='status-title'>厉害了，又帮好友砍掉<span className='ff4'>{props.money}元</span>！</p>
<button>我也要砍价</button> <a className='bargain-href' href='#bargainCourse' onClick={props.close}>我也要砍价</a>
</div> </div>
) )
} }
function NotBargain() { function NotBargain(props) {
return ( return (
<div className='not-bargain'> <div className='not-bargain'>
<img className='middle-img' src={require('./image/kanjia_no_iccon.png')} alt=""/> <img className='middle-img' src={require('./image/kanjia_no_iccon.png')} alt=""/>
<p className='status-title'>你的好友用【砍价神器】把我砍蒙圈了<br/>不能再砍了哦~</p> <p className='status-title'>你的好友用【砍价神器】把我砍蒙圈了<br/>不能再砍了哦~</p>
<p className='status-dec'>邀请20位以上好友帮忙砍价可获得【砍价神器】</p> <p className='status-dec'>邀请{props.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</p>
<button>我也要砍价</button> <a className='bargain-href' href='#bargainCourse' onClick={props.close}>我也要砍价</a>
</div> </div>
) )
} }
{/*领取砍价神器*/
}
function Artifact(props) { function Artifact(props) {
return ( return (
<div className='artifact-box'> <div className='artifact-box'>
...@@ -564,10 +613,10 @@ function UseArtifact(props) { ...@@ -564,10 +613,10 @@ function UseArtifact(props) {
return ( return (
<div className='use-artifact-box'> <div className='use-artifact-box'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/> <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='top-tip'>厉害了，又砍掉了10元！</p> <p className='top-tip'>厉害了，又砍掉了{props.money}元！</p>
<p className='middle-tip'> <p className='middle-tip'>
你已经砍了 你已经砍了
<span className={'indicator'}>109元</span> <span className={'indicator'}>{props.allMoney}元</span>
没见过你这么能砍的人... 没见过你这么能砍的人...
</p> </p>
<p className='btm-tip'> <p className='btm-tip'>
...@@ -579,6 +628,29 @@ function UseArtifact(props) { ...@@ -579,6 +628,29 @@ function UseArtifact(props) {
} }
function BargainSuccess(props) {
return (
<div>
<div className='close-bargain-success' onClick={props.close}></div>
<div className="bargain-success">
{
props.isshowYindao &&
<i className='iconfont iconyindao'></i>
}
<p>分享到微信群邀请更多好友帮忙砍价</p>
<p>超过{props.limitPeople}位好友助力可获得<span className={'indicator'} style={{color: '#FF4000'}}>【砍价神器】</span>哦
</p>
</div>
</div>
)
}
export default compose( export default compose(
connect(
state => ({user: state.user}),
null
),
withRouter withRouter
)(BargainMiddlePage) )(BargainMiddlePage)
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/bargainInfo/bargain-info.scss
.bargain-bind-iphone { .bargain-bind-phone {
position: absolute; display: flex;
top: 50%; flex-flow: column;
left: 50%; width: 300px;
transform: translate(-50%, -50%); height: 195px;
display: flex; padding: 20px;
flex-flow: column; background: $white;
width: 300px; border-radius: 3px;
height: 195px; margin: 200px auto 20px auto;
padding: 20px;
background: $white; .title {
border-radius: 3px; text-align: center;
font-size: $font_16;
.title { margin-bottom: 12px;
text-align: center; }
font-size: $font_16;
margin-bottom: 12px; button, .button {
} display: inline-block;
width: 260px;
height: 30px;
background: $bg_999;
line-height: 28px;
text-align: center;
-webkit-appearance: none;
border: none;
font-size: $font_16;
color: $white;
.list { &.active {
.am-list-item { background-color: #FADD29;
height: 30px; color: #FF4000;
min-height: 30px;
border: 1px solid $border_ddd;
input {
font-size: $font_12;
}
}
.am-list-item {
margin-bottom: 15px;
}
.am-list-line {
&::after {
display: none;
}
}
.am-list-body {
&::after {
display: none;
}
}
} }
}
button {
display: inline-block;
width: 260px;
height: 30px;
background: $bg_999;
-webkit-appearance: none; input {
border: none; width: 100%;
height: 30px;
-webkit-appearance: none;
outline: 0;
border: 1px solid #DDDDDD;
margin-bottom: 15px;
padding-left: 10px;
font-size: $font_16; &::-webkit-input-placeholder {
color: $white; color: $color_999;
text-align: center;
line-height: 30px;
} }
&:focus {
border: 1px solid $active;
color: $active;
}
}
label {
display: block;
position: relative;
}
.send-code {
position: absolute;
right: 15px;
top: 8px;
font-size: 13px;
color: $color_999;
}
} }
\ No newline at end of file
src/components/detail/bargain/bargainInfo/index.js
import React from 'react'; import React, {Component} from 'react';
import { InputItem, List } from "antd-mobile"; import {InputItem, List} from "antd-mobile";
import './bargain-info.scss' import './bargain-info.scss'
import {validateTel} from "@/utils";
import {Toast} from 'antd-mobile'
import {http, api} from "@/utils";
import {Link} from "react-router-dom";
const BargainInfo = () => { class BargainInfo extends Component {
return (
<div className={'bargain-info'}> state = {
<div className="title">绑定手机，先砍一刀</div> mobile: '',
<List className={'list'}> code: '',
<InputItem isBargain: true
placeholder={'手机号'} }
/>
<InputItem handleChange = e => {
placeholder={'验证码'}
/> let {name, value} = e.target
</List>
<button>先砍一刀</button> this.setState({
</div> [name]: value
); })
}; }
sendCode = () => {
console.log(validateTel(this.state.mobile));
if (!validateTel(this.state.mobile)) {
Toast.info('请输入正确的手机号')
return
}
http.post(`${api['base-api']}/sys/bind_send_sms`, {
phone_num: this.state.mobile
}).then(res => {
if (res.data.code == 200) {
Toast.info('验证码发送成功', 2, null, false)
} else if (res.data.errno === 410) {
Toast.info('该手机号已注册，请使用该手机号登录，发起砍价。', 3, null, false)
this.setState({
isBargain: false
})
} else {
Toast.info(res.data.msg)
}
})
}
handleClick = () => {
if (!this.state.code) {
Toast.info('请填写验证码')
return
}
http.post(`${api.home}/m/user/bindMobile`, {
...this.state
}).then(res => {
if (res.data.code == 200) {
Toast.info('绑定手机号成功', 2, null, false)
this.props.iWantBargain()
} else {
Toast.info(res.data.msg)
}
})
}
render() {
let {mobile, code} = this.state
return (
<div className={'bargain-bind-phone'}>
<div className="title">绑定手机，先砍一刀</div>
<List className={'list'}>
<input type="tel" onChange={this.handleChange} name='mobile' placeholder='手机号' maxLength={11}/>
<label htmlFor="code">
<input type="tel" id='code' onChange={this.handleChange} name='code' placeholder='验证码'
maxLength={6}/>
<div className={'send-code'} onClick={this.sendCode}>发送验证码</div>
</label>
</List>
{
this.state.isBargain &&
<button onClick={this.handleClick}
className={validateTel(mobile) && code ? 'active' : ''}>先砍一刀</button>
}
{
!this.state.isBargain &&
<Link className='button active' to={`/passport/login`}>去登录</Link>
}
</div>
);
}
}
export default BargainInfo export default BargainInfo
\ No newline at end of file
src/components/detail/bargain/index.js
import React, {Component, useState} from 'react' import React, { Component, useState } from 'react'
import './bargain.scss' 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"
import {withRouter} from 'react-router-dom' import { withRouter } from 'react-router-dom'
class Bargain extends Component { class Bargain extends Component {
...@@ -70,13 +70,13 @@ class Bargain extends Component { ...@@ -70,13 +70,13 @@ class Bargain extends Component {
}) })
} }
// 查看更多 // 查看更多
getMore = () => { getMore = () => {
this.setState({ this.setState({
isShowMore: true isShowMore: true
}) })
} }
// 自组件传给父组件的boxHide // 自组件传给父组件的boxHide
boxHide = (val) => { boxHide = (val) => {
this.setState({isShowMore: val}) this.setState({isShowMore: val})
...@@ -125,22 +125,7 @@ class Bargain extends Component { ...@@ -125,22 +125,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 +135,23 @@ class Bargain extends Component { ...@@ -150,15 +135,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 {
...@@ -203,13 +196,7 @@ class Bargain extends Component { ...@@ -203,13 +196,7 @@ class Bargain extends Component {
{/*绑定手机号*/} {/*绑定手机号*/}
{ {
this.state.status === 3 && this.state.status === 3 &&
<BargainInfo/> <BargainInfo iWantBargain={this.iWantBargain}/>
}
{/*砍价成功去分享*/}
{
this.state.status === 0 &&
<BargainSuccess/>
} }
...@@ -266,9 +253,10 @@ function BargainIntro(props) { ...@@ -266,9 +253,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 +281,7 @@ function BargainStatus(props) { ...@@ -293,6 +281,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 +297,9 @@ function BargainStatus(props) { ...@@ -308,9 +297,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 +341,12 @@ function BargainStatus(props) { ...@@ -352,9 +341,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 +356,6 @@ function BargainStatus(props) { ...@@ -364,22 +356,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
...@@ -16,18 +16,19 @@ class BtnStatus extends Component { ...@@ -16,18 +16,19 @@ class BtnStatus extends Component {
is_baoming: 0, is_baoming: 0,
group_status: 3, group_status: 3,
in_cart: false, in_cart: false,
countdown: 0,
} }
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
this.setState({ this.setState({
...nextProps.data.course_info ...nextProps.data.course_info,
countdown: nextProps.countdown,
}); });
} }
// 加入购物车 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 +39,14 @@ class BtnStatus extends Component { ...@@ -38,11 +39,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 +64,7 @@ class BtnStatus extends Component { ...@@ -60,20 +64,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 +96,7 @@ class BtnStatus extends Component { ...@@ -105,7 +96,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()
...@@ -121,7 +112,7 @@ class BtnStatus extends Component { ...@@ -121,7 +112,7 @@ class BtnStatus extends Component {
info = this.props.data.course_info info = this.props.data.course_info
} }
let barInfo = this.props.barInfo && this.props.barInfo let barInfo = this.props.barInfo && this.props.barInfo
const {countdown} = this.state;
return ( return (
<div> <div>
...@@ -160,22 +151,22 @@ class BtnStatus extends Component { ...@@ -160,22 +151,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>
} }
{/*拼团 已开团*/} {/*拼团 已开团*/}
...@@ -187,7 +178,7 @@ class BtnStatus extends Component { ...@@ -187,7 +178,7 @@ class BtnStatus extends Component {
<span>课程咨询</span> <span>课程咨询</span>
</a> </a>
<div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}> <div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
邀请好友参团 23:32:23 后结束 邀请好友参团 {countdown} 后结束
</div> </div>
</div> </div>
} }
......
src/components/detail/carousel/index.js
...@@ -16,9 +16,9 @@ class Carouselw extends Component { ...@@ -16,9 +16,9 @@ class Carouselw extends Component {
componentDidMount() { componentDidMount() {
const _this = this const _this = this
_this.getList() _this.getList()
// this.timer = setInterval(function () { this.timer = setInterval(function () {
// _this.getList() _this.getList()
// },10000); },10000);
} }
......
src/components/detail/group/index.js
...@@ -15,6 +15,8 @@ class Group extends Component { ...@@ -15,6 +15,8 @@ class Group extends Component {
pdd_price: 0, pdd_price: 0,
number: 0, number: 0,
data: {}, data: {},
countdown: props.countdown,
now_groupon_list: [],
} }
} }
...@@ -102,14 +104,49 @@ class Group extends Component { ...@@ -102,14 +104,49 @@ class Group extends Component {
} }
} }
componentWillReceiveProps(nextProps) {
this.setState({
countdown: nextProps.countdown,
})
}
componentDidMount() {
if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info && this.props.courseInfo.courseInfo.course_info.pdd_group_info) {
let now_groupon_list = this.props.courseInfo.courseInfo.course_info.pdd_group_info.now_groupon_list;
if(now_groupon_list && now_groupon_list.length > 0) {
setInterval(() => {
now_groupon_list.map(item=>{
item.end_time -= 1;
return item;
});
this.setState({
now_groupon_list,
})
}, 1000);
}
}
}
hideMbc = () => { hideMbc = () => {
this.setState({ this.setState({
alreadyIn: false alreadyIn: false
}); });
} }
formatTimeByMillisecond = (millisecond) => {
let date = millisecond * 1000,
hours = 0,
minutes = 0,
seconds = 0;
date -= 1000
hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
seconds = `${parseInt((date - hours * 3600000 - minutes * 60000 ) / 1000)}`.padStart(2, 0);
return `${hours}:${minutes}:${seconds}`;
}
render() { render() {
const {alreadyIn} = this.state; const {alreadyIn, countdown, now_groupon_list} = this.state;
let groupInfo = '',groupon_member = '', group_status = -1, groupSuccessMbc = null; let groupInfo = '',groupon_member = '', group_status = -1, groupSuccessMbc = null;
if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) { if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info; groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info;
...@@ -156,7 +193,7 @@ class Group extends Component { ...@@ -156,7 +193,7 @@ class Group extends Component {
<div className='content'> <div className='content'>
<p>你已参团</p> <p>你已参团</p>
{groupTip} {groupTip}
<div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 23：23：23 后结束</div> <div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 {countdown} 后结束</div>
<p className='dec'>分享到3个群后，成团率高达98%</p> <p className='dec'>分享到3个群后，成团率高达98%</p>
</div> </div>
</div>; </div>;
...@@ -185,7 +222,7 @@ class Group extends Component { ...@@ -185,7 +222,7 @@ class Group extends Component {
</div> </div>
<div className='group-status'> <div className='group-status'>
<p>还差<span className='red'>{item.number}人</span>拼成</p> <p>还差<span className='red'>{item.number}人</span>拼成</p>
<p>剩余 {item.end_time}</p> <p>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
</div> </div>
<span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span> <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
</li> </li>
...@@ -224,7 +261,7 @@ class Group extends Component { ...@@ -224,7 +261,7 @@ class Group extends Component {
<img className='avatar' src={item.avatar} alt=""/> <img className='avatar' src={item.avatar} alt=""/>
<div className='user-name'> <div className='user-name'>
<p className='name text-overflow-one'>{item.user_name}</p> <p className='name text-overflow-one'>{item.user_name}</p>
<p className='time'>剩余 {item.end_time}</p> <p className='time'>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
</div> </div>
<p className='group-status'>还差{item.number}人</p> <p className='group-status'>还差{item.number}人</p>
<span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span> <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
......
src/components/detail/group/togroup.js
...@@ -78,7 +78,7 @@ class ToGroup extends Component { ...@@ -78,7 +78,7 @@ class ToGroup extends Component {
} }
componentDidMount() { componentDidMount() {
Promise.all([http.get(`${api['pay-api']}/pdd/goupon_pay_page/15610158875449306780`), http.get(`${api.home}/m/user_info`)]).then(resultList => { Promise.all([http.get(`${api['pay-api']}/pdd/goupon_pay_page/${getParam('id')}`), http.get(`${api.home}/m/user_info`)]).then(resultList => {
console.log(resultList); console.log(resultList);
let res = resultList[0], let res = resultList[0],
userInfo = resultList[1]; userInfo = resultList[1];
...@@ -92,11 +92,24 @@ class ToGroup extends Component { ...@@ -92,11 +92,24 @@ class ToGroup extends Component {
course_list: res.data.data.course_list, course_list: res.data.data.course_list,
userInfo, userInfo,
number: res.data.data.number, number: res.data.data.number,
countdown: '',
}); });
});
http.post(`${api['pay-api']}/m/sale/signature`).then(res => { if(res.data.data.is_success === 0) {
console.log(res); let date = res.data.data.end_time * 1000,
hours = 0,
minutes = 0,
seconds = 0;
setInterval(() => {
date -= 1000
hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
seconds = `${parseInt((date - hours * 3600000 - minutes * 60000 ) / 1000)}`.padStart(2, 0);
this.setState({
countdown: `${hours}:${minutes}:${seconds}`
});
}, 1000)
}
}); });
} }
...@@ -162,7 +175,7 @@ class ToGroup extends Component { ...@@ -162,7 +175,7 @@ class ToGroup extends Component {
function GorupContent(props) { function GorupContent(props) {
let tip, btn, dec, groupTip, shareTip, groupSuccessMbc; let tip, btn, dec, groupTip, shareTip, groupSuccessMbc;
const { pdd_price, data, groupon_member, is_success, person_num, userInfo, share, number } = props.data; const { pdd_price, data, groupon_member, is_success, person_num, userInfo, share, number, countdown } = props.data;
let ary=[],num = number; let ary=[],num = number;
while(num != 0) { while(num != 0) {
ary.push(num); ary.push(num);
...@@ -207,7 +220,7 @@ function GorupContent(props) { ...@@ -207,7 +220,7 @@ function GorupContent(props) {
if(uid === userInfo.data.data.uid) { if(uid === userInfo.data.data.uid) {
tip = <p className='tip'>{`拼团省￥${pdd_price}元`}</p> tip = <p className='tip'>{`拼团省￥${pdd_price}元`}</p>
btn = <span className='group-btn' onClick={props.invitedFriends}>邀请好友参团 23：23：23 后结束</span> btn = <span className='group-btn' onClick={props.invitedFriends}>邀请好友参团 {countdown} 后结束</span>
dec = <p className='dec'>分享到3个群后，成团率高达98%</p> dec = <p className='dec'>分享到3个群后，成团率高达98%</p>
} else { } else {
tip = <p className='tip'>{`拼团省￥${pdd_price}元`}</p> tip = <p className='tip'>{`拼团省￥${pdd_price}元`}</p>
......
src/components/detail/index.js
...@@ -14,7 +14,6 @@ import {fetchCoursesListIfNeeded} from "./actions" ...@@ -14,7 +14,6 @@ import {fetchCoursesListIfNeeded} from "./actions"
import {api, getParam, http, browser} from "@/utils"; import {api, getParam, http, browser} from "@/utils";
import {Toast} from 'antd-mobile'; import {Toast} from 'antd-mobile';
class Detail extends Component { class Detail extends Component {
constructor(props) { constructor(props) {
...@@ -28,11 +27,12 @@ class Detail extends Component { ...@@ -28,11 +27,12 @@ class Detail extends Component {
singMess: '', singMess: '',
barInfo: '', barInfo: '',
share: false, share: false,
countdown: '00:00:00',
} }
} }
componentDidMount() { componentDidMount() {
this.props.fetchCoursesListIfNeeded() this.props.fetchCoursesListIfNeeded();
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
...@@ -60,9 +60,32 @@ class Detail extends Component { ...@@ -60,9 +60,32 @@ class Detail extends Component {
})); }));
} }
componentWillReceiveProps(nextProps) {
let _this = this;
if (nextProps.courseInfo.course_info) {
let courseInfo = nextProps.courseInfo.course_info;
if (courseInfo.group_status === 3 || courseInfo.group_status === 4) {
let endTime = courseInfo.pdd_group_info.groupon_member.end_time;
let date = endTime * 1000,
hours = 0,
minutes = 0,
seconds = 0;
setInterval(() => {
date -= 1000
hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
seconds = `${parseInt((date - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0);
_this.setState({
countdown: `${hours}:${minutes}:${seconds}`
});
}, 1000)
}
}
}
invitedFriends = () => { invitedFriends = () => {
const {course_title,image_name, course_id, pdd_group_info, pdd_group_info: {groupon_member, groupon_member: { number }, price}} = this.props.courseInfo.course_info; const {course_title, image_name, course_id, pdd_group_info, pdd_group_info: {groupon_member, groupon_member: {number}, price}} = this.props.courseInfo.course_info;
if(browser.isWeixin) { if (browser.isWeixin) {
let share = this.state.share; let share = this.state.share;
this.setState({ this.setState({
share: !share, share: !share,
...@@ -95,22 +118,22 @@ class Detail extends Component { ...@@ -95,22 +118,22 @@ class Detail extends Component {
wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideAllNonBaseMenuItem(); wx.hideAllNonBaseMenuItem();
wx.showMenuItems({ wx.showMenuItems({
menuList: ['menuItem:share:appMessage' , 'menuItem:share:timeline'] // 要显示的菜单项，所有menu项见附录3 menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline'] // 要显示的菜单项，所有menu项见附录3
}); });
wx.updateAppMessageShareData({ wx.updateAppMessageShareData({
...shareData, ...shareData,
success: function () { success: function () {
// 设置成功 // 设置成功
} }
}) })
wx.updateTimelineShareData({ wx.updateTimelineShareData({
...shareData, ...shareData,
success: function () { success: function () {
// 设置成功 // 设置成功
} }
}) })
}); });
}else{ } else {
Toast.info('请在微信中使用分享功能！', 2); Toast.info('请在微信中使用分享功能！', 2);
} }
} }
...@@ -138,24 +161,22 @@ class Detail extends Component { ...@@ -138,24 +161,22 @@ class Detail extends Component {
} }
render() { render() {
let courseInfo = ''; let courseInfo = '',
let service = ''; service = '',
let number = 0; number = 0,
endTime = 0;
if (this.props.courseInfo.course_info) { if (this.props.courseInfo.course_info) {
courseInfo = this.props.courseInfo.course_info; courseInfo = this.props.courseInfo.course_info;
service = courseInfo.service; service = courseInfo.service;
if(courseInfo.group_status !== 0) { if (courseInfo.group_status === 3 || courseInfo.group_status === 4) {
number = courseInfo.pdd_group_info.groupon_member.number; number = courseInfo.pdd_group_info.groupon_member.number;
} }
} }
const { const {share, countdown} = this.state;
is_bargain, // 是否是砍价课程
} = this.props;
const { share } = this.state;
return ( return (
<div className='detail-box'> <div className='detail-box'>
<CallApp className='toapp'></CallApp>
<HeaderBar title='课程详情' arrow={true} cart={true}></HeaderBar> <HeaderBar title='课程详情' arrow={true} cart={true}></HeaderBar>
<CallApp className='toapp'></CallApp>
{/*弹幕*/} {/*弹幕*/}
<Carouselw></Carouselw> <Carouselw></Carouselw>
{/*课程*/} {/*课程*/}
...@@ -225,7 +246,7 @@ class Detail extends Component { ...@@ -225,7 +246,7 @@ class Detail extends Component {
{/*拼团*/} {/*拼团*/}
{ {
(courseInfo.group_status === 3 || courseInfo.group_status === 4) && (courseInfo.group_status === 3 || courseInfo.group_status === 4) &&
<Group history={this.props.history}/> <Group history={this.props.history} countdown={countdown}/>
} }
...@@ -239,11 +260,18 @@ class Detail extends Component { ...@@ -239,11 +260,18 @@ class Detail extends Component {
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/> <OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{/*课程按钮*/} {/*课程按钮*/}
<BtnStatus data={this.props.courseInfo} barInfo={this.state.barInfo} getBargainInfo={this.getBargainInfo} invitedFriends={this.invitedFriends} history={this.props.history}></BtnStatus> <BtnStatus countdown={countdown}
data={this.props.courseInfo}
barInfo={this.state.barInfo}
getBargainInfo={this.getBargainInfo}
invitedFriends={this.invitedFriends}
history={this.props.history}></BtnStatus>
{ {
share ? ( share ? (
<div className='groupSuccessMbc' onClick={()=>{this.setState({share: false})}}> <div className='groupSuccessMbc' onClick={() => {
this.setState({share: false})
}}>
<div className='tipContent'> <div className='tipContent'>
{`还差${number}人，分享到3个群，成团率高达98%`} {`还差${number}人，分享到3个群，成团率高达98%`}
......
src/components/detail/overlay/overlay.scss
...@@ -5,5 +5,5 @@ ...@@ -5,5 +5,5 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 9999; z-index: 999;
} }
\ No newline at end of file
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,7 +2,10 @@ import React, {Component} from 'react' ...@@ -2,7 +2,10 @@ 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 {
...@@ -13,6 +16,11 @@ class Single extends Component { ...@@ -13,6 +16,11 @@ class Single extends Component {
orderId: '', orderId: '',
nowPrice: '', nowPrice: '',
laterPrice: '', laterPrice: '',
hour: '',
min: '',
sec: '',
endTime: '',
groupOrderId: '',
payType: '0', // 1支付宝 0微信 payType: '0', // 1支付宝 0微信
} }
} }
...@@ -163,11 +171,55 @@ class Single extends Component { ...@@ -163,11 +171,55 @@ class Single extends Component {
} }
// 0元参团 // 0元参团
zerogroupBuy = () => { zerogroupBuy = () => {
this.setState({ this.getOrderId()
status: 7 }
// 获取订单号-0元参团
getOrderId = () => {
let data = {
course_id: getParam('id')
}
http.post(`${api['pay-api']}/pdd/sys`, data).then((res) => {
if (res.data.errno === 0) {
this.setState({
groupOrderId: res.data.data.order_id
})
this.getOrderStatus(res.data.data.order_id)
} else {
Toast.info(res.data.msg, 2)
}
}) })
} }
// 获取订单状态-0元参团
getOrderStatus = (id) => {
http.get(`${api.home}/m/pdd/order_status/${id}`).then((res) => {
if (res.data.code === 200) {
this.getTime(res.data.data.pdd_order_id)
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取倒计时-0元参团
getTime = (id) => {
http.get(`${api.home}/m/pdd_order_end_time/${id}`).then((res) => {
if (res.data.code === 200) {
this.setState({
endTime: res.data.data.end_time,
status: 7
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 邀请好友参团
toGroup = () => {
this.props.history.push(`/togroup?id=${this.state.groupOrderId}`)
}
// 关闭弹窗 // 关闭弹窗
colse = () => { colse = () => {
this.props.boxHide(false); this.props.boxHide(false);
...@@ -177,6 +229,22 @@ class Single extends Component { ...@@ -177,6 +229,22 @@ class Single extends Component {
} }
render() { render() {
if (this.state.endTime) {
let date = this.state.endTime * 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 +339,19 @@ class Single extends Component { ...@@ -271,17 +339,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' onClick={this.toGroup}>
剩余{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 +364,10 @@ class Single extends Component { ...@@ -294,4 +364,10 @@ class Single extends Component {
} }
export default Single export default compose(
connect(
state => ({user: state.user}),
null
),
withRouter
)(Single)
src/components/scholarship/DrawDocument/DrawDocument.js
...@@ -37,7 +37,7 @@ export default class DrawDocument extends Component { ...@@ -37,7 +37,7 @@ export default class DrawDocument extends Component {
<Flex justify='between' align='center' style={{height: '44px'}}> <Flex justify='between' align='center' style={{height: '44px'}}>
<p className={'tip'}>收支明细及待确认金额请前往App查看</p> <p className={'tip'}>收支明细及待确认金额请前往App查看</p>
{/* <div className={'app'}>在APP打开</div> */} {/* <div className={'app'}>在APP打开</div> */}
<OpenApp className='app'/> <OpenApp className='app' text='在APP打开'/>
</Flex> </Flex>
</WingBlank> </WingBlank>
</div> </div>
......
src/components/scholarship/index.js
...@@ -5,6 +5,7 @@ import { is_weixin, http, api } from "@/utils"; ...@@ -5,6 +5,7 @@ import { is_weixin, http, api } from "@/utils";
import CategoryItem from './CategoryItem/CategoryItem.js'; import CategoryItem from './CategoryItem/CategoryItem.js';
import SortItem from './SortItem/SortItem.js'; import SortItem from './SortItem/SortItem.js';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import OpenApp from '@/common/CallApp';
const Item = List.Item; const Item = List.Item;
...@@ -386,9 +387,9 @@ class _Scholarship extends Component { ...@@ -386,9 +387,9 @@ class _Scholarship extends Component {
2.该课程正式开课时，如果用户没有退款，对应的订单金额会自动转入您的账号余额，否则该佣金会自动收回。 2.该课程正式开课时，如果用户没有退款，对应的订单金额会自动转入您的账号余额，否则该佣金会自动收回。
</p> </p>
<WhiteSpace></WhiteSpace> <WhiteSpace></WhiteSpace>
<Flex style={{ fontSize: '13px', color: '#000' }} justify='center'> <Flex style={{ fontSize: '14px', color: '#0099FF' }} justify='center'>
<span>待确认订单详情可</span> <span style={{color: "#333", marginRight: '10px'}}>待确认订单详情可</span>
<span style={{ color: '#0099FF', marginLeft: '10px' }}>前往APP查看</span> <OpenApp className='toApp' text='前往APP查看'/>
</Flex> </Flex>
</Modal> </Modal>
</div> </div>
......
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