借阅排行榜排序问题

src/views/lengingRanking/index.vue

@@ -52,7 +52,9 @@ export default {
   data() {
     return {
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
-      rankingList: []
+      rankingList: [],
+      itemHeight: 102, // 声明动态高度变量，解决响应式问题
+      scrollHeight: 0 // 声明滚动高度变量
     }
   },
   computed: {
@@ -60,7 +62,7 @@ export default {
       return {
         step: 1.1, // 滚动的速度
         hoverStop: false, // 是否开启鼠标悬停stop
-        singleHeight: 102, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleHeight: this.itemHeight, // 绑定动态计算的单行高度
         openWatch: true,
         waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
         scrollHeight: 0
@@ -124,21 +126,40 @@ export default {
     getBorrowRank() {
       FetchBorrowRank().then((res) => {
         if (res.errCode === 0) {
-          const data = res.data || []
+          const originData = res.data || []
           // 清空原有数据，避免重复
           this.rankingList = []
-          // 批量处理封面
-          const coverPromises = data.map(item => {
+
+          // 批量处理封面：Promise.all保证返回结果顺序和originData完全一致
+          const coverPromises = originData.map((item, index) => {
             const isbn = item.isbn.replace(/\-/g, '')
-            return this.getCoverByISBN(isbn, item)
+            // 每个Promise只负责获取封面，返回封面地址（不直接修改数组）
+            return new Promise((resolve) => {
+              const params = { isbn }
+              FetchCoverByISBN(params).then((cover) => {
+                resolve(cover || '') // 成功返回封面地址
+              }).catch(() => {
+                resolve('') // 失败返回空字符串
+              })
+            })
           })
-          // 所有封面加载完成后更新列表
-          Promise.all(coverPromises).then(() => {
+
+          // 所有封面请求完成后，按后台原始顺序组装数据
+          Promise.all(coverPromises).then((coverList) => {
+            // 核心：按originData的原始顺序，给每个item赋值封面
+            this.rankingList = originData.map((item, index) => {
+              return {
+                ...item, // 保留后台返回的所有字段
+                cover: coverList[index] // 第index个item对应第index个封面（和后台顺序一致）
+              }
+            })
+
             this.$nextTick(() => {
               if (this.$refs.listData) {
                 this.$refs.listData.reset()
               }
             })
+            console.log('和后台顺序一致的列表：', this.rankingList)
           })
         } else {
           this.$message.error('接口错误')
@@ -147,21 +168,6 @@ export default {
         console.error('获取借阅排行失败', err)
         this.$message.error('获取借阅排行失败')
       })
-    },
-    // 重构：返回Promise，方便批量处理
-    getCoverByISBN(isbn, item) {
-      return new Promise((resolve) => {
-        const params = { isbn }
-        FetchCoverByISBN(params).then((res) => {
-          item.cover = res || ''
-          this.rankingList.push(item)
-          resolve()
-        }).catch(() => {
-          item.cover = ''
-          this.rankingList.push(item)
-          resolve()
-        })
-      })
     }
   }
 }