排行榜样式修正
This commit is contained in:
parent
a94360dc4e
commit
57ca6f3291
|
|
@ -44,14 +44,15 @@
|
|||
<view v-else class="ranking-list-container">
|
||||
<!-- 当前用户排名(高亮显示) -->
|
||||
<view v-if="currentUserRank" class="my-ranking-card">
|
||||
<view class="my-ranking-header">
|
||||
<text class="my-label">我</text>
|
||||
<view class="my-avatar">
|
||||
<text class="avatar-text">{{ getAvatarText(currentUserRank.userName) }}</text>
|
||||
</view>
|
||||
<text class="my-rank">第{{ currentUserRank.rank }}名</text>
|
||||
</view>
|
||||
|
||||
<view class="my-ranking-stats">
|
||||
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">我</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">第{{ currentUserRank.rank }}名</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ currentUserRank.addNum }}</text>
|
||||
</view>
|
||||
|
|
@ -95,9 +96,7 @@
|
|||
|
||||
<!-- 名称 -->
|
||||
<view class="name-col">
|
||||
<view class="user-avatar">
|
||||
<text class="avatar-text">{{ getAvatarText(item.userName) }}</text>
|
||||
</view>
|
||||
|
||||
<text class="user-name">{{ item.userName }}</text>
|
||||
</view>
|
||||
|
||||
|
|
@ -147,27 +146,39 @@ const rankingData = ref({
|
|||
// 当前用户ID
|
||||
const userStore = useUserStore();
|
||||
const currentUserId = computed(() => {
|
||||
const userId = userStore.userInfo?.id || userStore.userInfo?.userId || '';
|
||||
const userId = userStore.userInfo?.user.userId;
|
||||
console.log('userId',userStore.userInfo.user.userId);
|
||||
|
||||
return String(userId); // 确保返回字符串类型,与接口数据一致
|
||||
});
|
||||
|
||||
// 当前显示的排行榜列表
|
||||
// 当前显示的排行榜列表(原始数据,不修改)
|
||||
const currentRankingList = computed(() => {
|
||||
return rankingData.value[currentTab.value] || [];
|
||||
});
|
||||
|
||||
// 当前用户的排名信息
|
||||
// 当前用户的排名信息(从排行榜数据中查找并提取,不修改原数据)
|
||||
const currentUserRank = computed(() => {
|
||||
const list = currentRankingList.value;
|
||||
const userId = currentUserId.value;
|
||||
|
||||
// 如果没有用户ID,返回null
|
||||
if (!userId) return null;
|
||||
|
||||
const index = list.findIndex(item => String(item.userId) === String(userId));
|
||||
if (index === -1) return null;
|
||||
// 在排行榜数据中查找自己的ID
|
||||
const userItem = list.find(item => String(item.userId) === String(userId));
|
||||
|
||||
// 如果找不到,返回null
|
||||
if (!userItem) return null;
|
||||
|
||||
// 计算排名(索引+1)
|
||||
const rank = list.findIndex(item => String(item.userId) === String(userId)) + 1;
|
||||
|
||||
console.log('userrank',rank);
|
||||
// 返回用户信息的副本,添加排名信息(不修改原数据)
|
||||
return {
|
||||
...list[index],
|
||||
rank: index + 1
|
||||
...userItem,
|
||||
rank: rank
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -334,7 +345,7 @@ onMounted(() => {
|
|||
.my-ranking-card {
|
||||
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
padding: 24rpx 0;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
|
|
@ -345,6 +356,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.my-label {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1976d2;
|
||||
|
|
@ -369,6 +381,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.my-rank {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1976d2;
|
||||
|
|
@ -400,24 +413,25 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.header-col {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
|
||||
&.rank-col {
|
||||
width: 80rpx;
|
||||
flex:1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.name-col {
|
||||
flex: 1;
|
||||
|
||||
text-align: left;
|
||||
padding-left: 16rpx;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.stat-col {
|
||||
width: 100rpx;
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -431,6 +445,8 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
flex:1;
|
||||
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -440,14 +456,13 @@ onMounted(() => {
|
|||
&.is-current-user {
|
||||
background: #f0f7ff;
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-col {
|
||||
width: 80rpx;
|
||||
flex-shrink: 0;
|
||||
flex:1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -468,7 +483,7 @@ onMounted(() => {
|
|||
flex:1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16rpx;
|
||||
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
|
|
@ -494,7 +509,8 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.stat-col {
|
||||
width: 100rpx;
|
||||
flex:1;
|
||||
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const Request = () => {
|
|||
uni.$uv.http.setConfig((config) => {
|
||||
/* config 为默认全局配置*/
|
||||
config.baseURL = 'http://192.168.1.5:4001'; /* 根域名 */
|
||||
config.baseURL = 'https://pm.ccttiot.com/prod-api'; /* 根域名 */
|
||||
// config.baseURL = 'https://pm.ccttiot.com/prod-api'; /* 根域名 */
|
||||
return config
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user