Skip to content

M
mr-julyedu
Commit 891cc42d by xuzhenghua
Options

detail

parent 426bfa05
Showing with 211 additions and 33 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 {
......@@ -339,3 +344,112 @@
}
}
.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/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;
......@@ -398,3 +432,4 @@
}
}
src/components/detail/bargain/bargainInfo/bargain-info.scss
.bargain-info {
.bargain-bind-iphone {
position: absolute;
top: 50%;
left: 50%;
......
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']
}
))
......
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