Skip to content

M
mr-julyedu
Commit 726f0200 by xuzhenghua
Options

pull

parent 7887a46c
Showing with 2784 additions and 95 deletions
package-lock.json
......@@ -1027,17 +1027,17 @@
}
},
"@babel/runtime": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
"integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
"requires": {
"regenerator-runtime": "^0.12.0"
"regenerator-runtime": "^0.13.2"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
"integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
}
}
},
......@@ -1846,6 +1846,11 @@
"negotiator": "0.6.1"
}
},
"ace-builds": {
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.7.tgz",
"integrity": "sha512-gwQGVFewBopRLho08BfahyvRa9FlB43JUig5ItAKTYc9kJJsbA9QNz75p28QtQomoPQ9rJx82ymL21x4ZSZmdg=="
},
"acorn": {
"version": "5.7.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
......@@ -2847,6 +2852,14 @@
"@babel/plugin-transform-typescript": "^7.1.0"
}
},
"@babel/runtime": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
"integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
"requires": {
"regenerator-runtime": "^0.12.0"
}
},
"babel-loader": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.5.tgz",
......@@ -2871,6 +2884,11 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
},
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
......@@ -4686,6 +4704,11 @@
"resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
"integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
},
"diff-match-patch": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
"integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
......@@ -9235,6 +9258,11 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.get": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
"integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
},
"lodash.isarguments": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
......@@ -9245,6 +9273,11 @@
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
},
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
},
"lodash.keys": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
......@@ -12051,6 +12084,18 @@
"scheduler": "^0.13.6"
}
},
"react-ace": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/react-ace/-/react-ace-8.0.0.tgz",
"integrity": "sha512-EvU14vXbZpAenb1ZVKdn8yTQs/shZ9RghFulHtt67bBXT6sjrNHcfOEXHYtSEmwMb6pQVVNNuulzzd8o+Uouig==",
"requires": {
"ace-builds": "^1.4.6",
"diff-match-patch": "^1.0.4",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"prop-types": "^15.7.2"
}
},
"react-app-polyfill": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz",
......
package.json
......@@ -57,6 +57,7 @@
"qrcode": "^1.3.3",
"qs": "^6.7.0",
"react": "^16.8.6",
"react-ace": "^8.0.0",
"react-app-polyfill": "^0.2.2",
"react-copy-to-clipboard": "^5.0.1",
"react-dev-utils": "^8.0.0",
......@@ -167,6 +168,7 @@
]
},
"devDependencies": {
"@babel/runtime": "^7.7.2",
"babel-plugin-import": "^1.11.0",
"browserslist": "^4.6.6",
"caniuse-lite": "^1.0.30000989",
......
src/common/HeaderBar/index.js
......@@ -33,7 +33,7 @@ class HeaderBar extends Component {
}
render() {
const { toHref } = this.props
const { toHref, home } = this.props;
return (
<div className="detail-header" style={{...this.props.style}}>
{
......@@ -57,6 +57,10 @@ class HeaderBar extends Component {
this.props.delete &&
<i className='iconfont iconiconfront-56' onClick={this.props.toDelete}></i>
}
{
home &&
<i className="iconfont iconshouye-xianxing"></i>
}
</div>
);
}
......
src/common/v-list-base/index.js
......@@ -3,7 +3,7 @@ import './index.scss'
const VList = (props) => {
return (
<li className='v-list-base-item' onClick={props.handleClick.bind(this, props.id)}>
<li className='v-list-base-item' onClick={props.handleClick.bind(this, props.id, props.item)}>
<div className="content">
<div className="cover">
{props.status}
......@@ -16,4 +16,4 @@ const VList = (props) => {
);
};
export default VList;
\ No newline at end of file
export default VList;
src/components/Index/index.scss
#chatBtn {
bottom: 60px!important;
}
.index-box {
overflow: hidden;
background-color: $bg_fff;
......
src/components/detail/btnstatus/index.js
......@@ -23,7 +23,7 @@ class BtnStatus extends Component {
bindPhone: false,
bindConfrm: false,
bindInfo: {}, // 冲突信息
formInfo: {},
formInfo: {},
}
}
......@@ -314,14 +314,17 @@ class BtnStatus extends Component {
});
}
qimoChatClick=()=>{
qimoChatClick()
}
render() {
// data 课程信息；barInfo 砍价信息
const { user = {}, toCart, country } = this.props;
const {
const {
countdown,
barInfo,
courseInfo: info = {},
bindPhone,
barInfo,
courseInfo: info = {},
bindPhone,
bindConfrm,
bindInfo,
formInfo,
......@@ -331,7 +334,7 @@ class BtnStatus extends Component {
<div>
{/* 绑定手机号 */}
<Mask visible={bindPhone} handleToHide={() => this.handleToHide('bindPhone')}>
<BindPhone
<BindPhone
country={country}
handleToBargain={this.toKanjia}
confirmBindPhone={this.confirmBindPhone}
......@@ -340,19 +343,19 @@ class BtnStatus extends Component {
{/* 绑定手机号--确认 */}
<Mask visible={bindConfrm} handleToHide={() => this.handleToHide('bindConfrm')}>
<BargainConfirmBind
<BargainConfirmBind
data={formInfo}
bindInfo={bindInfo}
handleToHide={() => this.handleToHide('bindConfrm')}
handleToBargain={this.toKanjia}
/>
</Mask>
{/*正常购买*/}
{
info.is_baoming === 0 && info.group_status !== 3 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -373,7 +376,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && info.is_deposit != 0 &&
<div className='btns-box'>
<a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji' />
<span>课程咨询</span>
</a>
......@@ -387,7 +390,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 1 &&
<div className='btns-box'>
<a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji' />
<span>课程咨询</span>
</a>
......@@ -400,7 +403,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && info.group_status === 3 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -421,7 +424,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && info.group_status === 4 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -435,7 +438,7 @@ class BtnStatus extends Component {
{
info.is_baoming === 0 && this.props.data && this.props.data.is_bargain &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-s' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -463,7 +466,7 @@ class BtnStatus extends Component {
{
this.state.isbuy === 20 &&
<div className='btns-box'>
<a className='consult-l' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult-l' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -474,7 +477,7 @@ class BtnStatus extends Component {
{
(info.is_aist && (this.props.user.hasError || info.is_baoming === 0)) &&
<div className='btns-box'>
<a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......@@ -488,7 +491,7 @@ class BtnStatus extends Component {
{
info.is_aist && !this.props.user.hasError && info.is_baoming === 1 &&
<div className='btns-box'>
<a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<a className='consult consult-m' onClick={()=>this.qimoChatClick()}>
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
......
src/components/detail/index.js
......@@ -340,6 +340,10 @@ class Detail extends Component {
course: data
});
if (data.course_info) {
if(data.course_info.is_it_course == 1){
this.props.history.push(`/python?id=${id}`)
}
let course_info = data.course_info;
document.title = `${course_info.course_title} - 七月在线`;
if (course_info.group_status === 3 || course_info.group_status === 4) {
......
src/components/python/index.js 0 → 100644
import React, {Component} from 'react'
import {http, getParam, browser} from '@/utils'
import PythonDes from './pythomDes'
import PythonStudy from './pythonStudy'
import {connect} from "react-redux"
import {addDays} from "date-fns"
import cookie from "js-cookie"
import {setCurrentUser, startFetchUser} from "@/store/userAction"
@connect(state => ({
user: state.user
}),
{setCurrentUser, startFetchUser}
)
class Python extends Component {
constructor(props) {
super(props)
this.state = {
isPay: '',
userInfoList: [],
isAppUpdate: false,
backwardVersion: false, // 默认是新版本
}
}
componentDidMount() {
const _this = this
this.fetchCourseInfo()
// 获取App登录信息
window['loginInfo'] = result => {
_this.loginInfo(result)
}
}
// 获取app登录数据
loginInfo = (result) => {
this.setState({
userInfoList: result
}, () => {
if (this.state.userInfoList.length) {
this.props.startFetchUser()
this.appLogin()
}
})
}
// 保存cookie
appLogin = () => {
let expires = addDays(new Date(), 90)
this.state.userInfoList.map((item, index) => {
cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("uid", item.uid, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("uname", item.uname, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: '.julyedu.com'})
})
if (cookie.get("token") && cookie.get("uid")) {
this.setState({
isAppUpdate: true
})
}
this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
}
transformUser = res => {
let payload
res.map((item, index) => {
payload = {
hasError: false,
data: {
username: item.uname,
avatar: item.avatar_file,
token: item.token,
uid: item.uid
},
isFetching: false
}
})
return payload
}
fetchCourseInfo = () => {
const id = getParam('id')
http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
const {data, code} = res.data
if (code === 200) {
let version = getParam('version')
if(version) {
version = version.replace(/\./g, '').slice(0, 3)
if(browser.isAndroidApp && version < 453) { // 安卓的低版本
this.setState({
backwardVersion: true,
isPay: 0,
})
}else{
this.setState({
backwardVersion: false,
isPay: data.course_info.is_pay
})
}
if(browser.isIOSApp && version < 380) { // ISO的低版本
this.setState({
backwardVersion: true,
isPay: 0,
})
}else{
this.setState({
backwardVersion: false,
isPay: data.course_info.is_pay
})
}
} else {
this.setState({
backwardVersion: false,
isPay: data.course_info.is_pay
})
}
}
})
}
render() {
const {isPay, isAppUpdate, backwardVersion} = this.state;
// 旧版本 无论购买未购买 都跳转到 未购买的详情页； 如果是已购买就提示更新APP
return (
<div>
{
isPay === 0 && <PythonDes history={this.props.history} isAppUpdate={isAppUpdate} backwardVersion={backwardVersion} isPay={isPay}></PythonDes>
}
{
(isPay === 1 && !getParam('version')) && <PythonStudy isAppUpdate={isAppUpdate}/>
}
</div>
)
}
}
export default Python
src/components/python/poup/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import {CallApp} from './../../../common'
export default class Poup extends Component {
render() {
return (
<div className={'mask_container'}>
<div className={'content'}>
<p className={'title'}>温馨提示</p>
{
this.props.type === 1 ? (
<>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端或者APP体验课程。</p>
<CallApp className='btn btn-18B4ED' text={'前往APP体验课程'}></CallApp>
</>
) : (
<>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端或者APP学习课程。</p>
<CallApp className='btn btn-18B4ED' text={'前往APP学习课程'}></CallApp>
</>
)
}
<img onClick={this.props.closePop} className={'close_btn'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/bottom_close.png" alt=""/>
</div>
</div>
)
}
}
src/components/python/poup/index.scss 0 → 100644
.mask_container {
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 100;
.close_btn {
width: 30px;
height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -62px;
}
.content {
width: 300px;
height: 196px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 170px;
.title {
font-size: 18px;
line-height: 18px;
color: rgba(0, 153, 255, 1);
margin: 24px auto 0;
text-align: center;
}
.tip {
font-size: 14px;
color: rgba(102, 102, 102, 1);
line-height: 20px;
margin: 20px auto 0;
width: 260px;
}
.btn {
width: 260px;
height: 36px;
line-height: 36px;
text-align: center;
background: rgba(0, 153, 255, 1);
border-radius: 3px;
font-size: 16px;
color: rgba(255, 255, 255, 1);
margin: 36px auto 0;
}
}
}
src/components/python/pythomDes/Description/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Description extends Component {
render() {
return (
<div className={'description'}>
<img className={'left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left.png" alt=""/>
<img className={'right'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right.png" alt=""/>
<p className={'title'}>课 / 程 / 介 / 绍</p>
<p className={'sub__title'}>对话式交互教学+课后实操，17节课全面掌握Python基础语法</p>
<img src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/diannao.png'} />
{
this.props.list.map((item, index)=>{
return <DesList item={item} key={index}></DesList>
})
}
</div>
)
}
}
function DesList(props) {
const {url, title, subTitle} = props.item;
return (
<div className={'des__container'}>
<img src={url} alt=""/>
<div>
<p className={'item__title'}>{title}</p>
<p className={'item__sub'}>{subTitle}</p>
</div>
</div>
)
}
src/components/python/pythomDes/Description/index.scss 0 → 100644
.description {
width: 100%;
background: #0099ff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 32px 0 38px 0;
position: relative;
.left {
position: absolute;
width: 50px;
height: 144px;
left: 0;
top: 18px;
}
.right {
position: absolute;
right: 0;
bottom: 4px;
width: 48px;
height: 132px;
}
.title {
font-size: 22px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
margin-bottom: 12px;
}
.sub__title {
font-size: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 1);
margin-bottom: 40px;
}
img {
width: 290px;
height: 170px;
}
.des__container {
width: 100%;
height: 64px;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 50px;
margin-top: 28px;
img {
width: 64px;
height: 64px;
margin-right: 12px;
}
.item__title {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
line-height: 16px;
}
.item__sub {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 12px;
}
}
}
src/components/python/pythomDes/Experience/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Experience extends Component {
render() {
const { isOnline, tryLearn } = this.props;
return (
<div className={'experience_container'}>
<p className={'title'}>试 / 学 / 体 / 验</p>
{
isOnline
? (
<>
<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>
</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
</div>
<div className={'btn'} onClick={tryLearn}>立即体验</div>
</>
)
: (
<>
<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>
</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
</div>
<div className={'btn btn--online'}>即将上架敬请期待</div>
</>
)
}
</div>
)
}
}
src/components/python/pythomDes/Experience/index.scss 0 → 100644
.experience_container {
padding-top: 32px;
padding-bottom: 40px;
.title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
text-align: center;
}
.experience {
display: flex;
justify-content: space-between;
align-items: center;
width: 250px;
margin: 22px auto 28px;
img {
width: 16px;
height: 56px;
}
p {
font-size: 16px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
line-height: 30px;
text-align: center;
letter-spacing: 4px;
}
}
.btn {
width: 150px;
height: 36px;
margin: 0 auto;
border-radius: 18px;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
text-align: center;
line-height: 36px;
background: rgba(0, 153, 255, 1);
box-shadow: 0px 6px 12px 0px rgba(0, 153, 255, 0.06);
}
.btn--online {
width: 200px;
font-size: 15px;
color: #fff;
letter-spacing: 4px;
background-color: rgba(82,92,101,.6);
}
}
src/components/python/pythomDes/NoWorry/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class NoWorry extends Component {
render() {
return (
<div className={'worry__container'}>
<img className={'left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/worry_left.png" alt=""/>
<p className={'title'}>你 / 的 / 担 / 忧</p>
<p className={'sub__title'}>全新的课程形式，轻松、有趣的课程内容，解除你所有的担忧</p>
{
this.props.list.map((item, index)=>{
return (
<WorryItem item={item} key={index}></WorryItem>
)
})
}
</div>
)
}
}
function WorryItem(props) {
const {url, title, subTitle} = props.item
return (
<div className={'item__container'}>
<div className={'head'}></div>
<img src={url} alt=""/>
<p className={'title'}>{title}</p>
<p className={'des'}>{subTitle}</p>
</div>
)
}
src/components/python/pythomDes/NoWorry/index.scss 0 → 100644
.worry__container {
padding: 32px 0 44px 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
.left {
position: absolute;
left: 0;
top: 150px;
width: 40px;
height: 220px;
}
.title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
margin-bottom: 12px;
}
.sub__title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(0, 153, 255, 1);
margin-bottom: 40px;
}
.item__container {
width: 310px;
height: 214px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03);
border-radius: 4px;
margin-bottom: 22px;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0 26px;
align-items: center;
z-index: 9;
.head {
width: 310px;
height: 4px;
background: rgba(0, 153, 255, 1);
border-radius: 4px 4px 0 0;
margin-bottom: 12px;
}
img {
width: 58px;
height: 58px;
}
.title {
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
margin: 16px 0 12px 0;
}
.des {
font-size: 12px;
font-weight: 400;
color: rgba(82, 92, 101, 1);
line-height: 20px;
}
}
}
src/components/python/pythomDes/Progream/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Progream extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{
q: '课程学习周期是多久？',
a: '每天学习1小时，课程采用通关制解锁的方式，根据自己的时间和学习速度灵活调整。'
},{
q: '我没有Python基础可以学习吗？',
a: '我们的课程是面向零基础的小伙伴设计的，课程通过故事叙述的方式由浅入深，层层递进，尽可能帮助大家理解并且掌握所学知识，没有任何基础是可以学习的。'
},{
q: '学习过程中遇到了困难怎么办？',
a: '我们为学员配备了专门的助教，有问题随时可以咨询助教老师。'
},{
q: '需要自己安装代码运行环境吗？',
a: '在平台上学习不需要安装任何环境，该课程包含的知识点实操以及课后实操都可以在平台上完成。'
}
]
}
}
render() {
const {list} = this.state;
return (
<div className={'pro_container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/pro_left.png" alt=""/>
<p>常 / 见 / 问 / 题</p>
<ul>
{
list.map((item, index)=>{
return (<li key={index} className={'q_item'}>
<div className={'q'}> <p>{`Q：${item.q}`}</p> <span></span></div>
<div className={'a__container'}>
<div>A：</div>
<p>{item.a}</p>
</div>
</li>)
})
}
</ul>
</div>
)
}
}
src/components/python/pythomDes/Progream/index.scss 0 → 100644
.pro_container {
padding-top: 32px;
padding-bottom: 30px;
background: #0096ff;
position: relative;
img {
position: absolute;
width: 76px;
height: 174px;
left: 0;
bottom: 50px;
}
p {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.q_item {
width: 340px;
min-height: 86px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 5px 0px rgba(153, 153, 153, 0.06);
border-radius: 2px;
margin: 0 auto 12px;
padding: 14px 15px 10px;
&:first-child {
margin-top: 18px;
}
.q {
position: relative;
display: inline-block;
p {
font-size: 14px;
line-height: 14px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
text-align: left;
z-index: 9;
position: relative;
}
span {
position: absolute;
width: 70%;
height: 4px;
background:rgba(255,214,103,1);
left: 0;
bottom: 0;
z-index: 0;
}
}
.a__container {
display: flex;
justify-content: flex-start;
align-content: flex-start;
margin-top: 10px;
div {
font-size: 12px;
color:rgba(82,92,101,1);
font-weight:600;
}
p {
font-size: 12px;
font-weight: 400;
color: rgba(82, 92, 101, 0.8);
line-height: 16px;
text-align: left;
}
}
}
}
src/components/python/pythomDes/Study/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Study extends Component {
Change = (data) => {
let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十'];
let newStr = ''
let str = data.toString()
let ci = Number(str) % 10
let cs = Math.floor(Number(str) / 10)
let cv = ''
if (str.length > 1) {
if(cs==1){
cv = ci >= 1 ? cn[9] + cn[ci - 1] : cn[9]
} else {
cv = ci > 1 ? cn[cs - 1] + cn[9] + cn[ci - 1] : cn[cs - 1] + cn[9]
}
} else {
cv = cn[ci - 1]
}
newStr = str.replace(str, cv)
return newStr;
}
render() {
return (
<div className={'study__container'}>
<img className={'learn_left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/learn_left.png" alt=""/>
<img className={'learn_bottom'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/learn_bottom.png" alt=""/>
<p className={'title'}>阶 / 梯 / 学 / 习</p>
<p className={'sub__title'}>17节课堂教学，带你掌握Python技术入门知识</p>
<div className={'step__container'}>
<div className={'item__container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/wanzheng.png" alt=""/>
<p>完整的Python基础知识体系</p>
<div className={'item__line'}></div>
</div>
<div className={'item__container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/siwei.png" alt=""/>
<p>灵活的编程思维和实操技巧</p>
<div className={'item__line'}></div>
</div>
<div className={'item__container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shicao.png" alt=""/>
<p>丰富有趣的实操训练</p>
</div>
</div>
<div className={'table__container'}>
<div className={'table__head'}>
<div className={'head_title order_number'}>序号</div>
<div className={'head_title chapter'}>章节</div>
<div className={'head_title points'}>知识点</div>
</div>
<div className={'table__body'}>
{
this.props.syllabus.map((item, index)=>{
return (
<div className={'item__container'} key={index}>
<div className={'item__title'}>{
'第' + this.Change(index + 1) + '阶段 ' +item.name}</div>
{
item.lessons.map((item, index)=>{
return (
<div className={'item__content'} key={index}>
<div className={'content order_number number_center'}>{item.number}</div>
<div className={'content chapter'}>{item.name}</div>
<div className={'content points'}>{item.info.name}</div>
</div>
)
})
}
</div>
)
})
}
</div>
<div className={'table__bottom'}>
{
this.props.allSyllabusShow ? (
<div onClick={() => this.props.hide(1)}>
<p>收起</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
</div>
) : (
<div onClick={() => this.props.show(1)}>
<p>展开更多</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
</div>
)
}
</div>
</div>
</div>
)
}
}
src/components/python/pythomDes/Study/index.scss 0 → 100644
.study__container {
background: #0096ff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 32px 0 30px 0;
position: relative;
.learn_left {
position: absolute;
left: 0;
top: 36px;
width: 46px;
height: 126px;
}
.learn_bottom {
position: absolute;
left: 0;
bottom: 0;
width: 156px;
height: 234px;
}
.title {
font-size: 20px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
line-height: 20px;
}
.sub__title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 1);
margin: 12px 0 22px 0;
}
.step__container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative;
.item__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 28px;
width: 80px;
position: relative;
&:first-child {
margin-left: 0;
}
img {
width: 34px;
height: 34px;
margin-bottom: 10px;
}
p {
text-align: center;
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 16px;
}
.item__line {
width: 34px;
height: 1px;
background: rgba(255, 255, 255, 1);
opacity: 0.4;
border-radius: 0px;
position: absolute;
top: 18px;
right: -34px;
}
}
}
.table__container {
width: 358px;
color: #fff;
background: #005ac6;
margin-top: 22px;
position: relative;
.order_number {
width: 50px;
}
.chapter {
width: 158px;
border-left: 1px solid #0099ff;
border-right: 1px solid #0099ff;
}
.points {
width: 150px;
}
.table__head {
width: 100%;
height: 32px;
background: #ffd75d;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 4px 4px 0 0;
.head_title {
height: 32px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 600;
color: rgba(0, 93, 195, 1);
}
}
.table__body {
width: 100%;
.item__container {
.item__title {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 500;
color: rgba(255, 214, 103, 1);
}
}
.item__content {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #0099FF;
&:last-child {
border-bottom: 1px solid #0099FF;
}
.content {
height: 36px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 6px;
padding-right: 6px;
}
.number_center {
display: flex;
justify-content: center;
padding-left: 0;
}
}
}
.table__bottom {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
font-weight: 400;
div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 9px;
height: 9px;
margin-left: 6px;
}
}
}
}
src/components/python/pythomDes/Team/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Team extends Component {
constructor(props) {
super(props);
this.state = {
teacherList: [
{
avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher1.png',
name: '陈博士',
des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余篇。'
},
{
avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher2.png',
name: '孙老师',
des: '10多年开发经验，先后任职国内知名互联网企业，从事人工智能方向的实施，擅长全栈开发，将机器学习/深度学习结合到实际生产运营中。'
},
{
avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher3.png',
name: '史老师',
des: '计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验，授课思路清晰明了，通俗易懂，幽默风趣的讲课方式将枯燥的知识以通俗的方式展现，深受学生好评。'
},
{
avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher4.png',
name: '珊酱',
des: '班主任的工作是一项非常辛苦和琐碎的工作，不付出艰辛的劳动和辛苦的汗水是不会有收获的。历经数万名学员的一对一服务，始终坚持给学员做到最好的服务和最严格的要求，学员的点滴进步和成长就是我最大的期望！'
}
]
}
}
render() {
const {teacherList} = this.state;
return (
<div className={'team_container'}>
<img className={'team_top'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/team_top.png" alt=""/>
<img className={'team_bottom'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/team_bottom.png" alt=""/>
<p className={'title'}>教/学/团/队</p>
<p className={'sub_title'}>讲师+助教+班主任全程陪伴，哪里不会问哪里</p>
<ul>
{
teacherList.map((item,index)=>{
return (
<li key={index} className={'item_li'}>
<img className={'item_image'} src={item.avatar} alt=""/>
<div className={'item_info'}>
<span className={'name'}>{item.name}</span>
<p className={'des'}>{item.des}</p>
</div>
</li>
)
})
}
</ul>
</div>
)
}
}
src/components/python/pythomDes/Team/index.scss 0 → 100644
.team_container {
padding-top: 32px;
background: #0096ff;
padding-bottom: 46px;
position: relative;
.team_top {
position: absolute;
left: 0;
top: 0;
width: 78px;
height: 76px;
}
.team_bottom {
position: absolute;
right: 0;
bottom: 0;
width: 238px;
height: 246px;
}
p {
text-align: center;
text-align-last: center;
}
.title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
}
.sub_title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 1);
margin: 12px auto 18px;
}
.item_li {
width: 352px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 0 auto 12px;
padding: 12px 14px 14px 12px;
.item_image {
width: 44px;
height: 44px;
border-radius: 22px;
background: #0099ff;
flex: 0 0 auto;
margin-right: 14px;
}
.item_info {
.name {
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
}
.des {
font-size: 12px;
line-height: 15px;
font-weight: 300;
color: rgba(82, 92, 101, 0.8);
text-align: left;
text-align-last: left;
margin-top: 6px;
width: 266px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
}
}
}
}
src/components/python/pythomDes/Test/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Test extends Component {
Change = (data) => {
let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十'];
let newStr = ''
let str = data.toString()
let ci = Number(str) % 10
let cs = Math.floor(Number(str) / 10)
let cv = ''
if (str.length > 1) {
if(cs==1){
cv = ci >= 1 ? cn[9] + cn[ci - 1] : cn[9]
} else {
cv = ci > 1 ? cn[cs - 1] + cn[9] + cn[ci - 1] : cn[cs - 1] + cn[9]
}
} else {
cv = cn[ci - 1]
}
newStr = str.replace(str, cv)
return newStr;
}
render() {
return (
<div className={'test_container'}>
<p className={'title'}>课 / 后 / 实 / 操</p>
<p className={'sub_title'}>涵盖完整知识体系，让你掌握实用高效的编程技巧</p>
<div className={'table_container'}>
<div className={'table_head'}>
<span>序号</span>
<span>实操项目</span>
</div>
<div className={'table_body'}>
{
this.props.practice.map((item, index)=>{
return <div key={index}>
<div className='stage'>{`第${this.Change(item.stage)}阶段 ${item.name}`}</div>
{
item.questions.map((question, index)=>{
return <div key={index} className={'line'}>
<span>{question.number}</span>
<div className={'test_name'}>
<img src={question.icon} alt=""/>
<p>{question.name}</p>
</div>
</div>
})
}
</div>
})
}
</div>
<div className={'table_bottom'}>
{
this.props.allPracticeShow ? (
<div onClick={()=>this.props.hide(2)}>
<p>收起</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
</div>
) : (
<div onClick={()=>this.props.show(2)}>
<p>展开更多</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
</div>
)
}
</div>
</div>
</div>
)
}
}
src/components/python/pythomDes/Test/index.scss 0 → 100644
.test_container {
background: #fff;
padding-top: 30px;
padding-bottom: 44px;
.title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
text-align: center;
text-align-last: center;
}
.sub_title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(0, 153, 255, 1);
margin: 12px auto 24px;
text-align: center;
text-align-last: center;
}
.table_container {
width: 358px;
margin: 0 auto;
.table_head {
background: #ffd667;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px 4px 0 0;
span {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 32px;
&:last-child {
width: 308px;
border-left: 1px solid #0099ff;
}
}
}
.table_body {
background: #34AFFF;
.stage {
height: 38px;
font-size: 14px;
line-height: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
.line {
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
border-top: 1px solid #0099FF;
color: #FFF;
font-size: 12px;
span {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
}
.test_name {
width: 308px;
display: flex;
justify-content: flex-start;
align-items: center;
border-left: 1px solid #0099FF;
height: 36px;
img {
width: 20px;
height: 20px;
border-radius: 5px;
margin: 0 10px;
}
}
}
}
.table_bottom {
height: 36px;
background: #3DB1FF;
border-top: 1px solid #0099FF;
div {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
color: #FFF;
font-size: 12px;
}
img {
width: 9px;
height: 9px;
margin-left: 6px;
}
}
}
}
src/components/python/pythomDes/index.scss 0 → 100644
.python__des {
width: 100vw;
height: 100vh;
padding-bottom: 60px;
overflow: auto;
.des__start {
width: 100%;
height: 258px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/head_img.png")
center center no-repeat;
background-size: contain;
}
.python__define {
position: relative;
padding-top: 28px;
.define__title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
text-align: center;
text-align-last: center;
margin: 0 auto 40px;
}
.number_one {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 30px;
}
// 公共
.trophy {
width: 75px;
height: 75px;
margin-bottom: 12px;
}
.item__title {
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
margin-bottom: 12px;
}
.item__subtitle {
font-size: 12px;
font-weight: 400;
color: rgba(82, 92, 101, 0.8);
text-align: center;
text-align-last: center;
margin-bottom: 16px;
}
.left__decorate {
position: absolute;
left: 0;
top: -50px;
width: 60px;
height: 216px;
}
.right__decorate {
position: absolute;
right: 0;
top: 156px;
width: 44px;
height: 180px;
}
}
.bottom__btn_group {
width: 100%;
height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
padding: 0 14px;
background: #fff;
.online__label {
font-size: 18px;
font-weight: 600;
color: #525C65;
}
.online__button {
width: 160px;
height: 37px;
border-style: none;
border-radius: 19px;
font-size: 15px;
font-weight: 600;
color: #fff;
background-color: rgba(82,92,101,.6);
outline: none;
}
.course__price {
width: 100px;
font-size: 24px;
font-weight: 600;
color: rgba(255, 33, 33, 1);
position: relative;
}
.discount {
width: 54px;
height: 22px;
background: rgba(248, 60, 46, 1);
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
position: absolute;
left: 46px;
top: -18px;
.triangle {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #FB3A22;
position: absolute;
bottom: -5px;
left: 8px;
}
}
.btn__group {
display: flex;
justify-content: center;
align-items: center;
.try__study {
width: 100px;
height: 38px;
border: 1px solid rgba(0, 153, 255, 1);
border-radius: 19px;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
.sign__now {
width: 100px;
height: 38px;
background: rgba(0, 153, 255, 1);
border-radius: 19px;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
margin-left: 12px;
}
}
}
}
src/components/python/pythonStudy/index.scss 0 → 100644
html, body, #root {
height: 100%;
}
.am-accordion.python-study__stage .am-accordion-item .am-accordion-header {
height: 44px;
padding-left: 13px;
font-size: 15px;
font-weight: 600;
color: #333;
background-color: #CFDBE5;
border-radius: 4px;
}
.am-accordion.python-study__stage .am-accordion-item-active .am-accordion-header{
border-radius: 4px 4px 0 0;
}
html:not([data-scale]) .am-accordion::before {
background-color: #F4F5F6;
}
.am-accordion.python-study__stage .am-accordion-item {
margin-top: 15px;
.am-accordion-content {
padding-bottom: 10px;
border-radius: 0 0 4px 4px;
}
}
.am-accordion.python-study__stage {
.am-accordion-item:first-child {
margin-top: 0;
}
}
html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-accordion-content .am-accordion-content-box::after {
display: none;
}
.am-accordion.python-study__stage .am-accordion-item .am-accordion-header i {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/subject-icon-arrow.png');
}
.python-study {
height: 100%;
background-color: #F4F5F6;
padding-bottom: 15px;
}
.python-study__header {
margin: 10px 10px 18px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
.python-study__course {
display: flex;
align-items: center;
justify-content: space-between;
height: 55px;
padding: 0 12px;
background-color: #1A9BFC;
}
.python-study__course-name {
font-size: 15px;
font-weight: 600;
color: #fff;
}
.python-study__course-contact {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
font-size: 12px;
color: rgba(255, 255, 255, .8);
}
.python-study__progress {
color: rgba(255,255,255,.8);
}
.python-study__progress {
height: 66px;
padding: 0 12px;
}
.python-study__progress-title {
font-size: 14px;
font-weight: 600;
color: rgba(51, 51, 51, .6);
line-height: 39px;
}
.python-study__progress-bar {
position: relative;
height: 3px;
margin: 18px 0 15px;
border-radius: 2px;
background-color: rgba(207, 219, 229, .6);
i {
position: absolute;
width: 10%;
height: 100%;
border-radius: 2px;
background-color: #1A9BFC;
}
}
.python-study__progress-tip {
position: absolute;
top: -26px;
width: 36px;
margin-left: -18px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 18px;
background-color: #1A9BFC;
&::after {
content: '';
position: absolute;
left: 50%;
bottom: -8px;
margin-left: -4px;
border: 4px solid;
border-color: #1A9BFC transparent transparent;
}
}
.python-study__stage {
padding: 0 10px 60px;
border-radius: 4px;
overflow: hidden;
background-color: #F4F5F6;
}
.python-study__pass {
margin: 0 13px;
padding-top: 7px;
font-size: 14px;
font-weight: 600;
color: #333;
line-height: 40px;
}
.python-study__pass-tag {
display: inline-block;
width: 62px;
margin-left: 6px;
border-radius: 11px;
font-size: 12px;
font-style: normal;
font-weight: 600;
color: rgba(26, 155, 252, 1);
text-align: center;
line-height: 21px;
background-color: rgba(26, 155, 252, .1);;
}
.python-study__subject {
height: 67px;
margin: 0 8px 8px;
padding: 6px;
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(247, 248, 249, 1);
&[data-status="lock"] {
background-color: rgba(247, 248, 249, .6);
}
}
.python-study__subject-icon {
float: left;
width: 55px;
height: 55px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.python-study__subject-status {
position: absolute;
right: 17px;
width: 21px;
height: 21px;
background-size: cover;
&[data-status="complete"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/subject-icon-0.png');
}
&[data-status="lock"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/subject-icon-1.png');
}
}
.python-study__subject-content {
height: 100%;
margin-left: 55px;
padding: 0 33px 0 12px;
position: relative;
}
.python-study__subject-title {
max-width: 220px;
width: 228px;
}
.python-study__subject-title {
font-size: 14px;
color: #333;
line-height: 18px;
&[data-status="lock"] {
color: #525C65;
}
}
.python-study__subject-tag {
display: inline-block;
padding: 0 4px;
border-radius: 2px;
font-size: 12px;
color: #525C65;
line-height: 18px;
background-color: rgba(82, 92, 101, .1);
position: absolute;
bottom: 0;
}
.python-study__button {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
line-height: 50px;
border-style: none;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
color: #fff;
text-align: center;
background-color: #1A9BFC;
z-index: 1;
}
.python-study__over {
background-color: #ccc;
}
\ No newline at end of file
src/components/pythonShare/index.js 0 → 100644
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import AceEditor from 'react-ace';
import { Toast } from "antd-mobile"
import {HeaderBar} from '@/common';
import { browser, http, getParam, wxShare } from '@/utils';
import './index.scss';
import 'ace-builds/src-noconflict/mode-python';
import 'ace-builds/src-noconflict/theme-dracula';
class PythonClass extends Component {
constructor(props) {
super(props);
this.state = {
isWechat: browser.isWeixin,
isShare: true,
type: '1', // 1:课后习题，2:课堂习题
entryMode: 0, // 0：扫码页，1:落地页
isGuide: false, // 是否展示引导
isExecute: false,
isCopy: false,
command: '',
data: {}
}
}
componentDidMount() {
this.handleFetchInfo();
this.initPageStatus();
this.initCommand();
}
initCommand = () => {
this.setState({
command: `${API.m}/pythonShare?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&origin=python`
})
}
initPageStatus = () => {
if(getParam('origin') === 'barcode') {
this.setState({
entryMode: 0
});
}
if(getParam('origin') === 'python') {
this.setState({
entryMode: 1
});
}
if(getParam('type') === '1') {
this.setState({
isShare: true
});
}
if(getParam('type') === '2') {
this.setState({
isShare: false
});
}
this.setState({
type: getParam('ques') || '1'
});
}
handleFetchInfo = () => {
const id = getParam('id') || 10;
// http.get(`${API.home}/web/python/share/help/${id}`).then(res => {
http.get(`${API.home}/m/it/share/show`, {
params: {
id
}
}).then(res => {
const { code, data } = res.data;
if(code === 200) {
this.setState({
data,
});
}
})
}
handleToSend = (params) => {
const { history } = this.props;
const { isShare, entryMode } = this.state;
if(browser.isWeixin) {
history.push(`/pythonShare?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&origin=python`);
this.setState({
isGuide: true
});
wxShare({
title: isShare? `我已在【${params.course_name}】上运行了行代码了${params.code_lines}` : `我在${params.course_name}的${labelName}遇到了困难`,
desc: this.formatTitle(params),
link: encodeURI(location.href),
imgUrl: params.course_img,
});
}
}
formatTitle = (params) => {
const { type } = this.state;
if(type === '1') {
return `练习-${params.ques_name}`;
}
if(type === '2') {
return `课堂-${params.video_name}`;
}
}
copyToSuccess = () => {
Toast.info('已复制链接，快去粘贴发给好友吧～');
this.setState({
isCopy: true
});
}
handleToExecute = () => {
this.setState({
isExecute: true
});
}
handleToHide = () => {
this.setState({
isGuide: false
});
}
render() {
const { isWechat, isShare, isExecute, entryMode, command, isCopy, isGuide, data } = this.state;
return (
<>
<HeaderBar
title='Python基础语法'
arrow={true}
home={true}
/>
<PythonContent
isWechat={isWechat}
isShare={isShare}
isExecute={isExecute}
entryMode={entryMode}
isGuide={isGuide}
isCopy={isCopy}
command={command}
data={data}
labelName={this.formatTitle(data)}
handleToExecute={this.handleToExecute}
handleToSend={() => this.handleToSend(data)}
copyToSuccess={this.copyToSuccess}
handleToHide={this.handleToHide}
/>
</>
);
}
}
function SelfAceEditor(props) {
return (
<AceEditor
mode="python"
theme="dracula"
readOnly={true}
showPrintMargin={false}
value={props.code}
style={{
width: '100%',
height: '100%'
}}
/>
)
}
function PythonContent(props) {
const {
isWechat,
isShare,
isExecute,
entryMode,
isCopy,
command,
labelName,
isGuide,
data: { head_img, nickname, code_lines, code, result, course_name, course_id },
handleToSend,
copyToSuccess,
handleToExecute,
handleToHide
} = props;
return (
<div className="python-container">
{
isGuide &&
<div className="python-popup" onClick={handleToHide}>
<div className="python-header">
<p className="python-wechat__title">请点击右上角分享</p>
<i className="iconfont"></i>
</div>
</div>
}
<div className="python-content">
<div className="python-user">
<i className="python-user__portrait" style={{backgroundImage: `url(${head_img})`}}></i>
<h2 className="python-user__id">{nickname}</h2>
{/* 分享 */}
{
(entryMode === 0 && isShare) &&
<p className="python-user__desc">
完成了
<span>【{labelName}】</span>
</p>
}
{
(entryMode === 1 && isShare) &&
<p className="python-user__desc">
在
<span>【{course_name}】</span>完成了<br />
{labelName}
</p>
}
{/* 求助 */}
{
(entryMode === 0 && !isShare) &&
<p className="python-user__desc">
在
<span>【{labelName}】</span>
遇到了困难
</p>
}
{
(entryMode === 1 && !isShare) &&
<p className="python-user__desc">
在
<span>【{course_name}】</span>的<br />
<span>{labelName}</span>遇到了困难
</p>
}
</div>
<h4 className="python-code__title">
{entryMode === 1 && isShare? `这是Ta的第${code_lines}行代码` : '运行结果'}
</h4>
<div className="python-code__content">
<SelfAceEditor code={entryMode === 1 && isShare? code : result} />
</div>
<h4 className="python-code__title">
{entryMode === 1 && isShare? '运行结果' : '代码'}
</h4>
<div className="python-code__content">
{
entryMode === 1 && isShare
? <SelfAceEditor code={isExecute? result : ''} />
: <SelfAceEditor code={code} />
}
{
(entryMode === 1 && isShare && !isExecute) &&
<button className="python-button python-button__execute" onClick={handleToExecute}>运行看看</button>
}
</div>
</div>
{
(entryMode === 0 && isWechat) &&
<button className="python-button python-button__study" onClick={handleToSend}>
{isShare? '分享给好友' : '发给好友求助'}
</button>
}
{
(entryMode === 0 && !isWechat && !isCopy) &&
<CopyToClipboard
text={command}
onCopy={copyToSuccess}
>
<button className="python-button python-button__study">
{isShare? '分享给好友' : '发给好友求助'}
</button>
</CopyToClipboard>
}
{
(entryMode === 0 && !isWechat && isCopy) &&
<p className="python-button__tip">已复制链接，快去粘贴发给好友吧～</p>
}
{
entryMode === 1 &&
<Link className="python-button python-button__study" to={`/python?id=${course_id}`}>我也要学Python</Link>
}
</div>
);
}
export default PythonClass;
\ No newline at end of file
src/components/pythonShare/index.scss 0 → 100644
.python-container {
padding: 50px 8px 29px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/python-bg.png');
background-size: cover;
}
.python-container--page {
// padding-top: 50px;
}
.python-header {
position: relative;
height: 100px;
padding-top: 36px;
box-sizing: border-box;
.iconfont {
position: absolute;
top: 10px;
right: 40px;
font-size: 38px;
color: #fff;
width: 50px;
height: 38px;
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/share_arrow.png') center center no-repeat;
background-size: 100% 100%;
}
}
.python-wechat__title {
margin: 0;
font-size: 17px;
color: #FFF;
text-align: center;
line-height: 1;
}
.python-content {
padding-bottom: 37px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/python-content-bg.png');
background-size: cover;
}
.python-user {
position: relative;
margin: 0 5px;
padding-top: 45px;
border-bottom: 1px dashed #000;
}
.python-user__portrait {
position: absolute;
top: -30px;
left: 0;
right: 0;
width: 60px;
height: 60px;
margin: auto;
padding: 5px;
border-radius: 50%;
box-sizing: border-box;
background-color: #fff;
background-size: cover;
img {
display: block;
width: 100%;
}
}
.python-user__id {
margin: 0;
font-size: 15px;
font-weight: 500;
color: #111;
text-align: center;
line-height: 1;
}
.python-user__desc {
height: 48px;
margin: 4px 0;
font-size: 16px;
color: #333;
text-align: center;
span {
color: #2D57F0;
}
}
.python-code__title {
position: relative;
margin: 32px 16px 21px;
padding-left: 16px;
font-size: 17px;
font-weight: 600;
color: #2D56F0;
line-height: 1;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
height: 12px;
margin: auto 0;
background-color: #2D56F0;
}
}
.python-code__content {
position: relative;
height: 171px;
margin: 0 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #67E4FF;
box-sizing: border-box;
font-size: 14px;
color: #fff;
background-color: #272822;
}
.python-button {
padding: 0;
border-style: none;
cursor: pointer;
outline: none;
}
.python-button__study {
display: block;
width: 233px;
height: 44px;
margin: 35px auto 0;
border-radius: 22px;
font-size: 16px;
font-weight: 500;
color: #2D56F0;
line-height: 44px;
text-align: center;
background-color: #FFF95B;
box-shadow: 0px 5px 0px rgba(255,210,0,1);
}
.python-button__tip {
margin: 35px 0 0;
font-size: 15px;
font-weight: 500;
color: #fff;
line-height: 44px;
text-align: center;
}
.python-button__execute {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 110px;
height: 32px;
margin: auto;
border-radius: 16px;
font-size: 15px;
color: #fff;
line-height: 32px;
background-color: #0099FF;
}
.python-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
z-index: 99;
}
.ace_mobile-menu {
display: none;
}
\ No newline at end of file
src/components/study/myCourses/index.js
......@@ -76,8 +76,14 @@ class MyCourses extends Component {
isLoading: true
}
handleClick = id => {
this.props.history.push(`/play/video?id=${id}`)
handleClick = (id, item) => {
const {history} = this.props
const {mode, course_id} = item
if(mode && mode == 6){
history.push(`/python?id=${course_id}`)
return
}
history.push(`/play/video?id=${id}`)
}
addCourseClick = () => {
this.props.history.push('/classify')
......@@ -164,6 +170,7 @@ class MyCourses extends Component {
info={Info}
status={status}
courseExpire={courseExpire}
item={item}
id={item['v_course_id']}
/>
)
......@@ -200,4 +207,4 @@ export default connect(
{
fetchCoursesListIfNeeded,
switchTab
})(MyCourses)
\ No newline at end of file
})(MyCourses)
src/components/vip/index.scss 0 → 100755
.new-vip {
.banner {
width: 100%;
height: 240px;
img {
width: 100%;
height: 100%;
}
}
.notice {
width: 375px;
height: 30px;
line-height: 30px;
background-color: #FFE670;
display: flex;
justify-content: space-between;
padding: 0 10px 0 15px;
font-size: 12px;
.tip {
img {
width: 15px;
height: 14px;
vertical-align: text-top;
}
span {
color: #0B060C;
display: inline-block;
margin-left: 9px;
}
}
.time {
color: #FF0002;
}
}
.privilege-box {
width: 100%;
padding: 30px 10px 60px 10px;
background-color: #FECD3C;
.privilege-name {
width: 190px;
height: 30px;
line-height: 30px;
background: linear-gradient(0deg, #E83B47 0%, #E95E32 100%);
box-shadow: 0 1px 5px 0 rgba(232, 60, 70, 0.4);
border-radius: 15px;
font-weight: 500;
font-size: 18px;
color: #fff;
text-align: center;
margin: 0 auto 20px auto;
}
.privilege-content {
background-color: #fff;
padding: 20px 12px 20px 12px;
box-shadow: 1px 2px 6px 0 rgba(232, 60, 70, 0.3);
border-radius: 6px;
margin-bottom: 15px;
.privilege-title {
width: 100%;
text-align: center;
color: #26402F;
font-size: 16px;
margin-bottom: 15px;
img {
vertical-align: text-bottom;
width: 18px;
height: 16px;
}
span {
display: inline-block;
margin-left: 10px;
border-bottom: 4px solid rgba(232, 60, 70, .8);
border-radius: 1px;
height: 20px;
}
}
.privilege-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.course-box {
display: block;
width: 160px;
height: 115px;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
border-radius: 2px;
}
}
}
.privilege-list-row {
.privilege-list-gpu {
img {
width: 330px;
height: 150px;
border-radius: 3px;
margin-bottom: 10px;
}
img:last-child {
margin-bottom: 0;
}
}
.privilege-list-tip {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 10px;
.privilege-tip-item {
font-size: 12px;
color: #333;
width: 50%;
text-align: left;
span {
display: inline-block;
width: 16px;
height: 16px;
text-align: center;
line-height: 15px;
background: rgba(255, 104, 38, 1);
border: 1px solid rgba(255, 104, 38, 1);
border-radius: 50%;
font-size: 14px;
color: #ffff;
margin-top: 10px;
margin-right: 5px;
}
}
.privilege-tip-item:nth-of-type(even) {
width: 45%;
}
}
}
.privilege-teacher {
width: 100%;
text-align: center;
font-size: 12px;
color: #E83C46;
margin-top: -8px;
}
.teacher-list {
width: 100%;
padding: 0 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.teacher-item {
width: 70px;
text-align: center;
font-size: 12px;
margin-top: 15px;
img {
width: 55px;
height: 55px;
border-radius: 50%;
}
span {
display: block;
color: #26402F;
}
}
}
.privilege-test {
width: 100%;
margin-top: -8px;
display: flex;
justify-content: space-between;
img {
width: 163px;
height: 270px;
border-radius: 2px;
}
}
}
}
.tobuy {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/tobuy-bg.png");
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0px -2px 4px 0px rgba(224, 179, 48, 0.28);
font-size: 18px;
color: #FF4400;
position: fixed;
bottom: 0;
z-index: 2;
}
.connect {
position: absolute;
width: 10px;
text-align: center;
margin-top: -43px;
span {
display: block;
position: relative;
z-index: 1;
}
.top {
top: 5px;
}
.bottom {
top: -5px;
z-index: auto;
}
.top, .bottom {
width: 10px;
height: 10px;
background: rgba(246, 206, 90, 1);
border-radius: 50%;
}
.con {
width: 4px;
height: 47px;
background: rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px 0 rgba(232, 60, 70, 0.4), 0px 1px 2px 0px rgba(246, 206, 90, 0.5);
border-radius: 1px;
margin: auto;
}
}
.left {
left: 20px;
}
.right {
right: 20px;
}
.checkout-mbc {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
.checkout-box {
width: 100%;
border-radius: 10px 10px 0 0;
background-color: #fff;
position: fixed;
bottom: 0;
padding: 20px 15px;
z-index: 9999999999;
.title {
color: #2B2B2B;
font-size: 18px;
text-align: center;
.close {
float: right;
color: #26402F;
}
}
.checkout-list {
margin-top: 15px;
width: 100%;
height: 44px;
line-height: 44px;
border-radius: 5px;
padding-left: 15px;
display: flex;
justify-content: space-between;
position: relative;
.type {
color: #26402F;
font-size: 16px;
}
.center {
display: flex;
width: 55%;
text-align: left;
}
.discounts-reason {
width: 60px;
height: 18px;
text-align: center;
line-height: 18px;
margin-top: 12px;
background: linear-gradient(90deg, rgba(255, 68, 0, 1) 2%, rgba(255, 0, 2, 1) 100%);
border-radius: 9px 9px 0 9px;
font-size: 12px;
color: #fff;
margin-right: 10px;
}
.discounts-reason2 {
background:rgba(255,155,5,1);
}
.price {
color: #FF0002;
font-size: 12px;
.new-price {
font-size: 22px;
}
.old-price {
display: inline-block;
margin-left: 10px;
color: #26402F;
}
}
.check-box {
width: 44px;
height: 44px;
border-left: 1px dashed #E5E5E5;
span {
width: 22px;
height: 22px;
display: block;
background-repeat: no-repeat;
background-size: contain;
margin-top: 10px;
margin-left: 10px;
}
.checked {
background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/choiced_ka%402x.png");
}
.check {
background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/choice_ka%402x.png");
}
}
}
.list-checked {
background: rgba(252, 249, 239, 1);
border: 1px solid rgba(240, 233, 197, 1);
}
.list-check {
background: #fff;
border: 1px solid rgba(229, 229, 229, 1);
}
.check-tobuy {
width: 280px;
height: 40px;
background: linear-gradient(90deg, rgba(255, 94, 0, 1) 2%, rgba(255, 0, 2, 1) 100%);
border-radius: 20px;
font-size: 18px;
color: #fff;
border: none;
position: relative;
left: 50%;
margin: 30px auto 0 -140px;
}
}
}
\ No newline at end of file
src/router/router-config.js
......@@ -35,6 +35,7 @@ const ExpandCallback = loadable(() => import('@/components/expand/callback'))
const ExpandShare = loadable(() => import('@/components/expand/share'))
const Activity = loadable(() => import(/* webpackChunkName: 'Activity' */'@/components/activity/1111/index'))
const Invite = loadable(() => import(/* webpackChunkName: 'Invite' */'@/components/activity/1111/invite'))
const NewVip = loadable(() => import(/* webpackChunkName: 'Invite' */'@/components/vip/index'))
export default [
{
path: '/',
......@@ -42,6 +43,10 @@ export default [
component: Index
},
{
path: '/vip/newvip',
component: NewVip
},
{
path: '/classify',
component: Classify
},
......@@ -239,7 +244,7 @@ export default [
path: '/year/yearIndex',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/preheat/index'))
},
// 我的宝箱
{
path: '/year/yearTreasure',
......@@ -250,5 +255,18 @@ export default [
{
path: '/year/yearWish',
component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/year-wish/index'))
}
},
// python 小课页面
{
path: '/python',
component: loadable(() => import(/* webpackChunkName: 'python-class'*/'@/components/python'))
},
{
path: '/pythonShare',
component: loadable(() => import('@/components/pythonShare'))
},
{
path: '/pythonStudy',
component: loadable(() => import('@/components/python/pythonStudy'))
},
]
src/utils/wechat/base.js
import { http, browser } from "@/utils"
const url = `https://res.wx.qq.com/open/js/jweixin-1.4.0.js`
// const url = `https://res.wx.qq.com/open/js/jweixin-1.4.0.js`
const url = `https://res.wx.qq.com/open/js/jweixin-1.6.0.js`
const appId = 'wx23dac6775ac82877'
const jsApiList = ['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage', 'onMenuShareTimeline']
const jsApiList = ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline']
export const getSignature = async (config = {}) => {
let res = await http.post(`${API['base-api']}/m/sale/signature`, {
url: browser.isWeixin && browser.isIOS ? sessionStorage.getItem('enter_url') : window.location.href.split('#')[0],
})
return wx.config({
debug: false, // 开启调试模式,
appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
signature: res.data.signature,// 必填，签名，见附录1
jsApiList,
...config
})
let res = await http.post(`${API['base-api']}/m/sale/signature`, {
url: browser.isWeixin && browser.isIOS ? sessionStorage.getItem('enter_url') : window.location.href.split('#')[0],
})
return wx.config({
debug: false, // 开启调试模式,
appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
signature: res.data.signature,// 必填，签名，见附录1
jsApiList,
...config
})
}
export const getWXObject = () => {
return new Promise(resolve => {
if (!window.wx) {
return loadScript(url).then(() => resolve())
}
resolve()
})
return new Promise(resolve => {
if (!window.wx) {
return loadScript(url).then(() => resolve())
}
resolve()
})
}
function loadScript(url) {
return new Promise(resolve => {
var head = document.head || document.getElementsByTagName('head')[0]
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
if (!('onload' in script)) {
script.onreadystatechange = function () {
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
this.onreadystatechange = null
resolve()
}
}
script.onload = function () {
this.onload = null
resolve()
}
head.appendChild(script)
})
}
\ No newline at end of file
return new Promise(resolve => {
var head = document.head || document.getElementsByTagName('head')[0]
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
if (!('onload' in script)) {
script.onreadystatechange = function () {
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
this.onreadystatechange = null
resolve()
}
}
script.onload = function () {
this.onload = null
resolve()
}
head.appendChild(script)
})
}
yarn.lock
......@@ -1237,16 +1237,16 @@
"@types/unist" "*"
"@types/vfile-message" "*"
"@videojs/http-streaming@1.10.3":
version "1.10.3"
resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-1.10.3.tgz#0c028443b9a3c96da85e5995748ed94280884584"
integrity sha512-fxXtwVrQBdhOFh6GymPAPCb4utCI01Zs5fdyZgtR6FSsaz/zGmnzfNS5GvNjBi/hZviMsbNPFaOTTFMMNLNA3A==
"@videojs/http-streaming@1.10.6":
version "1.10.6"
resolved "https://registry.npm.taobao.org/@videojs/http-streaming/download/@videojs/http-streaming-1.10.6.tgz#a9119b1828b354c5cc17b42ea051cc7bcce2dca0"
integrity sha1-qRGbGCizVMXMF7QuoFHMe8zi3KA=
dependencies:
aes-decrypter "3.0.0"
global "^4.3.0"
m3u8-parser "4.3.0"
m3u8-parser "4.4.0"
mpd-parser "0.8.1"
mux.js "5.1.3"
mux.js "5.2.1"
url-toolkit "^2.1.3"
video.js "^6.8.0 || ^7.0.0"
......@@ -1434,6 +1434,11 @@ accepts@~1.3.4, accepts@~1.3.5:
mime-types "~2.1.18"
negotiator "0.6.1"
ace-builds@^1.4.6:
version "1.4.6"
resolved "https://registry.npm.taobao.org/ace-builds/download/ace-builds-1.4.6.tgz#ff6abd5f31472f33c1958ab99e0de6b63db3c964"
integrity sha1-/2q9XzFHLzPBlYq5ng3mtj2zyWQ=
acorn-dynamic-import@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
......@@ -3681,6 +3686,11 @@ detect-port-alt@1.1.6:
address "^1.0.1"
debug "^2.6.0"
diff-match-patch@^1.0.4:
version "1.0.4"
resolved "https://registry.npm.taobao.org/diff-match-patch/download/diff-match-patch-1.0.4.tgz#6ac4b55237463761c4daf0dc603eb869124744b1"
integrity sha1-asS1UjdGN2HE2vDcYD64aRJHRLE=
diff@^3.2.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
......@@ -6817,6 +6827,11 @@ lodash.debounce@^4.0.0:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
lodash.get@^4.4.2:
version "4.4.2"
resolved "https://registry.npm.taobao.org/lodash.get/download/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
lodash.isarguments@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
......@@ -6827,6 +6842,11 @@ lodash.isarray@^3.0.0:
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.npm.taobao.org/lodash.isequal/download/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
lodash.keys@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
......@@ -6933,6 +6953,13 @@ m3u8-parser@4.3.0:
dependencies:
global "^4.3.2"
m3u8-parser@4.4.0:
version "4.4.0"
resolved "https://registry.npm.taobao.org/m3u8-parser/download/m3u8-parser-4.4.0.tgz#adf606c0af6d97f6750095a42006c2ae03dde177"
integrity sha1-rfYGwK9tl/Z1AJWkIAbCrgPd4Xc=
dependencies:
global "^4.3.2"
make-dir@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
......@@ -7334,10 +7361,10 @@ mux.js@5.1.1:
resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.1.1.tgz#0e95f048b4ac51d413c9ddc2d78e4cefad8d06de"
integrity sha512-Mf/UYmh5b8jvUP+jmrTbETnyFZprMdbT0RxKm/lJ/4d2Q3xdc5GaHaRPI1zVV5D3+6uxArVPm78QEb1RsrmaQw==
mux.js@5.1.3:
version "5.1.3"
resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.1.3.tgz#1a59b8979a6780be5bcb63983c7e883c90cd615b"
integrity sha512-FhDcysLvAkO9H8ftBJ2sK1O4Rmz0AWnMS+2uqP7WjrnaAyE/ox11GEiZkRzrWIdp8at9R9qBHDqdURY3/h/xTg==
mux.js@5.2.1:
version "5.2.1"
resolved "https://registry.npm.taobao.org/mux.js/download/mux.js-5.2.1.tgz#6698761fc88da5acecea0758ac25f11d3a08bee8"
integrity sha1-Zph2H8iNpazs6gdYrCXxHToIvug=
nan@^2.12.1:
version "2.13.2"
......@@ -9237,6 +9264,17 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-ace@^8.0.0:
version "8.0.0"
resolved "https://registry.npm.taobao.org/react-ace/download/react-ace-8.0.0.tgz#e6fc155ec3cf240e92bdf2e156a50458a78ed0a4"
integrity sha1-5vwVXsPPJA6SvfLhVqUEWKeO0KQ=
dependencies:
ace-builds "^1.4.6"
diff-match-patch "^1.0.4"
lodash.get "^4.4.2"
lodash.isequal "^4.5.0"
prop-types "^15.7.2"
react-app-polyfill@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz#a903b61a8bfd9c5e5f16fc63bebe44d6922a44fb"
......@@ -11497,17 +11535,16 @@ vfile@^4.0.0:
videojs-vtt.js "0.14.1"
xhr "2.4.0"
video.js@^7.6.0:
version "7.6.0"
resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.6.0.tgz#556c151004e27d340be3a732a14bf7c1aaf7e8b4"
integrity sha512-A0HSKzAmcYkd1xyExqUlM6n8bkghcX54iCvW08bPvvl3UHt8d8zijuylfIWu8vo1Z8fYyk9HPOFs1i3Cldr/cw==
video.js@^7.6.5:
version "7.6.6"
resolved "https://registry.npm.taobao.org/video.js/download/video.js-7.6.6.tgz#e7c9163d53f9b0e05ccb5ac0f79d02fa49b4d3ac"
integrity sha1-58kWPVP5sOBcy1rA950C+km006w=
dependencies:
"@babel/runtime" "^7.4.5"
"@videojs/http-streaming" "1.10.3"
"@videojs/http-streaming" "1.10.6"
global "4.3.2"
keycode "^2.2.0"
safe-json-parse "4.0.0"
tsml "1.0.1"
videojs-font "3.2.0"
videojs-vtt.js "^0.14.1"
xhr "2.4.0"
......
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