Skip to content

M
mr-julyedu
Commit d68f2fdb by wangshuo
Options

合并

parents 0a3dc31c 8ca2efdc
Showing with 497 additions and 2 deletions
package.json
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
"qrcode": "^1.3.3", "qrcode": "^1.3.3",
"qs": "^6.7.0", "qs": "^6.7.0",
"react": "^16.8.6", "react": "^16.8.6",
"react-ace": "^8.0.0",
"react-app-polyfill": "^0.2.2", "react-app-polyfill": "^0.2.2",
"react-copy-to-clipboard": "^5.0.1", "react-copy-to-clipboard": "^5.0.1",
"react-dev-utils": "^8.0.0", "react-dev-utils": "^8.0.0",
......
src/common/HeaderBar/index.js
...@@ -33,7 +33,7 @@ class HeaderBar extends Component { ...@@ -33,7 +33,7 @@ class HeaderBar extends Component {
} }
render() { render() {
const { toHref } = this.props const { toHref, home } = this.props;
return ( return (
<div className="detail-header" style={{...this.props.style}}> <div className="detail-header" style={{...this.props.style}}>
{ {
...@@ -57,6 +57,10 @@ class HeaderBar extends Component { ...@@ -57,6 +57,10 @@ class HeaderBar extends Component {
this.props.delete && this.props.delete &&
<i className='iconfont iconiconfront-56' onClick={this.props.toDelete}></i> <i className='iconfont iconiconfront-56' onClick={this.props.toDelete}></i>
} }
{
home &&
<i className="iconfont iconshouye-xianxing"></i>
}
</div> </div>
); );
} }
......
src/components/pythonShare/index.js 0 → 100644
import React, { Component } from 'react';
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 } 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: 1, // 0：扫码页，1:落地页，2:直接进入
isExecute: false,
isCopy: false,
command: 'http://m.julyedu.com/python?from=python',
data: {}
}
}
componentDidMount() {
this.handleFetchInfo();
this.initPageStatus();
}
initPageStatus = () => {
if(getParam('from') === 'barcode') {
this.setState({
entryMode: 0
});
}
if(getParam('from') === 'python') {
this.setState({
entryMode: 2
});
}
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 => {
console.log(res);
const { code, data } = res.data;
if(code === 200) {
this.setState({
data,
});
}
})
}
handleToSend = () => {
const { history } = this.props;
if(browser.isWeixin) {
this.setState({
entryMode: 1
});
history.push(`/python?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&from=python`);
}
}
copyToSuccess = () => {
Toast.info('已复制链接，快去粘贴发给好友吧～');
this.setState({
isCopy: true
});
}
handleToExecute = () => {
this.setState({
isExecute: true
});
}
render() {
const { isWechat, isShare, isExecute, type, entryMode, command, isCopy, data } = this.state;
return (
<>
<HeaderBar
title='Python基础语法'
arrow={true}
home={true}
/>
<PythonContent
isWechat={isWechat}
isShare={isShare}
type={type}
isExecute={isExecute}
entryMode={entryMode}
isCopy={isCopy}
command={command}
data={data}
handleToExecute={this.handleToExecute}
handleToSend={this.handleToSend}
copyToSuccess={this.copyToSuccess}
/>
</>
);
}
}
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,
type,
entryMode,
isCopy,
command,
data: { head_img, nickname, code_lines, code, result, ques_name, course_name, video_name },
handleToSend,
copyToSuccess,
handleToExecute
} = props;
let labelName = '';
if(type === '1') {
labelName = `练习-${ques_name}`;
}
if(type === '2') {
labelName = `课堂-${video_name}`;
}
return (
<div className="python-container">
{/* 微信 */}
{
// (entryMode === 0 && isWechat) &&
// <div className="python-header">
// <p className="python-wechat__title">请点击右上角分享</p>
// <i className="iconfont iconyindao"></i>
// </div>
}
{/* 非微信 */}
{
// (entryMode === 0 && !isWechat) &&
// <div className="python-header">
// <p className="python-wechat__title">
// {isShare? '快分享给好友吧' : '快发给好友求助吧'}
// </p>
// </div>
}
{
(entryMode === 1 && isWechat) &&
<div className="python-popup">
<div className="python-header">
<p className="python-wechat__title">请点击右上角分享</p>
<i className="iconfont iconyindao"></i>
</div>
</div>
}
<div className="python-content">
<div className="python-user">
<div className="python-user__portrait">
<img src={head_img} alt=""/>
</div>
<h2 className="python-user__id">{nickname}</h2>
{/* 分享 */}
{
(entryMode === 0 && isShare) &&
<p className="python-user__desc">
完成了
<span>【{labelName}】</span>
</p>
}
{
(entryMode !== 0 && 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 !== 0 && !isShare) &&
<p className="python-user__desc">
在
<span>【{course_name}】</span>的<br />
<span>{labelName}</span>遇到了困难
</p>
}
</div>
<h4 className="python-code__title">
{entryMode !== 0 && isShare? `这是Ta的第${code_lines}行代码` : '运行结果'}
</h4>
<div className="python-code__content">
<SelfAceEditor code={entryMode !== 0 && isShare? code : result} />
</div>
<h4 className="python-code__title">{entryMode === 0? '代码' : '运行结果'}</h4>
<div className="python-code__content">
{
entryMode === 0 &&
<SelfAceEditor code={code} />
}
{
entryMode !== 0 &&
<SelfAceEditor code={isExecute? result : ''} />
}
{
(entryMode !== 0 && 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}>发给好友</button>
}
{
(entryMode === 0 && !isWechat && !isCopy) &&
<CopyToClipboard
text={command}
onCopy={copyToSuccess}
>
<button className="python-button python-button__study">发给好友</button>
</CopyToClipboard>
}
{
(entryMode === 0 && !isWechat && isCopy) &&
<button className="python-button python-button__study">已复制链接，快去粘贴发给好友吧～</button>
}
{
entryMode !== 0 &&
<button className="python-button python-button__study">我也要学Python</button>
}
</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: 34px;
box-sizing: border-box;
.iconfont {
position: absolute;
top: -6px;
right: 40px;
font-size: 38px;
color: #fff;
}
}
.python-wechat__title {
margin: 0;
font-size: 17px;
color: #FCFF1D;
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;
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;
background-color: #FFF95B;
box-shadow: 0px 5px 0px rgba(255,210,0,1);
}
.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, .3);
z-index: 99;
}
.ace_mobile-menu {
display: none;
}
\ No newline at end of file
src/router/router-config.js
...@@ -230,5 +230,9 @@ export default [ ...@@ -230,5 +230,9 @@ export default [
{ {
path: '/python', path: '/python',
component: loadable(() => import(/* webpackChunkName: 'python-class'*/'@/components/python')) component: loadable(() => import(/* webpackChunkName: 'python-class'*/'@/components/python'))
} },
{
path: '/pythonShare',
component: loadable(() => import('@/components/pythonShare'))
},
] ]
yarn.lock
...@@ -1434,6 +1434,11 @@ accepts@~1.3.4, accepts@~1.3.5: ...@@ -1434,6 +1434,11 @@ accepts@~1.3.4, accepts@~1.3.5:
mime-types "~2.1.18" mime-types "~2.1.18"
negotiator "0.6.1" 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: acorn-dynamic-import@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278" 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: ...@@ -3681,6 +3686,11 @@ detect-port-alt@1.1.6:
address "^1.0.1" address "^1.0.1"
debug "^2.6.0" 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: diff@^3.2.0:
version "3.5.0" version "3.5.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
...@@ -6817,6 +6827,11 @@ lodash.debounce@^4.0.0: ...@@ -6817,6 +6827,11 @@ lodash.debounce@^4.0.0:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= 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: lodash.isarguments@^3.0.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
...@@ -6827,6 +6842,11 @@ lodash.isarray@^3.0.0: ...@@ -6827,6 +6842,11 @@ lodash.isarray@^3.0.0:
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U= 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: lodash.keys@^3.1.2:
version "3.1.2" version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
...@@ -9237,6 +9257,17 @@ rc@^1.2.7: ...@@ -9237,6 +9257,17 @@ rc@^1.2.7:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" 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: react-app-polyfill@^0.2.2:
version "0.2.2" version "0.2.2"
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz#a903b61a8bfd9c5e5f16fc63bebe44d6922a44fb" resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz#a903b61a8bfd9c5e5f16fc63bebe44d6922a44fb"
......
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