feat: 修改贡献榜和刷题榜

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 (
-        <div className="ranking-list-box">
-            <div className="ranking-list-header">
-                <div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
-                <div className="ranking-list-btns">
-                    <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' : ''
-                            }`}>
-                        总排行
-                    </div>
-                </div>
-            </div>
-            <Spin spinning={isLoading}>
-                <div className="ranking-list">
-                    {rankingList?.length > 0 &&
-                        rankingList.map((item, index) => {
-                            return (
-                                <div className="ranking-item" key={item.id}>
-                                    <div className="ranking-left">
-                                        <div
-                                            className="ranking-icon"
-                                            style={{
-                                                backgroundImage: `url(${rankingBackImg[index]})`,
-                                            }}>
-                                            {index + 1}
-                                        </div>
-                                        <div className="ranking-head-img">
-                                            <img src={item.headImg} className="ranking-head-icon" />
-                                        </div>
-                                        <Popover
-                                            title={
-                                                <div>
-                                                    {item.name}
-                                                </div>
-                                            }
-                                            content={
-                                                <div className="tooltip-info">
-                                                    <div>{item.erp}</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>
-                                        </Popover>
-                                    </div>
-                                    <div className="ranking-right">🔥 {item.count}</div>
-                                </div>
-                            );
-                        })}
-                </div>
-            </Spin>
-            <div className="ranking-btn-go" onClick={onJump}>
+  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 (
+    <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
-                    className="ranking-btn-go-icon"
-                    style={{
-                        backgroundImage: `url(${imgObject.clickImg})`,
-                    }}></div>
-                <div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
-            </div>
+                  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}>
+        <div className="ranking-list">
+          {rankingList?.length > 0 &&
+            rankingList.map((item, index) => {
+              return (
+                <div className="ranking-item" key={item.id}>
+                  <div className="ranking-left">
+                    <div
+                      className="ranking-icon"
+                      style={{
+                        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" />
+                    </div>
+                    <Popover
+                      title={
+                        <div>
+                          {item.name}
+                        </div>
+                      }
+                      content={
+                        <div className="tooltip-info">
+                          <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>
+                    </Popover>
+                  </div>
+                  <div className="ranking-right">🔥 {item.count}</div>
+                </div>
+              )
+            })}
+        </div>
+      </Spin>
+      <div className="ranking-btn-go" onClick={onJump}>
+        <div
+          className="ranking-btn-go-icon"
+          style={{
+            backgroundImage: `url(${imgObject.clickImg})`,
+          }}
+        ></div>
+        <div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
+      </div>
+    </div>
+  )
 }

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;
 }