feat: 修改贡献榜和刷题榜

2023-10-24 23:32:31 +08:00
parent 773dc83fbb
commit caf148860d
9 changed files with 338 additions and 662 deletions
--- a/src/views/question-bank/components/contribution-list/index.jsx
+++ b/src/views/question-bank/components/contribution-list/index.jsx
@@ -1,21 +1,16 @@
 import React, { Fragment, Component } from 'react';
+// import { withRouter } from 'react-router-dom';
 import req from '@utils/request';
 import RankingBox from '../ranking-box';
-import { imgObject, apiName, RankingType } from '../../constant';
+import { apiName, RankingType } from '../../constant';
 import { mockRankingModuleList } from '../../mock';

-const rankingBackImg = {
-    0: imgObject.ranking1Img,
-    1: imgObject.ranking2Img,
-    2: imgObject.ranking3Img,
-};
-
 class ContributionList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            contributionList: mockRankingModuleList[1].rankingList || [],
-            contributeType: 1,
+            contributeType: 0,
            isLoading: false,
        };
    }
@@ -28,13 +23,9 @@ class ContributionList extends Component {
     * 获得贡献榜
     */
    getContributeList() {
-        const { contributeType } = this.state;
-        let params = {
-            contributeType: contributeType,
-        };
        req({
            method: 'post',
-            data: params,
+            data: {},
            url: apiName.getContributeList,
        })
            .then((res) => {
@@ -55,19 +46,15 @@ class ContributionList extends Component {

    /**
     * 切换排行榜
-     * @param {*} type
+     * @param {*} index
     * @returns
     */
-    onChangeRanking = (type) => {
-        this.setState(
-            {
-                contributeType: type,
-                isLoading: true,
-            },
-            () => {
-                this.getContributeList();
-            }
-        );
+    onChangeRanking = (index) => {
+        console.log(index, 'contribute index')
+
+        this.setState({
+            contributeType: index,
+        });
    };

    /**
@@ -84,7 +71,7 @@ class ContributionList extends Component {
                {contributionList?.length > 0 && (
                    <RankingBox
                        isLoading={isLoading}
-                        rankingList={contributionList}
+                        contributionList={contributionList}
                        currentActive={contributeType}
                        rankingType={RankingType.contribution}
                        onHandleRanking={this.onChangeRanking}
--- a/src/views/question-bank/components/contribution-list/index.less
+++ b/src/views/question-bank/components/contribution-list/index.less
@@ -1,151 +0,0 @@
-.ranking-list-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-bottom: 20px;
-    padding: 0px 16px 0px;
-    width: 100%;
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
-    .ranking-list-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        height: 50px;
-        font-size: 16px;
-        color: rgba(0, 0, 0, 0.85);
-        border-bottom: 1px solid #f3f3f6;
-        .ranking-list-title {
-        }
-
-        .ranking-list-btns {
-            display: flex;
-            .ranking-list-btn {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-right: 4px;
-                width: 48px;
-                height: 30px;
-                font-size: 12px;
-                cursor: pointer;
-                transition: all 0.5s;
-                &:last-child {
-                    margin-right: 0px;
-                }
-                &:hover {
-                    @include font-color();
-                }
-            }
-            .ranking-list-btn-active {
-                font-weight: 600;
-                @include font-color();
-                border-bottom: 1px solid rgba(60, 110, 238, 1);
-            }
-        }
-    }
-    .ranking-list {
-        // height: 326px;
-        // overflow-y: scroll;
-        font-size: 14px;
-        .ranking-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 12px 10px 6px;
-            color: #999999;
-            font-size: 14px;
-            cursor: pointer;
-            .ranking-left {
-                display: flex;
-                align-items: center;
-                .ranking-icon {
-                    margin-right: 10px;
-                    // margin-top: 14px;
-                    width: 20px;
-                    height: 26px;
-                    line-height: 17px;
-                    text-align: center;
-                    background-size: 100% 100%;
-                }
-                .ranking-head-img {
-                    margin-right: 4px;
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 50%;
-                    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
-                    .ranking-head-icon {
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 50%;
-                    }
-                }
-
-                .ranking-info {
-                    .ranking-name {
-                        margin-bottom: 2px;
-                        color: #666666;
-                    }
-                    .ranking-department {
-                        font-size: 12px;
-                    }
-                }
-            }
-            .ranking-right {
-                display: flex;
-                align-items: center;
-                color: #c3c3c6;
-            }
-            &:hover {
-                @include box-backgroundColor(0.05);
-            }
-        }
-    }
-    .ranking-btn-go {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto;
-        margin-top: 12px;
-        margin-bottom: 12px;
-        cursor: pointer;
-        width: 230px;
-        height: 36px;
-        border-radius: 30px;
-        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-        @include box-backgroundColor(0.9);
-        .ranking-btn-go-icon {
-            width: 22px;
-            height: 22px;
-            background-size: 100% 100%;
-            margin-right: 4px;
-        }
-        .ranking-btn-text {
-            font-size: 14px;
-            font-weight: bold;
-            color: #fff;
-        }
-        &:hover {
-            font-weight: bold;
-        }
-    }
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    color: transparent;
-}
-.tooltip-info {
-    font-size: 12px;
-}
-.popover-img {
-    margin-left: 4px;
-    cursor: pointer;
-    width: 16px;
-    height: 16px;
-}
--- a/src/views/question-bank/components/practice-list/index.jsx
+++ b/src/views/question-bank/components/practice-list/index.jsx
@@ -0,0 +1,84 @@
+import React, { Fragment, Component } from 'react';
+import req from '@utils/request';
+import RankingBox from '../ranking-box';
+import { apiName, RankingType } from '../../constant';
+import { mockRankingModuleList } from '../../mock';
+
+class PracticeList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            contributionList: mockRankingModuleList[0].rankingList,
+            contributeType: 0,
+            isLoading: false,
+        };
+    }
+
+    componentDidMount() {
+        // this.getPracticeRankList();
+    }
+
+    /**
+     * 获得练习榜
+     */
+    getPracticeRankList() {
+        req({
+            method: 'post',
+            data: {},
+            url: apiName.getPracticeRankList,
+        })
+            .then((res) => {
+                if (res.data && res.data.length > 0) {
+                    this.setState({
+                        contributionList: res.data,
+                        isLoading: false,
+                    });
+                } else {
+                    this.setState({
+                        contributionList: [],
+                        isLoading: false,
+                    });
+                }
+            })
+            .catch((err) => console.log(err));
+    }
+
+    /**
+     * 切换排行榜
+     * @param {*} index
+     * @returns
+     */
+    onChangeRanking = (index) => {
+        console.log(index, 'practice index')
+        this.setState({
+            contributeType: index,
+        });
+    };
+
+    /**
+     * 去练题
+     */
+    onChangeJump = () => {
+        this.props.history.push('/practice-questions');
+    };
+
+    render() {
+        const { contributionList, isLoading, contributeType } = this.state;
+        return (
+            <Fragment>
+                {contributionList?.length > 0 && (
+                    <RankingBox
+                        isLoading={isLoading}
+                        contributionList={contributionList}
+                        currentActive={contributeType}
+                        rankingType={RankingType.practice}
+                        onHandleRanking={this.onChangeRanking}
+                        onHandleJump={this.onChangeJump}
+                    />
+                )}
+            </Fragment>
+        );
+    }
+}
+
+export default PracticeList;
--- a/src/views/question-bank/components/ranking-box/index.jsx
+++ b/src/views/question-bank/components/ranking-box/index.jsx
@@ -1,46 +1,54 @@
-import React from 'react';
-import { Popover, Spin } from 'antd';
-import { debounce } from '@utils';
-import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant';
-import './index.less';
-import { message } from 'antd';
+import React from 'react'
+import { Popover, Spin } from 'antd'
+import { debounce } from '@utils'
+import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant'
+import './index.less'

 const rankingBackImg = {
  0: imgObject.ranking1Img,
  1: imgObject.ranking2Img,
  2: imgObject.ranking3Img,
-};
+}

 export default function RankingBox(props) {
-    const { isLoading, currentActive, rankingList, rankingType } = props;
-    const onChangeRanking = (type) =>
+  const { isLoading = false, currentActive, rankingType, contributionList } = props
+  const onChangeRanking = (index) =>
    debounce(() => {
-            props.onHandleRanking && props.onHandleRanking(type);
-        });
+      props.onHandleRanking && props.onHandleRanking(index)
+    })
  const onJump = debounce(() => {
-        message.destroy()
-        return message.info('敬请期待')
-        props.onHandleJump && props.onHandleJump();
-    });
+    props.onHandleJump && props.onHandleJump()
+  })
+  const tabList = [
+    {
+      tab: '本月排行',
+      key: 'month'
+    },
+    {
+      tab: '总榜',
+      key: 'total'
+    }
+  ]
+  // 获得当前下标的数据
+  let rankingList = contributionList || []
+
  return (
    <div className="ranking-list-box">
      <div className="ranking-list-header">
        <div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
        <div className="ranking-list-btns">
+          {tabList.length > 0 &&
+            tabList.map((item, index) => {
+              return (
                <div
-                        onClick={onChangeRanking(1)}
-                        className={`ranking-list-btn ${currentActive === undefined || currentActive === 1
-                            ? 'ranking-list-btn-active'
-                            : ''
-                            }`}>
-                        本月排行
-                    </div>
-                    <div
-                        onClick={onChangeRanking(2)}
-                        className={`ranking-list-btn ${currentActive === 2 ? 'ranking-list-btn-active' : ''
-                            }`}>
-                        总排行
+                  key={`${rankingType}_${item.key}`}
+                  onClick={onChangeRanking(index)}
+                  className={`ranking-list-btn ${currentActive === index ? 'ranking-list-btn-active' : ''}`}
+                >
+                  {item.tab}
                </div>
+              )
+            })}
        </div>
      </div>
      <Spin spinning={isLoading}>
@@ -53,9 +61,10 @@ export default function RankingBox(props) {
                    <div
                      className="ranking-icon"
                      style={{
-                                                backgroundImage: `url(${rankingBackImg[index]})`,
-                                            }}>
-                                            {index + 1}
+                        backgroundImage: `url(${index <= 2 ? rankingBackImg[index] : imgObject.rankingImg})`,
+                      }}
+                    >
+                      {index > 2 && index + 1}
                    </div>
                    <div className="ranking-head-img">
                      <img src={item.headImg} className="ranking-head-icon" />
@@ -68,21 +77,20 @@ export default function RankingBox(props) {
                      }
                      content={
                        <div className="tooltip-info">
-                                                    <div>{item.erp}</div>
-                                                    <div>{item.organizationFullName}</div>
+                          <div>{item.name}</div>
+                          {/* <div>{item.organizationFullName}</div> */}
                        </div>
-                                            }>
+                      }
+                    >
                      <div className="ranking-info">
                        <div className="ranking-name">{item.name}</div>
-                                                <div className="ranking-department">
-                                                    {item.organizationName}
-                                                </div>
+                        {/* <div className="ranking-department">{item.organizationName}</div> */}
                      </div>
                    </Popover>
                  </div>
                  <div className="ranking-right">🔥 {item.count}</div>
                </div>
-                            );
+              )
            })}
        </div>
      </Spin>
@@ -91,9 +99,10 @@ export default function RankingBox(props) {
          className="ranking-btn-go-icon"
          style={{
            backgroundImage: `url(${imgObject.clickImg})`,
-                    }}></div>
+          }}
+        ></div>
        <div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
      </div>
    </div>
-    );
+  )
 }
--- a/src/views/question-bank/components/ranking-box/index.less
+++ b/src/views/question-bank/components/ranking-box/index.less
@@ -1,10 +1,12 @@
+// @import '@assets/style/mixin.scss';
 .ranking-list-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
-    margin-bottom: 20px;
+  margin: 0 0 20px 16px;
  padding: 0px 16px 0px;
-    width: 100%;
+  width: 310px;
+  max-height: 416px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
@@ -17,6 +19,8 @@
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid #f3f3f6;
+    .ranking-list-title {
+    }

    .ranking-list-btns {
      display: flex;
@@ -25,8 +29,8 @@
        justify-content: center;
        align-items: center;
        margin-right: 4px;
-                padding: 0 8px;
        // width: 48px;
+        padding: 0 10px;
        height: 30px;
        font-size: 12px;
        cursor: pointer;
@@ -46,8 +50,6 @@
    }
  }
  .ranking-list {
-        // height: 326px;
-        // overflow-y: scroll;
    font-size: 14px;
    .ranking-item {
      display: flex;
@@ -61,13 +63,14 @@
        display: flex;
        align-items: center;
        .ranking-icon {
-                    margin-right: 10px;
-                    // margin-top: 14px;
-                    width: 20px;
-                    height: 26px;
-                    line-height: 17px;
-                    text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 8px;
+          width: 24px;
+          height: 24px;
          background-size: 100% 100%;
+          background-repeat: no-repeat;
        }
        .ranking-head-img {
          margin-right: 4px;
@@ -98,7 +101,8 @@
        color: #c3c3c6;
      }
      &:hover {
-                @include box-backgroundColor(0.05);
+        // @include box-backgroundColor(0.05);
+        background-color: rgba(60, 110, 238, 0.05);
      }
    }
  }
@@ -115,6 +119,7 @@
    border-radius: 30px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    background-color: rgba(60, 110, 238, 0.9);
+    // @include box-backgroundColor(0.9);
    .ranking-btn-go-icon {
      width: 22px;
      height: 22px;
--- a/src/views/question-bank/components/ranking-list/index.jsx
+++ b/src/views/question-bank/components/ranking-list/index.jsx
@@ -1,109 +0,0 @@
-import React, { Fragment, Component } from 'react';
-
-import req from '@utils/request';
-import { mockRankingModuleList } from '../../mock';
-import { imgObject, apiName, RankingType } from '../../constant';
-import RankingBox from '../ranking-box';
-
-const rankingBackImg = {
-    0: imgObject.ranking1Img,
-    1: imgObject.ranking2Img,
-    2: imgObject.ranking3Img,
-};
-class RankingList extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            moduleList: [],
-            contributeType: 2,
-            isLoading: true,
-        };
-    }
-
-    componentDidMount() {
-        this.getContributeList();
-    }
-
-    /**
-     * 获得贡献榜
-     */
-    getContributeList() {
-        // let params = {
-        //     contributeType: this.contributeType,
-        // };
-        // req({
-        //     method: 'post',
-        //     data: params,
-        //     url: apiName.getContributeList,
-        // })
-        //     .then((res) => {
-        //         if (res.data && res.data.length > 0) {
-        //             this.setState(
-        //                 {
-        //                     firstCategoryList: res.data,
-        //                     isShowSpin: false,
-        //                 },
-        //                 () => {
-        //                     this.getInterviewSubjectList();
-        //                 }
-        //             );
-        //         } else {
-        //             this.primaryCategoryId = '';
-        //             this.setState({
-        //                 isShowSpin: false,
-        //             });
-        //         }
-        //     })
-        //     .catch((err) => console.log(err));
-
-        this.setState({
-            moduleList: mockRankingModuleList[0].rankingList,
-            isLoading: false,
-        });
-    }
-
-    /**
-     * 切换排行榜
-     * @param {*} type
-     * @returns
-     */
-    onChangeRanking = (type, index) => () => {
-        let { moduleList } = this.state;
-        moduleList[index].currentActive = type;
-        this.setState(
-            {
-                moduleList,
-                isLoading: true,
-            },
-            () => {
-                this.getData();
-            }
-        );
-    };
-
-    onJump = (e) => () => {
-        if (e === 2) {
-            this.props.history.push('/upload-questions');
-        } else {
-            this.props.history.push('/practice-questions');
-        }
-    };
-
-    render() {
-        const { moduleList, isLoading, contributeType } = this.state;
-        return (
-            <Fragment>
-                <RankingBox
-                    isLoading={isLoading}
-                    rankingList={moduleList}
-                    currentActive={contributeType}
-                    rankingType={RankingType.practice}
-                    onHandleRanking={this.onChangeRanking}
-                    onHandleJump={this.onChangeJump}
-                />
-            </Fragment>
-        );
-    }
-}
-
-export default RankingList;
--- a/src/views/question-bank/components/ranking-list/index.less
+++ b/src/views/question-bank/components/ranking-list/index.less
@@ -1,151 +0,0 @@
-.ranking-list-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-bottom: 20px;
-    padding: 0px 16px 0px;
-    width: 100%;
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
-    .ranking-list-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        height: 50px;
-        font-size: 16px;
-        color: rgba(0, 0, 0, 0.85);
-        border-bottom: 1px solid #f3f3f6;
-        .ranking-list-title {
-        }
-
-        .ranking-list-btns {
-            display: flex;
-            .ranking-list-btn {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-right: 4px;
-                width: 48px;
-                height: 30px;
-                font-size: 12px;
-                cursor: pointer;
-                transition: all 0.5s;
-                &:last-child {
-                    margin-right: 0px;
-                }
-                &:hover {
-                    @include font-color();
-                }
-            }
-            .ranking-list-btn-active {
-                font-weight: 600;
-                @include font-color();
-                border-bottom: 1px solid rgba(60, 110, 238, 1);
-            }
-        }
-    }
-    .ranking-list {
-        // height: 326px;
-        // overflow-y: scroll;
-        font-size: 14px;
-        .ranking-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 12px 10px 6px;
-            color: #999999;
-            font-size: 14px;
-            cursor: pointer;
-            .ranking-left {
-                display: flex;
-                align-items: center;
-                .ranking-icon {
-                    margin-right: 10px;
-                    // margin-top: 14px;
-                    width: 20px;
-                    height: 26px;
-                    line-height: 17px;
-                    text-align: center;
-                    background-size: 100% 100%;
-                }
-                .ranking-head-img {
-                    margin-right: 4px;
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 50%;
-                    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
-                    .ranking-head-icon {
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 50%;
-                    }
-                }
-
-                .ranking-info {
-                    .ranking-name {
-                        margin-bottom: 2px;
-                        color: #666666;
-                    }
-                    .ranking-department {
-                        font-size: 12px;
-                    }
-                }
-            }
-            .ranking-right {
-                display: flex;
-                align-items: center;
-                color: #c3c3c6;
-            }
-            &:hover {
-                @include box-backgroundColor(0.05);
-            }
-        }
-    }
-    .ranking-btn-go {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto;
-        margin-top: 12px;
-        margin-bottom: 12px;
-        cursor: pointer;
-        width: 230px;
-        height: 36px;
-        border-radius: 30px;
-        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-        @include box-backgroundColor(0.9);
-        .ranking-btn-go-icon {
-            width: 22px;
-            height: 22px;
-            background-size: 100% 100%;
-            margin-right: 4px;
-        }
-        .ranking-btn-text {
-            font-size: 14px;
-            font-weight: bold;
-            color: #fff;
-        }
-        &:hover {
-            font-weight: bold;
-        }
-    }
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    color: transparent;
-}
-.tooltip-info {
-    font-size: 12px;
-}
-.popover-img {
-    margin-left: 4px;
-    cursor: pointer;
-    width: 16px;
-    height: 16px;
-}
--- a/src/views/question-bank/constant.ts
+++ b/src/views/question-bank/constant.ts
@@ -75,11 +75,13 @@ export const imgObject = {
    clickImg:
        'https://img13.360buyimg.com/imagetools/jfs/t1/222669/25/807/6590/617f4f06Eb2094586/64c39ce3769b8a16.png',
    ranking1Img:
-        'https://img14.360buyimg.com/imagetools/jfs/t1/206730/39/7751/986/617f4fbaE4e23097a/aa94ca31a9c132b2.png',
+        'https://img12.360buyimg.com/imagetools/jfs/t1/110906/3/22471/3750/6214a3bfE392596cf/122c9e4b30948682.png',
    ranking2Img:
-        'https://img10.360buyimg.com/imagetools/jfs/t1/156125/21/27968/948/617f4fbaEcf1da9a9/722ad0917497697a.png',
+        'https://img13.360buyimg.com/imagetools/jfs/t1/211695/8/12987/4360/6214a3bfEd4679fde/4f3c55783bb9119c.png',
    ranking3Img:
-        'https://img12.360buyimg.com/imagetools/jfs/t1/213197/17/2682/958/617f4fbbE06c277a9/03ef4c389c52ab8d.png',
+        'https://img10.360buyimg.com/imagetools/jfs/t1/175261/19/28428/4566/6214a3bfE476e1b0f/ea59084c55001c06.png',
+    rankingImg:
+        'https://img11.360buyimg.com/imagetools/jfs/t1/167264/35/27633/603/6214a3bfEf8feff1d/8d833235e6bc468d.png',
    timeline:
        'https://img13.360buyimg.com/imagetools/jfs/t1/210387/35/7564/555/617f4fbbE0cb305c1/728913d21e650794.png',
    backAllImg:
--- a/src/views/question-bank/index.tsx
+++ b/src/views/question-bank/index.tsx
@@ -4,7 +4,7 @@ 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/ranking-list'
+import RankingList from './components/practice-list'
 import { apiName } from './constant';
 import req from '@utils/request';
 import { Spin } from 'antd';