Commit b64c2ec8 by FE

add api

parent 978a7ae5
import React, { Component } from 'react'; import React, { Component } from 'react';
import classnames from 'classnames'; import {CopyToClipboard} from 'react-copy-to-clipboard';
import { Toast } from "antd-mobile"
import {HeaderBar} from '@/common'; import {HeaderBar} from '@/common';
import { browser } from '@/utils'; import { browser, http, getParam } from '@/utils';
import './index.scss'; import './index.scss';
class PythonClass extends Component { class PythonClass extends Component {
...@@ -9,14 +10,60 @@ class PythonClass extends Component { ...@@ -9,14 +10,60 @@ class PythonClass extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
isWechat: browser.isWechat, isWechat: browser.isWeixin,
isShare: true, isShare: true,
entryMode: 1, // 0:扫码页,1:落地页 entryMode: 1, // 0:扫码页,1:落地页,2:直接进入
isCopy: false,
command: 'http://m.julyedu.com/python?from=python'
} }
} }
componentDidMount() {
this.handleFetchInfo();
if(getParam('from') === 'barcode') {
this.setState({
entryMode: 0
});
}
if(getParam('from') === 'python') {
this.setState({
entryMode: 2
});
}
}
handleFetchInfo = () => {
const id = getParam(id) || 17;
http.get(`${API.home}/web/python/share/help/${id}`).then(res => {
console.log(res);
})
}
handleToSend = () => {
const { history } = this.props;
if(browser.isWeixin) {
this.setState({
entryMode: 1
});
history.push('/python?from=python');
}else {
}
console.log(this.props);
}
copyToSuccess = () => {
Toast.info('已复制链接,快去粘贴发给好友吧~');
this.setState({
isCopy: true
});
}
render() { render() {
const { isWechat, isShare, entryMode } = this.state; const { isWechat, isShare, entryMode, command, isCopy } = this.state;
return ( return (
<> <>
<HeaderBar <HeaderBar
...@@ -28,6 +75,10 @@ class PythonClass extends Component { ...@@ -28,6 +75,10 @@ class PythonClass extends Component {
isWechat={isWechat} isWechat={isWechat}
isShare={isShare} isShare={isShare}
entryMode={entryMode} entryMode={entryMode}
isCopy={isCopy}
command={command}
handleToSend={this.handleToSend}
copyToSuccess={this.copyToSuccess}
/> />
</> </>
); );
...@@ -35,30 +86,36 @@ class PythonClass extends Component { ...@@ -35,30 +86,36 @@ class PythonClass extends Component {
} }
function PythonContent(props) { function PythonContent(props) {
const { isWechat, isShare, entryMode } = props; const { isWechat, isShare, entryMode, isCopy, command, handleToSend, copyToSuccess } = props;
return ( return (
<div className={classnames( <div className="python-container">
"python-container",
{
'python-container--page': entryMode === 1
})}>
{/* 微信 */} {/* 微信 */}
{ {
(entryMode === 0 && isWechat) && // (entryMode === 0 && isWechat) &&
<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>
</div> // </div>
} }
{/* 非微信 */} {/* 非微信 */}
{ {
(entryMode === 0 && !isWechat) && // (entryMode === 0 && !isWechat) &&
<div className="python-header"> // <div className="python-header">
<p className="python-wechat__title"> // <p className="python-wechat__title">
{isShare? '快分享给好友吧' : '快发给好友求助吧'} // {isShare? '快分享给好友吧' : '快发给好友求助吧'}
</p> // </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>
} }
<div className="python-content"> <div className="python-content">
...@@ -77,7 +134,7 @@ function PythonContent(props) { ...@@ -77,7 +134,7 @@ function PythonContent(props) {
</p> </p>
} }
{ {
(entryMode === 1 && isShare) && (entryMode !== 0 && isShare) &&
<p className="python-user__desc"> <p className="python-user__desc">
<span>【练习-听见无脸男的声音】</span>完成了<br /> <span>【练习-听见无脸男的声音】</span>完成了<br />
...@@ -95,7 +152,7 @@ function PythonContent(props) { ...@@ -95,7 +152,7 @@ function PythonContent(props) {
</p> </p>
} }
{ {
(entryMode === 1 && !isShare) && (entryMode !== 0 && !isShare) &&
<p className="python-user__desc"> <p className="python-user__desc">
<span>【练习-听见无脸男的声音】</span>的<br /> <span>【练习-听见无脸男的声音】</span>的<br />
...@@ -104,7 +161,7 @@ function PythonContent(props) { ...@@ -104,7 +161,7 @@ function PythonContent(props) {
} }
</div> </div>
<h4 className="python-code__title"> <h4 className="python-code__title">
{ entryMode === 1 && isShare? '这是Ta的第723行代码' : '运行结果'} { entryMode !== 0 && isShare? '这是Ta的第723行代码' : '运行结果'}
</h4> </h4>
<div className="python-code__content"> <div className="python-code__content">
code code
...@@ -113,14 +170,34 @@ function PythonContent(props) { ...@@ -113,14 +170,34 @@ function PythonContent(props) {
<div className="python-code__content"> <div className="python-code__content">
code code
{ {
(entryMode === 1 && isShare) && (entryMode !== 1 && isShare) &&
<button className="python-button python-button__execute">运行看看</button> <button className="python-button python-button__execute">运行看看</button>
} }
</div> </div>
</div> </div>
{ {
entryMode === 1 && (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> <button className="python-button python-button__study">我也要学Python</button>
} }
</div> </div>
......
.python-container { .python-container {
padding: 0 8px 29px; padding: 50px 8px 29px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/python-bg.png'); background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/python-bg.png');
background-size: cover; background-size: cover;
} }
.python-container--page { .python-container--page {
padding-top: 50px; // padding-top: 50px;
} }
.python-header { .python-header {
...@@ -150,4 +150,14 @@ ...@@ -150,4 +150,14 @@
color: #fff; color: #fff;
line-height: 32px; line-height: 32px;
background-color: #0099FF; 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;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment