实践课程中的排行榜

src/pages/shijiankecheng/Path2.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Path from "./path2/path";
+import Center6 from "../shouye/component/tg_dibu/center6";
 
 export default class Path2 extends Component {
   render() {
@@ -7,6 +8,7 @@ export default class Path2 extends Component {
     return (
       <div>
         <Path id={this.props.match.params.id}></Path>
+        <Center6></Center6>
       </div>
     );
   }

src/pages/shijiankecheng/path2/paihang.js

@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+import Tongguan from "./paihangbang/tongguan";
+import Shipingxuexi from "./paihangbang/shipingxuexi";
+import Xiazaiziyuan from "./paihangbang/xiazaiziyuan";
+import Hudongtaolun from "./paihangbang/hudongtaolun";
+
+export default class Paihang extends Component {
+  state = {
+    list: [
+      {
+        id: 0,
+        name: "通关榜",
+      },
+      {
+        id: 1,
+        name: "视频学习榜",
+      },
+      {
+        id: 2,
+        name: "下载资源榜",
+      },
+      {
+        id: 3,
+        name: "互动讨论榜",
+      },
+    ],
+    current: 0,
+  };
+  handleClick(index) {
+    this.setState({
+      current: index,
+    });
+  }
+  render() {
+    return (
+      <div className="paihang">
+        <div className="paihang_shang">
+          {this.state.list.map((item, index) => (
+            <li
+              key={item.id}
+              onClick={() => this.handleClick(index)}
+              className={this.state.current === index ? "li_active" : ""}
+            >
+              {item.name}
+            </li>
+          ))}
+        </div>
+        {this.state.current === 0 && <Tongguan id={this.props.id}></Tongguan>}
+        {this.state.current === 1 && (
+          <Shipingxuexi id={this.props.id}></Shipingxuexi>
+        )}
+        {this.state.current === 2 && (
+          <Xiazaiziyuan id={this.props.id}></Xiazaiziyuan>
+        )}
+        {this.state.current === 3 && (
+          <Hudongtaolun id={this.props.id}></Hudongtaolun>
+        )}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Xiazaiziyuan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}>发帖数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/shipingxuexi.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Shipingxuexi extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 累计学习时长</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/tongguan.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Tongguan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 通关关卡数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/xiazaiziyuan.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Xiazaiziyuan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 下载资源次数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/shengqing.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shengqing extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/zhangjie.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import "../shijiankecheng.css";
 import Kecheng from "./kecheng";
+import Paihang from "./paihang";
+import Shengqing from "./shengqing";
 
 export default class Zhangjie extends Component {
   state = {
@@ -43,7 +45,9 @@ export default class Zhangjie extends Component {
             </div>
           ))}
         </div>
-        <Kecheng id={this.props.id}></Kecheng>
+        {this.state.current === 0 && <Kecheng id={this.props.id}></Kecheng>}
+        {this.state.current === 1 && <Paihang id={this.props.id}></Paihang>}
+        {this.state.current === 2 && <Shengqing id={this.props.id}></Shengqing>}
       </div>
     );
   }

src/pages/shijiankecheng/shijiankecheng.css

@@ -452,3 +452,48 @@
     line-height: 1.6;
     font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
 }
+.paihang{
+    background: rgb(255, 255, 255);
+    padding: 0px 20px;
+    font-size: 14px;
+}
+.paihang_shang{
+    align-items: center;
+    margin: 0 0 8px 0;
+    list-style: none;
+    height: 39px;
+    border-bottom: 1px solid #f0f0f0;
+    position: relative;
+}
+.paihang_shang li {
+    height: 100%;
+    line-height: 22px;
+    align-items: center;
+    margin-left: 32px;
+    width: auto;
+    float: left;
+    padding: 8px;   
+    cursor: pointer;
+}
+.li_active{
+    color: #1890ff;
+    border-bottom: 1px solid #1890ff;
+}
+.paihang_style{
+    height: 42px;
+    background: rgb(250, 250, 250);
+    display: flex;
+    padding: 0px 5px;
+    align-items: center;
+}
+.tongguan_xia{
+    text-align: center;
+    margin: 20px 0px;
+    width: 100%;
+
+}
+.tongguan_xia button{
+    min-width: 28px;
+    height: 28px;
+    margin-right: 10px;
+}