错题，收藏，已做试题全选优化

src/pages/my/collectQuestions.vue

@@ -14,7 +14,7 @@
     <div class="question-box" id="bottom-view">
       <ul>
         <template v-for="(item, index) in question.list">
-          <li :key="index" @click="listClick(item.question_id)">
+          <li :data-id="item.question_id" :key="index" @click="listClick(item.question_id)" ref="liDom">
             <img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
             <img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
             <img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
@@ -49,14 +49,14 @@
         />
       </div>
     </div>
-    <div class="btn-box">
+    <div class="btn-box" id="btn-box">
       <template v-if="!batchDel.selectShow">
         <div :class="question.list.length != 0 ? 'w-btn' : 'w-btn col2'" @click="batchToolShow">批量管理</div>
         <div class="w-btn col">删除</div>
       </template>
       <template v-else>
         <div class="z-btn" @click="batchDel.selectShow = false">返回</div>
-        <div class="z-btn mar" @click="allSelect">{{ batchDel.countData.length === question.list.length ? '取消全选' : '全选' }}</div>
+        <div class="z-btn mar" @click="allSelect">{{ batchDel.isAllSelect ? '取消全选' : '全选' }}</div>
         <div :class="!batchDel.isDelBtn ? 'z-btn col' : 'z-btn'" @click="batchDelClick">删除</div>
       </template>
     </div>
@@ -78,7 +78,8 @@ export default {
       batchDel: {
         selectShow: false,
         isDelBtn: false,
-        countData: []
+        countData: [],
+        isAllSelect: false
       },
       screen: {
         isShow: false,
@@ -107,19 +108,78 @@ export default {
     batchDelClick() {
       this.batchDel.isDelBtn ? this.del(this.batchDel.countData) : Toast('请选择删除内容')
     },
+    lookup(array, value) {
+      const arr = array.concat([])
+      arr.push(value)
+      arr.sort((a, b) => {
+        return a - b
+      })
+      const index = arr.indexOf(value)
+      if (index === 0) {
+        return arr[index + 1]
+      } else if (index === array.length - 1) {
+        return arr[index - 1]
+      }
+      const resultIndex =
+        arr[index] - arr[index - 1] > arr[index + 1] - arr[index]
+          ? index + 1
+          : index - 1
+      return arr[resultIndex]
+    },
     allSelect() {
-      if (this.batchDel.countData.length === this.question.list.length) {
+      const topView = document.getElementById('top-view')
+      const btnBox = document.getElementById('btn-box')
+      const scrollH = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight
+      const clientDomH = scrollH - (this.computedStyle(topView, 'height') + this.computedStyle(btnBox, 'height'))
+      let countNum = 0
+      const cumulativeValue = []
+      const cumulativeObj = {}
+      this.$refs.liDom.map((item, index) => {
+        countNum += item.clientHeight
+        cumulativeObj[countNum] = item.getAttribute('data-id')
+        cumulativeValue.push(countNum)
+      })
+      if (countNum < clientDomH) {
+        // 直接全选
+        if (this.batchDel.countData.length === this.question.list.length) {
+          this.batchDel.countData = []
+          this.batchDel.isDelBtn = false
+          this.batchDel.isAllSelect = false
+        } else {
+          this.batchDel.countData = []
+          this.question.list.map(item => {
+            this.batchDel.countData.push(item.question_id)
+          })
+          this.batchDel.isDelBtn = true
+          this.batchDel.isAllSelect = true
+        }
+        return false
+      }
+      if (this.batchDel.isAllSelect) {
         this.batchDel.countData = []
         this.batchDel.isDelBtn = false
       } else {
-        this.batchDel.countData = []
-        this.question.list.map(item => {
-          this.batchDel.countData.push(item.question_id)
-        })
+        const getId = cumulativeObj[this.lookup(cumulativeValue, clientDomH)]
+        const listItem = this.question.list
+        for (let i = 0; i < listItem.length; i++) {
+          if (listItem[i].question_id === getId) {
+            this.batchDel.countData.push(listItem[i].question_id)
+            break
+          } else {
+            this.batchDel.countData.push(listItem[i].question_id)
+          }
+        }
         this.batchDel.isDelBtn = true
       }
+      this.batchDel.isAllSelect = !this.batchDel.isAllSelect
+    },
+    computedStyle(dom, style) {
+      return parseInt(window.getComputedStyle(dom, null)[style])
     },
     listClick(id, index) {
+      this.batchDel.selectShow ? this.selectOpt(id) : this.goDetails(id, index)
+    },
+    goDetails(id, index) {
       const pageCount = (index / 50).toString()
       let num = 1
       pageCount.indexOf('.') === -1 ? num = pageCount : num = parseInt(pageCount) + 1
@@ -128,7 +188,7 @@ export default {
         path: '/my/questionsDetails',
         query: {
           page: parseInt(num) === 0 ? 1 : num,
-          type: 2,
+          type: this.activeClass === '0' ? 1 : 3,
           questionType: this.screen.screenVal
         }
       })
@@ -177,6 +237,7 @@ export default {
           }
           this.batchDel.isDelBtn = false
           Toast('删除成功')
+          this.batchDel.isAllSelect = false
           this.question.list.length ? this.initData(true) : this.initData()
         }
       })

src/pages/my/errorQuestionList.vue

@@ -24,7 +24,7 @@
     <div class="question-box" id="bottom-view">
       <ul>
         <template v-for="(item, index) in question.list">
-          <li :key="index" @click="listClick(item.question_id, index)">
+          <li :data-id="item.question_id" :key="index" @click="listClick(item.question_id, index)" ref="liDom">
             <img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
             <img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
             <img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
@@ -59,14 +59,14 @@
         />
       </div>
     </div>
-    <div class="btn-box">
+    <div class="btn-box" id="btn-box">
       <template v-if="!batchDel.selectShow">
         <div :class="question.list.length != 0 ? 'w-btn' : 'w-btn col2'" @click="batchToolShow">批量管理</div>
         <div class="w-btn col">删除</div>
       </template>
       <template v-else>
         <div class="z-btn" @click="batchDel.selectShow = false">返回</div>
-        <div class="z-btn mar" @click="allSelect">{{ batchDel.countData.length === question.list.length ? '取消全选' : '全选' }}</div>
+        <div class="z-btn mar" @click="allSelect">{{ batchDel.isAllSelect ? '取消全选' : '全选' }}</div>
         <div :class="!batchDel.isDelBtn ? 'z-btn col' : 'z-btn'" @click="batchDelClick">删除</div>
       </template>
     </div>
@@ -88,7 +88,8 @@ export default {
       batchDel: {
         selectShow: false,
         isDelBtn: false,
-        countData: []
+        countData: [],
+        isAllSelect: false
       },
       screen: {
         isShow: false,
@@ -117,17 +118,73 @@ export default {
     batchDelClick() {
       this.batchDel.isDelBtn ? this.del(this.batchDel.countData) : Toast('请选择删除内容')
     },
+    lookup(array, value) {
+      const arr = array.concat([])
+      arr.push(value)
+      arr.sort((a, b) => {
+        return a - b
+      })
+      const index = arr.indexOf(value)
+      if (index === 0) {
+        return arr[index + 1]
+      } else if (index === array.length - 1) {
+        return arr[index - 1]
+      }
+      const resultIndex =
+        arr[index] - arr[index - 1] > arr[index + 1] - arr[index]
+          ? index + 1
+          : index - 1
+      return arr[resultIndex]
+    },
     allSelect() {
-      if (this.batchDel.countData.length === this.question.list.length) {
+      const topView = document.getElementById('top-view')
+      const btnBox = document.getElementById('btn-box')
+      const scrollH = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight
+      const clientDomH = scrollH - (this.computedStyle(topView, 'height') + this.computedStyle(btnBox, 'height'))
+      let countNum = 0
+      const cumulativeValue = []
+      const cumulativeObj = {}
+      this.$refs.liDom.map((item, index) => {
+        countNum += item.clientHeight
+        cumulativeObj[countNum] = item.getAttribute('data-id')
+        cumulativeValue.push(countNum)
+      })
+      if (countNum < clientDomH) {
+        // 直接全选
+        if (this.batchDel.countData.length === this.question.list.length) {
+          this.batchDel.countData = []
+          this.batchDel.isDelBtn = false
+          this.batchDel.isAllSelect = false
+        } else {
+          this.batchDel.countData = []
+          this.question.list.map(item => {
+            this.batchDel.countData.push(item.question_id)
+          })
+          this.batchDel.isDelBtn = true
+          this.batchDel.isAllSelect = true
+        }
+        return false
+      }
+      if (this.batchDel.isAllSelect) {
         this.batchDel.countData = []
         this.batchDel.isDelBtn = false
       } else {
-        this.batchDel.countData = []
-        this.question.list.map(item => {
-          this.batchDel.countData.push(item.question_id)
-        })
+        const getId = cumulativeObj[this.lookup(cumulativeValue, clientDomH)]
+        const listItem = this.question.list
+        for (let i = 0; i < listItem.length; i++) {
+          if (listItem[i].question_id === getId) {
+            this.batchDel.countData.push(listItem[i].question_id)
+            break
+          } else {
+            this.batchDel.countData.push(listItem[i].question_id)
+          }
+        }
         this.batchDel.isDelBtn = true
       }
+      this.batchDel.isAllSelect = !this.batchDel.isAllSelect
+    },
+    computedStyle(dom, style) {
+      return parseInt(window.getComputedStyle(dom, null)[style])
     },
     listClick(id, index) {
       this.batchDel.selectShow ? this.selectOpt(id) : this.goDetails(id, index)
@@ -173,12 +230,6 @@ export default {
         this.initData()
       }
     },
-    // scrollDom() {
-    //   const topViewH = document.getElementById('top-view').offsetHeight
-    //   const clientHeight = document.documentElement.clientHeight
-    //   const bottomView = document.getElementById('bottom-view')
-    //   bottomView.style.height = (clientHeight - topViewH) + 'px'
-    // },
     del(ids) {
       const idGroup = Array.isArray(ids) ? ids : [ids]
       const param = {
@@ -196,6 +247,7 @@ export default {
           }
           this.batchDel.isDelBtn = false
           Toast('删除成功')
+          this.batchDel.isAllSelect = false
           this.question.list.length ? this.initData(true) : this.initData()
         }
       })
@@ -470,9 +522,9 @@ export default {
       }
       .opt{
         position: absolute;
-        top: 50%;
+        top: 0.4rem;
         right: 0;
-        -webkit-transform: translateY(-50%);
+        // -webkit-transform: translateY(-50%);
         width:.44rem;
         height:.44rem;
         background:rgba(204,204,204,1);

src/pages/my/questionsList.vue

@@ -24,7 +24,7 @@
     <div class="question-box" id="bottom-view">
       <ul>
         <template v-for="(item, index) in question.list">
-          <li :key="index" @click="listClick(item.question_id, index)" :data-id="item.question_id">
+          <li :data-id="item.question_id" :key="index" @click="listClick(item.question_id, index)" ref="liDom">
             <img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
             <img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
             <img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
@@ -59,14 +59,14 @@
         />
       </div>
     </div>
-    <div class="btn-box">
+    <div class="btn-box" id="btn-box">
       <template v-if="!batchDel.selectShow">
         <div :class="question.list.length != 0 ? 'w-btn' : 'w-btn col2'" @click="batchToolShow">批量管理</div>
         <div class="w-btn col">删除</div>
       </template>
       <template v-else>
         <div class="z-btn" @click="batchDel.selectShow = false">返回</div>
-        <div class="z-btn mar" @click="allSelect">{{ batchDel.countData.length === question.list.length ? '取消全选' : '全选' }}</div>
+        <div class="z-btn mar" @click="allSelect">{{ batchDel.isAllSelect ? '取消全选' : '全选' }}</div>
         <div :class="!batchDel.isDelBtn ? 'z-btn col' : 'z-btn'" @click="batchDelClick">删除</div>
       </template>
     </div>
@@ -89,7 +89,8 @@ export default {
       batchDel: {
         selectShow: false,
         isDelBtn: false,
-        countData: []
+        countData: [],
+        isAllSelect: false
       },
       screen: {
         isShow: false,
@@ -118,18 +119,86 @@ export default {
     batchDelClick() {
       this.batchDel.isDelBtn ? this.del(this.batchDel.countData) : Toast('请选择删除内容')
     },
+    lookup(array, value) {
+      const arr = array.concat([])
+      arr.push(value)
+      arr.sort((a, b) => {
+        return a - b
+      })
+      const index = arr.indexOf(value)
+      if (index === 0) {
+        return arr[index + 1]
+      } else if (index === array.length - 1) {
+        return arr[index - 1]
+      }
+      const resultIndex =
+        arr[index] - arr[index - 1] > arr[index + 1] - arr[index]
+          ? index + 1
+          : index - 1
+      return arr[resultIndex]
+    },
     allSelect() {
-      if (this.batchDel.countData.length === this.question.list.length) {
+      const topView = document.getElementById('top-view')
+      const btnBox = document.getElementById('btn-box')
+      const scrollH = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight
+      const clientDomH = scrollH - (this.computedStyle(topView, 'height') + this.computedStyle(btnBox, 'height'))
+      let countNum = 0
+      const cumulativeValue = []
+      const cumulativeObj = {}
+      this.$refs.liDom.map((item, index) => {
+        countNum += item.clientHeight
+        cumulativeObj[countNum] = item.getAttribute('data-id')
+        cumulativeValue.push(countNum)
+      })
+      if (countNum < clientDomH) {
+        // 直接全选
+        if (this.batchDel.countData.length === this.question.list.length) {
+          this.batchDel.countData = []
+          this.batchDel.isDelBtn = false
+          this.batchDel.isAllSelect = false
+        } else {
+          this.batchDel.countData = []
+          this.question.list.map(item => {
+            this.batchDel.countData.push(item.question_id)
+          })
+          this.batchDel.isDelBtn = true
+          this.batchDel.isAllSelect = true
+        }
+        return false
+      }
+      if (this.batchDel.isAllSelect) {
         this.batchDel.countData = []
         this.batchDel.isDelBtn = false
       } else {
-        this.batchDel.countData = []
-        this.question.list.map(item => {
-          this.batchDel.countData.push(item.question_id)
-        })
+        const getId = cumulativeObj[this.lookup(cumulativeValue, clientDomH)]
+        const listItem = this.question.list
+        for (let i = 0; i < listItem.length; i++) {
+          if (listItem[i].question_id === getId) {
+            this.batchDel.countData.push(listItem[i].question_id)
+            break
+          } else {
+            this.batchDel.countData.push(listItem[i].question_id)
+          }
+        }
         this.batchDel.isDelBtn = true
       }
+      this.batchDel.isAllSelect = !this.batchDel.isAllSelect
+    },
+    computedStyle(dom, style) {
+      return parseInt(window.getComputedStyle(dom, null)[style])
     },
+    // allSelect() {
+    //   if (this.batchDel.countData.length === this.question.list.length) {
+    //     this.batchDel.countData = []
+    //     this.batchDel.isDelBtn = false
+    //   } else {
+    //     this.batchDel.countData = []
+    //     this.question.list.map(item => {
+    //       this.batchDel.countData.push(item.question_id)
+    //     })
+    //     this.batchDel.isDelBtn = true
+    //   }
+    // },
     listClick(id, index) {
       this.batchDel.selectShow ? this.selectOpt(id) : this.goDetails(id, index)
     },
@@ -197,6 +266,7 @@ export default {
           }
           this.batchDel.isDelBtn = false
           Toast('删除成功')
+          this.batchDel.isAllSelect = false
           this.question.list.length ? this.initData(true) : this.initData()
         }
       })
@@ -270,6 +340,7 @@ export default {
       this.initData()
     },
     clear() {
+      this.batchDel.isAllSelect = false
       this.batchDel.selectShow = false
       this.batchDel.isDelBtn = false
       this.batchDel.countData = []