Merge branch 'bd-dev' of 47.94.45.65:angelo/web-base-h5 into bd-test

components/RankingPopup.vue

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