import React, {Component} from 'react'
import './index.scss'
import Bargain from './bargain'
import Group from './group'
import OutLine from './outline'
import {HeaderBar, CallApp} from '../../common'
import ShareRank from "./shareRank"
import Audition from "./audition"
import Single from "./single"
import SingleSuccess from './single/singleSuccess';
import BtnStatus from "./btnstatus"
import Carouselw from "./carousel"
import {connect} from "react-redux"
import {getCourses, addCourseToCart} from "./actions"
import {getParam, http, browser,wxShare} from "@/utils"
import {Toast} from 'antd-mobile'
import {compose, bindActionCreators} from "redux";
class Detail extends Component {
courseId
constructor(props) {
super(props)
this.state = {
isbuy: 0,
isvip: 0,
auditionBox: false,
singleBox: false,
singleType: 1,
shareRank: false,
singMess: '',
barInfo: '',
share: false,
countdown: '00:00:00',
outList: [],
list: [],
course: {},
nowPrice: 0,
laterPrice: 0,
isPdd: 0, // 是否是拼团课程 控制首次单集购买后的 全集购买 接口： 拼团课程走拼团接口，否则直接走购买接口
}
}
componentDidMount() {
<<<<<<< HEAD
=======
if(browser.isWeixin){
wxShare({
title: `课程详情页`,
desc: `课程详情页`,
link: location.href,
imgUrl: `${location.origin}/favicon.ico`
})
}
>>>>>>> 41f6c77df0ea5567680fccdfa8f0f3095768af5d
this.fetchCourseInfo();
const { location: { state = {} } } = this.props;
if(state.oid) {
this.check(state.oid);
}
if (getParam('is_class') === 1 || getParam('weixinpay')) {
this.payCallback()
}
if (browser.isWeixin) {
this.isweixinPay()
}
}
componentDidUpdate(prevProps) {
if(prevProps.user.hasError !== this.props.user.hasError){
this.fetchCourseInfo()
}
}
payCallback =() => {
const _this = this;
if(!getParam('oid')) {
return;
}else{
this.setState({
singMess: JSON.parse(window.localStorage.getItem('singMess'))
})
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus);
_this.intervalPayStatus = null;
// 获取课程类型
http.get(`${API['base-api']}/class_order_status/${getParam('oid')}`).then((res) => {
if (Number(res.data.data.errno) === 200) {
// 正常购买单集成功
_this.setState({
singleType: 6,
})
} else if (Number(res.data.data.errno) === 201) {
// 0元参团
_this.setState({
singleType: 4,
})
} else if (Number(res.data.data.errno) === 202) {
// 0元购
_this.setState({
singleType: 3,
})
} else if (Number(res.data.data.errno) === 203) {
// 三天内特价
_this.setState({
nowPrice: res.data.data.data.now_price,
laterPrice: res.data.data.data.three_day_later_price,
singleType: 2,
isPdd: res.data.data.data.is_pdd,
})
} else {
Toast.info(res.data.data.msg, 2)
}
})
}
})
}, 1000)
}
};
isweixinPay =()=> {
let _this = this;
let weixin_code = getParam('code');
if (weixin_code) {
if (!getParam('oid')) {
return
} else {
// this.props.weixinPay(weixin_code)
this.setState({
singMess: JSON.parse(window.localStorage.getItem('singMess'))
});
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
if (res.data.errno === 0) {
const data = res.data.data;
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": data.appId, //公众号名称，由商户传入
"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式：
"paySign": data.paySign //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2);
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus);
_this.intervalPayStatus = null;
// 获取课程类型
http.get(`${API['base-api']}/class_order_status/${getParam('oid')}`).then((res) => {
if (Number(res.data.data.errno) === 200) {
// 正常购买单集成功
_this.setState({
singleType: 6,
})
} else if (Number(res.data.data.errno) === 201) {
// 0元参团
_this.setState({
singleType: 4,
})
} else if (Number(res.data.data.errno) === 202) {
// 0元购
_this.setState({
singleType: 3,
})
} else if (Number(res.data.data.errno) === 203) {
// 三天内特价
_this.setState({
nowPrice: res.data.data.data.now_price,
laterPrice: res.data.data.data.three_day_later_price,
singleType: 2,
isPdd: res.data.data.data.is_pdd,
})
} else {
Toast.info(res.data.data.msg, 2)
}
})
}
})
}, 1000)
} else {
alert('支付失败')
}
}
)
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
}
} else {
onBridgeReady()
}
} else {
Toast.info(res.data.msg, 2)
}
})
}
}
}
// 判断支付是否成功
check = (oid) => {
this.setState({
singMess: JSON.parse(window.localStorage.getItem('singMess'))
})
http.get(`${API['base-api']}/class_order_status/${oid}`).then((res) => {
if (Number(res.data.data.errno) === 200) {
// 正常购买单集成功
this.setState({
singleType: 6
})
} else if (Number(res.data.data.errno) === 201) {
// 0元参团
this.setState({
singleType: 4
})
} else if (Number(res.data.data.errno) === 202) {
// 0元购
this.setState({
singleType: 3
})
} else if (Number(res.data.data.errno) === 203) {
// 三天内特价
this.setState({
nowPrice: res.data.data.data.now_price,
laterPrice: res.data.data.data.three_day_later_price,
singleType: 2,
isPdd: res.data.data.data.is_pdd,
})
} else {
Toast.info(res.data.data.msg, 2)
}
})
}
payCallBack = (singleType, nowPrice, laterPrice) => {
// Toast.info(singleType, 2);
const _this = this;
if(singleType === 2) {
_this.setState({
singleType,
nowPrice,
laterPrice
})
}else{
_this.setState({
singleType,
})
}
};
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
});
if (data.course_info) {
let course_info = data.course_info;
if (course_info.group_status === 3 || course_info.group_status === 4) {
let endTime = course_info.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)
}
wxShare({
title: course_info.course_title,
desc: course_info.index_description,
link: encodeURI(location.origin + '/detail?id=' + getParam('id')),
imgUrl:course_info.image_name
});
}
}
});
}
// 点击子组件试听按钮
toAudition = () => {
const {user} = this.props
const uid = user && user.data && user.data.uid
if (!uid) {
this.props.history.push('/passport/login')
} else {
this.setState({
auditionBox: true,
})
}
}
// 点击子组件单集购买按钮
toSingleset = (item) => {
const {user} = this.props
const uid = user && user.data && user.data.uid
if (!uid) {
this.props.history.push('/passport/login')
} else {
this.setState({
singleBox: true,
singleType: 1,
singMess: item
});
window.localStorage.setItem('singMess', JSON.stringify(item))
}
}
// 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)
// }
// }
// }
// 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
toCart = (type) => {
const { history, addCourseToCart } = this.props;
let data = {
course_id: getParam('id')
};
http.post(`${API.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200) {
if (type === 1) {
Toast.info('已加入购物车', 2)
// this.props.getCourses()
// document.location.reload()
addCourseToCart();
this.fetchCourseInfo();
} else {
history.replace('/shopcart');ß
}
} else if (res.data.code === 15001) {
history.replace('/shopcart');
} else if (res.data.code === 4030) {
history.replace('/passport');
} else {
Toast.info(res.data.msg, 2);
}
})
};
invitedFriends = () => {
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) {
wxShare({
title: `【仅剩${number}个名额】我${price}元拼了《${course_title}》`,
desc: course_title,
link: location.href,
imgUrl: image_name,
});
} else {
Toast.info('请在微信中使用分享功能！', 2);
}
}
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({
auditionBox: val,
singleBox: val,
singleType: 1
})
this.props.history.push(`/detail?id=${getParam('id')}`);
}
render() {
const { course: { course_info={} }, barInfo, singleBox, singleType } = this.state;
let courseInfo = '',
service = '',
number = 0,
endTime = 0;
// if (this.props.courseInfo.course_info) {
// courseInfo = this.props.courseInfo.course_info;
// service = courseInfo.service;
if (course_info.group_status === 3 || course_info.group_status === 4) {
number = course_info.pdd_group_info.groupon_member.number;
}
// }
const {share, countdown, list, outList} = this.state;
let href = '';
const { location: { state = {}} } = this.props;
if(state.to && state.to === 'classify') {
href = '/classify'
}
if(state.oid) {
href='/classify'
}
if(getParam('dist_code')) {
href='/'
}
return (
<div>
<div className='detail-box'>
<HeaderBar
title='课程详情'
arrow={true}
cart={true}
toHref={href}
/>
<CallApp className='toapp' />
{/*弹幕*/}
<Carouselw />
{/*课程*/}
<div className='course-content'>
<div className='cover'>
<img src={course_info.image_name} alt="" />
{
course_info.is_aist &&
<span className='return_cash' />
}
</div>
<div className="info">
<p className='title'>{course_info.course_title}</p>
<p className='contact text-overflow-2'>{course_info.simpledescription}</p>
<div className='des'>
{
course_info.is_baoming === 0 &&
<p className="course-price">
<span className="new">¥{course_info.price1}</span>
<span className="old">¥{course_info.price0}</span>
</p>
}
{
course_info.is_baoming === 1 &&
<span className="isbuy">已购买</span>
}
</div>
</div>
</div>
{/*正常课程已购买时显示*/}
{
course_info.is_baoming === 1 &&
<div className='group'>
上课QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}
</div>
}
{/*vip课程显示*/}
{
course_info.vip_range &&
<div className="vip">
<p>已开通年会员：{course_info.vip_range}</p>
<p>年会员QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}</p>
</div>
}
{/*服务承诺*/}
<div className='promise'>
<label>服务承诺</label>
<p>
{
course_info.service && course_info.service.length > 0 && course_info.service.map((item, index) => {
return (
<span key={index}> {item} </span>
)
})
}
</p>
</div>
{/*试听弹窗*/}
<Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>
{/*单集购买弹窗*/}
{
singleBox &&
<Single
singleType={this.state.singleType}
singleBox={this.state.singleBox}
boxHide={this.boxHide}
data={this.state.singMess}
vcourseId={course_info.v_course_id}
videoId={this.state.singMess.video_id}
title={course_info.course_title}
check={this.check}
courseId={course_info.course_id}
/>}
{/* 单集购买成功弹窗 */}
{
singleType !== 1 &&
<SingleSuccess
boxHide={this.boxHide}
data={this.state.singMess}
singleType={singleType}
vcourseId={course_info.v_course_id}
videoId={this.state.singMess.video_id}
nowPrice={this.state.nowPrice}
isPdd={this.state.isPdd}
laterPrice={this.state.laterPrice}
courseId={course_info.course_id}
/>
}
{/*payCallback={this.payCallback}*/}
{/*weixinPay = {this.weixinPay}*/}
{/*分享赚钱*/}
{
course_info.is_dist &&
<ShareRank courseInfo={course_info} />
}
{/**
* 拼团
* is_aist: 是否AI特训营
* group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团
*/}
{
!course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
<Group
courseInfo={course_info}
history={this.props.history}
countdown={countdown}
invitedFriends={this.invitedFriends}
/>
}
{/*砍价*/}
{
course_info.is_baoming === 0 && (!course_info.is_aist) && course_info.is_bargain &&
<Bargain />
}
{/*课程介绍、大纲*/}
<OutLine
data={course_info}
toAudition={this.toAudition}
toSingleset={this.toSingleset}
/>
{/*课程按钮*/}
{
course_info &&
<BtnStatus
countdown={countdown}
data={course_info}
user={this.props.user}
invitedFriends={this.invitedFriends}
// addCourseToCart={this.props.addCourseToCart}
toCart={this.toCart}
history={this.props.history}
/>}
{
share ? (
<div
className='groupSuccessMbc'
onClick={() => {
this.setState({share: false})
}}
>
<div className='tipContent'>
{`还差${number}人，分享到3个群，成团率高达98%`}
</div>
<div className='tipArrow'>
<i className='iconfont iconyindao' />
</div>
</div>
) : null
}
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
// courseInfo: state.courseInfo,
user: {
...state.user
}
}
}
// const mapDispatchToProps = {
// fetchCoursesListIfNeeded
// }
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(
{
getCourses,
addCourseToCart
},
dispatch
)
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)