|
|
@@ -1,35 +1,64 @@
|
|
|
import { css } from "@linaria/core";
|
|
|
|
|
|
import { ArrowRightOutlined } from "@ant-design/icons-vue";
|
|
|
-import { TabPane, Tabs } from "ant-design-vue";
|
|
|
-import { defineComponent, reactive } from "vue";
|
|
|
+import { Empty, TabPane, Tabs } from "ant-design-vue";
|
|
|
+import { defineComponent, onMounted, reactive, watch } from "vue";
|
|
|
+import { useArticle, useCategory } from "@/modules";
|
|
|
+import { RouterLink, useRouter } from "vue-router";
|
|
|
+import Image from "@/components/Image";
|
|
|
export default defineComponent({
|
|
|
setup() {
|
|
|
- const tabs = [
|
|
|
- {
|
|
|
- title: "产品设计",
|
|
|
- key: "1",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "视觉传达",
|
|
|
- key: "2",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "美术艺术",
|
|
|
- key: "3",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "环境设计",
|
|
|
- key: "4",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "动画",
|
|
|
- key: "5",
|
|
|
- },
|
|
|
- ];
|
|
|
+ const storeCategory = useCategory();
|
|
|
+ const storeArt = useArticle();
|
|
|
+ const router = useRouter();
|
|
|
+ const categoryId = "6464a6478dcb7ddb98b57a24";
|
|
|
const state = reactive({
|
|
|
- activeKey: "1",
|
|
|
+ activeKey: "",
|
|
|
+ tabs: [],
|
|
|
+ allList: new Map(),
|
|
|
});
|
|
|
+ watch(
|
|
|
+ () => storeCategory.categoryTree.length,
|
|
|
+ () => {
|
|
|
+ initCategory();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ onMounted(() => {
|
|
|
+ initCategory();
|
|
|
+ });
|
|
|
+ const initCategory = async () => {
|
|
|
+ const currCategory = storeCategory.categoryTree.find((e) => {
|
|
|
+ return e._id == categoryId;
|
|
|
+ });
|
|
|
+ if (!currCategory) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const children = currCategory.children;
|
|
|
+
|
|
|
+ const res = children.map((e: any) => {
|
|
|
+ return getList(e._id);
|
|
|
+ });
|
|
|
+ Promise.all(res).then((e) => {
|
|
|
+ state.tabs = children;
|
|
|
+ state.activeKey = children[0]._id;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const getList = (id: string) => {
|
|
|
+ return new Promise(async (resolve) => {
|
|
|
+ const query = { page: 1, size: 7, query: JSON.stringify({ cid: id }) };
|
|
|
+ const res = await storeArt.getArticleList(query);
|
|
|
+ const list = res.list || [];
|
|
|
+ state.allList.set(id, list);
|
|
|
+ resolve(true);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const turnPage = (aid: string, cid: string) => {
|
|
|
+ router.push({
|
|
|
+ name: "article",
|
|
|
+ params: { id: cid },
|
|
|
+ query: { aid },
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
return () => (
|
|
|
<div class={[page, "home_lay_item_box"]}>
|
|
|
@@ -45,23 +74,23 @@ export default defineComponent({
|
|
|
</div>
|
|
|
<div class={"ant-tabs-nav-wrap justify-end"}>
|
|
|
<div class={"ant-tabs-nav-list"}>
|
|
|
- {tabs.map((e) => {
|
|
|
+ {state.tabs.map((e: CategoryItem) => {
|
|
|
return (
|
|
|
<div
|
|
|
class={`ant-tabs-tab ${
|
|
|
- state.activeKey == e.key
|
|
|
+ state.activeKey == e._id
|
|
|
? "ant-tabs-tab-active"
|
|
|
: ""
|
|
|
}`}
|
|
|
- key={e.key}
|
|
|
+ key={e._id}
|
|
|
>
|
|
|
<div
|
|
|
class={"ant-tabs-tab-btn"}
|
|
|
onClick={() => {
|
|
|
- state.activeKey = e.key;
|
|
|
+ state.activeKey = e._id;
|
|
|
}}
|
|
|
>
|
|
|
- {e.title}
|
|
|
+ {e.name}
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
@@ -72,86 +101,78 @@ export default defineComponent({
|
|
|
);
|
|
|
},
|
|
|
default: () => {
|
|
|
- return tabs.map((item) => {
|
|
|
+ return state.tabs.map((item: CategoryItem) => {
|
|
|
+ const list = state.allList.get(item._id);
|
|
|
+
|
|
|
return (
|
|
|
- <TabPane tab={item.title} key={item.key}>
|
|
|
- <div class={"tab_list"}>
|
|
|
- <div class={"list_item"}>
|
|
|
- <a class={"item_link"}>
|
|
|
- <img src={getImageUrl("temp_works_1.png")} />
|
|
|
- <div class={"item_txt"}>
|
|
|
- <div class={"name"}>骨科手术导航机器人</div>
|
|
|
- <div class={"authors"}>作者：张小碗</div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class={"list_item"}>
|
|
|
- <div class={"item_lay"}>
|
|
|
- <a class={"item_link"}>
|
|
|
- <img src={getImageUrl("temp_works_2.png")} />
|
|
|
- <div class={"item_txt"}>
|
|
|
- <div class={"name"}>骨科手术导航机器人</div>
|
|
|
- <div class={"authors"}>作者：张小碗</div>
|
|
|
+ <TabPane tab={item.name} key={item._id}>
|
|
|
+ {list.length > 0 ? (
|
|
|
+ <div class={"tab_list"}>
|
|
|
+ {list.map((e: ArticleItem, index: number) => {
|
|
|
+ const next = list[index + 1];
|
|
|
+ if (index == 0) {
|
|
|
+ return (
|
|
|
+ <div class={"list_item"}>
|
|
|
+ <div
|
|
|
+ class={"item_link"}
|
|
|
+ onClick={() => {
|
|
|
+ turnPage(e._id, item._id);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Image src={e.cover} />
|
|
|
+ <div class={"item_txt"}>
|
|
|
+ <div class={"name"}>{e.title}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (index % 2 == 0) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <div class={"list_item"}>
|
|
|
+ <div class={"item_lay"}>
|
|
|
+ <div
|
|
|
+ class={"item_link"}
|
|
|
+ onClick={() => {
|
|
|
+ turnPage(e._id, item._id);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Image src={e.cover} />
|
|
|
+ <div class={"item_txt"}>
|
|
|
+ <div class={"name"}>{e.title}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={"item_lay"}>
|
|
|
+ <div
|
|
|
+ class={"item_link"}
|
|
|
+ onClick={() => {
|
|
|
+ turnPage(next._id, item._id);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Image src={next.cover} />
|
|
|
+ <div class={"item_txt"}>
|
|
|
+ <div class={"name"}>{next.title}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class={"item_lay"}>
|
|
|
- <a class={"item_link"}>
|
|
|
- <img src={getImageUrl("temp_works_2.png")} />
|
|
|
- <div class={"item_txt"}>
|
|
|
- <div class={"name"}>骨科手术导航机器人</div>
|
|
|
- <div class={"authors"}>作者：张小碗</div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class={"list_item"}>
|
|
|
- {" "}
|
|
|
- <div class={"item_lay"}>
|
|
|
- <a class={"item_link"}>
|
|
|
- <img src={getImageUrl("temp_works_2.png")} />
|
|
|
- <div class={"item_txt"}>
|
|
|
- <div class={"name"}>骨科手术导航机器人</div>
|
|
|
- <div class={"authors"}>作者：张小碗</div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class={"item_lay"}>
|
|
|
- <a class={"item_link"}>
|
|
|
- <img src={getImageUrl("temp_works_2.png")} />
|
|
|
- <div class={"item_txt"}>
|
|
|
- <div class={"name"}>骨科手术导航机器人</div>
|
|
|
- <div class={"authors"}>作者：张小碗</div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</div>
|
|
|
- <div class={"list_item"}>
|
|
|
- <div class={"item_lay"}>
|
|
|
- <a class={"item_link"}>
|
|
|
- <img src={getImageUrl("temp_works_2.png")} />
|
|
|
- <div class={"item_txt"}>
|
|
|
- <div class={"name"}>骨科手术导航机器人</div>
|
|
|
- <div class={"authors"}>作者：张小碗</div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class={"item_lay"}>
|
|
|
- <a class={"item_link"}>
|
|
|
- <img src={getImageUrl("temp_works_2.png")} />
|
|
|
- <div class={"item_txt"}>
|
|
|
- <div class={"name"}>骨科手术导航机器人</div>
|
|
|
- <div class={"authors"}>作者：张小碗</div>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ ) : (
|
|
|
+ <div class={"ant-list-empty-text"}>
|
|
|
+ <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ )}
|
|
|
+
|
|
|
<div class={"list_more"}>
|
|
|
- <a>
|
|
|
+ <RouterLink to={`/detail/${item._id}`}>
|
|
|
查看更多
|
|
|
<ArrowRightOutlined class={"arrow"} />
|
|
|
- </a>
|
|
|
+ </RouterLink>
|
|
|
</div>
|
|
|
</TabPane>
|
|
|
);
|
|
|
@@ -220,6 +241,7 @@ const page = css`
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
.item_txt {
|
|
|
position: absolute;
|
|
|
left: 0;
|
