与api连接

dashboard/src/components/library/course/LecturerList.tsx

@@ -1,116 +1,72 @@
 //主讲人列表
-import { useIntl } from "react-intl";
-import { ProForm, ProFormText } from "@ant-design/pro-components";
-//import { message } from "antd";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Card, List, message, Typography } from "antd";
 
-import { post } from "../../../request";
-import { useState } from "react";
-//import React from 'react';
-import { Card, List , Col, Row , Space} from 'antd';
-const { Meta } = Card;
-//const {  Card, Col, Row  } = antd;
-
-const data = [
-  {
-    title: 'U Kuṇḍadhāna Sayadaw',
-    introduction: 'U Kuṇḍadhāna Sayadaw简介 U Kun西亚多今年51岁，30个瓦萨， - 1969年，出生于缅甸...',
-    portrait:'https://img2.baidu.com/it/u=2930319359,2500787374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334'
-
-  },
-  {
-    title: '某尊者',
-    introduction: '某尊者简介...',
-    portrait:'https://img2.baidu.com/it/u=2930319359,2500787374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334'
-  },
-  {
-    title: '小僧善巧',
-    introduction: '小僧善巧尊者简介...',
-    portrait:'https://avatars.githubusercontent.com/u/58804044?v=4'
-  },
-  {
-    title: 'Kalyāṇamitta',
-    introduction: 'Kalyāṇamitta尊者简介...',
-    portrait:'https://img2.baidu.com/it/u=2930319359,2500787374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334'
-  },
-];
-/*栅格卡片实现方案 https://ant.design/components/card-cn/
-
-const App = () => (
-  <div className="site-card-wrapper">
-    <Row gutter={16}>
-      <Col span={4}>
-      <Card
-    hoverable
-    style={{ width: 240,  height: 300}}
-    cover={<img alt="example" src={data[0].portrait}  width="240" height="180"/>}
-  >
-    <Meta title={data[0].title} description={data[0].introduction} />
-  </Card>
-      </Col>
-      <Col span={4}>
-      <Card
-    hoverable
-    style={{ width: 240,  height: 300}}
-    cover={<img alt="example" src={data[1].portrait}  width="240" height="180"/>}
-  >
-    <Meta title={data[1].title} description={data[1].introduction} />
-  </Card>
-      </Col>
-      <Col span={4}>
-      <Card
-    hoverable
-    style={{ width: 240,  height: 300}}
-    cover={<img alt="example" src={data[2].portrait}  width="240" height="180"/>}
-  >
-    <Meta title={data[2].title} description={data[2].introduction} />
-  </Card>
-      </Col>
-      <Col span={4}>
-      <Card
-    hoverable
-    style={{ width: 240,  height: 300}}
-    cover={<img alt="example" src={data[3].portrait}  width="240" height="180"/>}
-  >
-    <Meta title={data[3].title} description={data[3].introduction} />
-  </Card>
-      </Col>
-    </Row>
-  </div>
-);
-
-export default App;
-*/
+import { ICourse } from "../../../pages/library/course/course";
+import { API_HOST, get } from "../../../request";
+import { ICourseListResponse } from "../../api/Course";
 
-
-/*List实现方案
-
-import { useIntl } from "react-intl";
-import { ProForm, ProFormText } from "@ant-design/pro-components";
-//import { message } from "antd";
-
-import { post } from "../../../request";
-import { useState } from "react";
-//import React from 'react';
-import { Card, List } from 'antd';
 const { Meta } = Card;
-*/
-const App: React.FC = () => (
+const { Paragraph } = Typography;
+
+const Widget = () => {
+  const [data, setData] = useState<ICourse[]>();
+  const navigate = useNavigate();
 
-  <List
-    grid={{ gutter: 16, column: 4 }}
-    dataSource={data}
-    renderItem={(item) => (
-      <List.Item>
-        <Card
-          hoverable
-          style={{ width: 240,  height: 300}}
-          cover={<img alt="example" src={item.portrait}  width="240" height="180"/>}
+  useEffect(() => {
+    get<ICourseListResponse>(`/v2/course?view=new&limit=4`).then((json) => {
+      if (json.ok) {
+        console.log(json.data);
+        const course: ICourse[] = json.data.rows.map((item) => {
+          return {
+            id: item.id,
+            title: item.title,
+            subtitle: item.subtitle,
+            teacher: item.teacher,
+            intro: item.content,
+            coverUrl: item.cover,
+          };
+        });
+        setData(course);
+      } else {
+        message.error(json.message);
+      }
+    });
+  }, []);
+  return (
+    <List
+      grid={{ gutter: 16, column: 4 }}
+      dataSource={data}
+      renderItem={(item) => (
+        <List.Item>
+          <Card
+            hoverable
+            style={{ width: "100%", height: 300 }}
+            cover={
+              <img
+                alt="example"
+                src={API_HOST + "/" + item.coverUrl}
+                width="240"
+                height="200"
+              />
+            }
+            onClick={(e) => {
+              navigate(`/course/show/${item.id}`);
+            }}
           >
-          <Meta title={item.title} description={item.introduction} />
-        </Card>
-      </List.Item>
-    )}
-  />
-      
-);
-export default App;
+            <Meta
+              title={item.title}
+              description={
+                <Paragraph ellipsis={{ rows: 2, expandable: false }}>
+                  {item.intro}
+                </Paragraph>
+              }
+            />
+          </Card>
+        </List.Item>
+      )}
+    />
+  );
+};
+export default Widget;