Skip to content

M
mr-julyedu
Commit eb75aa47 by FE
Options

course detail not use redux store about cousre info and bargin middle page style midfy

parent 1a33390c
Showing with 169 additions and 153 deletions
src/components/bargainMiddlePage/bargain-middle-page.scss
......@@ -307,10 +307,10 @@
.bargain {
width: 165px;
height: 30px;
background: $bg_FADD29;
background: $bg_077FD0;
border-radius: 2px;
border: none;
color: $color_FF4000;
color: $white;
-webkit-appearance: none;
display: inline-block;
text-align: center;
......
src/components/bargainMiddlePage/index.js
......@@ -434,7 +434,7 @@ class BargainMiddlePage extends Component {
}
</ul>
</div>
<Link to={'/preferential'} className={'preferential'}>查看更多精品课程 >></Link>
<Link to={'/classify'} className={'preferential'}>查看更多精品课程 >></Link>
{/*更多好友砍价*/}
......
src/components/detail/bargain/index.js
......@@ -22,12 +22,13 @@ class Bargain extends Component {
limitPeople: '',
status: '',
bargainCode: '',
time: ''
time: '',
barInfo: {}
}
}
componentDidMount() {
// this.getBargainInfo()
this.getBargainInfo()
}
// 获取助理好友
......@@ -57,9 +58,10 @@ class Bargain extends Component {
http.post(`${API.home}/m/bargain/courseDetail`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
info: res.data.data,
limitPeople: res.data.data.limit_people,
bargainCode: res.data.data.bargain_code
barInfo: res.data.data,
// info: res.data.data,
// limitPeople: res.data.data.limit_people,
// bargainCode: res.data.data.bargain_code
})
if (res.data.data.bargain_status === 0) {
this.getBargainRankList(getParam('id'), 0)
......@@ -119,7 +121,7 @@ class Bargain extends Component {
}
// 继续砍价
continueBargain = () => {
const { barInfo = {} } = this.props;
const { barInfo = {} } = this.state;
const code = barInfo.bargain_code;
this.props.history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${code}&is_originator=1`)
}
......@@ -171,7 +173,7 @@ class Bargain extends Component {
}
render() {
const { list, outList, barInfo } = this.props;
const { list, outList, barInfo } = this.state;
return (
<div className={'bargain-func'}>
{/*bargain_status 砍价状态 0-砍价中，1砍价结束，待支付，2砍价过期（没有砍价记录没有砍价信息），3已购买*/}
......
src/components/detail/btnstatus/index.js
......@@ -17,7 +17,7 @@ class BtnStatus extends Component {
group_status: 3,
in_cart: false,
countdown: 0,
// barInfo: ''
barInfo: {}
}
}
......@@ -39,6 +39,10 @@ class BtnStatus extends Component {
// }
componentWillReceiveProps(nextProps) {
const { data = {}} = nextProps;
if(data.is_bargain) {
this.getBargainInfo();
}
// if(nextProps.data && nextProps.data.is_bargain) {
// this.getBargainInfo()
// }
......@@ -111,7 +115,8 @@ class BtnStatus extends Component {
};
// 直接购买
tobuy = () => {
const {user, barInfo} = this.props
const {user} = this.props;
const {barInfo} = this.state;
const uid = user && user.data && user.data.uid
if (!uid) {
this.props.history.push('/passport/login')
......@@ -199,7 +204,7 @@ class BtnStatus extends Component {
parent_uid: 0 // 被助力人id 【自己本人操作传0】
}
http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
const {data: {data, code, msg}} = res;
const {data, code, msg} = res.data;
if (code === 200) {
history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`)
} else {
......@@ -230,8 +235,8 @@ class BtnStatus extends Component {
render() {
// data 课程信息；barInfo 砍价信息
const { data: info = {}, barInfo = {}, user = {} } = this.props;
const { countdown } = this.state;
const { data: info = {}, user = {} } = this.props;
const { countdown ,barInfo} = this.state;
const uid = user.data && user.data.uid;
return (
<div>
......
src/components/detail/group/index.js
......@@ -36,10 +36,9 @@ class Group extends Component {
}
toPay = (pdd_order_id) => {
const courseInfo = this.props.courseInfo.courseInfo.course_info;
const {courseInfo, history} = this.props;
if (courseInfo.group_status === 3) {
this.props.history.push(`/order?id=${getParam('id')}`, {group: 1})
history.push(`/order?id=${getParam('id')}`, {group: 1});
} else {
this.setState({
isShowMore: false,
......@@ -114,8 +113,9 @@ class Group extends Component {
}
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;
const { courseInfo={} } = this.props;
if (courseInfo.pdd_group_info) {
let now_groupon_list = courseInfo.pdd_group_info.now_groupon_list;
if (now_groupon_list && now_groupon_list.length > 0) {
setInterval(() => {
now_groupon_list.map(item => {
......@@ -149,12 +149,16 @@ class Group extends Component {
}
render() {
const { courseInfo } = this.props;
const { alreadyIn, countdown, now_groupon_list } = this.state;
let groupInfo = '', groupon_member = '', group_status = -1, groupSuccessMbc = null;
if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info;
let groupInfo = '',
groupon_member = '',
group_status = -1,
groupSuccessMbc = null;
if (courseInfo) {
groupInfo = courseInfo.pdd_group_info;
groupon_member = groupInfo.groupon_member;
group_status = this.props.courseInfo.courseInfo.course_info.group_status;
group_status = courseInfo.group_status;
}
if (group_status === 4) {
if (groupon_member.member) {
......@@ -287,7 +291,9 @@ class Group extends Component {
}
}
export default connect(
state => ({ courseInfo: state }),
null
)(Group)
// export default connect(
// state => ({ courseInfo: state }),
// null
// )(Group)
export default Group;
src/components/detail/index.js
......@@ -33,16 +33,32 @@ class Detail extends Component {
countdown: '00:00:00',
outList: [],
list: [],
course: {}
}
}
componentDidMount() {
this.props.getCourses();
this.courseId = getParam('id')
const { courseInfo } = this.props;
if(courseInfo.course_info.is_bargain) {
this.getBargainInfo();
// this.props.getCourses();
// this.courseId = getParam('id')
// const { courseInfo } = this.props;
// console.log(courseInfo);
// if(courseInfo.course_info.is_bargain) {
// this.getBargainInfo();
// }
this.fetchCourseInfo();
// console.log(this.state);
}
fetchCourseInfo = () => {
const id = getParam('id');
http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
const {data, code} = res.data;
if (code === 200) {
this.setState({
course: data
});
}
});
}
// 点击子组件试听按钮
......@@ -71,32 +87,33 @@ 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)
}
}
}
// 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 = () => {
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.state.course.course_info;
if (browser.isWeixin) {
console.log(0);
let share = this.state.share;
this.setState({
share: !share,
......@@ -149,109 +166,82 @@ 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
});
if (res.data.data.bargain_status === 0) {
this.getBargainRankList(getParam('id'), 0)
}
}else if(res.data.code === 4030) {
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 获取助理好友
getBargainRankList = (id, type) => {
let data = {
courseId: id,
type: type
}
http.post(`${API.home}/m/bargain/rankList`, data).then((res) => {
if (res.data.code === 200) {
this.setState({
list: res.data.data.list,
outList: res.data.data.list[0]
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({auditionBox: val, singleBox: val})
}
render() {
const { course: { course_info={} }, barInfo } = this.state;
console.log(course_info);
let courseInfo = '',
service = '',
number = 0,
endTime = 0;
if (this.props.courseInfo.course_info) {
courseInfo = this.props.courseInfo.course_info;
service = courseInfo.service;
if (courseInfo.group_status === 3 || courseInfo.group_status === 4) {
number = courseInfo.pdd_group_info.groupon_member.number;
}
}
// if (this.props.courseInfo.course_info) {
// courseInfo = this.props.courseInfo.course_info;
// service = courseInfo.service;
// if (courseInfo.group_status === 3 || courseInfo.group_status === 4) {
// number = courseInfo.pdd_group_info.groupon_member.number;
// }
// }
const {share, countdown, list, outList} = this.state;
const href = this.props.location && this.props.location.state? this.props.location.state.href : undefined;
return (
<div className='detail-box'>
<HeaderBar title='课程详情' arrow={true} cart={true} toHref={href}></HeaderBar>
<CallApp className='toapp'></CallApp>
<HeaderBar
title='课程详情'
arrow={true}
cart={true}
toHref={href}
/>
<CallApp className='toapp' />
{/*弹幕*/}
<Carouselw></Carouselw>
<Carouselw />
{/*课程*/}
<div className='course-content'>
<div className='cover'>
<img src={courseInfo.image_name}
alt=""/>
<img src={course_info.image_name} alt="" />
{
(courseInfo.is_aist &&
<span className='return_cash'></span>
)
course_info.is_aist &&
<span className='return_cash' />
}
</div>
<div className="info">
<p className='title'>{courseInfo.course_title}</p>
<p className='contact text-overflow-2'>{courseInfo.simpledescription}</p>
<p className='title'>{course_info.course_title}</p>
<p className='contact text-overflow-2'>{course_info.simpledescription}</p>
<div className='des'>
{courseInfo.is_baoming === 0 && <p className="course-price">
<span className="new">¥{courseInfo.price1}</span>
<span className="old">¥{courseInfo.price0}</span>
{
course_info.is_baoming === 0 &&
<p className="course-price">
<span className="new">¥{course_info.price1}</span>
<span className="old">¥{course_info.price0}</span>
</p>
}
{courseInfo.is_baoming === 1 &&
{
course_info.is_baoming === 1 &&
<span className="isbuy">已购买</span>
}
</div>
</div>
</div>
{/*正常课程已购买时显示*/}
{
courseInfo.is_baoming === 1 &&
course_info.is_baoming === 1 &&
<div className='group'>
上课QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}
上课QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}
</div>
}
{/*vip课程显示*/}
{
courseInfo.vip_range &&
course_info.vip_range &&
<div className="vip">
<p>已开通年会员：{courseInfo.vip_range}</p>
<p>年会员QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}</p>
<p>已开通年会员：{course_info.vip_range}</p>
<p>年会员QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}</p>
</div>
}
......@@ -260,7 +250,7 @@ class Detail extends Component {
<label>服务承诺</label>
<p>
{
service && service.length > 0 && service.map((item, index) => {
course_info.service && course_info.service.length > 0 && course_info.service.map((item, index) => {
return (
<span key={index}> {item} </span>
)
......@@ -269,48 +259,62 @@ class Detail extends Component {
</p>
</div>
{/*试听*/}
{/*试听弹窗*/}
<Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>
{/*单集购买*/}
<Single singleBox={this.state.singleBox} boxHide={this.boxHide} data={this.state.singMess}
{/*单集购买弹窗*/}
<Single
singleBox={this.state.singleBox}
boxHide={this.boxHide}
data={this.state.singMess}
videoId={this.state.singMess.video_id}
title={courseInfo.course_title}/>
title={course_info.course_title}
/>
{/*分享赚钱*/}
{
this.courseId === courseInfo.course_id && courseInfo.is_dist &&
<ShareRank courseInfo={courseInfo}/>
course_info.is_dist &&
<ShareRank courseInfo={course_info} />
}
{/*拼团*/}
{/**
* 拼团
* is_aist: 是否AI特训营
* group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团
*/}
{
(!courseInfo.is_aist && (courseInfo.group_status === 3 || courseInfo.group_status === 4)) &&
<Group history={this.props.history} countdown={countdown}/>
!course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
<Group
courseInfo={course_info}
history={this.props.history}
countdown={countdown}
/>
}
{/*砍价*/}
{
courseInfo.is_baoming === 0 && (!courseInfo.is_aist) && this.state.barInfo &&
<Bargain
list={list}
outList={outList}
barInfo={this.state.barInfo}
/>
course_info.is_baoming === 0 && (!course_info.is_aist) && course_info.is_bargain &&
<Bargain />
}
{/*课程介绍、大纲*/}
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
<OutLine
data={course_info}
toAudition={this.toAudition}
toSingleset={this.toSingleset}
/>
{/*课程按钮*/}
<BtnStatus countdown={countdown}
data={this.props.courseInfo.course_info}
{
course_info &&
<BtnStatus
countdown={countdown}
data={course_info}
user={this.props.user}
barInfo={this.state.barInfo}
invitedFriends={this.invitedFriends}
addCourseToCart={this.props.addCourseToCart}
history={this.props.history}></BtnStatus>
history={this.props.history}
/>}
{
share ? (
......@@ -335,8 +339,7 @@ class Detail extends Component {
const mapStateToProps = (state) => {
return {
courseInfo: state.courseInfo,
// courseInfo: state.courseInfo,
user: {
...state.user
}
......
src/components/detail/outline/index.js
......@@ -45,8 +45,8 @@ class OutLine extends Component {
{title: '大纲'}
];
let introduce = ''
if (this.props.data.course_info) {
introduce = this.props.data.course_info
if (this.props.data) {
introduce = this.props.data
}
return (
<div className='course-detail'>
......
src/components/detail/shareRank/index.js
......@@ -18,7 +18,6 @@ class ShareRank extends Component {
}
componentDidMount() {
console.log(this.props);
this.getRankList()
this.getCode()
}
......@@ -87,10 +86,11 @@ class ShareRank extends Component {
}
render() {
let info = ''
if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
info = this.props.courseInfo.courseInfo.course_info
}
const { courseInfo: info = '' } = this.props;
// let info = ''
// if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
// info = this.props.courseInfo.courseInfo.course_info
// }
return (
<div className='share-ranking'>
<Flex className='share-container' justify='between'>
......@@ -157,7 +157,7 @@ class ShareRank extends Component {
export default compose(
connect(
state => ({
courseInfo: state,
// courseInfo: state,
user: state.user
}),
null
......
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