components/RankingPopup.vue

@@ -23,16 +23,15 @@
                 <view class="rank-number">
                   <img src="@/static/images/rank-2.svg" alt="" />
                 </view>
-                <view class="member-code">{{
-                  peopleTopThree[1].memberCode
-                }}</view>
                 <view
                   class="member-name"
                   :class="{ highlight: peopleTopThree[1].isLoginMember == 1 }"
                 >
-                  {{ peopleTopThree[1].memberName | formatMemberName }}
+                  {{ peopleTopThree[1].memberName }}
                 </view>
-
+                <view class="member-code">{{
+                  peopleTopThree[1].memberCode
+                }}</view>
                 <view class="score">{{ peopleTopThree[1].count }}人</view>
               </view>
             </view>
@@ -43,16 +42,15 @@
                 <view class="rank-number">
                   <img src="@/static/images/rank-1.svg" alt="" />
                 </view>
-
-                <view class="member-code">
-                  {{ peopleTopThree[0].memberCode }}
-                </view>
                 <view
                   class="member-name"
                   :class="{ highlight: peopleTopThree[0].isLoginMember == 1 }"
                 >
-                  {{ peopleTopThree[0].memberName | formatMemberName }}
+                  {{ peopleTopThree[0].memberName }}
                 </view>
+                <view class="member-code">{{
+                  peopleTopThree[0].memberCode
+                }}</view>
                 <view class="score">{{ peopleTopThree[0].count }}人</view>
               </view>
             </view>
@@ -63,16 +61,15 @@
                 <view class="rank-number">
                   <img src="@/static/images/rank-3.svg" alt="" />
                 </view>
-                <view class="member-code">{{
-                  peopleTopThree[2].memberCode
-                }}</view>
                 <view
                   class="member-name"
                   :class="{ highlight: peopleTopThree[2].isLoginMember == 1 }"
                 >
-                  {{ peopleTopThree[2].memberName | formatMemberName }}
+                  {{ peopleTopThree[2].memberName }}
                 </view>
-
+                <view class="member-code">{{
+                  peopleTopThree[2].memberCode
+                }}</view>
                 <view class="score">{{ peopleTopThree[2].count }}人</view>
               </view>
             </view>
@@ -81,6 +78,9 @@
 
         <!-- 4-30名滚动列表 -->
         <view class="ranking-list">
+          <!-- <view class="list-header">
+            <text class="list-title">完整排行榜</text>
+          </view> -->
           <scroll-view
             class="scroll-container"
             scroll-y="true"
@@ -93,18 +93,15 @@
             >
               <view class="item-rank">{{ index + 4 }}</view>
               <view class="item-info">
-                <view class="item-code">{{ item.memberCode }}</view>
                 <view
                   class="item-name"
                   :class="{ highlight: item.isLoginMember == 1 }"
                 >
-                  {{ item.memberName | formatMemberName }}
+                  {{ item.memberName }}
                 </view>
+                <view class="item-code">{{ item.memberCode }}</view>
               </view>
-              <view class="item-score">
+              <view class="item-score">{{ item.count }}人</view>
-                <span>{{ item.count }}</span>
-                <span>人</span>
-              </view>
             </view>
             <view class="list-footer" v-if="peopleRemainingList.length === 0">
               <text class="empty-text">暂无更多数据</text>
@@ -150,7 +147,7 @@
                   class="member-name"
                   :class="{ highlight: amountTopThree[1].isLoginMember == 1 }"
                 >
-                  {{ amountTopThree[1].memberName | formatMemberName }}
+                  {{ amountTopThree[1].memberName }}
                 </view>
                 <view class="member-code">{{
                   amountTopThree[1].memberCode
@@ -171,7 +168,7 @@
                   class="member-name"
                   :class="{ highlight: amountTopThree[0].isLoginMember == 1 }"
                 >
-                  {{ amountTopThree[0].memberName | formatMemberName }}
+                  {{ amountTopThree[0].memberName }}
                 </view>
                 <view class="member-code">{{
                   amountTopThree[0].memberCode
@@ -192,7 +189,7 @@
                   class="member-name"
                   :class="{ highlight: amountTopThree[2].isLoginMember == 1 }"
                 >
-                  {{ amountTopThree[2].memberName | formatMemberName }}
+                  {{ amountTopThree[2].memberName }}
                 </view>
                 <view class="member-code">{{
                   amountTopThree[2].memberCode
@@ -222,17 +219,15 @@
             >
               <view class="item-rank">{{ index + 4 }}</view>
               <view class="item-info">
-                <view class="item-code">{{ item.memberCode }}</view>
                 <view
                   class="item-name"
                   :class="{ highlight: item.isLoginMember == 1 }"
                 >
-                  {{ item.memberName | formatMemberName }}
+                  {{ item.memberName }}
                 </view>
+                <view class="item-code">{{ item.memberCode }}</view>
               </view>
-              <view class="item-score">
+              <view class="item-score">{{ formatAmount(item.amount) }}</view>
-                <span>{{ item.amount }}</span>
-              </view>
             </view>
             <view class="list-footer" v-if="amountRemainingList.length === 0">
               <text class="empty-text">暂无更多数据</text>
@@ -283,11 +278,7 @@ export default {
       userInfo: uni.getStorageSync('User') || {},
     }
   },
-  filters: {
+
-    formatMemberName(val) {
-      return val?.slice(0, 8) || ''
-    },
-  },
   methods: {
     // 显示排行榜弹窗（先显示人数排行）
     async showRankingPopups() {
@@ -551,7 +542,7 @@ export default {
     font-size: 24rpx;
     color: #fff;
     text-align: center;
-    margin-bottom: 8rpx;
+
     font-weight: bold;
     max-width: 110rpx;
     overflow: hidden;
@@ -565,7 +556,7 @@ export default {
   .member-code {
     color: #fff;
     text-align: center;
-    margin-top: 8rpx;
+    margin-bottom: 8rpx;
     font-size: 24rpx;
     font-weight: 600;
     overflow: hidden;
@@ -598,18 +589,6 @@ export default {
     background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
   }
 
-  // .member-name {
-  //   font-size: 26rpx;
-  // }
-
-  // .member-code {
-  //   font-size: 26rpx;
-  // }
-
-  // .score {
-  //   font-size: 26rpx;
-  // }
-
   .rank-number img {
     height: 70rpx;
     width: 70rpx;
@@ -646,15 +625,16 @@ export default {
   }
 
   .member-code {
-    font-size: 28rpx;
+    font-size: 22rpx;
     color: #ffd700;
     font-weight: 600;
   }
 
   .score {
     color: #ffd700;
-    font-size: 28rpx;
+    font-size: 24rpx;
     font-weight: 900;
+    min-width: 70rpx;
   }
 }
 
@@ -663,23 +643,17 @@ export default {
   .player-area {
     transform: translateY(10rpx);
   }
+  &::after {
+    width: 110rpx;
+    height: 80rpx;
+    background: linear-gradient(135deg, #cd7f32 0%, #deb887 50%, #cd7f32 100%);
+  }
 
   .rank-number img {
     height: 65rpx;
     width: 65rpx;
     animation: bronze-glow 2s ease-in-out infinite alternate;
   }
-  // .member-name {
-  //   font-size: 22rpx;
-  // }
-
-  // .member-code {
-  //   font-size: 22rpx;
-  // }
-
-  // .score {
-  //   font-size: 22rpx;
-  // }
 }
 
 @keyframes title-bling {
@@ -820,7 +794,7 @@ export default {
 .list-item {
   display: flex;
   align-items: center;
-  padding: 24rpx 30rpx;
+  padding: 24rpx 40rpx;
   border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
   position: relative;
   transition: all 0.3s ease;
@@ -846,8 +820,8 @@ export default {
     margin-right: 20rpx;
     background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
     border-radius: 50%;
-    width: 40rpx;
+    width: 60rpx;
-    height: 40rpx;
+    height: 60rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -855,10 +829,10 @@ export default {
   }
 
   .item-info {
-    flex: 2;
+    flex: 1;
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    justify-content: space-between;
+    margin-left: 15rpx;
   }
 
   .item-name {
@@ -867,6 +841,7 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-bottom: 6rpx;
     font-weight: 600;
 
     &.highlight {
@@ -895,19 +870,19 @@ export default {
   .item-code {
     font-size: 22rpx;
     color: #64748b;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .item-score {
-    flex: 1;
     font-size: 24rpx;
     color: #374151;
     font-weight: bold;
     min-width: 100rpx;
     text-align: center;
+    padding: 8rpx 16rpx;
     border-radius: 20rpx;
-    display: flex;
-    justify-content: flex-end;
   }
 }
 
@@ -923,7 +898,7 @@ export default {
 }
 
 .popup-footer {
-  padding: 20rpx;
+  padding: 25rpx 40rpx 35rpx;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
@@ -936,7 +911,7 @@ export default {
     );
     color: #005bac;
     text-align: center;
-    padding: 20rpx 50rpx;
+    padding: 28rpx 50rpx;
     border-radius: 50rpx;
     font-size: 30rpx;
     font-weight: bold;