Skip to content

M
mr-julyedu
Commit 10311673 by xuzhenghua
Options

ml小课优化

parent 2c353d5e
Showing with 308 additions and 44 deletions
src/components/ml/pythomDes/Experience/index.js
......@@ -15,8 +15,8 @@ export default class Experience extends Component {
<div className={'experience'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/L%402x.png" alt=""/>
<div>
<p>限时福利免费试学</p>
<p>开始颠覆你想象的学习</p>
<p>特价试学9块9 体验前3个课时</p>
<p>开启颠覆你想象的学习</p>
</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
</div>
......
src/components/ml/pythomDes/Experience/index.scss
......@@ -12,7 +12,7 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 250px;
width: 310px;
margin: 22px auto 28px;
img {
width: 16px;
......
src/components/ml/pythomDes/index.js
......@@ -9,7 +9,7 @@ import Selection from './Selection'
import Mask from './../poup/index.js'
import InAction from "./InAction"
import ShareRank from "@components/detail/shareRank"
import { http, getParam, SendMessageToApp, } from '@/utils'
import { http, getParam, SendMessageToApp, browser} from '@/utils'
import { connect } from 'react-redux'
import { Toast } from "antd-mobile"
import { CallApp } from "@common/index"
......@@ -29,31 +29,134 @@ class PythonDes extends Component {
payMoney: 0,
isOnline: true, //课程是否上架
courseInfo: {},
isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel')
isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel'),
orderId:''
}
}
// 立即报名
signUp = () => {
this.statistics(3)
// 已登录
if (!this.props.user.hasError) {
this.toDetail()
} else {// 未登录
this.toLogin()
}
}
// signUp = () => {
// this.statistics(3)
// // 已登录
// if (!this.props.user.hasError) {
// this.toDetail()
// } else {// 未登录
// this.toLogin()
// }
// }
// 立即体验、免费试学
tryLearn = type => {
this.statistics(type)
// 已登录
if (!this.props.user.hasError) {
this.toLearn()
this.creatOid()
} else {// 未登录
this.toLogin()
}
}
creatOid=()=>{
http.post(`${API['base-api']}/sys/trial_create`, {course_id: getParam('id')}).then(res => {
const {errno, data, msg} = res.data
if (errno === 200) {
this.setState({
orderId: data.oid
})
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";
} 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 {
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() {
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)
}
toLearn = () => {
const {backwardVersion} = this.props;
......@@ -169,6 +272,13 @@ class PythonDes extends Component {
if (backwardVersion && isPay === 1) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端学习', 2);
}
if (browser.isWeixin) {
this.isweixinPay()
}
if (getParam('weixinpay')) {
this.payCallback()
}
}
// 统计
......@@ -214,11 +324,13 @@ class PythonDes extends Component {
</div>
<div className={'btn__group'}>
{/*<div className={'try__study'} onClick={() => {
<div className={'try__study'} onClick={() => {
this.tryLearn(3)
}}>立即报名</div>
<div className={'sign__now'} onClick={() => {
this.tryLearn(2)
}}>免费试学
</div>*/}
<div className={'sign__now'} onClick={this.signUp}>立即报名</div>
}}>9.9特价试学
</div>
</div>
</div>
)
......
src/components/ml/pythomDes/index.scss
......@@ -161,7 +161,7 @@
align-items: center;
}
.sign__now {
width: 100px;
width: 110px;
height: 38px;
background: rgba(0, 153, 255, 1);
border-radius: 19px;
......
src/components/ml/pythonStudy/index.js
import React, { Component } from 'react';
import { Accordion, Toast } from 'antd-mobile';
import { HeaderBar, CallApp} from '@/common';
import { http, getParam } from '@/utils';
import './index.scss';
import { connect } from "react-redux";
import React, {Component} from 'react'
import {Accordion, Toast} from 'antd-mobile'
import {HeaderBar, CallApp} from '@/common'
import {http, getParam,browser} from '@/utils'
import './index.scss'
import {connect} from "react-redux"
import Mask from './../poup/index.js'
import ShareRank from "@components/detail/shareRank"
class PythonStudy extends Component {
constructor(props) {
super(props);
super(props)
this.state = {
toApp: false,
courseInfo: '',
orderId: '',
syllabus: '',
learning: '',
isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel')
};
}
}
componentDidMount() {
this.fetchCourseDetail();
this.fetchCourseDetail()
if (browser.isWeixin) {
this.isweixinPay()
}
if (getParam('weixinpay')) {
this.payCallback()
}
}
fetchCourseDetail = () => {
http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}&is_pay=1`).then(res => {
const {data, code, msg} = res.data;
const {data, code, msg} = res.data
if (code === 200) {
this.setState({
courseInfo: data.course_info,
......@@ -36,11 +44,11 @@ class PythonStudy extends Component {
} else {
Toast.info(msg, 2)
}
});
})
}
Change = (data) => {
let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十'];
let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十']
let newStr = ''
let str = data.toString()
let ci = Number(str) % 10
......@@ -56,11 +64,11 @@ class PythonStudy extends Component {
cv = cn[ci - 1]
}
newStr = str.replace(str, cv)
return newStr;
return newStr
}
onChange = (key) => {
console.log(key);
console.log(key)
}
toPythonHome = (isUnlock) => {
......@@ -82,20 +90,126 @@ class PythonStudy extends Component {
})
}
creatOid=()=>{
http.post(`${API['base-api']}/sys/trial_create`, {course_id: getParam('id')}).then(res => {
const {errno, data, msg} = res.data
if (errno === 200) {
this.setState({
orderId: data.oid
})
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";
} 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 {
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() {
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() {
const {user} = this.props;
const {user} = this.props
const uid = user && user.data && user.data.uid
const {courseInfo, syllabus, learning, toApp} = this.state;
const {courseInfo, syllabus, learning, toApp} = this.state
return (
<div className="python-study">
<HeaderBar title='机器学习小课' arrow={true}/>
<div className="python-study__header">
<div className="python-study__course">
<h2 className="python-study__course-name">机器学习小课</h2>
{
courseInfo.buy_try == 0 &&
<p className="python-study__course-contact">
<span>{courseInfo.contact_type == 1 ? '上课请加QQ学习群' : '添加助教微信入群'}：{courseInfo.course_qq}</span>
<span>并备注您的学号：{uid}</span>
</p>
}
</div>
{
learning.schedule > 0 &&
......@@ -178,7 +292,8 @@ class PythonStudy extends Component {
}}
>
<img className="python-study__subject-icon"
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project-icon.png" alt=""/>
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project-icon.png"
alt=""/>
{
lessonsItem.project.is_unlock == 1 && lessonsItem.project.complete == 1 &&
<i className="python-study__subject-status"
......@@ -204,6 +319,16 @@ class PythonStudy extends Component {
)
})
}
{
index === 0 && syllabus[0].lessons[2].complete == 1 && courseInfo.buy_try == 1 &&
<div className="study-end">
试学结束，<span>{courseInfo.price1}元</span>学习全部课时
<a className="tobuy" onClick={() => {
this.creatOid()
}}>立即报名</a>
</div>
}
</Accordion.Panel>
)
})
......@@ -234,4 +359,4 @@ class PythonStudy extends Component {
export default connect(
state => ({user: state.user}),
null
)(PythonStudy);
\ No newline at end of file
)(PythonStudy)
\ No newline at end of file
src/components/ml/pythonStudy/index.scss
html, body, #root {
height: 100%;
}
.am-accordion.python-study__stage .am-accordion-item .am-accordion-header {
height: 44px;
padding-left: 13px;
......@@ -11,7 +12,7 @@ html, body, #root {
border-radius: 4px;
}
.am-accordion.python-study__stage .am-accordion-item-active .am-accordion-header{
.am-accordion.python-study__stage .am-accordion-item-active .am-accordion-header {
border-radius: 4px 4px 0 0;
}
......@@ -47,7 +48,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
background-color: #F4F5F6;
padding-bottom: 15px;
.dist-wrapper{
.dist-wrapper {
background: #fff;
margin: 20px 10px 30px;
}
......@@ -124,7 +125,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
}
.python-study__progress {
color: rgba(255,255,255,.8);
color: rgba(255, 255, 255, .8);
}
.python-study__progress {
......@@ -137,9 +138,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
font-weight: 600;
color: #333333;
line-height: 39px;
&>span{
& > span {
color: #999;
span{
span {
color: #09f;
}
}
......@@ -223,6 +226,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(247, 248, 249, 1);
&[data-status="lock"] {
background-color: rgba(247, 248, 249, .6);
}
......@@ -306,3 +310,25 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
.python-study__over {
background-color: #ccc;
}
.study-end {
width: 100%;
background-color: #F4F5F6;
padding-top: 15px;
margin-bottom: -10px;
text-align: right;
margin-top: 20px;
.tobuy {
text-align: center;
display: inline-block;
width: 84px;
height: 30px;
line-height: 30px;
background-color: #FC262D;
border-radius: 15px;
font-size:16px;
color: #fff;
margin-left: 10px;
}
}
\ No newline at end of file
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