feat: 首页大类查看更多，题目列表标签

2023-10-27 22:57:40 +08:00
parent e7b6b11f8a
commit c1093fa556
5 changed files with 165 additions and 22 deletions
--- 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 && (
-                    <div className="first-category-more">
+                    <div className="first-category-more" onClick={() => setOpenMoreFlag(true)}>
                        更多
                        <RightOutlined />
                    </div>
@@ -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 (
+            <div className="first-category-more-list">
+                {categoryList.slice(7).map((categoryModuleItem, categoryModuleIndex) => {
+                    return (
+                        <div
+                            className="first-category-item"
+                            key={`first_more_category_${categoryModuleItem.id}`}
+                            style={{
+                                backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`,
+                            }}
+                            onClick={onChangeCategoryMore(
+                                categoryModuleItem
+                            )}
+                        >
+                            <div className="first-category-item-title">
+                                {categoryModuleItem.categoryName}
+                            </div>
+                            <div className="first-category-item-count">
+                                {formatTotal(categoryModuleItem.subjectCount)}道题
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
    /**
     * 选择标签-支持单选（多选）
     * @param {*} categoryId 一级分类id
@@ -291,6 +355,14 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
                    {secondCategoryList?.length > 0 && this.renderSecondContainer()}
                </Fragment>
            )} */}
+            <Modal
+                open={openMoreFlag}
+                footer={null}
+                closable={true}
+                centered
+                onCancel={() => setOpenMoreFlag(false)}>
+                {renderMoreBox()}
+            </Modal>
        </div>
    )
 }
--- 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,31 +17,31 @@
            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 {
+            &-active {
                transform: translateY(-8px);
            }
+        }
        .first-category-more {
            display: flex;
            justify-content: center;
@@ -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;
+                    }
+                }
+            }
+        }
+    }
--- a/src/components/question-list/index.jsx
+++ b/src/components/question-list/index.jsx
@@ -45,11 +45,11 @@ const QuestionList = (props) => {

            </div>
            <div className="question-info-tags">
-              {item?.tags?.length > 0 &&
-                item.tags.map((tagsItem, index) => {
+              {item?.labelName?.length > 0 &&
+                item.labelName.map((tagsItem) => {
                  return (
-                    <div className="question-info-tag" key={index} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}>
-                      {tagsItem.name}
+                    <div className="question-info-tag" key={tagsItem} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}>
+                      {tagsItem}
                    </div>
                  );
                })}
--- 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;
--- 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<Record<string, any>[]>([])
    const [questionList, setQuestionList] = useState([])
    const [isShowSpin, setIsShowSpin] = useState(false)
    const [labelList, setLabelList] = useState<string | number>(); // 选中的标签列表
@@ -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<string, any>[]) => {
+        setFirstCategoryList(categoryList)
+        setPromaryCategoryId(id)
+        setLabelList('')
+        setQuestionList([])
+        setPageIndex(1)
+        setTotal(0)
+    }

    return (
        <div className="question-bank-box">
@@ -120,6 +132,7 @@ const QuestionBank = () => {
                                onChangeLabel={onChangeLabel}
                                primaryCategoryId={primaryCategoryId}
                                isMultipleChoice={false}
+                                onChangeCategoryMore={onChangeCategoryMore}
                            />
                        )}
                    </div>