Skip to content

M
mr-julyedu
Commit acf4003d by xuzhenghua
Options

登录

parent 10311673
Showing with 354 additions and 413 deletions
src/components/ml/index.js
...@@ -6,6 +6,7 @@ import {connect} from "react-redux" ...@@ -6,6 +6,7 @@ import {connect} from "react-redux"
import {addDays} from "date-fns" import {addDays} from "date-fns"
import cookie from "js-cookie" import cookie from "js-cookie"
import {setCurrentUser, startFetchUser} from "@/store/userAction" import {setCurrentUser, startFetchUser} from "@/store/userAction"
import {Toast} from "antd-mobile"
@connect(state => ({ @connect(state => ({
...@@ -32,6 +33,88 @@ class ML extends Component { ...@@ -32,6 +33,88 @@ class ML extends Component {
window['loginInfo'] = result => { window['loginInfo'] = result => {
_this.loginInfo(result) _this.loginInfo(result)
} }
if (browser.isWeixin) {
this.isweixinPay()
}
if (getParam('weixinpay')) {
this.payCallback()
}
}
// 微信内部支付回调
isweixinPay = () => {
let _this = this;
let weixin_code = getParam('code');
if (weixin_code) {
if (getParam('oid') === undefined) {
return
} else {
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
if (res.data.errno === 0) {
let 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_wcpsys/order_status/ay_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;
location.reload()
}
})
}, 1000)
} else {
Toast.info('支付失败', 2);
}
}
)
}
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)
}
})
}
}
}
// 支付完成之后获取状态
payCallback = () => {
const _this = this;
// 支付回调
// 定时器轮训获取订单状态
_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;
location.reload()
}
})
}, 1000)
} }
// 获取app登录数据 // 获取app登录数据
...@@ -133,9 +216,9 @@ class ML extends Component { ...@@ -133,9 +216,9 @@ class ML extends Component {
<div> <div>
{ {
isPay === 0 && ( isPay === 0 && (
<PythonDes <PythonDes
backwardVersion={backwardVersion} backwardVersion={backwardVersion}
history={this.props.history} history={this.props.history}
isAppUpdate={isAppUpdate} isAppUpdate={isAppUpdate}
isPay={isPay} isPay={isPay}
/> />
......
src/components/ml/pythomDes/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import './index.scss' import './index.scss'
import Description from './Description/index.js' import Description from './Description/index.js'
import Study from './Study/index.js' import Study from './Study/index.js'
...@@ -9,389 +9,326 @@ import Selection from './Selection' ...@@ -9,389 +9,326 @@ import Selection from './Selection'
import Mask from './../poup/index.js' import Mask from './../poup/index.js'
import InAction from "./InAction" import InAction from "./InAction"
import ShareRank from "@components/detail/shareRank" import ShareRank from "@components/detail/shareRank"
import { http, getParam, SendMessageToApp, browser} from '@/utils' import {http, getParam, SendMessageToApp, browser} from '@/utils'
import { connect } from 'react-redux' import {connect} from 'react-redux'
import { Toast } from "antd-mobile" import {Toast} from "antd-mobile"
import { CallApp } from "@common/index" import {CallApp} from "@common/index"
@connect(state => ({ @connect(state => ({
user: state.user user: state.user
})) }))
class PythonDes extends Component { class PythonDes extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
syllabus: [], // 阶梯学习 syllabus: [], // 阶梯学习
allSyllabus: [], // 阶梯学习 allSyllabus: [], // 阶梯学习
allSyllabusShow: false, allSyllabusShow: false,
allPractice: [], // 课后实操 allPractice: [], // 课后实操
toApp: false, toApp: false,
payMoney: 0, payMoney: 0,
isOnline: true, //课程是否上架 isOnline: true, //课程是否上架
courseInfo: {}, courseInfo: {},
isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel'), isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel'),
orderId:'' orderId: ''
}
} }
}
// 立即报名 // 立即报名
// signUp = () => { // signUp = () => {
// this.statistics(3) // this.statistics(3)
// // 已登录 // // 已登录
// if (!this.props.user.hasError) { // if (!this.props.user.hasError) {
// this.toDetail() // this.toDetail()
// } else {// 未登录 // } else {// 未登录
// this.toLogin() // this.toLogin()
// } // }
// } // }
// 立即体验、免费试学 // 立即体验、免费试学
tryLearn = type => { tryLearn = type => {
this.statistics(type) this.statistics(type)
// 已登录 // 已登录
if (!this.props.user.hasError) { if (!this.props.user.hasError) {
this.creatOid() this.creatOid()
} else {// 未登录 } else {// 未登录
this.toLogin() this.toLogin()
}
} }
} creatOid = () => {
creatOid=()=>{ http.post(`${API['base-api']}/sys/trial_create`, {course_id: getParam('id')}).then(res => {
http.post(`${API['base-api']}/sys/trial_create`, {course_id: getParam('id')}).then(res => { const {errno, data, msg} = res.data
const {errno, data, msg} = res.data if (errno === 200) {
if (errno === 200) { this.setState({
this.setState({ orderId: data.oid
orderId: data.oid })
this.weixinPay(data.oid)
} else {
Toast.info(msg, 2)
}
}) })
this.weixinPay(data.oid) }
} else { // 微信支付
Toast.info(msg, 2) weixinPay = (orderId) => {
} // 微信内部-支付
}) if (browser.isWeixin) {
} window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb&oid=" + orderId).toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
// 微信支付
weixinPay = (orderId) => {
// 微信内部-支付
if (browser.isWeixin) {
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb&oid=" + orderId).toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
} else {
// 微信外部-支付
http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1&oid=" + orderId).toLowerCase();
} else { } else {
Toast.info(res.data.msg, 2) // 微信外部-支付
http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1&oid=" + orderId).toLowerCase()
} else {
Toast.info(res.data.msg, 2)
}
})
} }
})
} }
}
// 微信支付
isweixinPay = () => {
let _this = this;
let weixin_code = getParam('code');
if (weixin_code) {
if (getParam('oid') === undefined) {
return
} else {
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
if (res.data.errno === 0) {
let data = res.data.data;
function onBridgeReady() { toLearn = () => {
WeixinJSBridge.invoke( const {backwardVersion} = this.props
'getBrandWCPayRequest', { http.post(`${API['home']}/m/it/user/trialCourse`, {course_id: getParam('id')}).then((res) => {
appId: data.appId, //公众号名称，由商户传入 const {code, msg} = res.data
timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数 if (code == 200) {
nonceStr: data.nonceStr, //随机串 if (!getParam('version')) { // H5
package: data.package, this.setState({
signType: data.signType, //微信签名方式： toApp: true
paySign: data.paySign //微信签名 })
}, } else { // APP
function (res) { if (backwardVersion) {
if (res.err_msg == "get_brand_wcpsys/order_status/ay_request:ok") { Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端体验', 2)
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;
location.reload()
}
})
}, 1000)
} else { } else {
Toast.info('支付失败', 2); SendMessageToApp("toLearn", getParam('id'))
} }
} }
)
}
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 { } else {
onBridgeReady(); Toast.info(msg, 2)
} }
} else {
Toast.info(res.data.msg, 2)
}
}) })
}
} }
}
// 支付完成之后获取状态
payCallback = () => {
const _this = this;
// 支付回调
// 定时器轮训获取订单状态
_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;
location.reload()
}
})
}, 1000)
}
toLearn = () => { closePop = () => {
const {backwardVersion} = this.props; this.setState({
http.post(`${API['home']}/m/it/user/trialCourse`, {course_id: getParam('id')}).then((res) => { toApp: false
const {code, msg} = res.data })
if (code == 200) { }
toDetail = () => {
const {backwardVersion} = this.props
const id = getParam('id')
if (!getParam('version')) { // H5 if (!getParam('version')) { // H5
this.setState({ http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => {
toApp: true if (res.data.errno === 0) {
}) this.props.history.push(`/order?id=${id}`, {simple: 1})
} else {
Toast.info(res.data.msg, 2)
}
})
} else { // APP } else { // APP
if (backwardVersion) { if (backwardVersion) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端体验', 2) Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端购买', 2)
} else { let onlyoneUse = setTimeout(() => {
SendMessageToApp("toLearn", getParam('id')) clearTimeout(onlyoneUse)
} onlyoneUse = null
SendMessageToApp('toPay', id)
}, 2000)
} else {
SendMessageToApp('toPay', id)
}
} }
} else { }
Toast.info(msg, 2)
}
})
}
closePop = () => {
this.setState({
toApp: false
})
}
toDetail = () => { toLogin = () => {
const {backwardVersion} = this.props; if (!getParam('version')) { // H5
const id = getParam('id') this.changeLoginType()
if (!getParam('version')) { // H5 } else { // APP
http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => { SendMessageToApp("toLogin")
if (res.data.errno === 0) {
this.props.history.push(`/order?id=${id}`, {simple: 1})
} else {
Toast.info(res.data.msg, 2)
} }
})
} else { // APP
if (backwardVersion) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端购买', 2);
let onlyoneUse = setTimeout(() => {
clearTimeout(onlyoneUse);
onlyoneUse = null;
SendMessageToApp('toPay', id)
}, 2000);
} else {
SendMessageToApp('toPay', id)
}
} }
} // 点击登录 提示微信登录还是账号登录，微信授权登录不需要绑定手机号
changeLoginType = () => {
toLogin = () => { // 微信登录
if (!getParam('version')) { // H5 if (browser.isWeixin) {
this.props.history.push('/passport') // tool.setCookie('redirect_url', window.location.href);
} else { // APP let url = window.location.href
SendMessageToApp("toLogin") if (url.includes('code=') && url.includes('state=STATE')) {
let index = url.lastIndexOf('code=')
url = url.substr(0, index - 1)
}
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(url).toLowerCase() + "&aa=bb&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
} else {
// 账号登录
this.props.history.push('/passport')
}
} }
}
showAll = (key) => { showAll = (key) => {
if (key === 1) { if (key === 1) {
this.setState({ this.setState({
syllabus: this.state.allSyllabus, syllabus: this.state.allSyllabus,
allSyllabusShow: true, allSyllabusShow: true,
}) })
} }
if (key === 2) { if (key === 2) {
this.setState({ this.setState({
practice: this.state.allPractice, practice: this.state.allPractice,
allPracticeShow: true, allPracticeShow: true,
}) })
} }
}
hideSome = (key) => {
if (key === 1) {
this.setState({
syllabus: this.state.allSyllabus.slice(0, 2),
allSyllabusShow: false,
})
} }
if (key === 2) { hideSome = (key) => {
this.setState({ if (key === 1) {
practice: this.state.allPractice.slice(0, 2), this.setState({
allPracticeShow: false, syllabus: this.state.allSyllabus.slice(0, 2),
}) allSyllabusShow: false,
})
}
if (key === 2) {
this.setState({
practice: this.state.allPractice.slice(0, 2),
allPracticeShow: false,
})
}
} }
}
getStatus = () => { getStatus = () => {
http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}`).then(res => { http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}`).then(res => {
const {code, data, msg} = res.data const {code, data, msg} = res.data
if (code == 200) { if (code == 200) {
this.setState({ this.setState({
syllabus: data.syllabus.slice(0, 2), syllabus: data.syllabus.slice(0, 2),
allSyllabus: data.syllabus, allSyllabus: data.syllabus,
allPractice: data.practice, allPractice: data.practice,
payMoney: data.course_info.price1, payMoney: data.course_info.price1,
courseInfo: data.course_info courseInfo: data.course_info
})
} else {
Toast.info(msg)
}
}) })
} else { }
Toast.info(msg)
}
})
}
componentDidMount() { componentDidMount() {
this.getStatus() this.getStatus()
const {backwardVersion, isPay} = this.props; const {backwardVersion, isPay} = this.props
if (backwardVersion && isPay === 1) { if (backwardVersion && isPay === 1) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端学习', 2); Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端学习', 2)
}
} }
if (browser.isWeixin) { // 统计
this.isweixinPay() statistics = type => {
} http.post(`${API.home}/web/it_click_num/${getParam('id')}`, {type})
if (getParam('weixinpay')) {
this.payCallback()
} }
}
// 统计
statistics = type => {
http.post(`${API.home}/web/it_click_num/${getParam('id')}`, {type})
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
shouldComponentUpdate(nextProps, nextState, nextContext) { if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
if (this.props.isAppUpdate !== nextProps.isAppUpdate) { this.getStatus()
this.getStatus() return false
return false }
return true
} }
return true
}
render() { render() {
const { const {
syllabus, syllabus,
allSyllabusShow, allSyllabusShow,
toApp, toApp,
payMoney, payMoney,
isOnline, isOnline,
courseInfo courseInfo
} = this.state } = this.state
return ( return (
<div className={'python__des'}> <div className={'python__des'}>
<div className={'des__start'}></div> <div className={'des__start'}></div>
{ {
!!courseInfo.is_dist && <ShareRank courseInfo={courseInfo}/> !!courseInfo.is_dist && <ShareRank courseInfo={courseInfo}/>
} }
<div className={'course__introduce'}></div> <div className={'course__introduce'}></div>
{ {
isOnline isOnline
? ( ? (
<div className={'bottom__btn_group'}> <div className={'bottom__btn_group'}>
<div className={'course__price'}> <div className={'course__price'}>
<div className={'money'}>{payMoney}<span style={{fontSize: '18px'}}>元</span></div> <div className={'money'}>{payMoney}<span style={{fontSize: '18px'}}>元</span></div>
<div className={'discount'}> <div className={'discount'}>
限时特惠 限时特惠
<div className={'triangle'}></div> <div className={'triangle'}></div>
</div> </div>
</div> </div>
<div className={'btn__group'}> <div className={'btn__group'}>
<div className={'try__study'} onClick={() => { <div className={'try__study'} onClick={() => {
this.tryLearn(3) this.tryLearn(3)
}}>立即报名</div> }}>立即报名
<div className={'sign__now'} onClick={() => { </div>
this.tryLearn(2) <div className={'sign__now'} onClick={() => {
}}>9.9特价试学 this.tryLearn(2)
</div> }}>9.9特价试学
</div> </div>
</div> </div>
) </div>
: ( )
<div className="bottom__btn_group"> : (
<p className="online__label">Python人工智能</p> <div className="bottom__btn_group">
<button className="online__button">即将上架 敬请期待</button> <p className="online__label">Python人工智能</p>
</div> <button className="online__button">即将上架 敬请期待</button>
) </div>
} )
}
{ {
this.state.isShowChannel == 1 && this.state.isShowChannel == 1 &&
<CallApp className='toapp'/> <CallApp className='toapp'/>
} }
{/* 课程介绍 */} {/* 课程介绍 */}
<Description/> <Description/>
<Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll} <Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll}
hide={this.hideSome}></Study> hide={this.hideSome}></Study>
{/*精选习题*/} {/*精选习题*/}
<Selection/> <Selection/>
{/*项目实战*/} {/*项目实战*/}
<InAction/> <InAction/>
<Team/> <Team/>
{/* 试学体验 */} {/* 试学体验 */}
<Experience tryLearn={this.tryLearn} isOnline={isOnline}/> <Experience tryLearn={this.tryLearn} isOnline={isOnline}/>
<img <img
style={{ style={{
display: 'block', display: 'block',
width: '100%', width: '100%',
height: '8px' height: '8px'
}} }}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/di.png" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/di.png"
alt="" alt=""
/> />
{/* 常见问题 */} {/* 常见问题 */}
<Progream/> <Progream/>
{ {
toApp && (<Mask type={1} closePop={this.closePop}/>) toApp && (<Mask type={1} closePop={this.closePop}/>)
} }
</div> </div>
) )
} }
} }
function DefineItem(props) { function DefineItem(props) {
const {item, item: {desInfo}} = props const {item, item: {desInfo}} = props
return ( return (
<div className={'number_one'}> <div className={'number_one'}>
<img className={'trophy'} src={item.titleUrl}></img> <img className={'trophy'} src={item.titleUrl}></img>
<p className={'item__title'}>{item.title}</p> <p className={'item__title'}>{item.title}</p>
<p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p> <p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p>
<img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img> <img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img>
</div> </div>
) )
} }
export default PythonDes export default PythonDes
src/components/ml/pythonStudy/index.js
...@@ -23,13 +23,6 @@ class PythonStudy extends Component { ...@@ -23,13 +23,6 @@ class PythonStudy extends Component {
componentDidMount() { componentDidMount() {
this.fetchCourseDetail() this.fetchCourseDetail()
if (browser.isWeixin) {
this.isweixinPay()
}
if (getParam('weixinpay')) {
this.payCallback()
}
} }
fetchCourseDetail = () => { fetchCourseDetail = () => {
...@@ -119,79 +112,7 @@ class PythonStudy extends Component { ...@@ -119,79 +112,7 @@ class PythonStudy extends Component {
}) })
} }
} }
// 微信支付
isweixinPay = () => {
let _this = this;
let weixin_code = getParam('code');
if (weixin_code) {
if (getParam('oid') === undefined) {
return
} else {
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
if (res.data.errno === 0) {
let 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_wcpsys/order_status/ay_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;
location.reload()
}
})
}, 1000)
} else {
Toast.info('支付失败', 2);
}
}
)
}
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)
}
})
}
}
}
// 支付完成之后获取状态
payCallback = () => {
const _this = this;
// 支付回调
// 定时器轮训获取订单状态
_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;
location.reload()
}
})
}, 1000)
}
render() { render() {
const {user} = this.props const {user} = this.props
......
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