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 @@
.status-dec {
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 {
}
// 加入购物车
toCart = (id) => {
toCart = () => {
let data = {
course_id: id
course_id: getParam('id')
}
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200 || res.data.code === 15001) {
......@@ -118,6 +118,27 @@ class BargainMiddlePage extends Component {
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) => {
......@@ -129,6 +150,12 @@ class BargainMiddlePage extends Component {
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: 6
})
}
if (type === 3) {
this.userStatus()
}
......@@ -346,7 +373,7 @@ class BargainMiddlePage extends Component {
{/*好友成功砍第一刀*/}
{
this.state.status === 2 &&
<BargainFirst/>
<BargainFirst bargainSecond={this.friendBargainSecond}/>
}
{/*好友成功砍第二刀*/}
{
......@@ -358,6 +385,16 @@ class BargainMiddlePage extends Component {
this.state.status === 4 &&
<NotBargain/>
}
{/*领取砍价神器*/}
{
this.state.status === 5 &&
<Artifact useArtifact={this.useArtifact}/>
}
{/*使用砍价神器*/}
{
this.state.status === 6 &&
<UseArtifact toCart={this.toCart}/>
}
{
......@@ -384,7 +421,7 @@ function CourseDes(props) {
<span className={'discount-price'}>￥{data.pay_price}</span>
<span className={'original-price'}>￥{data.course_price}</span>
<button className={'purchase-btn'}
onClick={event => props.toCart(data.course_id)}>¥{data.pay_price}去支付
onClick={props.toCart}>¥{data.pay_price}去支付
</button>
</div>
</div>
......@@ -403,7 +440,7 @@ function CourseBottom(props) {
<button className={classnames('bargain-btn', {
invalid: props.item.bargain_status === 2
})}>{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}去支付
</button>
</div>
......@@ -434,13 +471,13 @@ function PublicNumber() {
)
}
function BargainFirst() {
function BargainFirst(props) {
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>
<button onClick={props.bargainSecond}>再砍一刀</button>
</div>
)
}
......@@ -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(
withRouter
)(BargainMiddlePage)
src/components/detail/bargain/index.js
......@@ -27,7 +27,6 @@ class Bargain extends Component {
componentDidMount() {
this.getBargainInfo()
this.getBargainRankList('144', 1)
}
// 获取助理好友
......@@ -61,6 +60,9 @@ class Bargain extends Component {
limitPeople: res.data.data.limit_people,
bargainCode: res.data.data.bargain_code
})
if (res.data.data.bargain_status === 0) {
this.getBargainRankList(getParam('id'), 1)
}
} else {
Toast.info(res.data.msg, 2)
}
......@@ -149,7 +151,8 @@ class Bargain extends Component {
}
http.post(`${api.home}/m/to_bargain`, data).then((res) => {
if (res.data.code === 200) {
this.getBargainInfo()
// this.getBargainInfo()
document.location.reload()
if (type === 2) {
this.setState({
isShowOverlay: true,
......@@ -180,8 +183,9 @@ class Bargain extends Component {
this.state.info.bargain_status === 2 &&
<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
info={this.state.info}
outList={this.state.outList}
......@@ -261,6 +265,7 @@ function BargainIntro(props) {
}
function BargainStatus(props) {
console.log(props, 1)
let thirdRow, btn
// is_artifact 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
if (props.info.is_artifact === 0) {
......@@ -294,21 +299,19 @@ function BargainStatus(props) {
</div>
<div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
</div>
{
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 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 className="third-row">
{thirdRow}
{btn}
......
src/components/detail/btnstatus/index.js
......@@ -5,13 +5,16 @@ import {Link} from 'react-router-dom'
import {getCourses} from "@/components/detail/actions"
import {connect} from "react-redux"
import './index.scss'
import Overlay from '../overlay'
class BtnStatus extends Component {
constructor(props) {
super(props)
this.state = {
isbuy: 1
isbuy: 1,
bargainStatus: '',
isShowOverlay: false
}
}
......@@ -25,19 +28,71 @@ class BtnStatus extends Component {
if (res.data.code === 200) {
if (type === 1) {
Toast.info('已加入购物车', 2)
this.props.getCourses()
// this.props.getCourses()
document.location.reload()
} else {
// window.location.href = '/shopcart'
window.location.href = '/shopcart'
}
} else if (res.data.code === 15001) {
// window.location.href = '/shopcart'
window.location.href = '/shopcart'
} else {
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() {
let info = ''
......@@ -123,11 +178,11 @@ class BtnStatus extends Component {
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥{info.price1}</span>
<span onClick={e => this.toCart(2)}>直接购买</span>
<span onClick={this.tobuy}>直接购买</span>
</button>
{
barInfo.bargain_status === 2 &&
<button className='btn btn-s bg-E02E24' >
<button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
我要砍价
</button>
}
......@@ -151,11 +206,40 @@ class BtnStatus extends Component {
</a>
</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>
)
}
}
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(
null,
{getCourses}
......
src/components/detail/btnstatus/index.scss
......@@ -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'
import Bargain from './bargain'
import Group from './group'
import OutLine from './outline'
import {HeaderBar, ToApp} from '../../common'
import {HeaderBar, CallApp} from '../../common'
import ShareRank from "./shareRank"
import Audition from "./audition"
import Single from "./single"
......@@ -39,9 +39,6 @@ class Detail extends Component {
// console.log(this.props.courseInfo.course_info)
}
toApp = () => {
alert('toApp')
}
// 点击子组件试听按钮
toAudition = () => {
this.setState(status => ({
......@@ -88,7 +85,7 @@ class Detail extends Component {
}
return (
<div className='detail-box'>
<ToApp className='toapp' toApp={this.toApp}></ToApp>
<CallApp className='toapp'></CallApp>
<HeaderBar title='课程详情' arrow={true} cart={true}></HeaderBar>
{/*弹幕*/}
<Carouselw></Carouselw>
......@@ -173,7 +170,7 @@ class Detail extends Component {
<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>
)
}
......
yarn.lock
......@@ -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"
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:
version "2.0.0"
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