Skip to content

M
mr-julyedu
Commit 4fedcfcc by zhanghaozhe
Options

分享落地页

parent f84c6fda
Showing with 486 additions and 0 deletions
src/components/mlShare/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 MLClass 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}/mlShare?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&origin=ml`
})
}
initPageStatus = () => {
if(getParam('origin') === 'barcode') {
this.setState({
entryMode: 0
});
}
if(getParam('origin') === 'ml') {
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}/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 } = this.state;
if(browser.isWeixin) {
history.push(`/mlShare?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&origin=ml`);
this.setState({
isGuide: true
});
wxShare({
title: isShare? `我已在【${params.course_name}】上运行了行代码了${params.code_lines}` : `我在${params.course_name}的${this.formatTitle(params)}遇到了困难`,
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='ML小课'
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={`/ml?id=${course_id}`}>我也要学ML</Link>
}
</div>
);
}
export default MLClass;
\ No newline at end of file
src/components/mlShare/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/router/router-config.js
......@@ -311,4 +311,8 @@ export default [
exact: true,
component: loadable(() => import(/* ml */'@/components/ml'))
},
{
path: '/mlShare',
component: loadable(() => import('@/components/mlShare'))
},
]
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