修改tabs切换栏

src/views/home/works.vue

@@ -5,67 +5,69 @@
     <!-- 步骤条 -->
     <van-tabs class="tab-tabs" color="#008cd6" @click="tabClickHandler" v-if="workList && workList.length > 0">
       <van-tab
-        :title="item.taskTypeText"
-        :name="worksLink(1, item.taskType)"
-        v-for="item in workList"
-        :key="item.taskType"
-        :badge="item.nums"
-      ></van-tab>
-    </van-tabs>
-
-    <div :class="big_box" @scroll="scrolling">
-      <!-- 列表 -->
-      <div class="cellMargin" v-for="item in workList" :key="item.taskType">
-        <!-- 标题区域 -->
-        <!-- lz -->
-        <van-cell
-          :value="item.nums"
-          is-link
-          :to="{ path: worksLink(3, item.taskType) }"
-          :id="worksLink(1, item.taskType)"
-        >
-          <!-- 使用 title 插槽来自定义标题 -->
-          <template #title>
-            <span class="titleLeft"> </span>
-            <span class="custom-title">{{ item.taskTypeText }} </span>
-          </template>
-        </van-cell>
-        <!-- 待办区域 -->
-        <div class="marginCls">
-          <!-- <van-empty description="暂无数据" /> -->
-          <van-cell-group>
-            <van-cell
-              @click.stop="isFalgHandler(i, item.taskType, item.id)"
-              v-for="(i, index) in item.dataList"
-              :key="index"
-              class="mainTitle"
-              :value="worksLink(2, item.taskType, i.recStatus ? i.recStatus : i.status)"
-              :label="
-                i.startTime.substring(5, i.startTime.length - 3) + '至' + i.endTime.substring(5, i.endTime.length - 3)
-              "
-              :value-class="iColorClas(item.taskType, i.status)"
-            >
-              <template #title>
-                <span class="custom-title"
-                  >{{ i.taskName }}
-                  <van-tag
-                    class="resetDy"
-                    @click.stop="resetHandler(item.id)"
-                    v-if="i.status == 1 && item.taskType == 3"
-                    type="primary"
-                    >重新调阅</van-tag
-                  ></span
-                >
-              </template>
+        :title="i.taskTypeText"
+        :name="worksLink(1, i.taskType)"
+        v-for="i in workList"
+        :key="i.taskType"
+        :badge="i.nums"
+      >
+        <!-- 列表 -->
+        <div class="cellMargin" v-for="item in workList" :key="item.taskType">
+          <!-- 标题区域 -->
+          <!-- lz -->
+          <van-cell
+            :value="item.nums"
+            is-link
+            :to="{ path: worksLink(3, item.taskType) }"
+            :id="worksLink(1, item.taskType)"
+            v-if="item.taskType==i.taskType"
+          >
+            <!-- 使用 title 插槽来自定义标题 -->
+            <template #title>
+              <span class="titleLeft"> </span>
+              <span class="custom-title">{{ item.taskTypeText }} </span>
+            </template>
+          </van-cell>
+          <!-- 待办区域 -->
+          <div class="marginCls" v-if="item.taskType==i.taskType">
+            <!-- <van-empty description="暂无数据" /> -->
+            <van-cell-group >
+              <van-cell
+              
+                @click.stop="isFalgHandler(i, item.taskType, item.id)"
+                v-for="(i, index) in item.dataList"
+                :key="index"
+                class="mainTitle"
+                :value="worksLink(2, item.taskType, i.recStatus ? i.recStatus : i.status)"
+                :label="
+                  i.startTime.substring(5, i.startTime.length - 3) + '至' + i.endTime.substring(5, i.endTime.length - 3)
+                "
+                :value-class="iColorClas(item.taskType, i.status)"
+              >
+                <template #title>
+                  <span class="custom-title"
+                    >{{ i.taskName }}
+                    <van-tag
+                      class="resetDy"
+                      @click.stop="resetHandler(item.id)"
+                      v-if="i.status == 1 && item.taskType == 3"
+                      type="primary"
+                      >重新调阅</van-tag
+                    ></span
+                  >
+                </template>
 
-              <template #right-icon>
-                <van-icon name="arrow" class="rightIcon" />
-              </template>
-            </van-cell>
-         
-          </van-cell-group>
+                <template #right-icon>
+                  <van-icon name="arrow" class="rightIcon" />
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </div>
         </div>
-      </div>
+      </van-tab>
+    </van-tabs>
+
+    <div :class="big_box">
       <!-- 扫描弹框 -->
       <scandialog ref="scandialog" @input="resultImg" @changeNFC="getNFC"></scandialog>
     </div>
@@ -106,7 +108,7 @@ export default {
   },
   methods: {
     iColorClas(type, status) {
-      if (status == 0 || (type == 0 && status == 1)|| (type == 2 && status == 1)) {
+      if (status == 0 || (type == 0 && status == 1) || (type == 2 && status == 1)) {
         return 'wj-title-blue'
       } else {
         return 'wj-title-orange'
@@ -129,40 +131,7 @@ export default {
         this.$router.push({ path: this.worksLink(4, taskType, i.status, i.id, i) })
       }
     },
-    scrolling(el) {
-      // 滚动条距文档顶部的距离
-      let scrollTop = document.querySelector(`.${this.big_box}`).scrollTop || document.body.scrollTop
-      // 滚动条滚动的距离
-      let scrollStep = scrollTop - this.oldScrollTop
-      console.log('header 滚动距离 ', scrollTop)
-      // 更新——滚动前，滚动条距文档顶部的距离
-      this.oldScrollTop = scrollTop
 
-      //变量windowHeight是可视区的高度
-      let windowHeight = document.querySelector(`.${this.big_box}`).clientHeight || document.body.clientHeight
-      //变量scrollHeight是滚动条的总高度
-      let scrollHeight = document.querySelector(`.${this.big_box}`).scrollHeight || document.body.scrollHeight
-      console.log(scrollTop, 'sssssssssssss')
-      //滚动条到底部的条件
-      if (scrollTop + windowHeight == scrollHeight) {
-        console.log('到了最底')
-        this.active = 5
-        console.log(this.active, 'sss')
-        //你想做的事情
-        return
-      }
-      if (scrollTop >= 260) {
-        this.active = Math.floor(scrollTop / 250)
-      } else {
-        this.active = 0
-      }
-      // 判断是否到了最顶部
-      if (scrollTop <= 0) {
-        console.log('header 到了最顶部')
-        this.active = 0
-      }
-      console.log(this.active)
-    },
     getList() {
       getPanelList().then(res => {
         let { data, code, msg } = res
@@ -283,8 +252,8 @@ export default {
           pathInfo = '/personnelSignature/' + id + '_edit'
         }
         //安全检查跳转
-        if (val == 2 && taskType == 1||(val == 2 && taskType == 2)) {
-          pathInfo = `/securityDetail?id=${id}&enable=${taskType}` 
+        if ((val == 2 && taskType == 1) || (val == 2 && taskType == 2)) {
+          pathInfo = `/securityDetail?id=${id}&enable=${taskType}`
         }
         //履职跳转
         if ((val == 0 && taskType == 1) || (val == 0 && taskType == 2)) {
@@ -322,15 +291,14 @@ export default {
     },
     //tab栏点击
     tabClickHandler(name) {
-      const filePath = `/#${name}`
-      const tempLink = document.createElement('a')
-      tempLink.style.display = 'none'
-      tempLink.href = filePath
-
-      tempLink.setAttribute('target', '_self')
-      document.body.appendChild(tempLink)
-      tempLink.click()
-      document.body.removeChild(tempLink)
+      // const filePath = `/#${name}`
+      // const tempLink = document.createElement('a')
+      // tempLink.style.display = 'none'
+      // tempLink.href = filePath
+      // tempLink.setAttribute('target', '_self')
+      // document.body.appendChild(tempLink)
+      // tempLink.click()
+      // document.body.removeChild(tempLink)
     },
     //重新调阅
     resetHandler(id) {