feat: 个人中心

2023-11-11 23:23:35 +08:00
parent eef18cf769
commit 8a9d22e0aa
7 changed files with 222 additions and 205 deletions
--- a/src/views/brush-questions/index.less
+++ b/src/views/brush-questions/index.less
@@ -80,7 +80,7 @@
    line-height: 35px;
    border-radius: 6px;
    margin-bottom: 5px;
-    height: 500px;
+    max-height: 500px;
    overflow-y: scroll;
 }
 .answer-box {
--- a/src/views/question-bank/index.less
+++ b/src/views/question-bank/index.less
@@ -6,7 +6,7 @@
    border-radius: 5px;
    height: calc(100vh - 90px);
    overflow-y: scroll;
-    .ant-spin-nested-loading {
+    .mask-box {
        flex: 1;
        overflow-y: auto;
        border-radius: 8px;
@@ -20,6 +20,11 @@
            .question-list-box {
                margin-top: 1px;
            }
+            .loading-more{
+                background-color: white;
+                text-align: center;
+                padding-bottom: 15px;
+            }
        }
    }

--- a/src/views/question-bank/index.tsx
+++ b/src/views/question-bank/index.tsx
@@ -1,39 +1,32 @@
-// import { Component } from 'react';
 import { useState, useEffect, memo } from 'react'
-// import { useSearchParams } from 'react-router-dom'
 import QuestionList from '@components/question-list';
 import CategoryList from '@components/category-list';
 import ContributionList from './components/contribution-list';
 import RankingList from './components/practice-list'
 import { apiName } from './constant';
 import req from '@utils/request';
-import { Spin } from 'antd';
 import './index.less';

 const QuestionBank = () => {

    const [firstCategoryList, setFirstCategoryList] = useState<Record<string, any>[]>([])
    const [questionList, setQuestionList] = useState([])
-    const [isShowSpin, setIsShowSpin] = useState(false)
    const [labelList, setLabelList] = useState<string | number>(); // 选中的标签列表
-    const [difficulty, setDiffculty] = useState(0); //困难度（全部）
+    const [difficulty, setDiffculty] = useState(''); //困难度（全部）
    const [total, setTotal] = useState(0); // 总条数
    const [pageIndex, setPageIndex] = useState(0);
    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=' + '参数');
-    // }
+    const [loading, setLoading] = useState(false)
+    const [finished, setFinished] = useState(false)
+    const [switchFlag, setSwitchFlag] = useState(false)
+

    /**
     * 获取大类分类
     */
    const getPrimaryCategoryInfo = () => {
-        setIsShowSpin(true)
        req({
            method: 'post',
            url: apiName.queryPrimaryCategory,
@@ -47,8 +40,6 @@ const QuestionBank = () => {
            })
            .catch((err: string) => {
                console.log(err)
-            }).finally(() => {
-                setIsShowSpin(false)
            })
    }

@@ -60,8 +51,8 @@ const QuestionBank = () => {
        setLabelList('')
        setPromaryCategoryId(item.id)
        setQuestionList([])
-        setPageIndex(1)
        setTotal(0)
+        setPageIndex(1)
    };


@@ -73,24 +64,43 @@ const QuestionBank = () => {
    const onChangeLabel = (secondCategoryId: any, assembleIds: string) => {
        setSecondCategoryId(secondCategoryId)
        setLabelList(assembleIds)
+        setQuestionList([])
+        setTotal(0)
        setPageIndex(1)
    };

    const queryQuestionList = () => {
+        setLoading(true)
        const params = {
            pageNo: pageIndex,
-            pageSize: 10,
+            pageSize: 20,
            labelId: labelList,
            categoryId: secondCategoryId,
-            // subjectDifficult: 1
+            subjectDifficult: difficulty || ''
        }
        req({
            method: 'post',
            url: apiName.getSubjectPage,
            data: params
        }).then(res => {
-            setTotal(res.data.total)
-            setQuestionList(res.data.result)
+            setLoading(false)
+            let lastList = [...questionList]
+            const { total, result } = res.data
+            if (result.length) {
+                lastList = lastList.concat(result)
+                setQuestionList(lastList)
+                setTotal(total)
+                if (result.length < 20 || lastList.length >= total) {
+                    setFinished(true)
+                } else {
+                    setFinished(false)
+                    setSwitchFlag(false)
+                }
+            }
+        }).catch(err => {
+            console.log(err)
+        }).finally(() => {
+            setLoading(false)
        })
    }

@@ -102,10 +112,9 @@ const QuestionBank = () => {

    useEffect(() => {
        if (labelList && secondCategoryId) {
-            // setSearchParams({ second: secondCategoryId, label: labelList })
            queryQuestionList()
        }
-    }, [labelList, pageIndex, secondCategoryId])
+    }, [labelList, pageIndex, secondCategoryId, difficulty])

    /**
   * 更多分类切换
@@ -120,10 +129,34 @@ const QuestionBank = () => {
        setTotal(0)
    }

+    const scrollHandler = e => {
+        let scrollTop = e.target.scrollTop; // listBox 滚动条向上卷曲出去的长度，随滚动变化
+        let clientHeight = e.target.clientHeight; // listBox 的视口可见高度，固定不变
+        let scrollHeight = e.target.scrollHeight; // listBox 的整体高度，随数据加载变化
+        let saveHeight = 30; // 安全距离，距离底部XX时，触发加载
+        let tempVal = scrollTop + clientHeight + saveHeight;
+        // 如果不加入 saveHeight 安全距离，在 scrollTop + clientHeight == scrollHeight 时，触发加载
+        // 加入安全距离，相当于在 scrollTop + clientHeight >= scrollHeight - 30 时，触发加载，比前者更早触发
+        if (tempVal >= scrollHeight) {
+            if (!finished && !switchFlag) {
+                // 数据加载未结束 && 未加锁
+                setPageIndex(pageIndex + 1)
+            }
+            setSwitchFlag(true)
+        }
+    }
+
+    const changeDifficuty = cur => {
+        if (cur === difficulty) return
+        setPageIndex(1)
+        setDiffculty(cur)
+        setQuestionList([])
+    }
+
    return (
        <div className="question-bank-box">
-            <Spin spinning={isShowSpin}>
-                <div className="question-box">
+            <div className='mask-box' onScroll={scrollHandler}>
+                <div className="question-box" >
                    <div className="category-list-box">
                        {firstCategoryList?.length > 0 && (
                            <CategoryList
@@ -141,15 +174,20 @@ const QuestionBank = () => {
                            pageIndex={pageIndex}
                            total={total}
                            questionList={questionList}
-                            // handleChangeSelect={this.handleChangeSelect}
-                            // onChangePagination={this.onChangePagination}
-                            difficulty={difficulty}
-                            // primaryCategoryId={this.primaryCategoryId}
+                            changeDifficuty={changeDifficuty}
                            labelList={labelList}
                        />
                    </div>
+
+                    <div className='loading-more'>{
+                        questionList.length == 0
+                            ? "暂无数据"
+                            : loading && !finished
+                                ? "努力加载中..."
+                                : "我是有底线的（："
+                    }</div>
                </div>
-            </Spin>
+            </div>
            <div className="ranking-box">
                <RankingList />
                <ContributionList />
@@ -157,4 +195,5 @@ const QuestionBank = () => {
        </div>
    );
 }
+
 export default memo(QuestionBank)
--- a/src/views/user-info/index.tsx
+++ b/src/views/user-info/index.tsx
@@ -1,93 +1,117 @@
-import { useState } from 'react'
-import { Form, Row, Col, Input, Button, Card, Radio, DatePicker, ConfigProvider, Upload } from 'antd'
 import Head from '@/imgs/head.jpg'
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
-
+import { Button, Card, Col, Form, Input, Radio, Row } from 'antd'
+import { memo, useState } from 'react'
 import './index.less'

 const { TextArea } = Input

 const layout = {
-    labelCol: { span: 4 },
-    wrapperCol: { span: 10, offset: 1 }
+  labelCol: { span: 4 },
+  wrapperCol: { span: 10, offset: 1 }
 }

 const UserInfo = () => {
-    const [form] = Form.useForm()
-    const [editFlag, setEditFlag] = useState(false)
-    const [loading, setLoading] = useState(false)
+  const [form] = Form.useForm()
+  const [editFlag, setEditFlag] = useState(false)
+  const [loading, setLoading] = useState(false)

-    const onFinish = (values) => {
-        console.log(values)
-    }
+  const onFinish = values => {
+    console.log(values)
+  }

-    const uploadButton = (
-        <div>
-            {loading ? <LoadingOutlined /> : <PlusOutlined />}
-            <div style={{ marginTop: 8 }}>点击上传</div>
-        </div>
-    );
-
-    return <div className='user-info-box'>
-        <Card title='基本信息'>
-            <Form {...layout} colon={false} onFinish={onFinish} form={form}>
-                <Row>
-                    <Col span={16}>
-                        <Form.Item label='用户头像' name='upload' valuePropName="fileList">
-                            {editFlag ? <Upload listType="picture-card" name="avatar">
-                                {/* {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} */}
-                                {uploadButton}
-                            </Upload> : <>
-                                <img className='user-info_header' src={Head} />
-                            </>}
-                        </Form.Item>
-                    </Col>
-                    <Col span={16}>
-                        <Form.Item label='用户昵称' name='nickName'>
-                            {editFlag ? <Input placeholder='请输入昵称' /> : <>
-                                暂无
-                            </>}
-                        </Form.Item>
-                    </Col>
-                    <Col span={16}>
-                        <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别' name='gender'>
-                            {editFlag ? <Radio.Group>
-                                <Radio value={1}>男</Radio>
-                                <Radio value={2}>女</Radio>
-                            </Radio.Group> : <>
-                                未知
-                            </>}
-                        </Form.Item>
-                    </Col>
-                    <Col span={16}>
-                        <Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱' name='email'>
-                            {editFlag ? <Input placeholder='请输入邮箱' /> : <>
-                                暂无
-                            </>}
-                        </Form.Item>
-                    </Col>
-                    <Col span={16}>
-                        <Form.Item label='个人简介' name='introduce'>
-                            {editFlag ? <TextArea placeholder='请输入个人简介' maxLength={500} showCount /> : <>
-                                这个人很懒，什么也没有留下。。。。
-                            </>}
-                        </Form.Item>
-                    </Col>
-
-                    <Col span={16}>
-                        <Form.Item wrapperCol={{ offset: 5 }}>
-                            {
-                                editFlag ? <>
-                                    <Button type='primary' htmlType='submit' style={{ marginRight: '20px' }}>保存</Button>
-                                    <Button onClick={() => setEditFlag(false)}>取消</Button>
-                                </> : <Button type='primary' onClick={() => setEditFlag(true)}>编辑</Button>
-                            }
-                        </Form.Item>
-                    </Col>
-                </Row>
-            </Form>
-        </Card>
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>点击上传</div>
    </div>
+  )
+
+  return (
+    <div className='user-info-box'>
+      <Card title='基本信息'>
+        <Form {...layout} colon={false} form={form}>
+          <Row>
+            <Col span={16}>
+              <Form.Item label='用户头像'>
+                <img className='user-info_header' src={Head} />
+              </Form.Item>
+            </Col>
+            <Col span={16}>
+              {editFlag ? (
+                <Form.Item label='用户昵称' name='nickName'>
+                  <Input placeholder='请输入昵称' />
+                </Form.Item>
+              ) : (
+                <Form.Item label='用户昵称'>
+                  <>暂无</>
+                </Form.Item>
+              )}
+            </Col>
+            <Col span={16}>
+              {editFlag ? (
+                <Form.Item
+                  label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'
+                  name='gender'
+                >
+                  <Radio.Group>
+                    <Radio value={1}>男</Radio>
+                    <Radio value={2}>女</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              ) : (
+                <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'>
+                  <>未知</>
+                </Form.Item>
+              )}
+            </Col>
+            <Col span={16}>
+              {editFlag ? (
+                <Form.Item
+                  label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱'
+                  name='email'
+                >
+                  <Input placeholder='请输入邮箱' />
+                </Form.Item>
+              ) : (
+                <Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱'>
+                  <>暂无</>
+                </Form.Item>
+              )}
+            </Col>
+            <Col span={16}>
+              {editFlag ? (
+                <Form.Item label='个人简介' name='introduce'>
+                  <TextArea placeholder='请输入个人简介' maxLength={500} showCount />
+                </Form.Item>
+              ) : (
+                <Form.Item label='个人简介'>
+                  <>这个人很懒，什么也没有留下。。。。</>
+                </Form.Item>
+              )}
+            </Col>
+
+            <Col span={16}>
+              <Form.Item wrapperCol={{ offset: 5 }}>
+                {editFlag ? (
+                  <>
+                    <Button type='primary' style={{ marginRight: '20px' }} onClick={onFinish}>
+                      保存
+                    </Button>
+                    <Button onClick={() => setEditFlag(false)}>取消</Button>
+                  </>
+                ) : (
+                  <Button type='primary' onClick={() => setEditFlag(true)}>
+                    编辑
+                  </Button>
+                )}
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Card>
+    </div>
+  )
 }

-export default UserInfo
+export default memo(UserInfo)