营地2.0-整合修改

src/views/base/Index.vue

 <template>
-  <el-container>
+  <el-container id="baseId">
     <el-header height="80px">
       <Header :typeFu="1"></Header>
     </el-header>
@@ -35,7 +35,6 @@
       };
     },
     created() {
-      console.log('created');
     },
     mounted() {
       window.addEventListener('scroll', this.handleScrollY, true);

src/views/base/active/Active.vue

@@ -61,12 +61,9 @@
       </div>
     </div>
 
-    <div class="active-list" v-if="activeList.length>0"left-area>
-      <div class="active-list-item" v-for="(item, index) in activeList" :key="index"
-           :style="{
-        '-webkit-animation-delay': (index+1)*0.1+'s',
-        'imation-delay': (index+1)*0.1+'s',
-      }">
+    <div class="active-list" v-if="showActiveList.length>0">
+      <div class="active-list-item" v-for="(item, index) in showActiveList" :key="index"
+           :style="animationTime(index)">
         <div class="inner">
           <div class="active-list-item-bg">
             <el-image :src="item.activityCover" fit="cover"></el-image>
@@ -94,7 +91,8 @@
                 </div>
               </div>
             </div>
-            <div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）</div>
+            <div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）
+            </div>
             <div class="active-list-item-cont-txt3">报名截止时间：{{formatYMDChina(item.bmEndTime)}}</div>
             <div class="active-list-item-cont-bottom" @click="$router.push('/active/'+item.id)">
               <div>查看详情</div>
@@ -125,7 +123,12 @@
           maxDay: null,
         },
         labelList: [],
-        activeList: [],
+
+        activeList: [],// 通过后台数据得到的所有数据
+        showActiveList: [],// 前端页面需要渲染的数据
+        pageSize: 6, //渲染数据的多少根据实际情况设置
+        baseSize: 6,// 渲染基础页数
+        totall: 0, //总数据量
         supportList: [
           {
             lableId: 2,
@@ -146,60 +149,63 @@
       this.getLabelType();
       this.getList();
     },
-    methods: {
-      // 确定按钮
-      searchHandle() {
-        this.getList();
-      },
-      // 重置按钮
-      resetHandle() {
-        this.queryForm = {
-          ids: {},
-          isSupport: null,
-          minDay: null,
-          maxDay: null,
-        };
-        for (let key in this.selectIds) {
-          this.selectIds[key] = [];
+    computed: {
+      // 防抖
+      debounce() {
+        let timer = ''
+        return function (func, wait) {
+          let context = this;
+          if (timer) {
+            clearTimeout(timer);
+          }
+          timer = setTimeout(() => {
+            func.apply(context);
+          }, wait)
         }
-        for (let key in this.checkAll) {
-          this.checkAll[key] = false;
+      }
+    },
+    mounted() {
+      window.addEventListener('scroll', this.dataScroll, true)
+    },
+    destroyed() {
+      window.removeEventListener('scroll', this.dataScroll, true)
+    },
+    methods: {
+      // 卡片出现的动画时间
+      animationTime(index) {
+        let time = 0;
+        time = index - (this.pageSize / this.baseSize - 1) * this.baseSize + 1;
+        return {
+          '-webkit-animation-delay': time * 0.1 + 's',
+          'imation-delay': time * 0.1 + 's',
         }
-        this.isSupport = [];
-        this.checkAllSupp = false;
-        console.log(this.checkAll)
-        this.getList();
       },
-      // 全部-标签操作
-      handleCheckAllChange(val, type = 1, list = [], idx = 0) {
-        let lableIdArr = list.map(item => item.lableId);
-        let arr = val ? lableIdArr : [];
-        if (type == 1) {
-          this.selectIds[idx] = arr;
-          if (arr.length > 0) {
-            this.queryForm.ids[idx] = arr;
-          } else {
-            delete this.queryForm.ids[idx]
-          }
-        } else {
-          this.isSupport = arr;
-          this.queryForm.isSupport = arr.join(',');
+      // 页面滚动获取数据
+      scrollLoadData() {
+        //获取滚动条的高度
+        let scrollTop = document.documentElement.scrollTop;
+        // 获取视口高度
+        let windowHeight = window.innerHeight;
+        //获取页面内容总高度
+        let scrollHeight = document.querySelector('.active-container').scrollHeight;
+        if (scrollTop + windowHeight + 100 >= scrollHeight) {
+          this.pageSize += this.baseSize;
+          this.loadData()
         }
       },
-      // 单个-标签操作
-      handleCheckedItemChange(val, type = 1, list = [], idx = 0) {
-        let lableIdArr = list.map(item => item.lableId);
-        let checkedCount = val.length;
-        if (type == 1) {
-          this.checkAll[idx] = checkedCount === lableIdArr.length;
-          if (checkedCount > 0) {
-            this.queryForm.ids[idx] = val;
-          } else {
-            delete this.queryForm.ids[idx]
+      // 页面滚动方法
+      dataScroll() {
+        //防抖函数
+        this.debounce(this.scrollLoadData, 100)
+      },
+      // 处理列表渲染数据
+      loadData() {
+        for (let i = (this.pageSize - this.baseSize); i < this.pageSize; i++) {
+          if (this.totall >= this.activeList.length) {
+            return false;
           }
-        } else {
-          this.checkAllSupp = checkedCount === lableIdArr.length;
-          this.queryForm.isSupport = val.join(',');
+          this.showActiveList.push(this.activeList[i]);
+          this.totall++;
         }
       },
       // 获取列表
@@ -226,6 +232,7 @@
           }
           this.loading = false;
           this.activeList = res.data.data;
+          this.loadData()
         }).catch(err => {
           console.log(err)
           this.loading = false;
@@ -251,7 +258,62 @@
         }).catch(err => {
           console.log(err)
         })
-      }
+      },
+      // 确定按钮
+      searchHandle() {
+        this.getList();
+      },
+      // 重置按钮
+      resetHandle() {
+        this.queryForm = {
+          ids: {},
+          isSupport: null,
+          minDay: null,
+          maxDay: null,
+        };
+        for (let key in this.selectIds) {
+          this.selectIds[key] = [];
+        }
+        for (let key in this.checkAll) {
+          this.checkAll[key] = false;
+        }
+        this.isSupport = [];
+        this.checkAllSupp = false;
+        console.log(this.checkAll)
+        this.getList();
+      },
+      // 全部-标签操作
+      handleCheckAllChange(val, type = 1, list = [], idx = 0) {
+        let lableIdArr = list.map(item => item.lableId);
+        let arr = val ? lableIdArr : [];
+        if (type == 1) {
+          this.selectIds[idx] = arr;
+          if (arr.length > 0) {
+            this.queryForm.ids[idx] = arr;
+          } else {
+            delete this.queryForm.ids[idx]
+          }
+        } else {
+          this.isSupport = arr;
+          this.queryForm.isSupport = arr.join(',');
+        }
+      },
+      // 单个-标签操作
+      handleCheckedItemChange(val, type = 1, list = [], idx = 0) {
+        let lableIdArr = list.map(item => item.lableId);
+        let checkedCount = val.length;
+        if (type == 1) {
+          this.checkAll[idx] = checkedCount === lableIdArr.length;
+          if (checkedCount > 0) {
+            this.queryForm.ids[idx] = val;
+          } else {
+            delete this.queryForm.ids[idx]
+          }
+        } else {
+          this.checkAllSupp = checkedCount === lableIdArr.length;
+          this.queryForm.isSupport = val.join(',');
+        }
+      },
     }
   }
 </script>
@@ -259,6 +321,7 @@
 <style lang="scss" scoped>
   @import "a/scss/common";
   @import "a/scss/active/activeList";
+
   .active-container {
     padding: 50px;
     color: #333333;

src/views/base/active/ActiveInfo.vue

@@ -56,20 +56,22 @@
       </div>
     </div>
     <div class="active-area">
-      <div class="left-area card-box">
-        <ul v-if="activeContent==1 && anchorList.length>0">
-          <li v-for="(item,index) in anchorList" :key="index">
-            <a @click="anchorSkip(item.id)">{{item.name}}</a>
-          </li>
-        </ul>
-        <ul v-else-if="activeContent==2 && anchorList2.length>0">
-          <li v-for="(item,index) in anchorList2" :key="index">
-            <a @click="anchorSkip(item.id)">{{item.name}}</a>
-          </li>
-        </ul>
-        <ul v-else>
-          <li>暂无锚点</li>
-        </ul>
+      <div class="left-area card-box" ref="left-area">
+        <div class="left-area-box" :style="leftAreaBoxStyle">
+          <ul v-if="activeContent==1 && anchorList.length>0">
+            <li v-for="(item,index) in anchorList" :key="index">
+              <a @click="anchorSkip(item.id)">{{item.name}}</a>
+            </li>
+          </ul>
+          <ul v-else-if="activeContent==2 && anchorList2.length>0">
+            <li v-for="(item,index) in anchorList2" :key="index">
+              <a @click="anchorSkip(item.id)">{{item.name}}</a>
+            </li>
+          </ul>
+          <ul v-else>
+            <li>暂无锚点</li>
+          </ul>
+        </div>
       </div>
       <div class="center-area card-box" :style="{
           'min-height':minHeight+'px'
@@ -204,6 +206,7 @@
         anchorList2: [],
         activeContent: 1,
         minHeight: '339',
+        leftAreaBoxStyle: {}
       }
     },
     created() {
@@ -213,12 +216,53 @@
       }
       this.getInfo()
     },
+    mounted() {
+      window.addEventListener('scroll', this.handleScrollY, true);
+    },
+    destroyed() {
+      window.removeEventListener('scroll', this.handleScrollY, true);
+    },
     methods: {
+      handleScrollY() {
+        // active-area距离顶部的高度
+        let activeAreaToTop = document.querySelector('.active-area').offsetTop;
+        // left-area的宽度
+        let leftAreaWidth = document.querySelector('.left-area').offsetWidth;
+        // footer的高度
+        let footerHeight = document.querySelector('.footer').offsetHeight;
+        // 页面滚动高度
+        let scrollTop = document.documentElement.scrollTop;
+        // left-area-box的高度
+        let Height = document.querySelector('.left-area-box').offsetHeight;
+        // active-info-container的高度
+        let contentHeight = document.querySelector('.active-info-container').offsetHeight;
+        // body的高度
+        let bodyHeight = document.body.offsetHeight;
+
+        if (scrollTop >= (activeAreaToTop - 20)) {
+          if (scrollTop >= (contentHeight - bodyHeight + 180) &&
+            bodyHeight <= (footerHeight + Height + 80)) {
+            this.leftAreaBoxStyle = {
+              position: 'absolute',
+              bottom: '0px',
+              width: leftAreaWidth + 'px',
+            }
+            return false;
+          }
+          this.leftAreaBoxStyle = {
+            position: 'fixed',
+            top: '100px',
+            width: leftAreaWidth + 'px',
+          }
+        } else {
+          this.leftAreaBoxStyle = {}
+        }
+      },
       // 立即报名按钮
       signUp() {
         let allToken = window.localStorage.getItem('index-token-all');
         if (allToken) {
-          this.$store.commit('setIndexIdentity',this.activeInfo.identity)
+          this.$store.commit('setIndexIdentity', this.activeInfo.identity)
           this.$router.push('/signUp/examInfo?code=' + this.activeInfo.identity);
         } else {
           this.$router.push('/baseLogin');
@@ -241,7 +285,7 @@
       },
       // 分离获取html中的锚点
       getAnchor(content) {
-        if(!content) return [];
+        if (!content) return [];
         let attrAndValueArr = content.match(/<a id=\"(.*?)\"><\/a>/g);
         let valueArr = [] // 放所有该属性的值
         let anchorList = [];
@@ -466,12 +510,19 @@
       flex-flow: row;
       align-items: self-start;
       justify-content: space-between;
+      position: relative;
 
       .left-area {
         flex: 1;
         min-width: 200px;
 
+        .left-area-box {
+          border-radius: 4px;
+          background-color: #ffffff;
+        }
+
         ul {
+          margin: 0;
           padding: 20px 10px;
         }
 

src/views/index/recruit/Index.vue

 <template>
   <el-container>
-    <el-header height="104px">
+    <el-header height="118px">
       <Header :typeFu="2"></Header>
       <div class="notify flex" v-if="$store.state.isDisplay_num == 1">
         <div class="flex">
@@ -19,14 +19,16 @@
         <!--        </div>-->
         <div class="active-area">
           <div class="left-area card-box">
-            <ul class="left" v-if="anchorList.length>0">
-              <li :key="index" v-for="(item,index) in anchorList">
-                <a @click="anchorSkip(item.id)">{{item.name}}</a>
-              </li>
-            </ul>
-            <ul v-else>
-              <li>暂无锚点</li>
-            </ul>
+            <div class="left-area-box" :style="leftAreaBoxStyle">
+              <ul class="left" v-if="anchorList.length>0">
+                <li :key="index" v-for="(item,index) in anchorList">
+                  <a @click="anchorSkip(item.id)">{{item.name}}</a>
+                </li>
+              </ul>
+              <ul v-else>
+                <li>暂无锚点</li>
+              </ul>
+            </div>
           </div>
           <div :style="{
           'min-height':minHeight+'px'
@@ -54,13 +56,14 @@
         info: {},
         anchorList: [],
         minHeight: '339',
+        leftAreaBoxStyle: {}
       };
     },
     created() {
       this.info = this.$store.state.info;
-      setTimeout(()=>{
+      setTimeout(() => {
         this.anchorList = this.getAnchor(this.info.student_recruitment_brochure);
-      },1000)
+      }, 1000)
       let code = this.$store.state.indexIdentity;
       //判断是否关闭了营地(关闭了不需要调用setlog)
       let isCloseCamp = this.$store.state.info.on_off;
@@ -74,8 +77,44 @@
 
     },
     mounted() {
+      window.addEventListener('scroll', this.handleScrollY, true);
+    },
+    destroyed() {
+      window.removeEventListener('scroll', this.handleScrollY, true);
     },
     methods: {
+      handleScrollY() {
+        // left-area的宽度
+        let leftAreaWidth = document.querySelector('.left-area').offsetWidth;
+        // footer的高度
+        let footerHeight = document.querySelector('.footer').offsetHeight;
+        // 页面滚动高度
+        let scrollTop = document.documentElement.scrollTop;
+        // left-area-box的高度
+        let Height = document.querySelector('.left-area-box').offsetHeight;
+        // index-container的高度
+        let contentHeight = document.querySelector('.index-container').offsetHeight;
+        // body的高度
+        let bodyHeight = document.body.offsetHeight;
+        if (scrollTop >= (98)) {
+          if (scrollTop >= (contentHeight - bodyHeight + 218) &&
+            bodyHeight <= (footerHeight + Height + 188)) {
+            this.leftAreaBoxStyle = {
+              position: 'absolute',
+              bottom: '0px',
+              width: leftAreaWidth + 'px',
+            }
+            return false;
+          }
+          this.leftAreaBoxStyle = {
+            position: 'fixed',
+            top: '138px',
+            width: leftAreaWidth + 'px',
+          }
+        } else {
+          this.leftAreaBoxStyle = {}
+        }
+      },
       toLogin() {
         let code = this.$store.state.indexIdentity;
         if (!window.localStorage.getItem("index-token-all")) {
@@ -93,7 +132,6 @@
       },
       // 分离获取html中的锚点
       getAnchor(content) {
-        console.log(content)
         if (!content) return [];
         let attrAndValueArr = content.match(/<a id=\"(.*?)\"><\/a>/g);
         let valueArr = [] // 放所有该属性的值
@@ -105,10 +143,7 @@
               .replace(/\"/g, '')
               .replace(/><\/a>/g, ''));
           }
-          console.log(valueArr)
           valueArr.forEach((item, index) => {
-            console.log(item)
-            console.log(document.getElementById(item).parentNode)
             let father = document.getElementById(item).parentNode;
             let value = father.innerHTML.replace(/<(.*?)>/g, '').replace(/<\/(.*?)>/g, '');
             if (value && value.length < 10) {
@@ -167,10 +202,11 @@
       width: 100%;
       display: flex;
       flex-flow: column;
-      margin-top: 104px;
+      margin-top: 118px;
 
       .index-container {
         flex: 1;
+        padding-bottom: 50px;
 
         .title {
           padding: 52px 0 20px 0;
@@ -238,14 +274,21 @@
     flex-flow: row;
     align-items: self-start;
     justify-content: space-between;
+    position: relative;
 
     .left-area {
       flex: 1;
       min-width: 200px;
       background-color: #ffffff;
       border-radius: 8px;
+
+      .left-area-box {
+        border-radius: 8px;
+        background-color: #ffffff;
+      }
+
       ul {
-        padding: 20px ;
+        padding: 20px;
       }
 
       li {
@@ -282,6 +325,7 @@
       width: calc(100% - 100px);
       border-radius: 8px;
       background-color: #ffffff;
+
       .center-area-title {
         text-align: center;
         font-size: 22px;