read api

src/components/python/index.js

@@ -12,17 +12,21 @@ class PythonClass extends Component {
     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'
+      command: 'http://m.julyedu.com/python?from=python',
+      data: {}
     }
   }
 
   componentDidMount() {
-
     this.handleFetchInfo();
+    this.initPageStatus();
+  }
 
+  initPageStatus = () => {
     if(getParam('from') === 'barcode') {
       this.setState({
         entryMode: 0
@@ -33,12 +37,31 @@ class PythonClass extends Component {
         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,
+        });
+      }
     })
   }
 
@@ -48,7 +71,7 @@ class PythonClass extends Component {
       this.setState({
         entryMode: 1
       });
-      history.push(`/python?id=${getParam('id')}&from=python`);
+      history.push(`/python?id=${getParam('id')}&type=${getParam('type')}&ques=${getParam('ques')}&from=python`);
     }
   }
 
@@ -66,7 +89,7 @@ class PythonClass extends Component {
   }
 
   render() {
-    const { isWechat, isShare, isExecute, entryMode, command, isCopy } = this.state;
+    const { isWechat, isShare, isExecute, type, entryMode, command, isCopy, data } = this.state;
     return (
       <>
         <HeaderBar
@@ -74,14 +97,15 @@ class PythonClass extends Component {
           arrow={true}
           home={true}
         />
-        {entryMode}
         <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}
@@ -92,7 +116,27 @@ class PythonClass extends Component {
 }
 
 function PythonContent(props) {
-  const { isWechat, isShare, isExecute, entryMode, isCopy, command, handleToSend, copyToSuccess, handleToExecute } = 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">
 
@@ -127,24 +171,24 @@ function PythonContent(props) {
       <div className="python-content">
         <div className="python-user">
           <div className="python-user__portrait">
-            <img src="" alt=""/>
+            <img src={head_img} alt=""/>
           </div>
-          <h2 className="python-user__id">这里是用户ID</h2>
+          <h2 className="python-user__id">{nickname}</h2>
 
           {/* 分享 */}
           {
             (entryMode === 0 && isShare) &&
             <p className="python-user__desc">
               完成了
-              <span>【练习-听见无脸男的声音】</span>
+              <span>【{labelName}】</span>
             </p>
           }
           {
             (entryMode !== 0 && isShare) &&
             <p className="python-user__desc">
               在
-              <span>【练习-听见无脸男的声音】</span>完成了<br />
-              练习-听见无脸男的声音
+              <span>【{course_name}】</span>完成了<br />
+              {labelName}
             </p>
           }
 
@@ -153,7 +197,7 @@ function PythonContent(props) {
             (entryMode === 0 && !isShare) &&
             <p className="python-user__desc">
               在
-              <span>【练习-听见无脸男的声音】</span>
+              <span>【{labelName}】</span>
               遇到了困难
             </p>
           }
@@ -161,26 +205,26 @@ function PythonContent(props) {
             (entryMode !== 0 && !isShare) &&
             <p className="python-user__desc">
               在
-              <span>【练习-听见无脸男的声音】</span>的<br />
-              课程-萌新的进化遇到了困难
+              <span>【{course_name}】</span>的<br />
+              <span>{labelName}</span>遇到了困难
             </p>
           }
         </div>
         <h4 className="python-code__title">
-          { entryMode !== 0 && isShare? '这是Ta的第723行代码' : '运行结果'}
+          {entryMode !== 0 && isShare? `这是Ta的第${code_lines}行代码` : '运行结果'}
         </h4>
         <div className="python-code__content">
-          code
+          {entryMode !== 0 && isShare? code : result}
         </div>
-        <h4 className="python-code__title">代码</h4>
+        <h4 className="python-code__title">{entryMode === 0? '代码' : '运行结果'}</h4>
         <div className="python-code__content">
           {
             entryMode === 0 && 
-            <p>code</p>
+            <p>{code}</p>
           }
           {
             entryMode !== 0 && 
-            <p>{isExecute? 'code' : ''}</p>
+            <p>{isExecute? result : ''}</p>
           }
           {
             (entryMode !== 0 && isShare && !isExecute) &&

src/components/python/index.scss

@@ -110,9 +110,12 @@
   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;
 }