章节详情

src/pages/shijiankecheng/box4.js

@@ -21,6 +21,7 @@ export default class Box4 extends Component {
     )
       .then((res) => res.json())
       .then((data) => {
+        console.log(data.subjects);
         this.setState({
           map: data.subjects,
         });
@@ -54,10 +55,13 @@ export default class Box4 extends Component {
         </div>
         <div className="kc_main_box4">
           {this.state.map.map((item, index) => (
-            <div
+            <a
+              onClick={() => {
+                this.props.event(item.identifier);
+              }}
               key={item.id}
               className="kc_main_box4_box"
-              style={{ marginRight: index % 4 == 3 ? "0" : "" }}
+              style={{ color: "black", marginRight: index % 4 == 3 ? "0" : "" }}
             >
               <div className="kc_main_box4_box_shang">
                 <img
@@ -76,7 +80,7 @@ export default class Box4 extends Component {
                   <div></div>
                 </div>
               </div>
-            </div>
+            </a>
           ))}
         </div>
         {

src/pages/shijiankecheng/kecheng xiangqing/path.js

@@ -0,0 +1,94 @@
+import React, { Component } from "react";
+import Zhangjie from "./zhangjie";
+
+export default class Path extends Component {
+  state = {
+    list: [],
+    list2: [],
+    url: "",
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        ".json?identifier=" +
+        this.props.id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        this.setState({
+          list: data,
+        });
+      });
+
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        ".json?identifier=" +
+        this.props.id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.attachments);
+        this.setState({
+          list2: data.attachments,
+        });
+      });
+  }
+  render() {
+    return (
+      <div className="path">
+        <div className="path_top">
+          <div className="path_top_box">{this.state.list.name}</div>
+          <div className="path_top_box2">
+            <div className="path_top_box2_box">
+              <span>章节</span>
+              <p>{this.state.list.stages_count}</p>
+            </div>
+            <div className="path_top_box2_box">
+              <span>实训</span>
+              <p>{this.state.list.shixuns_count}</p>
+            </div>
+            <div className="path_top_box2_box">
+              <span>选择题关卡</span>
+              <p>{this.state.list.challenge_choose_count}</p>
+            </div>
+            <div className="path_top_box2_box">
+              <span>实践关卡</span>
+              <p>{this.state.list.challenges_count}</p>
+            </div>
+            <div className="path_top_box2_box">
+              <span>视频</span>
+              <p>{this.state.list.videos_count}</p>
+            </div>
+            <div className="path_top_box2_box">
+              <span>参与人数</span>
+              <p>{this.state.list.member_count}</p>
+            </div>
+          </div>
+        </div>
+        <div className="left">
+          <div className="left_one">
+            <div className="left_one_box1">
+              <img
+                style={{ marginRight: "10px" }}
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAO9JREFUOBFj3H//P8ePj//a/jMyRDH8/y/uZcDCyAAEoZP//QfRxAHG54yMDIv+izHUsYANY/hfyECCdkxL/kv+/89QzviKkYGFgZEhGpdhEvwMDJNiwQ6Gm5G3+D/Di49wLgoDaGgc0///QIdSDfyXZKKaWVCDiDLwxUeQN4kLZBZ8LgSGCcP2i/8Zlh6HqIq2/A9MCPh0MAAjBQ94+YmBYf5hhAJkNkIUlUWUl1G14OeNGog/fIiRHQ1DYkIJvxomRgbG5/iVkCLL+BxoIMMiUrTgUwsqtVlkWZnqHv/+Bypj44BZXxKfBtxyiCoAAHADSWb7p5YAAAAAAElFTkSuQmCC"
+              ></img>
+              课程介绍
+            </div>
+            <div className="left_one_box2">{this.state.list.description}</div>
+          </div>
+          <div className="left_two">
+            <div className="left_two_box">课程章节</div>
+            <div className="left_two_box">排行榜</div>
+            <div className="left_two_box">证书申请</div>
+          </div>
+          <div className="left_three">
+            <Zhangjie id={this.props.id}></Zhangjie>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import "../shijiankecheng.css";
+
+export default class Zhangjie extends Component {
+  state = {
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/stages.json?subject_id=" +
+        this.props.id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.stages);
+        this.setState({
+          list: data.stages,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        {this.state.list.map((item) => (
+          <div key={item.stage_id} className="zhangjie">
+            <div className="zhangjie_wenzi">
+              <div className="zhangjie_wenzi_box">{item.stage_name}</div>
+              <div className="zhangjie_wenzi_box">{item.stage_description}</div>
+
+              {/* <span>{item.stage_name}</span>
+                            <span>{item.stage_description}</span> */}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/shijiankecheng.css

@@ -1,3 +1,6 @@
+*{
+    
+}
 .kc_main{
     width: 100%;
     height: auto;
@@ -297,4 +300,83 @@
     color: rgba(0, 0, 0, 0.85);
     background: #fff;
     border-color: #d9d9d9;
+}
+.path{
+    width: 1200px;
+    height: auto;
+    margin: 0 auto;
+}
+.path_top{
+    padding-top: 35px;
+    height: 225px;
+}
+.path_top_box{
+    font-size: 28px;
+}
+.path_top_box2{
+    display: flex;
+    
+    text-align: center;
+    font-size: 14px;
+}
+.path_top_box2_box{
+    margin-right: 30px;
+
+}
+
+.left{
+    width: 66.7%;
+}
+.left_one{
+    padding: 40px 20px;
+    background-color: #fff;
+    width: 100%;
+}
+.left_one_box1{
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+}
+.left_one_box2{
+
+}
+.left_two{
+    height: 76px;
+    width: 100%;
+    margin: 0;
+    display: flex;
+}
+.left_two_box{
+    padding: 8px 0;
+    align-items: center;
+    font-size: 16px;
+    margin-right: 50px;
+    line-height: 60px;
+}
+.left_three{
+    width: 100%;
+
+}
+.zhangjie{
+    margin-top: 20px;
+    padding-top: 30px;
+    padding-bottom: 20px;
+    height: auto;
+    width: 100%;
+}
+.zhangjie_wenzi{
+    width: 100%;
+    padding: 10px 2.5px;
+    font-size: 18px;
+    color: #333;
+    text-align:left;
+    padding-left: 20px;
+}
+.zhangjie_wenzi_box{
+    width: 100%;
+    padding: 10px 2.5px;
+    font-size: 18px;
+    
 }

src/pages/shijiankecheng/shijiankecheng.js

@@ -3,42 +3,61 @@ import "./shijiankecheng.css";
 import Center6 from "../shouye/component/tg_dibu/center6";
 
 import Box4 from "./box4";
+import Path from "./kecheng xiangqing/path";
 
 export default class Shijiankecheng extends Component {
+  state = {
+    scan: true,
+    id: "",
+  };
+  handleevent(evt) {
+    this.setState({
+      scan: false,
+      id: evt,
+    });
+  }
   render() {
     return (
       <div className="kc_main">
-        <div className="kc_main_box1">
-          <img src="https://ali-cdn.educoder.net/images/avatars/LaboratorySetting/1_subject_banner?t=1622205433"></img>
-          <div className="kc_main_box1_main">
-            <div>
-              <div className="kc_main_box1_main_box1">
-                <span>实践课程</span>
-                <span>实践型MOOC，让您的在线课程更专业</span>
-              </div>
-              <div className="kc_main_box1_main_box2">
-                <i></i>
-                新建课程
+        {this.state.scan && (
+          <div className="kc_main_box1">
+            <img src="https://ali-cdn.educoder.net/images/avatars/LaboratorySetting/1_subject_banner?t=1622205433"></img>
+            <div className="kc_main_box1_main">
+              <div>
+                <div className="kc_main_box1_main_box1">
+                  <span>实践课程</span>
+                  <span>实践型MOOC，让您的在线课程更专业</span>
+                </div>
+                <div className="kc_main_box1_main_box2">
+                  <i></i>
+                  新建课程
+                </div>
+                <div className="kc_main_box1_main_box2">
+                  <i></i>
+                  新手指引
+                </div>
               </div>
-              <div className="kc_main_box1_main_box2">
-                <i></i>
-                新手指引
-              </div>
-            </div>
-            <div>
-              <div className="kc_main_box1_main_box3">
-                <span>
-                  <input placeholder="搜索您感兴趣的实践课程"></input>
-                  <div className="kc_main_box1_main_box3_box">
-                    <button type="button">搜索</button>
-                  </div>
-                </span>
+              <div>
+                <div className="kc_main_box1_main_box3">
+                  <span>
+                    <input placeholder="搜索您感兴趣的实践课程"></input>
+                    <div className="kc_main_box1_main_box3_box">
+                      <button type="button">搜索</button>
+                    </div>
+                  </span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-
-        <Box4></Box4>
+        )}
+        {this.state.scan && (
+          <Box4
+            event={(evt) => {
+              this.handleevent(evt);
+            }}
+          ></Box4>
+        )}
+        {!this.state.scan && <Path id={this.state.id}></Path>}
         <Center6></Center6>
       </div>
     );