diff --git a/src/components/category-list/index.jsx b/src/components/category-list/index.jsx
index da17272..88e0013 100644
--- a/src/components/category-list/index.jsx
+++ b/src/components/category-list/index.jsx
@@ -8,7 +8,7 @@ import {
CaretUpOutlined,
} from '@ant-design/icons';
import req from '@utils/request';
-import { Divider, Spin } from 'antd';
+import { Divider, Spin, Modal } from 'antd';
import _ from 'lodash';
import './index.less';
import { apiName, imgObject } from './constant';
@@ -32,12 +32,25 @@ const categoryShowCount = 4;
const cacheMap = {}
+/**
+ * 上万后展示 W+
+ * @param {*} total
+ * @returns
+ */
+const formatTotal = (total) => {
+ if (total >= 10000) {
+ return Math.floor(total / 10000) + 'W+';
+ }
+ return total;
+}
+
const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
const [secondCategoryList, setSecondCategoryList] = useState([])
const [currentActive, setCurrentActive] = useState(categoryList[0])
const [isPutAway, setIsPutAway] = useState(true)
const [loading, setLoading] = useState(false)
const [currentLabelIndex, setCurrentLabelIndex] = useState([])
+ const [openMoreFlag, setOpenMoreFlag] = useState(false)
const getLabels = (id) => {
@@ -126,7 +139,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
);
})}
{categoryList.length > 7 && (
-
+
setOpenMoreFlag(true)}>
更多
@@ -136,6 +149,57 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
};
+ /**
+ * 点击更多的分类项
+ * @param {*} id
+ * @returns
+ */
+ const onChangeCategoryMore = (cur) => () => {
+ setOpenMoreFlag(false)
+ setCurrentActive(cur)
+ let list = [...categoryList].reduce((pre, item) => {
+ if (item.id !== cur.id) {
+ pre.push(item);
+ } else {
+ pre.unshift(item);
+ }
+ return pre;
+ }, []);
+ props.onChangeCategoryMore && props.onChangeCategoryMore(cur.id, list);
+ };
+
+ /**
+ * 更多分类
+ * @returns
+ */
+ const renderMoreBox = () => {
+ return (
+
+ {categoryList.slice(7).map((categoryModuleItem, categoryModuleIndex) => {
+ return (
+
+
+ {categoryModuleItem.categoryName}
+
+
+ {formatTotal(categoryModuleItem.subjectCount)}道题
+
+
+ );
+ })}
+
+ );
+ };
+
/**
* 选择标签-支持单选(多选)
* @param {*} categoryId 一级分类id
@@ -291,6 +355,14 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
{secondCategoryList?.length > 0 && this.renderSecondContainer()}
)} */}
+
setOpenMoreFlag(false)}>
+ {renderMoreBox()}
+
)
}
diff --git a/src/components/category-list/index.less b/src/components/category-list/index.less
index a393f5e..338e7b5 100644
--- a/src/components/category-list/index.less
+++ b/src/components/category-list/index.less
@@ -1,6 +1,7 @@
.category-box {
.first-category-list {
display: flex;
+ width: 100%;
.first-category-item {
flex-shrink: 1;
display: inline-flex;
@@ -16,30 +17,30 @@
background-color: rgba(0, 0, 0, 0.04);
font-weight: 400;
transition: all 0.5s;
- .first-category-item-title {
+ &-title {
color: #ffffff;
font-size: 14px;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
overflow: hidden;
- /* autoprefixer: off */
-webkit-box-orient: vertical;
display: -webkit-box;
word-wrap: break-word;
word-break: break-all;
}
- .first-category-item-count {
+ &-count {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 16px;
+ word-wrap: break-word;
}
&:hover {
transition: all 0.5s;
transform: translateY(-8px);
}
- }
- .first-category-item-active {
- transform: translateY(-8px);
+ &-active {
+ transform: translateY(-8px);
+ }
}
.first-category-more {
display: flex;
@@ -140,3 +141,60 @@
}
}
}
+
+.ant-modal-content {
+ width: 606px;
+ background-color: #fff;
+ .ant-modal-body {
+ padding: 24px;
+ .first-category-more-list {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ .first-category-item {
+ flex-shrink: 1;
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 10px 8px;
+ padding: 10px 12px;
+ width: 120px;
+ height: 76px;
+ cursor: pointer;
+ border-radius: 4px;
+ background-size: 100% 100%;
+ background-color: rgba(0, 0, 0, 0.04);
+ font-weight: 400;
+ transition: all 0.5s;
+ &-title {
+ color: #ffffff;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ -webkit-line-clamp: 1;
+ overflow: hidden;
+ /* autoprefixer: off */
+ -webkit-box-orient: vertical;
+ display: -webkit-box;
+ word-wrap: break-word;
+ word-break: break-all;
+ }
+ &-count {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.65);
+ line-height: 16px;
+ word-wrap: break-word;
+ }
+ &:hover {
+ transition: all 0.5s;
+ transform: translateY(-8px);
+ }
+ &-active {
+ transform: translateY(-8px);
+ }
+ &:nth-child(4n) {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/components/question-list/index.jsx b/src/components/question-list/index.jsx
index 71c12a3..3681023 100644
--- a/src/components/question-list/index.jsx
+++ b/src/components/question-list/index.jsx
@@ -45,11 +45,11 @@ const QuestionList = (props) => {
- {item?.tags?.length > 0 &&
- item.tags.map((tagsItem, index) => {
+ {item?.labelName?.length > 0 &&
+ item.labelName.map((tagsItem) => {
return (
-
- {tagsItem.name}
+
+ {tagsItem}
);
})}
diff --git a/src/views/question-bank/components/ranking-box/index.less b/src/views/question-bank/components/ranking-box/index.less
index 707a83b..ff0db0c 100644
--- a/src/views/question-bank/components/ranking-box/index.less
+++ b/src/views/question-bank/components/ranking-box/index.less
@@ -5,7 +5,7 @@
justify-content: center;
margin: 0 0 20px 16px;
padding: 0px 16px 0px;
- width: 310px;
+ // width: 310px;
max-height: 416px;
background-color: #ffffff;
border-radius: 8px;
diff --git a/src/views/question-bank/index.tsx b/src/views/question-bank/index.tsx
index 504eb32..7a7e2ac 100644
--- a/src/views/question-bank/index.tsx
+++ b/src/views/question-bank/index.tsx
@@ -1,6 +1,6 @@
// import { Component } from 'react';
import { useState, useEffect, memo } from 'react'
-import { useSearchParams } from 'react-router-dom'
+// import { useSearchParams } from 'react-router-dom'
import QuestionList from '@components/question-list';
import CategoryList from '@components/category-list';
import ContributionList from './components/contribution-list';
@@ -12,7 +12,7 @@ import './index.less';
const QuestionBank = () => {
- const [firstCategoryList, setFirstCategoryList] = useState([])
+ const [firstCategoryList, setFirstCategoryList] = useState
[]>([])
const [questionList, setQuestionList] = useState([])
const [isShowSpin, setIsShowSpin] = useState(false)
const [labelList, setLabelList] = useState(); // 选中的标签列表
@@ -22,12 +22,12 @@ const QuestionBank = () => {
const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
const [secondCategoryId, setSecondCategoryId] = useState('')
- let [searchParams, setSearchParams] = useSearchParams();
- const changeUrlParam = () => {
- // console.log(searchParams.size)
- setSearchParams({ id: 1 })
- // window.history.pushState({}, '0', window.location.href + '?url=' + '参数');
- }
+ // let [searchParams, setSearchParams] = useSearchParams();
+ // const changeUrlParam = () => {
+ // // console.log(searchParams.size)
+ // setSearchParams({ id: 1 })
+ // // window.history.pushState({}, '0', window.location.href + '?url=' + '参数');
+ // }
/**
* 获取大类分类
@@ -102,11 +102,23 @@ const QuestionBank = () => {
useEffect(() => {
if (labelList && secondCategoryId) {
- setSearchParams({ second: secondCategoryId, label: labelList })
+ // setSearchParams({ second: secondCategoryId, label: labelList })
queryQuestionList()
}
}, [labelList, pageIndex, secondCategoryId])
+ /**
+ * 更多分类切换
+ * @param {*} e
+ */
+ const onChangeCategoryMore = (id: string, categoryList: Record[]) => {
+ setFirstCategoryList(categoryList)
+ setPromaryCategoryId(id)
+ setLabelList('')
+ setQuestionList([])
+ setPageIndex(1)
+ setTotal(0)
+ }
return (
@@ -120,6 +132,7 @@ const QuestionBank = () => {
onChangeLabel={onChangeLabel}
primaryCategoryId={primaryCategoryId}
isMultipleChoice={false}
+ onChangeCategoryMore={onChangeCategoryMore}
/>
)}