feat: 修改首页分类

src/views/question-bank/index.tsx

@@ -1,4 +1,5 @@
-import CategoryList from '@components/category-list'
+// import CategoryList from '@components/category-list'
+import CategoryList from '@components/category-list/index-new.jsx'
 import QuestionList from '@components/question-list'
 import req from '@utils/request'
 import { memo, useEffect, useState } from 'react'
@@ -8,59 +9,31 @@ import { apiName } from './constant'
 import './index.less'
 
 const QuestionBank = () => {
-  const [firstCategoryList, setFirstCategoryList] = useState<Record<string, any>[]>([])
   const [questionList, setQuestionList] = useState([])
   const [labelList, setLabelList] = useState<string | number>() // 选中的标签列表
   const [difficulty, setDiffculty] = useState('') //困难度（全部）
   const [total, setTotal] = useState(0) // 总条数
   const [pageIndex, setPageIndex] = useState(0)
-  const [primaryCategoryId, setPromaryCategoryId] = useState('') //第一个大类id
   const [secondCategoryId, setSecondCategoryId] = useState('')
 
+  const [selectedValue, setSelectedValue] = useState({
+    primaryId: '', // 大类ID
+    categoryId: '', // 二级分类ID,
+    labelId: '' // 标签ID
+  })
+
   const [loading, setLoading] = useState(false)
   const [finished, setFinished] = useState(false)
   const [switchFlag, setSwitchFlag] = useState(false)
 
-  /**
-   * 获取大类分类
-   */
-  const getPrimaryCategoryInfo = () => {
-    req({
-      method: 'post',
-      url: apiName.queryPrimaryCategory,
-      data: { categoryType: 1 }
-    })
-      .then((res: Record<string, any>) => {
-        if (res.data && res.data.length > 0) {
-          setPromaryCategoryId(res.data[0].id)
-          setFirstCategoryList(res.data)
-        }
-      })
-      .catch((err: string) => {
-        console.log(err)
-      })
-  }
-
-  /**
-   * 切换一级分类
-   * @param {*} e
-   */
-  const onChangeCategory = (item: Record<string, any>) => {
-    setLabelList('')
-    setPromaryCategoryId(item.id)
-    setQuestionList([])
-    setTotal(0)
-    setPageIndex(1)
-  }
-
   /**
    * 选择标签时，请求列表数据
    * @param {*} secondCategoryId 一级分类id
    * @param {*} assembleIds 三级标签 assembleIds
    */
-  const onChangeLabel = (secondCategoryId: any, assembleIds: string) => {
-    setSecondCategoryId(secondCategoryId)
-    setLabelList(assembleIds)
+  const onChangeLabel = values => {
+    console.log(values)
+    setSelectedValue(values)
     setQuestionList([])
     setTotal(0)
     setPageIndex(1)
@@ -71,8 +44,8 @@ const QuestionBank = () => {
     const params = {
       pageNo: pageIndex,
       pageSize: 20,
-      labelId: labelList,
-      categoryId: secondCategoryId,
+      labelId: selectedValue.labelId,
+      categoryId: selectedValue.categoryId,
       subjectDifficult: difficulty || ''
     }
     req({
@@ -105,29 +78,10 @@ const QuestionBank = () => {
   }
 
   useEffect(() => {
-    if (!primaryCategoryId) {
-      getPrimaryCategoryInfo()
-    }
-  }, [])
-
-  useEffect(() => {
-    if (labelList && secondCategoryId) {
+    if (selectedValue.labelId) {
       queryQuestionList()
     }
-  }, [labelList, pageIndex, secondCategoryId, difficulty])
-
-  /**
-   * 更多分类切换
-   * @param {*} e
-   */
-  const onChangeCategoryMore = (id: string, categoryList: Record<string, any>[]) => {
-    setFirstCategoryList(categoryList)
-    setPromaryCategoryId(id)
-    setLabelList('')
-    setQuestionList([])
-    setPageIndex(1)
-    setTotal(0)
-  }
+  }, [pageIndex, selectedValue.labelId, difficulty])
 
   const scrollHandler = e => {
     let scrollTop = e.target.scrollTop // listBox 滚动条向上卷曲出去的长度，随滚动变化
@@ -158,16 +112,7 @@ const QuestionBank = () => {
       <div className='mask-box' onScroll={scrollHandler}>
         <div className='question-box'>
           <div className='category-list-box'>
-            {firstCategoryList?.length > 0 && (
-              <CategoryList
-                onChangeCategory={onChangeCategory}
-                categoryList={firstCategoryList}
-                onChangeLabel={onChangeLabel}
-                primaryCategoryId={primaryCategoryId}
-                isMultipleChoice={false}
-                onChangeCategoryMore={onChangeCategoryMore}
-              />
-            )}
+            <CategoryList onChangeLabel={onChangeLabel} />
           </div>
           <div className='question-list-box'>
             <QuestionList