用户中心显示等级进度

即用户升级到下一级需要多少积分以及进度，响应式 设计，等级样式完全调用主题自带的（或者自己DIY）的样式，

效果如下：

用户未满级升级到下一级

用户满级进度百分百

代码修改

友情提醒，修改代码前一定要备份原文件，防止出错。
我们需要修改的文件路径为b2\User\index.php，在以下代码下添加代码：

<p class="b2-pd">
<span class="user-info-title">
<?php echo __('简介：', 'b2'); ?>
</span>
<span v-html="userData.desc" v-if="userData.desc"></span>
<span class="b2-hover" v-else>
<?php echo __('没有描述', 'b2'); ?>
<a href="<?php echo $url . '/settings'; ?>" v-if="userData.self">
<?php echo __('前往设置', 'b2'); ?>
</a>
</span>
</p>
<?php } ?>
</div>

添加以下代码：

<div class="user-level-progress box b2-radius mg-b">
<h2>
<?php echo __('等级进度', 'b2'); ?>
</h2>
<div class="b2-pd">
<?php
$user_lv = User::get_user_lv($user_id);
$current_level = $user_lv['lv']['name'];
$next_level = $user_lv['lv']['lv_next_name'];
$current_credit = $user_lv['lv']['credit'];
$next_credit = $user_lv['lv']['lv_next_credit'];
$progress = min(100, $user_lv['lv']['lv_ratio']);
?>
<div class="level-info">
<div class="level-info-item">
<span class="level-label"><?php echo __('当前等级：', 'b2'); ?></span>
<span class="level-value lv-icon user-lv b2-<?php echo $user_lv['lv']['lv']; ?>">
<b><?php echo $current_level; ?></b>
<i><?php echo $user_lv['lv']['lv']; ?></i>
</span>
</div>
<?php if ($next_level && $next_level != $current_level) { ?>
<div class="level-info-item">
<span class="level-label"><?php echo __('下一等级：', 'b2'); ?></span>
<span class="level-value lv-icon user-lv b2-<?php echo $user_lv['lv']['lv_next']; ?>">
<b><?php echo $next_level; ?></b>
<i><?php echo $user_lv['lv']['lv_next']; ?></i>
</span>
</div>
<?php } else { ?>
<div class="level-info-item">
<span class="level-value"><?php echo __('当前已是最高等级', 'b2'); ?></span>
</div>
<?php } ?>
</div>
<div class="level-credit">
<div class="level-credit-item">
<span class="credit-label"><?php echo __('当前积分：', 'b2'); ?></span>
<span class="credit-value"><?php echo $current_credit; ?></span>
</div>
<?php if ($next_credit && $next_credit > $current_credit) { ?>
<div class="level-credit-item">
<span class="credit-label"><?php echo __('下一等级所需积分：', 'b2'); ?></span>
<span class="credit-value"><?php echo $next_credit; ?></span>
</div>
<?php } ?>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: <?php echo $progress; ?>%"></div>
</div>
<div class="progress-percentage"><?php echo round($progress, 1); ?>%</div>
</div>
</div>

保存文件然后清除PHP缓存即可。

CSS代码

添加以下CSS至主题目录中的CSS中

/* 用户等级进度条样式 */.user-level-progress h2{
font-size: 20px;
padding: 20px;
font-weight: 600;
}
.level-info{
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
margin-bottom: 15px;
font-size: 14px;
color: #666;
}
.level-info-item{
display: flex;
align-items: center;
gap: 5px;
}
.level-label{
color: #999;
font-size: 13px;
}
.level-value{
color: #333;
font-size: 14px;
}
.level-credit{
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
margin-bottom: 15px;
font-size: 14px;
color: #666;
}
.level-credit-item{
display: flex;
align-items: center;
gap: 5px;
}
.credit-label{
color: #999;
font-size: 13px;
}
.credit-value{
color: #333;
font-size: 14px;
font-weight: 500;
}
.progress-bar-container{
position: relative;
height: 12px;
background-color: #f0f0f0;
border-radius: 6px;
overflow: hidden;
margin-bottom: 10px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.progress-bar{
height: 100%;
background: linear-gradient(90deg, #ff3a55 0%, #ff6b81 100%);
border-radius: 6px;
transition: width 0.5s ease-out;
box-shadow: 0 0 5px rgba(255,58,85,0.3);
}
.progress-percentage{
text-align: right;
font-size: 14px;
color: #ff3a55;
font-weight: 600;
margin-top: 5px;
}
 
/* 响应式设计 */@media (max-width: 768px) {
.level-info,
.level-credit{
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.level-info-item,
.level-credit-item{
width: 100%;
justify-content: space-between;
}
.progress-bar-container{
height: 10px;
}
.user-level-progress h2{
font-size: 14px;
margin-bottom: 12px;
}
.level-label,
.credit-label{
font-size: 12px;
}
.level-value,
.credit-value{
font-size: 13px;
}
.progress-percentage{
font-size: 13px;
}
}

其他拓展

当然，您也可以根据提供的代码简化，让进度条显示在右上角用户面板中，或者用户中心的等级旁边

大家可以根据自己的喜好拓展~