Skip to content

M
mr-julyedu
Commit 891cc42d by xuzhenghua
Options

detail

parent 426bfa05
Showing with 697 additions and 102 deletions
src/components/bargainMiddlePage/bargain-middle-page.scss
......@@ -68,12 +68,15 @@
}
.v-list-item {
padding-right: 7px;
margin-bottom: 7px;
margin-top: 0;
padding: 15px 7px 10px 10px;
.cover {
margin-right: 10px;
img {
width: 125px;
height: 90px;
}
}
.content {
......@@ -155,6 +158,7 @@
.button {
display: flex;
justify-content: center;
margin-top: 10px;
}
button {
......@@ -166,6 +170,7 @@
border: none;
color: $bg_ff3131;
-webkit-appearance: none;
font-size: 16px;
}
.invalid-btn {
......@@ -338,4 +343,113 @@
vertical-align: middle;
}
}
.bargain-public-number, .bargain-first, .bargain-second, .not-bargain {
width: 300px;
padding: 20px 0;
background-color: $bg_fff;
border-radius: 3px;
text-align: center;
margin: 200px auto 20px auto;
position: relative;
.ff4 {
color: $color_FF4000;
}
.status-title {
font-size: 16px;
height: 16px;
line-height: 16px;
}
.status-dec {
font-size: 12px;
color: $color_666;
height: 12px;
line-height: 12px;
}
button {
width: 260px;
height: 30px;
background-color: $bg_FADD29;
color: $color_FF4000;
font-size: 16px;
border: none;
position: absolute;
bottom: 20px;
left: 20px;
}
.top-img {
position: absolute;
width: 135px;
height: 67px;
top: -67px;
margin-left: -67px;
}
}
.bargain-public-number {
height: 185px;
.avait {
position: absolute;
top: -20px;
margin-left: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
}
.status-title {
margin-top: 10px;
}
.status-dec {
margin-top: 10px;
}
.public-number-img {
width: 86px;
height: 86px;
margin-top: 15px;
}
}
.bargain-first {
height: 145px;
.status-dec {
margin-top: 15px;
}
}
.bargain-second {
height: 105px;
}
.not-bargain {
height: 205px;
padding: 15px 20px 20px 20px;
.middle-img {
width: 51px;
height: 51px;
}
.status-title {
height: 37px;
line-height: 20px;
font-size: 15px;
margin-top: 10px;
}
.status-dec {
margin-top: 15px;
}
}
\ No newline at end of file
src/components/bargainMiddlePage/index.js
......@@ -5,14 +5,20 @@ 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 {Link, withRouter} from "react-router-dom"
import Ranking from './ranking'
import {getHours, getMinutes, getSeconds} from "date-fns"
import Overlay from '../detail/overlay'
import {compose} from "redux"
class BargainMiddlePage extends Component {
constructor(props) {
super(props)
this.state = {
isShowOverlay: false,
isOriginator: getParam('is_originator'),
kanjiaIcon: require('./image/kanjia_icon.png'),
courseList: '', // 所有砍价课程
data: '',
......@@ -21,7 +27,8 @@ class BargainMiddlePage extends Component {
outList: [],
list: [],
width: '0',
isShowMore: ''
isShowMore: '',
status: ''
}
}
......@@ -37,6 +44,7 @@ class BargainMiddlePage extends Component {
if (res.data.code === 200) {
this.setState({
data: res.data.data,
originatorUid: res.data.data.originator_uid,
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 + '%'
......@@ -111,16 +119,130 @@ class BargainMiddlePage extends Component {
}
// 砍价接口
toKanjia = (id, type, uid) => {
let data = {
course_id: id,
type: type, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: uid // 被助力人id 【自己本人操作传0】
}
http.post(`${api.home}/m/to_bargain`, data).then((res) => {
if (res.data.code === 200) {
this.getBargainInfo()
if (type === 3) {
this.userStatus()
}
if (type === 4) {
this.setState({
isShowOverlay: true,
status: 3
})
}
// this.setState({
// 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 {
Toast.info(res.data.msg, 2)
}
})
}
// 帮好友砍价第一刀
friendBargainFirst = () => {
this.toKanjia(getParam('id'), 3, this.state.originatorUid)
}
// 帮好友砍价第二刀
friendBargainSecond = () => {
this.toKanjia(getParam('id'), 4, this.state.originatorUid)
}
// 关闭弹窗
close = () => {
this.setState({
isShowOverlay: false,
status: '',
})
}
render() {
let date, h, m, s
if (this.state.bargainData.expire_time) {
date = new Date(this.state.bargainData.expire_time * 1000)
h = <span className={'time hour'}>{getHours(date)}</span>
m = <span className={'time hour'}>{getMinutes(date)}</span>
s = <span className={'time hour'}>{getSeconds(date)}</span>
}
let thirdRow, btn
// is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
if (this.state.bargainData.is_artifact === 0) {
thirdRow =
<div>再邀请<span className={'indicator'}>{this.state.bargainData.invite_num}</span>位好友助力即可获得<span
className={'indicator'}>【砍价神器】</span></div>
} else if (this.state.bargainData.is_artifact === 1) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button onClick={this.toArtifact}>立即领取</button>
} else if (this.state.bargainData.is_artifact === 2) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button onClick={this.useArtifact}>立即使用</button>
}
let bargainBtn
if (this.state.isOriginator === '2' && this.state.data.assist_status === 0) {
bargainBtn = <button onClick={this.friendBargainFirst}>帮好友砍一刀</button>
} else if (this.state.isOriginator === '2' && this.state.data.assist_status === 1) {
bargainBtn = <button onClick={this.friendBargainSecond}>再砍一刀</button>
} else if (this.state.isOriginator === '2' && this.state.data.assist_status === 2) {
bargainBtn = <button className={'invalid-btn'}>已帮好友助力</button>
} else if (this.state.data.bargain_status === 1 || this.state.data.bargain_status === 2) {
bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
} else if (this.state.isOriginator === '1' && this.state.data.bargain_status === 0) {
bargainBtn = <button>邀请好友砍价</button>
}
return (
<div className={'bargain-middle-page'}>
<HeaderBar title='砍价详情' arrow={true} cart={true}></HeaderBar>
<div className="top">
<div className="bargain-area">
<p className='bargain-tip'>你的好友发现一门精品课程，快来一起帮他砍价：</p>
{
this.state.isOriginator === '2' &&
<p className='bargain-tip'>你的好友发现一门精品课程，快来一起帮他砍价：</p>
}
<ul>
<VList
info={<CourseDes data={this.state.data}/>}
info={<CourseDes data={this.state.data} toCart={this.toCart}/>}
/>
</ul>
<div className="bargain-detail">
......@@ -128,24 +250,29 @@ class BargainMiddlePage extends Component {
<div>
已砍<span className={'reduced-price'}>{this.state.bargainData.bargain_price}元</span>
</div>
<div>
{/*<span className={'time hour'}>23</span>:*/}
{/*<span className={'time min'}>59</span>:*/}
{/*<span className={'time sec'}>02</span>*/}
{this.state.bargainData.expire_time}
<span className={'inactive'}>后砍价结束</span>
</div>
{
this.state.data.bargain_status === 0 &&
<div>
{h} : {m} : {s}
<span className={'inactive'}> 后砍价结束</span>
</div>
}
</div>
<div className="middle">
<span style={{width: this.state.width}}></span>
</div>
<div className="bottom">
再邀请<span className={'indicator'}>{this.state.bargainData.invite_num}</span>位好友助力即可获得
<span className={'indicator'}>【砍价神器】</span>
</div>
{
this.state.isOriginator === '1' && this.state.data.bargain_status === 0 &&
<div>
{thirdRow}
{btn}
</div>
}
<div className={'button'}>
<button className={'invalid-btn'}>邀请好友砍价</button>
{bargainBtn}
</div>
</div>
</div>
<div className="bargain-records">
......@@ -202,7 +329,44 @@ class BargainMiddlePage extends Component {
{/*更多好友砍价*/}
<Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople} isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>
<Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople}
isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>
{
this.state.isShowOverlay &&
<Overlay>
{/*引导关注公众号*/}
{
this.state.status === 1 &&
<PublicNumber/>
}
{/*好友成功砍第一刀*/}
{
this.state.status === 2 &&
<BargainFirst/>
}
{/*好友成功砍第二刀*/}
{
this.state.status === 3 &&
<BargainSecond/>
}
{/*不能在砍了*/}
{
this.state.status === 4 &&
<NotBargain/>
}
{
this.state.status !== 0 &&
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
}
</Overlay>
}
</div>
);
......@@ -219,7 +383,9 @@ function CourseDes(props) {
<div className="price-bar">
<span className={'discount-price'}>￥{data.pay_price}</span>
<span className={'original-price'}>￥{data.course_price}</span>
<button className={'purchase-btn'}>¥{data.pay_price}去支付</button>
<button className={'purchase-btn'}
onClick={event => props.toCart(data.course_id)}>¥{data.pay_price}去支付
</button>
</div>
</div>
)
......@@ -254,4 +420,53 @@ function CourseBottom(props) {
)
}
export default BargainMiddlePage
\ No newline at end of file
function PublicNumber() {
return (
<div className='bargain-public-number'>
<img className='avait' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
alt=""/>
<p className='status-title ff4'>谢谢你帮我砍了5.6元！</p>
<p className='status-dec'>关注公众号，可以再砍一刀哦~</p>
<img className='public-number-img'
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""/>
</div>
)
}
function BargainFirst() {
return (
<div className='bargain-first'>
<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-dec'>你还可以帮我再砍一刀哦~</p>
<button>再砍一刀</button>
</div>
)
}
function BargainSecond() {
return (
<div className='bargain-second'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='status-title'>厉害了，又帮好友砍掉<span className='ff4'>5.6元</span>！</p>
<button>我也要砍价</button>
</div>
)
}
function NotBargain() {
return (
<div className='not-bargain'>
<img className='middle-img' src={require('./image/kanjia_no_iccon.png')} alt=""/>
<p className='status-title'>你的好友用【砍价神器】把我砍蒙圈了<br/>不能再砍了哦~</p>
<p className='status-dec'>邀请20位以上好友帮忙砍价可获得【砍价神器】</p>
<button>我也要砍价</button>
</div>
)
}
export default compose(
withRouter
)(BargainMiddlePage)
src/components/detail/bargain/bargain.scss
......@@ -82,13 +82,34 @@
font-size: 12px;
text-align: center;
line-height: 48px;
.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;
}
}
}
.status-inner {
width: 350px;
height: 124px;
height: 130px;
padding: 0 10px;
background: $white;
border-radius: 3px;
......@@ -111,6 +132,10 @@
color: $white;
}
.over {
color: $color_999;
}
.time {
display: inline-block;
width: 20px;
......@@ -332,6 +357,15 @@
border-radius: 3px;
text-align: center;
margin: 200px auto 20px auto;
position: relative;
.top-img {
position: absolute;
width: 135px;
height: 67px;
top: -67px;
margin-left: -67px;
}
.top-tip {
font-size: 16px;
......@@ -397,4 +431,5 @@
color: $color_666;
}
}
\ No newline at end of file
}
src/components/detail/bargain/bargainInfo/bargain-info.scss
.bargain-info {
.bargain-bind-iphone {
position: absolute;
top: 50%;
left: 50%;
......
src/components/detail/bargain/index.js
......@@ -3,10 +3,12 @@ import './bargain.scss'
import {Flex, Toast} from "antd-mobile"
import Overlay from '../overlay'
import BargainInfo from './bargainInfo'
import {Link} from "react-router-dom"
import {getHours, getMinutes, getSeconds} from "date-fns"
import {api, getParam, http} from "@/utils"
import Ranking from "@/components/bargainMiddlePage/ranking"
import {compose} from "redux"
import {withRouter} from 'react-router-dom'
class Bargain extends Component {
constructor(props) {
......@@ -19,6 +21,7 @@ class Bargain extends Component {
list: [],
limitPeople: '',
status: '',
bargainCode: ''
}
}
......@@ -37,7 +40,7 @@ class Bargain extends Component {
if (res.data.code === 200) {
this.setState({
list: res.data.data.list,
outList: res.data.data.out_list[0]
outList: res.data.data.list[0]
})
} else {
Toast.info(res.data.msg, 2)
......@@ -55,7 +58,8 @@ class Bargain extends Component {
if (res.data.code === 200) {
this.setState({
info: res.data.data,
limitPeople: res.data.data.limit_people
limitPeople: res.data.data.limit_people,
bargainCode: res.data.data.bargain_code
})
} else {
Toast.info(res.data.msg, 2)
......@@ -77,18 +81,24 @@ class Bargain extends Component {
// 领取砍价神器
toArtifact = () => {
this.setState({
isShowOverlay: true,
status: 1,
let data = {
courseId: getParam('id')
}
http.post(`${api.home}/m/bargain/receiveLimit`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
isShowOverlay: true,
status: 1,
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 使用砍价神器
useArtifact = () => {
this.setState({
isShowOverlay: true,
status: 2,
})
this.toKanjia(getParam('id'), 2, 0)
}
// 加入购物车
......@@ -104,20 +114,56 @@ class Bargain extends Component {
}
})
}
// 继续砍价
continueBargain = () => {
const code = this.state.bargainCode
this.props.history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${code}&is_originator=1`)
}
// 我要砍价
iWantBargain = () => {
// 判断用户是否绑定了手机号
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)
}
})
}
// 砍价接口
toKanjia = (id, type, uid) => {
let data = {
course_id: id,
type: type, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: uid // 被助力人id 【自己本人操作传0】
}
http.post(`${api.home}/m/to_bargain`, data).then((res) => {
if (res.data.code === 200) {
this.getBargainInfo()
if (type === 2) {
this.setState({
isShowOverlay: true,
status: 2,
})
}
// this.props.history.push(`/bargain-middle-page?id=${getParam('id')}`)
this.setState({
isShowOverlay: true,
status: 0,
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 关闭弹窗
close = () => {
this.setState({
......@@ -129,19 +175,20 @@ class Bargain extends Component {
render() {
return (
<div className={'bargain-func'}>
{/*bargain_status 砍价状态 0-砍价中，1砍价结束，待支付，2砍价过期（没有砍价记录没有砍价信息），3已购买*/}
{
this.state.info.bargain_status === 2 &&
<BargainIntro limitPeople={this.state.limitPeople} iWantBargain={this.iWantBargain}/>
}
{
this.state.info.bargain_status === 0 &&
( this.state.info.bargain_status === 0 || this.state.info.bargain_status === 1) &&
<BargainStatus
info={this.state.info}
outList={this.state.outList}
getMore={this.getMore}
toArtifact={this.toArtifact}
useArtifact={this.useArtifact}
continueBargain={this.continueBargain}
/>
}
......@@ -152,7 +199,7 @@ class Bargain extends Component {
{/*绑定手机号*/}
{
this.state.status === 3 &&
<BargainInfo />
<BargainInfo/>
}
{/*砍价成功去分享*/}
......@@ -165,24 +212,24 @@ class Bargain extends Component {
{/*领取砍价神器*/}
{
this.state.status === 1 &&
<Artifact toArtifact={this.toArtifact}/>
<Artifact useArtifact={this.useArtifact}/>
}
{/*使用砍价神器*/}
{
this.state.status === 2 &&
<UseArtifact useArtifact={this.useArtifact} toCart={this.toCart}/>
<UseArtifact toCart={this.toCart}/>
}
{
this.state.status !== 0 &&
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
}
</Overlay>
}
{/*更多好友砍价*/}
<Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople}
isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>
......@@ -218,7 +265,8 @@ function BargainStatus(props) {
// is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
if (props.info.is_artifact === 0) {
thirdRow =
<div>再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span className={'indicator'}>【砍价神器】</span></div>
<div>再邀请<span className={'indicator'}>{props.info.invit_num}</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>
......@@ -226,6 +274,7 @@ function BargainStatus(props) {
thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
btn = <button onClick={props.useArtifact}>立即使用</button>
}
let date = new Date(props.info.end_time * 1000)
return (
<div className="status-outer">
......@@ -238,26 +287,28 @@ function BargainStatus(props) {
<div className={'first-row'}>
<div>
已砍<span className={'indicator'}>{props.info.bargain_price}元</span>
{/*<span className={'time hour'}>23</span>:*/}
{/*<span className={'time min'}>59</span>:*/}
{/*<span className={'time sec'}>02</span>*/}
{props.info.end_time}
后砍价结束
<span className={'time hour'}>{getHours(date)}</span> :&nbsp;
<span className={'time min'}>{getMinutes(date)}</span> :&nbsp;
<span className={'time sec'}>{getSeconds(date)}</span>
<span className='over'>后砍价结束</span>
</div>
<div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
</div>
<div className="sec-row">
<div>
<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>
{
props.outList && props.outList.length > 0 &&
<div className="sec-row">
<div>
<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 onClick={props.continueBargain}>继续砍价</button>
</div>
</div>
</div>
}
<div className="third-row">
{thirdRow}
{btn}
......@@ -281,7 +332,11 @@ function BargainStatus(props) {
<div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
</div>
<div className="time-tobuy">
砍价金额将于后清零，请尽快完成支付
砍价金额将于
<span className={'time hour'}>{getHours(date)}</span> :&nbsp;
<span className={'time min'}>{getMinutes(date)}</span> :&nbsp;
<span className={'time sec'}>{getSeconds(date)}</span>
后清零，请尽快完成支付
</div>
</Flex>
</div>
......@@ -327,6 +382,7 @@ function Artifact(props) {
function UseArtifact(props) {
return (
<div className='use-artifact-box'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='top-tip'>厉害了，又砍掉了10元！</p>
<p className='middle-tip'>
你已经砍了
......@@ -342,4 +398,6 @@ function UseArtifact(props) {
}
export default Bargain
\ No newline at end of file
export default compose(
withRouter
)(Bargain)
src/components/detail/btnstatus/index.js
import React, {Component} from 'react';
import {api, getParam, http} from "@/utils";
import {Toast} from 'antd-mobile';
import React, {Component} from 'react'
import {api, getParam, http} from "@/utils"
import {Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
import {getCourses} from "@/components/detail/actions";
import {connect} from "react-redux";
import {getCourses} from "@/components/detail/actions"
import {connect} from "react-redux"
import './index.scss'
......@@ -17,27 +15,37 @@ class BtnStatus extends Component {
}
}
// 加入购物车
toCart = () => {
// 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
toCart = (type) => {
console.log(type)
let data = {
course_id: getParam('id')
}
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200) {
Toast.info('已加入购物车', 2);
// window.location.reload()
this.props.getCourses();
if (type === 1) {
Toast.info('已加入购物车', 2)
this.props.getCourses()
} else {
// window.location.href = '/shopcart'
}
} else if (res.data.code === 15001) {
// window.location.href = '/shopcart'
} else {
Toast.info(res.data.msg, 2);
}
})
}
render() {
let info = ''
if (this.props.data && this.props.data.course_info) {
info = this.props.data.course_info
}
let barInfo = this.props.barInfo && this.props.barInfo
return (
<div>
......@@ -55,7 +63,7 @@ class BtnStatus extends Component {
}
{
!info.in_cart &&
<button className='btn btn-s bg-FCCD05' onClick={this.toCart}>加入购物车</button>
<button className='btn btn-s bg-FCCD05' onClick={e => this.toCart(1)}>加入购物车</button>
}
<Link to='/order' className='btn btn-s bg-FD7700'>立即报名</Link>
......@@ -75,7 +83,7 @@ class BtnStatus extends Component {
}
{/*拼团 未开团*/}
{
info.is_baoming === 0 && info.group_status === 4&&
info.is_baoming === 0 && info.group_status === 4 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
......@@ -107,27 +115,27 @@ class BtnStatus extends Component {
{/*砍价*/}
{
this.props.status === 3 &&
this.props.data && this.props.data.is_bargain &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥149</span>
<span>直接购买</span>
<span>¥{info.price1}</span>
<span onClick={e => this.toCart(2)}>直接购买</span>
</button>
{
this.state.isbuy === 0 &&
<button className='btn btn-s bg-E02E24'>
barInfo.bargain_status === 2 &&
<button className='btn btn-s bg-E02E24' >
我要砍价
</button>
}
{
this.state.isbuy === 1 &&
(barInfo.bargain_status === 0 || barInfo.bargain_status === 1) &&
<button className='btn btn-s bg-E02E24'>
<span>¥1</span>
<span>去支付</span>
<span onClick={e => this.toCart(2)}>去支付</span>
</button>
}
</div>
......@@ -151,4 +159,4 @@ class BtnStatus extends Component {
export default connect(
null,
{getCourses}
)(BtnStatus);
\ No newline at end of file
)(BtnStatus)
src/components/detail/index.js
......@@ -11,6 +11,8 @@ import BtnStatus from "./btnstatus"
import Carouselw from "./carousel"
import {connect} from "react-redux"
import {fetchCoursesListIfNeeded} from "./actions"
import {api, getParam, http} from "@/utils";
import {Toast} from "antd-mobile";
class Detail extends Component {
......@@ -23,12 +25,14 @@ class Detail extends Component {
auditionBox: false,
singleBox: false,
shareRank: false,
singMess: ''
singMess: '',
barInfo: '',
}
}
componentDidMount() {
this.props.fetchCoursesListIfNeeded()
this.getBargainInfo()
}
componentDidUpdate() {
......@@ -53,6 +57,23 @@ class Detail extends Component {
}
//获取砍价信息
getBargainInfo = () => {
let data = {
courseId: getParam('id')
}
http.post(`${api.home}/m/bargain/courseDetail`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
barInfo: res.data.data
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({auditionBox: val, singleBox: val})
......@@ -152,7 +173,7 @@ class Detail extends Component {
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{/*课程按钮*/}
<BtnStatus data={this.props.courseInfo}></BtnStatus>
<BtnStatus data={this.props.courseInfo} barInfo={this.state.barInfo} ></BtnStatus>
</div>
)
}
......
src/components/preferential/index.js
......@@ -106,7 +106,7 @@ class Preferential extends Component {
</p>
<p className='contact text-overflow-2'>{item.course_desc}</p>
<div className='des'>
{item.is_buy &&
{!item.is_buy &&
<p className="course-price">
{this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
......@@ -115,7 +115,7 @@ class Preferential extends Component {
<span className="old">¥{item.price0}</span>
</p>
}
{!item.is_buy &&
{item.is_buy &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
......
src/setupProxy.js
......@@ -12,7 +12,7 @@ module.exports = function (app) {
pathRewrite: {
[`^${config[item]['development']}`]: ''
},
// cookieDomainRewrite: 'localhost',
cookieDomainRewrite: 'localhost',
...config[item]['proxy']
}
))
......
yarn.lock
......@@ -854,7 +854,7 @@
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4":
"@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
......@@ -899,6 +899,82 @@
resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
"@emotion/cache@^10.0.9":
version "10.0.9"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f"
integrity sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw==
dependencies:
"@emotion/sheet" "0.9.2"
"@emotion/stylis" "0.8.3"
"@emotion/utils" "0.11.1"
"@emotion/weak-memoize" "0.2.2"
"@emotion/core@^10.0.4":
version "10.0.10"
resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.10.tgz#8d3114e5a2f8b178a7067c603a2937516f180b08"
integrity sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg==
dependencies:
"@emotion/cache" "^10.0.9"
"@emotion/css" "^10.0.9"
"@emotion/serialize" "^0.11.6"
"@emotion/sheet" "0.9.2"
"@emotion/utils" "0.11.1"
"@emotion/css@^10.0.9":
version "10.0.12"
resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.12.tgz#b358168afcb151899bda5cfd778c01dc37801c24"
integrity sha512-esET/v6AwYIw5YVo0e1L/bUik7bIMWyK32BudsC/PE5O1rLK3rjiLCOoMVv5GY6+ssuwWVzooGbz79hPvkkmsw==
dependencies:
"@emotion/serialize" "^0.11.7"
"@emotion/utils" "0.11.1"
babel-plugin-emotion "^10.0.9"
"@emotion/hash@0.7.1":
version "0.7.1"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
"@emotion/memoize@0.7.1":
version "0.7.1"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
"@emotion/serialize@^0.11.6", "@emotion/serialize@^0.11.7":
version "0.11.7"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.7.tgz#dd9583dbf753002738676fa8c1eb8df77f95fb53"
integrity sha512-GfzJIMue9eIEPFgBL340hBbjfki11vjYkfmY2LXoCDAFPuG6S+hkOlfinRXLnPVlXnKu7WWp587cVa6/xQriNQ==
dependencies:
"@emotion/hash" "0.7.1"
"@emotion/memoize" "0.7.1"
"@emotion/unitless" "0.7.3"
"@emotion/utils" "0.11.1"
csstype "^2.5.7"
"@emotion/sheet@0.9.2":
version "0.9.2"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.2.tgz#74e5c6b5e489a1ba30ab246ab5eedd96916487c4"
integrity sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A==
"@emotion/stylis@0.8.3":
version "0.8.3"
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.3.tgz#3ca7e9bcb31b3cb4afbaeb66156d86ee85e23246"
integrity sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q==
"@emotion/unitless@0.7.3":
version "0.7.3"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
"@emotion/utils@0.11.1":
version "0.11.1"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.1.tgz#8529b7412a6eb4b48bdf6e720cc1b8e6e1e17628"
integrity sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg==
"@emotion/weak-memoize@0.2.2":
version "0.2.2"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==
"@loadable/component@^5.10.1":
version "5.10.1"
resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.10.1.tgz#09613e46d409ffacb3b4403658ed90adbc01ba24"
......@@ -1790,6 +1866,22 @@ babel-plugin-dynamic-import-node@2.2.0:
dependencies:
object.assign "^4.1.0"
babel-plugin-emotion@^10.0.9:
version "10.0.13"
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.13.tgz#c4faa1ba8c0fd74a13226ced32876b314ef1d8ab"
integrity sha512-w8yukWIYDw2ZUzBo7B9t5jh7wsM4NQWqvuZadW4MhVokgw5wsoBRJ59Sa1hMc3UZiatwb0iBNufmRQZVl77I5Q==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@emotion/hash" "0.7.1"
"@emotion/memoize" "0.7.1"
"@emotion/serialize" "^0.11.6"
babel-plugin-macros "^2.0.0"
babel-plugin-syntax-jsx "^6.18.0"
convert-source-map "^1.5.0"
escape-string-regexp "^1.0.5"
find-root "^1.1.0"
source-map "^0.5.7"
babel-plugin-import@^1.11.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz#78ac908e6b225206babb734e19eae5f78d6d1035"
......@@ -1821,11 +1913,25 @@ babel-plugin-macros@2.5.0:
cosmiconfig "^5.0.5"
resolve "^1.8.1"
babel-plugin-macros@^2.0.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
integrity sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==
dependencies:
"@babel/runtime" "^7.4.2"
cosmiconfig "^5.2.0"
resolve "^1.10.0"
babel-plugin-named-asset-import@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.1.tgz#5ec13ec446d0a1e5bb6c57a1f94c9cdedb0c50d6"
integrity sha512-vzZlo+yEB5YHqI6CRRTDojeT43J3Wf3C/MVkZW5UlbSeIIVUYRKtxaFT2L/VTv9mbIyatCW39+9g/SZolvwRUQ==
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
......@@ -2395,6 +2501,11 @@ chalk@^1.1.1, chalk@^1.1.3:
strip-ansi "^3.0.0"
supports-color "^2.0.0"
change-emitter@^0.1.2:
version "0.1.6"
resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=
chardet@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
......@@ -2723,7 +2834,7 @@ content-type@~1.0.4:
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.1:
convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
version "1.6.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
......@@ -3143,6 +3254,11 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"
csstype@^2.5.7:
version "2.6.5"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.5.tgz#1cd1dff742ebf4d7c991470ae71e12bb6751e034"
integrity sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA==
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
......@@ -4145,7 +4261,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
fbjs@^0.8.0, fbjs@^0.8.3, fbjs@^0.8.9:
fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.3, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
......@@ -4256,6 +4372,11 @@ find-cache-dir@^2.0.0:
make-dir "^2.0.0"
pkg-dir "^3.0.0"
find-root@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
find-up@3.0.0, find-up@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
......@@ -4848,6 +4969,11 @@ hoek@4.x.x:
resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
hoist-non-react-statics@^2.3.1:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
......@@ -8886,7 +9012,7 @@ react-lazy-load@^3.0.13:
lodash.throttle "^4.0.0"
prop-types "^15.5.8"
react-lifecycles-compat@^3.0.4:
react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
......@@ -8948,6 +9074,15 @@ react-router@5.0.1:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-spinners@^0.5.4:
version "0.5.4"
resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.5.4.tgz#58166f8bf84cbf06dd7accad4b94a5797cfea9b9"
integrity sha512-jo7BE8prvnZNL7xNrQL16geVXH6LmaWrhvvXnmUwz2MhFO14bhlAdCLuKCwqmUJ37kGphH0C2CJRThwkjfpVzw==
dependencies:
"@emotion/core" "^10.0.4"
prop-types "^15.5.10"
recompose "0.27.1 - 0.30.0"
react-tween-state@^0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/react-tween-state/-/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339"
......@@ -9038,6 +9173,18 @@ realpath-native@^1.0.0:
dependencies:
util.promisify "^1.0.0"
"recompose@0.27.1 - 0.30.0":
version "0.30.0"
resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==
dependencies:
"@babel/runtime" "^7.0.0"
change-emitter "^0.1.2"
fbjs "^0.8.1"
hoist-non-react-statics "^2.3.1"
react-lifecycles-compat "^3.0.2"
symbol-observable "^1.0.4"
recursive-readdir@2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
......@@ -10336,7 +10483,7 @@ svgo@^1.0.0, svgo@^1.2.1:
unquote "~1.1.1"
util.promisify "~1.0.0"
symbol-observable@^1.2.0:
symbol-observable@^1.0.4, symbol-observable@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
......
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