diff --git a/src/views/question-bank/components/contribution-list/index.jsx b/src/views/question-bank/components/contribution-list/index.jsx index 9fedaa4..ef28431 100644 --- 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 && ( { + 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 ( + + {contributionList?.length > 0 && ( + + )} + + ); + } +} + +export default PracticeList; diff --git a/src/views/question-bank/components/ranking-box/index.jsx b/src/views/question-bank/components/ranking-box/index.jsx index fe17efd..85637f3 100644 --- a/src/views/question-bank/components/ranking-box/index.jsx +++ b/src/views/question-bank/components/ranking-box/index.jsx @@ -1,99 +1,108 @@ -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, -}; + 0: imgObject.ranking1Img, + 1: imgObject.ranking2Img, + 2: imgObject.ranking3Img, +} export default function RankingBox(props) { - const { isLoading, currentActive, rankingList, rankingType } = props; - const onChangeRanking = (type) => - debounce(() => { - props.onHandleRanking && props.onHandleRanking(type); - }); - const onJump = debounce(() => { - message.destroy() - return message.info('敬请期待') - props.onHandleJump && props.onHandleJump(); - }); - return ( -
-
-
{RankingTypeText[rankingType]}
-
-
- 本月排行 -
-
- 总排行 -
-
-
- -
- {rankingList?.length > 0 && - rankingList.map((item, index) => { - return ( -
-
-
- {index + 1} -
-
- -
- - {item.name} -
- } - content={ -
-
{item.erp}
-
{item.organizationFullName}
-
- }> -
-
{item.name}
-
- {item.organizationName} -
-
- -
-
🔥 {item.count}
-
- ); - })} -
- -
+ const { isLoading = false, currentActive, rankingType, contributionList } = props + const onChangeRanking = (index) => + debounce(() => { + props.onHandleRanking && props.onHandleRanking(index) + }) + const onJump = debounce(() => { + props.onHandleJump && props.onHandleJump() + }) + const tabList = [ + { + tab: '本月排行', + key: 'month' + }, + { + tab: '总榜', + key: 'total' + } + ] + // 获得当前下标的数据 + let rankingList = contributionList || [] + + return ( +
+
+
{RankingTypeText[rankingType]}
+
+ {tabList.length > 0 && + tabList.map((item, index) => { + return (
-
{RankingTypeBtnText[rankingType]}
-
+ key={`${rankingType}_${item.key}`} + onClick={onChangeRanking(index)} + className={`ranking-list-btn ${currentActive === index ? 'ranking-list-btn-active' : ''}`} + > + {item.tab} +
+ ) + })}
- ); +
+ +
+ {rankingList?.length > 0 && + rankingList.map((item, index) => { + return ( +
+
+
+ {index > 2 && index + 1} +
+
+ +
+ + {item.name} +
+ } + content={ +
+
{item.name}
+ {/*
{item.organizationFullName}
*/} +
+ } + > +
+
{item.name}
+ {/*
{item.organizationName}
*/} +
+ +
+
🔥 {item.count}
+
+ ) + })} + +
+
+
+
{RankingTypeBtnText[rankingType]}
+
+ + ) } diff --git a/src/views/question-bank/components/ranking-box/index.less b/src/views/question-bank/components/ranking-box/index.less index 5d6ead2..707a83b 100644 --- a/src/views/question-bank/components/ranking-box/index.less +++ b/src/views/question-bank/components/ranking-box/index.less @@ -1,150 +1,155 @@ +// @import '@assets/style/mixin.scss'; .ranking-list-box { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 0 20px 16px; + padding: 0px 16px 0px; + width: 310px; + max-height: 416px; + background-color: #ffffff; + border-radius: 8px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); + .ranking-list-header { display: flex; - flex-direction: column; - justify-content: center; - margin-bottom: 20px; - padding: 0px 16px 0px; + justify-content: space-between; + align-items: center; 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-btns { - display: flex; - .ranking-list-btn { - display: flex; - justify-content: center; - align-items: center; - margin-right: 4px; - padding: 0 8px; - // 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); - } - } + height: 50px; + font-size: 16px; + color: rgba(0, 0, 0, 0.85); + border-bottom: 1px solid #f3f3f6; + .ranking-list-title { } - .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 { + .ranking-list-btns { + display: flex; + .ranking-list-btn { display: flex; - align-items: center; justify-content: center; - margin: 0 auto; - margin-top: 12px; - margin-bottom: 12px; + align-items: center; + margin-right: 4px; + // width: 48px; + padding: 0 10px; + height: 30px; + font-size: 12px; cursor: pointer; - width: 230px; - height: 36px; - border-radius: 30px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); - background-color: rgba(60, 110, 238, 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; + transition: all 0.5s; + &:last-child { + margin-right: 0px; } &:hover { - font-weight: bold; + // @include font-color(); } + } + .ranking-list-btn-active { + font-weight: 600; + // @include font-color(); + border-bottom: 1px solid rgba(60, 110, 238, 1); + } } - &:last-child { - margin-bottom: 0; + } + .ranking-list { + 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 { + 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; + 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); + background-color: rgba(60, 110, 238, 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); + background-color: rgba(60, 110, 238, 0.9); + // @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; + width: 0; + height: 0; + color: transparent; } .tooltip-info { - font-size: 12px; + font-size: 12px; } .popover-img { - margin-left: 4px; - cursor: pointer; - width: 16px; - height: 16px; + margin-left: 4px; + cursor: pointer; + width: 16px; + height: 16px; } diff --git a/src/views/question-bank/components/ranking-list/index.jsx b/src/views/question-bank/components/ranking-list/index.jsx deleted file mode 100644 index cb5778e..0000000 --- a/src/views/question-bank/components/ranking-list/index.jsx +++ /dev/null @@ -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 ( - - - - ); - } -} - -export default RankingList; diff --git a/src/views/question-bank/components/ranking-list/index.less b/src/views/question-bank/components/ranking-list/index.less deleted file mode 100644 index d4e423d..0000000 --- a/src/views/question-bank/components/ranking-list/index.less +++ /dev/null @@ -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; -} diff --git a/src/views/question-bank/constant.ts b/src/views/question-bank/constant.ts index 6ff1a73..33f1d9d 100644 --- 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: diff --git a/src/views/question-bank/index.tsx b/src/views/question-bank/index.tsx index f56dd1f..504eb32 100644 --- 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';