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} /> )}