积分排行插件 – 可以显示周,月和总排行

积分排行插件支持按周、按月和总积分展示用户排名,兼容窄父级侧边栏,并提供当前用户高亮、积分变化箭头和异步加载。

积分排行插件为瓜奇站点提供一个可直接放进页面的用户积分榜模块。它同时支持周榜、月榜和总榜,并针对内容区与窄父级布局做了适配,既能作为页面主模块,也能作为侧边栏小工具使用。

一个模块查看三种排行

  • 周榜:统计本周积分记录,适合短周期活动和每周激励。
  • 月榜:统计本月积分记录,适合月度运营和会员激励。
  • 总榜:按用户当前总积分排名,展示长期累计结果。

管理员可以设置默认打开的榜单、榜单显示人数、是否显示积分变化,以及是否展示当前登录用户的排名。

周榜、月榜和总榜是怎么计算的

周榜和月榜读取瓜奇积分明细中的记录时间,分别汇总当前自然周、当前自然月内获得的正积分。变化值会与上一周或上一个月的积分进行比较,并用向上、向下或持平箭头直观展示。

总榜不按某段时间累计,而是读取每位用户最新一条积分记录中的当前总积分进行排序,因此不会把历史流水重复相加。总榜不显示周期变化值。

初始数据不重复请求

默认榜单数据会合并进现有的 auth.pageData 页面数据中,不会为了首屏再单独发起一次相同请求。用户切换到尚未加载的周榜、月榜或总榜时,再异步获取对应数据;已经获取过的榜单会在组件内复用。

模块不依赖 SSR。数据准备期间沿用项目自带的 gq-gs 骨架屏方案,避免空白区域和突兀跳动。

兼容窄父级和侧边栏

布局根据模块自身可用宽度响应,而不是只判断浏览器窗口宽度。放进窄侧栏时,积分变化会收进用户信息区域,头像、名称和积分列保持清晰;在宽内容区中则会展开为完整表格。

排名信息更容易识别

  • 前三名使用金、银、铜排名图标。
  • 积分变化使用方向箭头与数值共同表达。
  • 当前登录用户所在行会高亮;如果不在当前显示范围内,会在榜单下方单独展示其排名。
  • 头像统一经过项目的头像地址处理方法,避免相对地址造成 404。
  • 列表背景保持克制,当前用户高亮仍然清楚但不会抢过榜单内容。

安装方式

下方提供两个下载项:直接使用版本适合安装部署,源码版本适合开发者查看和二次开发。当前版本为 1.0.0,下载后按瓜奇运行时插件流程安装并启用即可。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索