表格增加用户小头像

src/components/Ranking.vue

@@ -102,7 +102,7 @@
     },
     mounted: function() {
       this.init2();
-      
+
     },
     computed: {
       ...mapGetters({
@@ -150,74 +150,108 @@
           }
         }
 
-        function renderExpTable(tableData) {
+        function renderArenaTable(tableData) {
           tableData = tableData || [];
           var lang = localStorage.getItem('lang') || 'cn';
           var rank = 1;
-          var processData = tableData.map(function(d) {
-            return [rank++, d.username, parseInt(d.exp), d.entertain_win, d.entertain_lose];
+          var processData = tableData.map(function (d) {
+            let ratio = 0
+            if (d.athletic_all > 0) {
+              ratio = (d.athletic_win / d.athletic_all * 100).toFixed(2)
+            }
+            var iconSrc = 'https://sapi.moecube.com:444/avatar/avatar/' + d.username + '/100/pic.png';
+            return [rank++, iconSrc, String(d.username), parseInt(d.pt), d.athletic_win, d.athletic_lose, ratio + "%"];
           });
-          var table = $('#exp_table').DataTable({
+          var table = $('#pt_table').DataTable({
+            "autoWidth": false,
             data: processData,
             pageLength: 25,
             order: [
               [0, "asc"]
             ],
             "ordering": true,
-            columns: [{
-                title: tb_language[lang].rank
+            columns: [
+              {
+                title: tb_language[lang].rank,
+
+              },
+              {
+                title: tb_language[lang].name, // Display icon + username in this column
+
+                render: function (data, type, row) {
+                  var iconSrcWithUsername = row[1]; // 获取图像链接
+                  var username = row[2]; // 获取用户名
+                  return '<div style="display: flex; align-items: center;">' +
+                      '<img src="' + iconSrcWithUsername + '" style="width: 35px; height: 35px; margin-right: 3px;"> ' +
+                      '<a href="#/userinfo?username=' + encodeURIComponent(username) + '">' + username + '</a>' +
+                      '</div>';
+                },
               },
               {
-                title: tb_language[lang].name
+                visible: false, // Hide the username column,
+
               },
               {
-                title: tb_language[lang].exp
+                title: tb_language[lang].pt,
+
               },
               {
-                title: tb_language[lang].win
+                title: tb_language[lang].win,
+
               },
               {
-                title: tb_language[lang].lose
+                title: tb_language[lang].lose,
+
+              },
+              {
+                title: tb_language[lang].wl,
+
               },
             ],
             "columnDefs": [{
-              "render": function(data, type, row) {
+              "render": function (data, type, row) {
                 return "<a href='#/userinfo?username=" + encodeURIComponent(data) + "'>" + data + "</a>";
               },
-              "targets": 1
-            }, ],
-            "language": lang === 'en' ? tb_language.en : tb_language.cn
+              "targets": 2
+            },],
+            "language": tb_language[lang],
           });
-          $(".input-sm").attr("placeholder",placeholder)
+          $(".input-sm").attr("placeholder", placeholder)
+
           return table;
         }
 
-        function renderArenaTable(tableData) {
+        function renderExpTable(tableData) {
           tableData = tableData || [];
           var lang = localStorage.getItem('lang') || 'cn';
           var rank = 1;
-          var processData = tableData.map(function(d) {
-            let ratio = 0
-            if (d.athletic_all > 0) {
-              ratio = (d.athletic_win / d.athletic_all * 100).toFixed(2)
-            }
-            return [rank++, d.username, parseInt(d.pt), d.athletic_win, d.athletic_lose, ratio + "%"];
+          var processData = tableData.map(function (d) {
+            var iconSrc = 'https://sapi.moecube.com:444/avatar/avatar/' + d.username + '/100/pic.png';
+            return [rank++, iconSrc, String(d.username), parseInt(d.exp), d.entertain_win, d.entertain_lose];
           });
-          var table = $('#pt_table').DataTable({
+
+          var table = $('#exp_table').DataTable({
             data: processData,
             pageLength: 25,
-            order: [
-              [0, "asc"]
-            ],
+            order: [[0, "asc"]],
             "ordering": true,
-            columns: [{
+            columns: [
+              {
                 title: tb_language[lang].rank
               },
               {
-                title: tb_language[lang].name
+                title: tb_language[lang].name, // Display icon + username in this column
+                render: function (data, type, row) {
+                  var iconSrcWithUsername = row[1]; // 获取图像链接
+                  var username = row[2]; // 获取用户名
+                  return '<div style="display: flex; align-items: center;"><img src="' + iconSrcWithUsername + '" style="width: 35px; height: 35px; margin-right: 3px;"> <a href="#/userinfo?username=' + encodeURIComponent(username) + '">' + username + '</a></div>';
+                },
               },
               {
-                title: tb_language[lang].pt
+                visible: false, // Hide the username column
+              },
+              {
+                title: tb_language[lang].exp
               },
               {
                 title: tb_language[lang].win
@@ -225,19 +259,16 @@
               {
                 title: tb_language[lang].lose
               },
+            ],
+            "columnDefs": [
               {
-                title: tb_language[lang].wl
+                "targets": [0, 3, 4, 5], // Target other columns (exp, win, lose) to make them non-orderable
+                "orderable": false
               },
             ],
-            "columnDefs": [{
-              "render": function(data, type, row) {
-                return "<a href='#/userinfo?username=" + encodeURIComponent(data) + "'>" + data + "</a>";
-              },
-              "targets": 1
-            }, ],
-            "language": tb_language[lang]
+            "language": lang === 'en' ? tb_language.en : tb_language.cn,
           });
-            $(".input-sm").attr("placeholder",placeholder)
+          $(".input-sm").attr("placeholder", placeholder);
           return table;
         }
         renderPage();
@@ -245,9 +276,9 @@
           renderPage();
           return false;
         })
-     
-    
-      
+
+
+
 
       }
     },
@@ -255,7 +286,7 @@
       'lang-change': function(lang) {
         this.init(lang)
         $("#search").trigger('click')
-        
+
       }
     },
   }
@@ -270,4 +301,17 @@
   .scroll {
     width: 250%;
   }
-</style>
\ No newline at end of file
+</style>
+<style>
+#pt_table tr td:first-child, #pt_table tr th:first-child, #exp_table tr td:first-child, #exp_table tr th:first-child {
+  width: 1%;
+  white-space: nowrap;
+}
+
+#pt_table td, #pt_table th {
+  text-align: left;
+  vertical-align: middle}
+#epx_table td, #exp_table th {
+  text-align: left;
+  vertical-align: middle}
+</style>