fix: 企业关注页面选择分组交互逻辑调整07

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/jfw/modules/app/src/web/staticres/jyapp/big-member/css/ent_follow.css

@@ -184,3 +184,11 @@
 .ent-grouping .grouping-footer .grouping-item-name {
   margin-right: .08rem;
 }
+
+.ent-grouping-fixed{
+  position: fixed;
+  z-index: 9;
+}
+.ent-grouping-normal, .ent-grouping-fixed {
+  width: 100%;
+}

src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/ent_follow.js

@@ -25,7 +25,9 @@ var vNode = {
         activeNames: [],
         groupingList: [],
         selectGroupList: [],
-        groupOffsetTop: 0
+        domTopNum: {
+          top: 0,
+        }
     },
     created: function () {
         var recover = this.recover()
@@ -37,14 +39,24 @@ var vNode = {
     mounted: function () {
         $(this.$refs.jList).scrollTop(this.listInfo.scrollTop)
         this.adjustAddButtonPadding()
-        this.groupOffsetTop = $('.j-header').outerHeight(true)
-        let listScrollTop = $(this.$refs.jList).scrollTop()
-        if(listScrollTop === 0) {
-          // 删除van-sticky的fixed类名，防止滚动穿透问题
-          $('.van-sticky').removeClass('van-sticky--fixed')
+        this.domTopNum.top = $('.j-header').outerHeight(true)
+        // 监听$(this.$refs.jList)的滚动值，使用addEventListener监听
+        const jListElement = document.getElementById('jList')
+        if (jListElement) {
+          jListElement.addEventListener('scroll', this.handleScroll);
         }
     },
+    computed: {
+      getListScroll () {
+        return this.listInfo.scrollTop
+      }
+    },
     methods: {
+        handleScroll(event) {
+          // 获取滚动值
+          const scrollTop = event.target.scrollTop;
+          this.listInfo.scrollTop = scrollTop
+        },
         recover: function () {
             var excludeKey = ['sessStorageKey']
             var $data = sessionStorage.getItem(this.sessStorageKey)
@@ -225,17 +237,12 @@ var vNode = {
               }
             })
           }
-          $(this.$refs.jList).scrollTop(0)
           this.listInfo.pageNum = 0
           this.getEntFollowList({
             pageNum: this.listInfo.pageNum,
             group: lengthBool ? this.selectGroupList.map(s => s.id).join(',') : ''
           })
-          let listScrollTop = $(this.$refs.jList).scrollTop()
-          if(listScrollTop === 0) {
-            // 删除van-sticky的fixed类名，防止滚动穿透问题
-            $('.van-sticky').removeClass('van-sticky--fixed')
-          }
+          $('.j-main').scrollTop(0)
         },
         groupManage: function () {
             location.href = '/jy_mobile/entgroup/index'

src/jfw/modules/app/src/web/templates/big-member/page_ent_follow.html

@@ -34,9 +34,9 @@
             </button>
         </div>
         <div class="j-container" v-else key="list">
-            <div class="j-main" ref="jList">
+            <div id="jList" class="j-main" ref="jList">
                 <div>
-                  <van-sticky :offset-top="groupOffsetTop">
+                  <div class="ent-grouping-normal" v-if="!getListScroll">
                     <van-collapse class="ent-grouping" v-model="activeNames">
                       <van-collapse-item title="企业分组" name="1">
                         <div class="grouping-list">
@@ -52,7 +52,24 @@
                         </div>
                       </van-collapse-item>
                     </van-collapse>
-                  </van-sticky>
+                  </div>
+                  <div class="ent-grouping-fixed" :style="domTopNum" v-else>
+                    <van-collapse class="ent-grouping" v-model="activeNames">
+                      <van-collapse-item title="企业分组" name="1">
+                        <div class="grouping-list">
+                            <div class="grouping-item" :class="{'active': item.active, 'disabled': !item.count && item.isPut >= 0}" v-for="(item, index) in groupingList" :key="index" @click="changeGrouping(item)">
+                                <span class="grouping-item-name">${ item.name }</span>
+                                <span v-if="item.name === '全部'" class="grouping-item-count">${ listInfo.count }</span>
+                                <span v-else class="grouping-item-count">${ item.count }</span>
+                            </div>
+                        </div>
+                        <div class="grouping-footer" @click="groupManage()">
+                          <span class="grouping-item-name">分组管理</span>
+                          <van-icon color="#2ABED1" name="arrow" />
+                        </div>
+                      </van-collapse-item>
+                    </van-collapse>
+                  </div>
                     <van-pull-refresh v-model="listInfo.refreshing" @refresh="onRefresh">
                         <van-list
                             v-model="listInfo.loading"