合并

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",

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/components/pythonShare/index.js

+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

+.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 [
     {
         path: '/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:
     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"
@@ -9237,6 +9257,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"