Skip to content

M
mr-julyedu
Commit a1bc9a8f by wangshuo
Options

Merge branch 'pythonClass' of gitlab.julyedu.com:baiguangyao/mr-julyedu into pythonClass

parents 4f539728 cfe5dfc1
Showing with 75 additions and 38 deletions
src/components/pythonShare/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard'; import {CopyToClipboard} from 'react-copy-to-clipboard';
import AceEditor from 'react-ace'; import AceEditor from 'react-ace';
import { Toast } from "antd-mobile" import { Toast } from "antd-mobile"
...@@ -16,10 +17,10 @@ class PythonClass extends Component { ...@@ -16,10 +17,10 @@ class PythonClass extends Component {
isWechat: browser.isWeixin, isWechat: browser.isWeixin,
isShare: true, isShare: true,
type: '1', // 1:课后习题，2:课堂习题 type: '1', // 1:课后习题，2:课堂习题
entryMode: 1, // 0：扫码页，1:落地页，2:直接进入 entryMode: 0, // 0：扫码页，1:落地页，2:直接进入
isExecute: false, isExecute: false,
isCopy: false, isCopy: false,
command: 'http://m.julyedu.com/python?from=python', command: '',
data: {} data: {}
} }
} }
...@@ -27,6 +28,13 @@ class PythonClass extends Component { ...@@ -27,6 +28,13 @@ class PythonClass extends Component {
componentDidMount() { componentDidMount() {
this.handleFetchInfo(); this.handleFetchInfo();
this.initPageStatus(); this.initPageStatus();
this.initCommand();
}
initCommand = () => {
this.setState({
command: `${API.m}/pythonShare?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&from=python`
})
} }
initPageStatus = () => { initPageStatus = () => {
...@@ -57,8 +65,12 @@ class PythonClass extends Component { ...@@ -57,8 +65,12 @@ class PythonClass extends Component {
handleFetchInfo = () => { handleFetchInfo = () => {
const id = getParam('id') || 10; const id = getParam('id') || 10;
http.get(`${API.home}/web/python/share/help/${id}`).then(res => { // http.get(`${API.home}/web/python/share/help/${id}`).then(res => {
console.log(res); http.get(`${API.home}/m/it/share/show`, {
params: {
id
}
}).then(res => {
const { code, data } = res.data; const { code, data } = res.data;
if(code === 200) { if(code === 200) {
this.setState({ this.setState({
...@@ -74,7 +86,7 @@ class PythonClass extends Component { ...@@ -74,7 +86,7 @@ class PythonClass extends Component {
this.setState({ this.setState({
entryMode: 1 entryMode: 1
}); });
history.push(`/python?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&from=python`); history.push(`/pythonShare?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&from=python`);
} }
} }
...@@ -91,6 +103,12 @@ class PythonClass extends Component { ...@@ -91,6 +103,12 @@ class PythonClass extends Component {
}); });
} }
handleToHide = () => {
this.setState({
entryMode: 2
});
}
render() { render() {
const { isWechat, isShare, isExecute, type, entryMode, command, isCopy, data } = this.state; const { isWechat, isShare, isExecute, type, entryMode, command, isCopy, data } = this.state;
return ( return (
...@@ -112,6 +130,7 @@ class PythonClass extends Component { ...@@ -112,6 +130,7 @@ class PythonClass extends Component {
handleToExecute={this.handleToExecute} handleToExecute={this.handleToExecute}
handleToSend={this.handleToSend} handleToSend={this.handleToSend}
copyToSuccess={this.copyToSuccess} copyToSuccess={this.copyToSuccess}
handleToHide={this.handleToHide}
/> />
</> </>
); );
...@@ -143,10 +162,11 @@ function PythonContent(props) { ...@@ -143,10 +162,11 @@ function PythonContent(props) {
entryMode, entryMode,
isCopy, isCopy,
command, command,
data: { head_img, nickname, code_lines, code, result, ques_name, course_name, video_name }, data: { head_img, nickname, code_lines, code, result, ques_name, course_name, course_id, video_name },
handleToSend, handleToSend,
copyToSuccess, copyToSuccess,
handleToExecute handleToExecute,
handleToHide
} = props; } = props;
let labelName = ''; let labelName = '';
if(type === '1') { if(type === '1') {
...@@ -180,7 +200,7 @@ function PythonContent(props) { ...@@ -180,7 +200,7 @@ function PythonContent(props) {
{ {
(entryMode === 1 && isWechat) && (entryMode === 1 && isWechat) &&
<div className="python-popup"> <div className="python-popup" onClick={handleToHide}>
<div className="python-header"> <div className="python-header">
<p className="python-wechat__title">请点击右上角分享</p> <p className="python-wechat__title">请点击右上角分享</p>
<i className="iconfont iconyindao"></i> <i className="iconfont iconyindao"></i>
...@@ -230,23 +250,20 @@ function PythonContent(props) { ...@@ -230,23 +250,20 @@ function PythonContent(props) {
} }
</div> </div>
<h4 className="python-code__title"> <h4 className="python-code__title">
{entryMode !== 0 && isShare? `这是Ta的第${code_lines}行代码` : '运行结果'} {entryMode !== 0 && isShare && !isWechat? `这是Ta的第${code_lines}行代码` : '运行结果'}
</h4> </h4>
<div className="python-code__content"> <div className="python-code__content">
<SelfAceEditor code={entryMode !== 0 && isShare? code : result} /> <SelfAceEditor code={entryMode !== 0 && isShare && !isWechat? code : result} />
</div> </div>
<h4 className="python-code__title">{entryMode === 0? '代码' : '运行结果'}</h4> <h4 className="python-code__title">{entryMode !== 0 && isShare && !isWechat? '运行结果' : '代码'}</h4>
<div className="python-code__content"> <div className="python-code__content">
{ {
entryMode === 0 && entryMode !== 0 && isShare && !isWechat
<SelfAceEditor code={code} /> ? <SelfAceEditor code={isExecute? result : ''} />
} : <SelfAceEditor code={code} />
{
entryMode !== 0 &&
<SelfAceEditor code={isExecute? result : ''} />
} }
{ {
(entryMode !== 0 && isShare && !isExecute) && (entryMode !== 0 && isShare && !isWechat && !isExecute) &&
<button className="python-button python-button__execute" onClick={handleToExecute}>运行看看</button> <button className="python-button python-button__execute" onClick={handleToExecute}>运行看看</button>
} }
</div> </div>
...@@ -254,7 +271,9 @@ function PythonContent(props) { ...@@ -254,7 +271,9 @@ function PythonContent(props) {
{ {
(entryMode === 0 && isWechat) && (entryMode === 0 && isWechat) &&
<button className="python-button python-button__study" onClick={handleToSend}>发给好友</button> <button className="python-button python-button__study" onClick={handleToSend}>
{isShare? '分享给好友' : '发给好友求助'}
</button>
} }
{ {
...@@ -263,18 +282,20 @@ function PythonContent(props) { ...@@ -263,18 +282,20 @@ function PythonContent(props) {
text={command} text={command}
onCopy={copyToSuccess} onCopy={copyToSuccess}
> >
<button className="python-button python-button__study">发给好友</button> <button className="python-button python-button__study">
{isShare? '分享给好友' : '发给好友求助'}
</button>
</CopyToClipboard> </CopyToClipboard>
} }
{ {
(entryMode === 0 && !isWechat && isCopy) && (entryMode === 0 && !isWechat && isCopy) &&
<button className="python-button python-button__study">已复制链接，快去粘贴发给好友吧～</button> <p className="python-button__tip">已复制链接，快去粘贴发给好友吧～</p>
} }
{ {
entryMode !== 0 && entryMode !== 0 &&
<button className="python-button python-button__study">我也要学Python</button> <Link className="python-button python-button__study" to={`/python?id=${course_id}`}>我也要学Python</Link>
} }
</div> </div>
); );
......
src/components/pythonShare/index.scss
...@@ -135,10 +135,20 @@ ...@@ -135,10 +135,20 @@
font-weight: 500; font-weight: 500;
color: #2D56F0; color: #2D56F0;
line-height: 44px; line-height: 44px;
text-align: center;
background-color: #FFF95B; background-color: #FFF95B;
box-shadow: 0px 5px 0px rgba(255,210,0,1); 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 { .python-button__execute {
position: absolute; position: absolute;
top: 0; top: 0;
......
yarn.lock
...@@ -1237,16 +1237,16 @@ ...@@ -1237,16 +1237,16 @@
"@types/unist" "*" "@types/unist" "*"
"@types/vfile-message" "*" "@types/vfile-message" "*"
"@videojs/http-streaming@1.10.3": "@videojs/http-streaming@1.10.6":
version "1.10.3" version "1.10.6"
resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-1.10.3.tgz#0c028443b9a3c96da85e5995748ed94280884584" resolved "https://registry.npm.taobao.org/@videojs/http-streaming/download/@videojs/http-streaming-1.10.6.tgz#a9119b1828b354c5cc17b42ea051cc7bcce2dca0"
integrity sha512-fxXtwVrQBdhOFh6GymPAPCb4utCI01Zs5fdyZgtR6FSsaz/zGmnzfNS5GvNjBi/hZviMsbNPFaOTTFMMNLNA3A== integrity sha1-qRGbGCizVMXMF7QuoFHMe8zi3KA=
dependencies: dependencies:
aes-decrypter "3.0.0" aes-decrypter "3.0.0"
global "^4.3.0" global "^4.3.0"
m3u8-parser "4.3.0" m3u8-parser "4.4.0"
mpd-parser "0.8.1" mpd-parser "0.8.1"
mux.js "5.1.3" mux.js "5.2.1"
url-toolkit "^2.1.3" url-toolkit "^2.1.3"
video.js "^6.8.0 || ^7.0.0" video.js "^6.8.0 || ^7.0.0"
...@@ -6953,6 +6953,13 @@ m3u8-parser@4.3.0: ...@@ -6953,6 +6953,13 @@ m3u8-parser@4.3.0:
dependencies: dependencies:
global "^4.3.2" 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: make-dir@^2.0.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
...@@ -7354,10 +7361,10 @@ mux.js@5.1.1: ...@@ -7354,10 +7361,10 @@ mux.js@5.1.1:
resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.1.1.tgz#0e95f048b4ac51d413c9ddc2d78e4cefad8d06de" resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.1.1.tgz#0e95f048b4ac51d413c9ddc2d78e4cefad8d06de"
integrity sha512-Mf/UYmh5b8jvUP+jmrTbETnyFZprMdbT0RxKm/lJ/4d2Q3xdc5GaHaRPI1zVV5D3+6uxArVPm78QEb1RsrmaQw== integrity sha512-Mf/UYmh5b8jvUP+jmrTbETnyFZprMdbT0RxKm/lJ/4d2Q3xdc5GaHaRPI1zVV5D3+6uxArVPm78QEb1RsrmaQw==
mux.js@5.1.3: mux.js@5.2.1:
version "5.1.3" version "5.2.1"
resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.1.3.tgz#1a59b8979a6780be5bcb63983c7e883c90cd615b" resolved "https://registry.npm.taobao.org/mux.js/download/mux.js-5.2.1.tgz#6698761fc88da5acecea0758ac25f11d3a08bee8"
integrity sha512-FhDcysLvAkO9H8ftBJ2sK1O4Rmz0AWnMS+2uqP7WjrnaAyE/ox11GEiZkRzrWIdp8at9R9qBHDqdURY3/h/xTg== integrity sha1-Zph2H8iNpazs6gdYrCXxHToIvug=
nan@^2.12.1: nan@^2.12.1:
version "2.13.2" version "2.13.2"
...@@ -11528,17 +11535,16 @@ vfile@^4.0.0: ...@@ -11528,17 +11535,16 @@ vfile@^4.0.0:
videojs-vtt.js "0.14.1" videojs-vtt.js "0.14.1"
xhr "2.4.0" xhr "2.4.0"
video.js@^7.6.0: video.js@^7.6.5:
version "7.6.0" version "7.6.6"
resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.6.0.tgz#556c151004e27d340be3a732a14bf7c1aaf7e8b4" resolved "https://registry.npm.taobao.org/video.js/download/video.js-7.6.6.tgz#e7c9163d53f9b0e05ccb5ac0f79d02fa49b4d3ac"
integrity sha512-A0HSKzAmcYkd1xyExqUlM6n8bkghcX54iCvW08bPvvl3UHt8d8zijuylfIWu8vo1Z8fYyk9HPOFs1i3Cldr/cw== integrity sha1-58kWPVP5sOBcy1rA950C+km006w=
dependencies: dependencies:
"@babel/runtime" "^7.4.5" "@babel/runtime" "^7.4.5"
"@videojs/http-streaming" "1.10.3" "@videojs/http-streaming" "1.10.6"
global "4.3.2" global "4.3.2"
keycode "^2.2.0" keycode "^2.2.0"
safe-json-parse "4.0.0" safe-json-parse "4.0.0"
tsml "1.0.1"
videojs-font "3.2.0" videojs-font "3.2.0"
videojs-vtt.js "^0.14.1" videojs-vtt.js "^0.14.1"
xhr "2.4.0" 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