Skip to content

M
mr-julyedu
Commit f5f110dc by xuzhenghua
Options

detail

parent e48a3f8b
Showing with 342 additions and 38 deletions
src/components/bargainMiddlePage/bargain-middle-page.scss
...@@ -452,4 +452,88 @@ ...@@ -452,4 +452,88 @@
.status-dec { .status-dec {
margin-top: 15px; margin-top: 15px;
} }
} }
\ No newline at end of file
.artifact-box, .use-artifact-box {
padding: 20px 0;
background-color: $bg_fff;
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;
color: $color_333;
height: 16px;
line-height: 16px;
}
.middle-tip {
font-size: 14px;
color: $color_333;
height: 14px;
line-height: 14px;
margin-top: 15px;
}
.btm-tip {
font-size: 14px;
color: $color_666;
height: 14px;
line-height: 14px;
margin-top: 10px;
}
.use-artifact {
background-color: $bg_fff;
width: 84px;
height: 24px;
font-size: 14px;
border: 1px solid $redprice;
border-radius: 12px;
margin: 20px auto 0 auto;
color: $redprice;
}
.tubuy {
display: inline-block;
margin-top: 17px;
width: 81px;
height: 24px;
background-color: $redprice;
border-radius: 12px;
font-size: 16px;
color: $white;
border: none;
}
.indicator {
color: $color_FE2F2F;
}
}
.artifact-box {
width: 300px;
height: 130px;
}
.use-artifact-box {
width: 300px;
height: 148px;
.middle-tip {
color: $color_666;
}
}
src/components/bargainMiddlePage/index.js
...@@ -94,9 +94,9 @@ class BargainMiddlePage extends Component { ...@@ -94,9 +94,9 @@ class BargainMiddlePage extends Component {
} }
// 加入购物车 // 加入购物车
toCart = (id) => { toCart = () => {
let data = { let data = {
course_id: id course_id: getParam('id')
} }
http.post(`${api.home}/m/cart/add`, data).then((res) => { http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200 || res.data.code === 15001) { if (res.data.code === 200 || res.data.code === 15001) {
...@@ -118,6 +118,27 @@ class BargainMiddlePage extends Component { ...@@ -118,6 +118,27 @@ class BargainMiddlePage extends Component {
this.setState({isShowMore: val}) this.setState({isShowMore: val})
} }
// 领取砍价神器
toArtifact = () => {
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: 5,
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 使用砍价神器
useArtifact = () => {
this.toKanjia(getParam('id'), 2, 0)
}
// 砍价接口 // 砍价接口
toKanjia = (id, type, uid) => { toKanjia = (id, type, uid) => {
...@@ -129,6 +150,12 @@ class BargainMiddlePage extends Component { ...@@ -129,6 +150,12 @@ class BargainMiddlePage extends Component {
http.post(`${api.home}/m/to_bargain`, data).then((res) => { http.post(`${api.home}/m/to_bargain`, data).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.getBargainInfo() this.getBargainInfo()
if (type === 2) {
this.setState({
isShowOverlay: true,
status: 6
})
}
if (type === 3) { if (type === 3) {
this.userStatus() this.userStatus()
} }
...@@ -346,7 +373,7 @@ class BargainMiddlePage extends Component { ...@@ -346,7 +373,7 @@ class BargainMiddlePage extends Component {
{/*好友成功砍第一刀*/} {/*好友成功砍第一刀*/}
{ {
this.state.status === 2 && this.state.status === 2 &&
<BargainFirst/> <BargainFirst bargainSecond={this.friendBargainSecond}/>
} }
{/*好友成功砍第二刀*/} {/*好友成功砍第二刀*/}
{ {
...@@ -358,6 +385,16 @@ class BargainMiddlePage extends Component { ...@@ -358,6 +385,16 @@ class BargainMiddlePage extends Component {
this.state.status === 4 && this.state.status === 4 &&
<NotBargain/> <NotBargain/>
} }
{/*领取砍价神器*/}
{
this.state.status === 5 &&
<Artifact useArtifact={this.useArtifact}/>
}
{/*使用砍价神器*/}
{
this.state.status === 6 &&
<UseArtifact toCart={this.toCart}/>
}
{ {
...@@ -384,7 +421,7 @@ function CourseDes(props) { ...@@ -384,7 +421,7 @@ function CourseDes(props) {
<span className={'discount-price'}>￥{data.pay_price}</span> <span className={'discount-price'}>￥{data.pay_price}</span>
<span className={'original-price'}>￥{data.course_price}</span> <span className={'original-price'}>￥{data.course_price}</span>
<button className={'purchase-btn'} <button className={'purchase-btn'}
onClick={event => props.toCart(data.course_id)}>¥{data.pay_price}去支付 onClick={props.toCart}>¥{data.pay_price}去支付
</button> </button>
</div> </div>
</div> </div>
...@@ -403,7 +440,7 @@ function CourseBottom(props) { ...@@ -403,7 +440,7 @@ function CourseBottom(props) {
<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 ? '砍价结束' : '继续砍价'}</button> })}>{props.item.bargain_status === 2 ? '砍价结束' : '继续砍价'}</button>
<button onClick={event => props.toCart(props.item.course_id)} <button onClick={props.toCart}
className={'purchase-btn'}>¥{props.item.pay_price}去支付 className={'purchase-btn'}>¥{props.item.pay_price}去支付
</button> </button>
</div> </div>
...@@ -434,13 +471,13 @@ function PublicNumber() { ...@@ -434,13 +471,13 @@ function PublicNumber() {
) )
} }
function BargainFirst() { 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'>5.6元</span>！</p>
<p className='status-dec'>你还可以帮我再砍一刀哦~</p> <p className='status-dec'>你还可以帮我再砍一刀哦~</p>
<button>再砍一刀</button> <button onClick={props.bargainSecond}>再砍一刀</button>
</div> </div>
) )
} }
...@@ -467,6 +504,42 @@ function NotBargain() { ...@@ -467,6 +504,42 @@ function NotBargain() {
} }
{/*领取砍价神器*/
}
function Artifact(props) {
return (
<div className='artifact-box'>
<p className='top-tip'>恭喜你获得【砍价神器】！</p>
<p className='middle-tip'>
您可以使用
<span className={'indicator'}>【砍价神器】</span>
再砍一刀
</p>
<button className='use-artifact' onClick={props.useArtifact}>立即使用</button>
</div>
)
}
function UseArtifact(props) {
return (
<div className='use-artifact-box'>
<img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
<p className='top-tip'>厉害了，又砍掉了10元！</p>
<p className='middle-tip'>
你已经砍了
<span className={'indicator'}>109元</span>
没见过你这么能砍的人...
</p>
<p className='btm-tip'>
不能再砍了哦~
</p>
<button className='tubuy' onClick={props.toCart}>去支付</button>
</div>
)
}
export default compose( export default compose(
withRouter withRouter
)(BargainMiddlePage) )(BargainMiddlePage)
src/components/detail/bargain/index.js
...@@ -27,7 +27,6 @@ class Bargain extends Component { ...@@ -27,7 +27,6 @@ class Bargain extends Component {
componentDidMount() { componentDidMount() {
this.getBargainInfo() this.getBargainInfo()
this.getBargainRankList('144', 1)
} }
// 获取助理好友 // 获取助理好友
...@@ -61,6 +60,9 @@ class Bargain extends Component { ...@@ -61,6 +60,9 @@ class Bargain extends Component {
limitPeople: res.data.data.limit_people, limitPeople: res.data.data.limit_people,
bargainCode: res.data.data.bargain_code bargainCode: res.data.data.bargain_code
}) })
if (res.data.data.bargain_status === 0) {
this.getBargainRankList(getParam('id'), 1)
}
} else { } else {
Toast.info(res.data.msg, 2) Toast.info(res.data.msg, 2)
} }
...@@ -149,7 +151,8 @@ class Bargain extends Component { ...@@ -149,7 +151,8 @@ class Bargain extends Component {
} }
http.post(`${api.home}/m/to_bargain`, data).then((res) => { http.post(`${api.home}/m/to_bargain`, data).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.getBargainInfo() // this.getBargainInfo()
document.location.reload()
if (type === 2) { if (type === 2) {
this.setState({ this.setState({
isShowOverlay: true, isShowOverlay: true,
...@@ -180,8 +183,9 @@ class Bargain extends Component { ...@@ -180,8 +183,9 @@ class Bargain extends Component {
this.state.info.bargain_status === 2 && this.state.info.bargain_status === 2 &&
<BargainIntro limitPeople={this.state.limitPeople} iWantBargain={this.iWantBargain}/> <BargainIntro limitPeople={this.state.limitPeople} iWantBargain={this.iWantBargain}/>
} }
{console.log(this.state.outList, 11)}
{ {
( this.state.info.bargain_status === 0 || this.state.info.bargain_status === 1) && (this.state.info.bargain_status === 0 || this.state.info.bargain_status === 1) &&
<BargainStatus <BargainStatus
info={this.state.info} info={this.state.info}
outList={this.state.outList} outList={this.state.outList}
...@@ -261,6 +265,7 @@ function BargainIntro(props) { ...@@ -261,6 +265,7 @@ function BargainIntro(props) {
} }
function BargainStatus(props) { function BargainStatus(props) {
console.log(props, 1)
let thirdRow, btn let thirdRow, btn
// is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用 // is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
if (props.info.is_artifact === 0) { if (props.info.is_artifact === 0) {
...@@ -294,21 +299,19 @@ function BargainStatus(props) { ...@@ -294,21 +299,19 @@ function BargainStatus(props) {
</div> </div>
<div onClick={props.getMore}>{props.info.assist_num}位好友助力></div> <div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
</div> </div>
{
props.outList && props.outList.length > 0 && <div className="sec-row">
<div className="sec-row"> <div>
<div> <img
<img src={props.outList.avatar_file}
src={props.outList.avatar_file} alt=""/>
alt=""/> <span className='name'>{props.outList.user_name}</span>
<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>
<div>砍掉<span className={'indicator'}>{props.outList.amount}元</span></div>
<button onClick={props.continueBargain}>继续砍价</button>
</div>
</div>
<div className="third-row"> <div className="third-row">
{thirdRow} {thirdRow}
{btn} {btn}
......
src/components/detail/btnstatus/index.js
...@@ -5,13 +5,16 @@ import {Link} from 'react-router-dom' ...@@ -5,13 +5,16 @@ import {Link} from 'react-router-dom'
import {getCourses} from "@/components/detail/actions" import {getCourses} from "@/components/detail/actions"
import {connect} from "react-redux" import {connect} from "react-redux"
import './index.scss' import './index.scss'
import Overlay from '../overlay'
class BtnStatus extends Component { class BtnStatus extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
isbuy: 1 isbuy: 1,
bargainStatus: '',
isShowOverlay: false
} }
} }
...@@ -25,19 +28,71 @@ class BtnStatus extends Component { ...@@ -25,19 +28,71 @@ class BtnStatus extends Component {
if (res.data.code === 200) { if (res.data.code === 200) {
if (type === 1) { if (type === 1) {
Toast.info('已加入购物车', 2) Toast.info('已加入购物车', 2)
this.props.getCourses() // this.props.getCourses()
document.location.reload()
} else { } else {
// window.location.href = '/shopcart' window.location.href = '/shopcart'
} }
} else if (res.data.code === 15001) { } else if (res.data.code === 15001) {
// window.location.href = '/shopcart' window.location.href = '/shopcart'
} else { } else {
Toast.info(res.data.msg, 2); Toast.info(res.data.msg, 2);
} }
}) })
} }
// 直接购买
tobuy = () => {
if (this.props.barInfo.bargain_status === 2) {
this.toCart(2)
} else {
// 取消砍价记录
this.setState({
isShowOverlay: true,
bargainStatus: 1,
})
}
}
// 取消砍价
cancel = () => {
let data = {
courseId: getParam('id')
}
http.post(`${api.home}/m/bargain/cancel`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
isShowOverlay: false,
bargainStatus: '',
})
document.location.reload()
} else {
Toast.info(res.data.msg, 2)
}
})
}
close = () => {
this.setState({
isShowOverlay: false,
bargainStatus: '',
})
}
// 砍价接口
toKanjia = () => {
let data = {
course_id: getParam('id'),
type: 1, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: 0 // 被助力人id 【自己本人操作传0】
}
http.post(`${api.home}/m/to_bargain`, data).then((res) => {
if (res.data.code === 200) {
// this.props.getBargainInfo()
document.location.reload()
} else {
Toast.info(res.data.msg, 2)
}
})
}
render() { render() {
let info = '' let info = ''
...@@ -123,11 +178,11 @@ class BtnStatus extends Component { ...@@ -123,11 +178,11 @@ class BtnStatus extends Component {
</a> </a>
<button className='btn btn-s bg-F4AAA7'> <button className='btn btn-s bg-F4AAA7'>
<span>¥{info.price1}</span> <span>¥{info.price1}</span>
<span onClick={e => this.toCart(2)}>直接购买</span> <span onClick={this.tobuy}>直接购买</span>
</button> </button>
{ {
barInfo.bargain_status === 2 && barInfo.bargain_status === 2 &&
<button className='btn btn-s bg-E02E24' > <button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
我要砍价 我要砍价
</button> </button>
} }
...@@ -151,11 +206,40 @@ class BtnStatus extends Component { ...@@ -151,11 +206,40 @@ class BtnStatus extends Component {
</a> </a>
</div> </div>
} }
{
this.state.isShowOverlay &&
<Overlay>
{/*引导关注公众号*/}
{
this.state.bargainStatus === 1 &&
<CancelBargain close={this.close} cancel={this.cancel}/>
}
<i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
</Overlay>
}
</div> </div>
) )
} }
} }
function CancelBargain(props) {
return (
<div className='cancel-bargain'>
<p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p>
<p className='tip-mess'>您已发起砍价，直接购买将清除已砍金额。直接购买可使用优惠券~</p>
<div className="btns">
<button onClick={props.close}>取消</button>
<button onClick={props.cancel}>确定</button>
</div>
</div>
)
}
export default connect( export default connect(
null, null,
{getCourses} {getCourses}
......
src/components/detail/btnstatus/index.scss
...@@ -114,4 +114,62 @@ ...@@ -114,4 +114,62 @@
} }
} }
}
.cancel-bargain {
width: 300px;
height: 139px;
background-color: $bg_fff;
margin: 194px auto 20px auto;
border-radius: 5px;
padding: 15px 0 0 0;
text-align: center;
position: relative;
.top-img {
height: 30px;
line-height: 30px;
i {
color: #f3ac3c;
font-size: 30px;
}
}
.tip-mess {
font-size: 14px;
color: $color_666;
margin-top: 3px;
padding: 0 15px;
}
.btns {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
border-top: 1px solid $sp_ddd;
button {
width: 150px;
height: 100%;
background-color: $bg_fff;
font-size: 16px;
border: none;
}
:nth-child(1) {
color: $color_333;
border-right: 1px solid $sp_ddd;
border-radius: 0 0 0 5px;
}
:nth-child(2) {
color: $active;
border-radius: 0 0 5px 0;
}
}
} }
\ No newline at end of file
src/components/detail/index.js
...@@ -3,7 +3,7 @@ import './index.scss' ...@@ -3,7 +3,7 @@ import './index.scss'
import Bargain from './bargain' import Bargain from './bargain'
import Group from './group' import Group from './group'
import OutLine from './outline' import OutLine from './outline'
import {HeaderBar, ToApp} from '../../common' import {HeaderBar, CallApp} from '../../common'
import ShareRank from "./shareRank" import ShareRank from "./shareRank"
import Audition from "./audition" import Audition from "./audition"
import Single from "./single" import Single from "./single"
...@@ -39,9 +39,6 @@ class Detail extends Component { ...@@ -39,9 +39,6 @@ class Detail extends Component {
// console.log(this.props.courseInfo.course_info) // console.log(this.props.courseInfo.course_info)
} }
toApp = () => {
alert('toApp')
}
// 点击子组件试听按钮 // 点击子组件试听按钮
toAudition = () => { toAudition = () => {
this.setState(status => ({ this.setState(status => ({
...@@ -88,7 +85,7 @@ class Detail extends Component { ...@@ -88,7 +85,7 @@ class Detail extends Component {
} }
return ( return (
<div className='detail-box'> <div className='detail-box'>
<ToApp className='toapp' toApp={this.toApp}></ToApp> <CallApp className='toapp'></CallApp>
<HeaderBar title='课程详情' arrow={true} cart={true}></HeaderBar> <HeaderBar title='课程详情' arrow={true} cart={true}></HeaderBar>
{/*弹幕*/} {/*弹幕*/}
<Carouselw></Carouselw> <Carouselw></Carouselw>
...@@ -173,7 +170,7 @@ class Detail extends Component { ...@@ -173,7 +170,7 @@ 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} ></BtnStatus> <BtnStatus data={this.props.courseInfo} barInfo={this.state.barInfo} getBargainInfo={this.getBargainInfo}></BtnStatus>
</div> </div>
) )
} }
......
yarn.lock
...@@ -2372,6 +2372,11 @@ call-me-maybe@^1.0.1: ...@@ -2372,6 +2372,11 @@ call-me-maybe@^1.0.1:
resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b" resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
integrity sha1-JtII6onje1y95gJQoV8DHBak1ms= integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=
callapp-lib@^2.1.7:
version "2.1.7"
resolved "https://registry.yarnpkg.com/callapp-lib/-/callapp-lib-2.1.7.tgz#30fa7a5a234c0f281802a4e93bcb800fd77712da"
integrity sha512-pO8SuyjjkzL1dIqT7tazAojSF6ik6QlUKMKLDaQaTdkzBsKBecQLLgfRwE+S6IBhzaP8ZIhhtBhGh5aETogYYg==
caller-callsite@^2.0.0: caller-callsite@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134" resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
......
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