feat: 修改首页分类

This commit is contained in:
秋水浮尘
2023-11-23 01:46:50 +08:00
parent 4ff59f5eda
commit 2f330b22cb
10 changed files with 383 additions and 74 deletions

View File

@@ -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

View File

@@ -42,9 +42,16 @@ const Sex: Record<string, any> = {
2: '女'
}
const normFile = (e: any) => {
if (Array.isArray(e)) {
return e
}
return e?.fileList
}
const UserInfo = () => {
const userInfoStorage = localStorage.getItem('userInfo')
const { loginId = '' } = userInfoStorage ? JSON.parse(userInfoStorage) : {}
const { loginId = '', tokenValue = '' } = userInfoStorage ? JSON.parse(userInfoStorage) : {}
const [form] = Form.useForm()
const [editFlag, setEditFlag] = useState(false)
@@ -130,14 +137,18 @@ const UserInfo = () => {
<Row>
<Col span={16}>
{editFlag ? (
<Form.Item label='用户头像' name='avatar'>
<Form.Item label='用户头像' valuePropName='fileList' getValueFromEvent={normFile}>
<Upload
name='uploadFile'
listType='picture-card'
className='avatar-uploader'
accept='image/*'
showUploadList={false}
action='http://117.72.14.166:4000/upload'
withCredentials
action='/oss/upload'
headers={{
satoken: 'jichi ' + tokenValue
}}
data={{
bucket: 'jichi',
objectName: 'icon'