Skip to content

M
mr-julyedu
Commit 10311673 by xuzhenghua
Options

ml小课优化

parent 2c353d5e
Showing with 165 additions and 26 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>
......@@ -37,7 +37,7 @@ export default class Experience extends Component {
</>
)
}
</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.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);
}
......@@ -305,4 +309,26 @@ 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