From b19b3ab00122a2a3e92a393cd1ae58e9e63c5ab7 Mon Sep 17 00:00:00 2001
From: Jzx201211 <1595536662@qq.com>
Date: Fri, 18 Mar 2022 18:20:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 src/pages/shijiankecheng/path2/kecheng.js     | 86 ++++++++++++-------
 .../path2/kecheng/jiaoxuekejian.js            |  7 ++
 .../shijiankecheng/path2/kecheng/quanbu.js    | 39 +++++++++
 .../path2/kecheng/shijianxiangmu.js           |  7 ++
 .../path2/kecheng/shipingxiangmu.js           |  7 ++
 .../shijiankecheng/path2/kecheng/taolun.js    |  7 ++
 .../path2/paihangbang/hudongtaolun.js         |  1 +
 src/pages/shijiankecheng/path2/path.js        |  3 +-
 src/pages/shijiankecheng/shijiankecheng.css   | 11 +++
 10 files changed, 139 insertions(+), 30 deletions(-)
 create mode 100644 src/pages/shijiankecheng/path2/kecheng/jiaoxuekejian.js
 create mode 100644 src/pages/shijiankecheng/path2/kecheng/quanbu.js
 create mode 100644 src/pages/shijiankecheng/path2/kecheng/shijianxiangmu.js
 create mode 100644 src/pages/shijiankecheng/path2/kecheng/shipingxiangmu.js
 create mode 100644 src/pages/shijiankecheng/path2/kecheng/taolun.js

diff --git a/package.json b/package.json
index 0f6242a8..270be732 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@ant-design/pro-layout": "^6.5.0",
+    "marked": "^4.0.12",
     "react": "17.x",
     "react-dom": "17.x",
     "umi": "^3.5.20"
diff --git a/src/pages/shijiankecheng/path2/kecheng.js b/src/pages/shijiankecheng/path2/kecheng.js
index 39503012..339c2743 100644
--- a/src/pages/shijiankecheng/path2/kecheng.js
+++ b/src/pages/shijiankecheng/path2/kecheng.js
@@ -1,43 +1,71 @@
 import React, { Component } from "react";
+import Quanbu from "./kecheng/quanbu";
+import Shijianxiangmu from "./kecheng/shijianxiangmu";
+import Shipingxiangmu from "./kecheng/shipingxiangmu";
+import Jiaoxuekejian from "./kecheng/jiaoxuekejian";
+import Taolun from "./kecheng/taolun";
 
 export default class Kecheng extends Component {
   state = {
-    list: [],
+    list: [
+      {
+        id: 0,
+        name: "全部",
+      },
+      {
+        id: 1,
+        name: "实践项目",
+      },
+      {
+        id: 2,
+        name: "视频项目",
+      },
+      {
+        id: 3,
+        name: "教学课件",
+      },
+      {
+        id: 4,
+        name: "讨论",
+      },
+    ],
+    current: 0,
   };
-  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,
-        });
-      });
+
+  handleClick(value) {
+    this.setState({
+      current: value,
+    });
   }
   render() {
     return (
       <div className="left_three">
         <div className="left_three_box">
-          <div className="left_three_box_box_active">全部</div>
-          <div className="left_three_box_box_active">实践项目</div>
-          <div className="left_three_box_box_active">视频项目</div>
-        </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>
-              {item.items.map((item2) => (
-                <div className="zhangjie_wenzi_box" key={item2.id}>
-                  {item2.name}
-                </div>
-              ))}
+          {this.state.list.map((item, index) => (
+            <div
+              key={item.id}
+              className={
+                this.state.current === index
+                  ? "left_three_box_box_active"
+                  : "left_three_box_box"
+              }
+              onClick={() => this.handleClick(index)}
+            >
+              {item.name}
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
+        {this.state.current === 0 && <Quanbu id={this.props.id}></Quanbu>}
+        {this.state.current === 1 && (
+          <Shijianxiangmu id={this.props.id}></Shijianxiangmu>
+        )}
+        {this.state.current === 2 && (
+          <Shipingxiangmu id={this.props.id}></Shipingxiangmu>
+        )}
+        {this.state.current === 3 && (
+          <Jiaoxuekejian id={this.props.id}></Jiaoxuekejian>
+        )}
+        {this.state.current === 4 && <Taolun id={this.props.id}></Taolun>}
       </div>
     );
   }
diff --git a/src/pages/shijiankecheng/path2/kecheng/jiaoxuekejian.js b/src/pages/shijiankecheng/path2/kecheng/jiaoxuekejian.js
new file mode 100644
index 00000000..d13243a6
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/kecheng/jiaoxuekejian.js
@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Jiaoxuekejian extends Component {
+  render() {
+    return <div></div>;
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/kecheng/quanbu.js b/src/pages/shijiankecheng/path2/kecheng/quanbu.js
new file mode 100644
index 00000000..c99fed11
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/kecheng/quanbu.js
@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+
+export default class Quanbu 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>
+              {item.items.map((item2) => (
+                <div className="zhangjie_wenzi_box" key={item2.id}>
+                  {item2.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/kecheng/shijianxiangmu.js b/src/pages/shijiankecheng/path2/kecheng/shijianxiangmu.js
new file mode 100644
index 00000000..f1d1e90f
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/kecheng/shijianxiangmu.js
@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shijianxiangmu extends Component {
+  render() {
+    return <div></div>;
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/kecheng/shipingxiangmu.js b/src/pages/shijiankecheng/path2/kecheng/shipingxiangmu.js
new file mode 100644
index 00000000..2881791b
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/kecheng/shipingxiangmu.js
@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shipingxiangmu extends Component {
+  render() {
+    return <div></div>;
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/kecheng/taolun.js b/src/pages/shijiankecheng/path2/kecheng/taolun.js
new file mode 100644
index 00000000..08f28cfd
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/kecheng/taolun.js
@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Taolun extends Component {
+  render() {
+    return <div></div>;
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js b/src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js
index 90f8d134..8727f2d9 100644
--- a/src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js
+++ b/src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js
@@ -5,6 +5,7 @@ export default class Xiazaiziyuan extends Component {
     number: 1,
     list: [],
   };
+
   componentDidMount() {
     fetch(
       "https://test-data.educoder.net/api/paths/" +
diff --git a/src/pages/shijiankecheng/path2/path.js b/src/pages/shijiankecheng/path2/path.js
index feb44974..9bb5c17e 100644
--- a/src/pages/shijiankecheng/path2/path.js
+++ b/src/pages/shijiankecheng/path2/path.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Zhangjie from "./zhangjie";
+import marked from "marked";
 
 const bgImg = {
   bg: {
@@ -26,7 +27,6 @@ export default class Path extends Component {
           list: data,
         });
       });
-
     fetch(
       "https://test-data.educoder.net/api/paths/" +
         this.props.id +
@@ -103,6 +103,7 @@ export default class Path extends Component {
                 ></img>
                 课程介绍
               </div>
+
               <div className="left_one_box2">{this.state.list.description}</div>
             </div>
             <Zhangjie id={this.props.id}></Zhangjie>
diff --git a/src/pages/shijiankecheng/shijiankecheng.css b/src/pages/shijiankecheng/shijiankecheng.css
index 79e08a7a..6c9804f6 100644
--- a/src/pages/shijiankecheng/shijiankecheng.css
+++ b/src/pages/shijiankecheng/shijiankecheng.css
@@ -396,6 +396,17 @@
     display: flex;
     font-size: 14px;
 }
+.left_three_box_box:hover{
+    color: #1890ff;
+}
+.left_three_box_box{
+    margin-right: 14px;
+    background: white;
+    color: #333;
+    border-radius: 15px;
+    cursor: pointer;
+    padding: 1px 6px;
+}
 .left_three_box_box_active{
     margin-right: 14px;
     background: #d8ecff;