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