update: dist

src/main.js

@@ -6,7 +6,7 @@ import { axios } from './service/api/index';
 import directives from './directives';
 import limit from '@/utils/limiting';
 import scrollToError from '@/assets/common.js';
-
+import '@/utils/sticky.js';
 Vue.config.productionTip = false;
 
 if (process.env.NODE_ENV == 'development') { // eslint-disable-line

src/router/index.js

 import Vue from 'vue';
 import Router from 'vue-router';
 import routes from './routes';
+import store from '@/store';
 
-// import axios from 'axios';
+import axios from 'axios';
 console.log(routes);
 Vue.use(Router);
 
@@ -30,26 +31,25 @@ router.beforeEach((to, from, next) => {
     path = path.replace(to.params[key], `:${key}`);
   });
 
-  // axios
-  //   .get(`/api-plug/rate-limit?requestPath=${path}&enterpriseId=${store.state.marketing.enterpriseId}`)
-  //   .then(limitRes => {
-  //     // 这个接口不规范 不用封装的request
-  //     // code: 0正常 1必填参数未填写 2限流
-  //     if (limitRes.data.resultCode == 1) {
-  //       store.commit('updateLimit', true); // 更新正在限流
-  //       next({ path: '/limit' });
-  //     } else {
-  //       store.commit('updateLimit', false);
-  //       if (to.path == '/limit') {
-  //         next('/');
-  //       }
-  //       next();
-  //     }
-  //   })
-  //   .catch(() => {
-  //     next();
-  //   });
-  next();
+  axios
+    .get(`/api-plug/rate-limit?requestPath=${path}&enterpriseId=${store.state.marketing.enterpriseId}`)
+    .then(limitRes => {
+      // 这个接口不规范 不用封装的request
+      // code: 0正常 1必填参数未填写 2限流
+      if (limitRes.data.resultCode == 1) {
+        store.commit('updateLimit', true); // 更新正在限流
+        next({ path: '/limit' });
+      } else {
+        store.commit('updateLimit', false);
+        if (to.path == '/limit') {
+          next('/');
+        }
+        next();
+      }
+    })
+    .catch(() => {
+      next();
+    });
 });
 
 export default router;

src/router/modules/game.js

@@ -224,9 +224,7 @@ export default {
       path: 'cmh',
       name: '拆盲盒列表',
       component: () => import(/* webpackChunkName: "game" */ '../../views/game/cmh/index.vue'),
-      meta: {
-        // keepAlive: true
-      }
+      meta: {}
     },
     {
       path: 'cmh/statistics/:id',

src/utils/sticky.js

+import Vue from 'vue';
+// 给固定头设置样式
+function doFix(dom, top) {
+  dom.style.position = 'fixed';
+  dom.style.zIndex = '2001';
+  dom.style.top = top + 'px';
+  dom.style.display = 'block';
+}
+// 给固定头取消样式
+function removeFix(dom) {
+  dom.style.position = 'static';
+  dom.style.top = '0';
+  dom.style.zIndex = '0';
+  dom.style.display = 'none';
+}
+// 给固定头添加class
+function addClass(dom, fixtop) {
+  const old = dom.className;
+  if (!old.includes('fixed')) {
+    dom.setAttribute('class', old + ' fixed');
+    doFix(dom, fixtop);
+  }
+}
+// 给固定头移除class
+function removeClass(dom) {
+  const old = dom.className;
+  const idx = old.indexOf('fixed');
+  if (idx !== -1) {
+    const newClass = old.substr(0, idx - 1);
+    dom.setAttribute('class', newClass);
+    removeFix(dom);
+  }
+}
+// 具体判断是否固定头的主函数
+function fixHead(parent, el, top) {
+  /**
+   * myTop 当前元素距离滚动父容器的高度，
+   * fixtop 当前元素需要设置的绝对定位的高度
+   * parentHeight 滚动父容器的高度
+   */
+  let myTop;
+  let fixtop;
+  let parentHeight;
+  // 表头DOM节点
+  const dom = el.lastChild;
+  //   const dom = feakHead;
+  if (parent.tagName) {
+    // 如果是DOM内局部滚动
+    // 当前元素距离滚动父容器的高度= 当前元素距离父元素的高度-父容器的滚动距离-表头的高度
+    myTop = el.offsetTop - parent.scrollTop - dom.offsetHeight;
+    // 父元素高度
+    const height = getComputedStyle(parent).height;
+    parentHeight = Number(height.slice(0, height.length - 2));
+    // 绝对定位高度 = 滚动父容器相对于视口的高度 + 传入的吸顶高度
+    fixtop = top + parent.getBoundingClientRect().top;
+    // 如果自己距离顶部距离大于父元素的高度，也就是自己还没在父元素滚动出来，直接return
+    if (myTop > parentHeight) {
+      return;
+    }
+  } else {
+    // document节点滚动
+    // 当前元素距离滚动父容器的高度 = 当前元素距离视口顶端的距离
+    myTop = el.getBoundingClientRect().top;
+    // 父元素高度 = 视口的高度
+    parentHeight = window.innerHeight;
+    //  绝对定位高度 = 传入的吸顶高度
+    fixtop = top;
+    // 如果自己距离顶部距离大于父元素的高度，也就是自己还没在父元素滚动出来，直接return
+    if (myTop > document.documentElement.scrollTop + parentHeight) {
+      return;
+    }
+  }
+  // 如果 已经滚动的上去不在父容器显示了。直接return
+  if (Math.abs(myTop) > el.offsetHeight + 100) {
+    return;
+  }
+  if (myTop < 0 && Math.abs(myTop) > el.offsetHeight) {
+    // 如果当前表格已经完全滚动到父元素上面，也就是不在父元素显示了。则需要去除fixed定位
+    removeClass(dom);
+  } else if (myTop <= 0) {
+    // 如果表头滚动到 父容器顶部了。fixed定位
+    addClass(dom, fixtop);
+  } else if (myTop > 0) {
+    // 如果表格向上滚动 又滚动到父容器里。取消fixed定位
+    removeClass(dom);
+  } else if (Math.abs(myTop) < el.offsetHeight) {
+    // 如果滚动的距离的绝对值小于自身的高度，也就是说表格向上滚动，刚刚显示出表格的尾部是需要将表头fixed定位
+    addClass(dom, fixtop);
+  }
+}
+// 设置头部固定时表头外容器的宽度写死为表格body的宽度
+function setHeadWidth(el) {
+  // 获取到当前表格个表格body的宽度
+  const width = getComputedStyle(el.getElementsByClassName('el-table__body-wrapper')[0]).width;
+  // 给表格设置宽度。这里默认一个页面中的多个表格宽度是一样的。所以直接遍历赋值，也可以根据自己需求，单独设置
+  const tableParent = el.getElementsByClassName('el-table__header-wrapper');
+  feakHead.style.width = width;
+  for (let i = 0; i < tableParent.length; i++) {
+    tableParent[i].style.width = width;
+  }
+}
+function cloneNode(el) {
+  // 复制一个表头且将固定的表头删除is-hidden样式
+  const tableParent = el.getElementsByClassName('el-table__header-wrapper');
+  feakHead = tableParent[0].cloneNode(true);
+  let thArr = feakHead.lastChild.lastChild.firstChild.childNodes;
+  if (thArr.length > 1 && !el.lastChild.className.includes('el-table__header-wrapper')) {
+    feakHead.style.display = 'none';
+    let len = thArr ? thArr.length : 0;
+    for (let i = 0; i < len; i++) {
+      let className = thArr[i].className;
+      if (className.includes('is-hidden')) {
+        thArr[i].className = className.replace('is-hidden', '');
+      }
+    }
+    el.appendChild(feakHead);
+  }
+}
+/**
+ * 这里有三个全局对象。用于存放监听事件。方便组件销毁后移除监听事件
+ */
+const fixFunObj = {}; // 用于存放滚动容器的监听scroll事件
+const setWidthFunObj = {}; // 用于存放页面resize后重新计算head宽度事件
+const autoMoveFunObj = {}; // 用户存放如果是DOM元素内局部滚动时，document滚动时，fix布局的表头也需要跟着document一起向上滚动
+let feakHead = {}; // 滚动时吸顶的表头 暂时只支持当前页面只有一个表格
+
+// 全局注册 自定义事件
+Vue.directive('sticky', {
+  // 当被绑定的元素插入到 DOM 中时……
+  inserted(el, binding, vnode) {
+    // 获取当前vueComponent的ID。作为存放各种监听事件的key
+    const uid = vnode.componentInstance._uid;
+    // 当window resize时 重新计算设置表头宽度，并将监听函数存入 监听函数对象中，方便移除监听事件
+    window.addEventListener(
+      'resize',
+      (setWidthFunObj[uid] = () => {
+        setHeadWidth(el);
+      })
+    );
+    // 获取当前滚动的容器是什么。如果是document滚动。则可默认不传入parent参数
+    const scrollParent = document.querySelector(binding.value.parent) || document;
+    // 给滚动容器加scroll监听事件。并将监听函数存入 监听函数对象中，方便移除监听事件
+    scrollParent.addEventListener(
+      'scroll',
+      (fixFunObj[uid] = () => {
+        fixHead(scrollParent, el, binding.value.top);
+      }),
+      true
+    );
+    // 如果是局部DOM元素内滚动。则需要监听document滚动，document滚动是同步让表头一起滚动。并将监听函数存入 监听函数对象中，方便移除监听事件
+    if (binding.value.parent) {
+      document.addEventListener(
+        'scroll',
+        (autoMoveFunObj[uid] = () => {
+          // 获取到表头DOM节点
+          const dom = el.children[1];
+          // 如果当前表头是fixed定位。则跟着document滚动一起滚
+          if (getComputedStyle(dom).position === 'fixed') {
+            // 滚动的距离是： 滚动父容器距离视口顶端高度 + 传入的吸顶固定距离
+            const fixtop = binding.value.top + scrollParent.getBoundingClientRect().top;
+            doFix(dom, fixtop, 'fixed');
+          }
+        }),
+        true
+      );
+    }
+  },
+  // component 更新后。重新计算表头宽度
+  componentUpdated(el) {
+    cloneNode(el);
+    setHeadWidth(el);
+  },
+  // 节点取消绑定时 移除各项监听事件。
+  unbind(el, binding, vnode) {
+    const uid = vnode.componentInstance._uid;
+    window.removeEventListener('resize', setWidthFunObj[uid]);
+    const scrollParent = document.querySelector(binding.value.parent) || document;
+    scrollParent.removeEventListener('scroll', fixFunObj[uid]);
+    if (binding.value.parent) {
+      document.removeEventListener('scroll', autoMoveFunObj[uid]);
+    }
+  }
+});

src/views/game/cmh/form.vue

@@ -120,6 +120,9 @@ export default {
   },
   mounted() {
     this.getGameTemplateByType();
+    window.addEventListener('scroll', function(e) {
+      console.log('scroll');
+    });
   },
   watch: {
     templateId(val) {

src/views/game/cmh/index.vue

@@ -4,7 +4,7 @@
       <div class="game-content">
         <div class="gameDemo">
           <div class="title">游戏演示</div>
-          <el-image lazy style="width: 180px;height:312px;cursor: pointer;" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/bill_pic.png" @click.native="onView()"> </el-image>
+          <el-image lazy style="width: 180px; height: 312px; cursor: pointer" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/bill_pic.png" @click.native="onView()"> </el-image>
         </div>
         <div class="gameIntro">
           <div class="title">游戏介绍</div>
@@ -22,17 +22,17 @@
               <p><span class="dm-status--normal"></span>配置游戏基础内容——如游戏背景、盲盒样式、背景音乐等</p>
               <p><span class="dm-status--normal"></span>配置游戏奖项——设定盲盒奖品、库存、中奖率等</p>
               <p><span class="dm-status--normal"></span>配置游戏规则——配置游戏玩法、参与门槛与条件等</p>
-              <el-button type="text" class="fz12" style="margin-left:13px">查看详细配置说明</el-button>
+              <el-button type="text" class="fz12" style="margin-left: 13px">查看详细配置说明</el-button>
             </div>
           </div>
         </div>
       </div>
-      <el-button type="text" @click="shrink(0)" style="width:100%">收起 <i class="iconfont-components3 icon-cp-shangjiantou" style="font-size:12px"/></el-button>
+      <el-button type="text" @click="shrink(0)" style="width: 100%">收起 <i class="iconfont-components3 icon-cp-shangjiantou" style="font-size: 12px"/></el-button>
     </div>
     <dm-sub-title v-else>
       <div class="gameName">
         幸运盲盒
-        <img @click="shrink(1)" style="width: 240px;height: 50px;cursor: pointer;" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/banner_web.png" />
+        <img @click="shrink(1)" style="width: 240px; height: 50px; cursor: pointer" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/banner_web.png" />
       </div>
     </dm-sub-title>
     <div class="pt20 pb20 clearfix">
@@ -44,8 +44,9 @@
       <el-checkbox class="vertical-middle ml0" v-if="$store.state.marketing.isShowSelf" v-model="listParams.createMe" :true-label="1" :false-label="0" label="仅看本人" border @change="refresh" />
       <el-button class="fr" type="primary" @click="addGame" v-if="$getButtonLimit($buttonCode.marketingCmhAdd)" :limit-code="$buttonCode.marketingCmhAdd">新建游戏</el-button>
     </div>
-    <el-table tooltipEffect="light" :data="tableList" style="width:100%">
-      <el-table-column label="游戏名称" min-width="183px" prop="gameName" show-overflow-tooltip :formatter="(row, col, val) => val || '--'"></el-table-column>
+
+    <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-sticky="{ top: 96 }">
+      <el-table-column label="游戏名称" fixed="left" min-width="183px" prop="gameName" show-overflow-tooltip :formatter="(row, col, val) => val || '--'"></el-table-column>
       <el-table-column label="游戏时间" min-width="134px">
         <template slot-scope="{ row }">
           <p class="cell-time">
@@ -73,13 +74,14 @@
           {{ formatDateTimeByType(row.createTime) }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="left" min-width="153px" fixed="right">
+      <el-table-column label="操作" fixed="right" min-width="153px">
         <template slot-scope="{ row }">
           <dm-dropdown ref="drop" :scope-data="row" :configs="btnArr" @command="onCommand" />
         </template>
       </el-table-column>
     </el-table>
-    <dm-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.pageNum" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
+
+    <dm-pagination v-if="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.pageNum" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
     <links :show.sync="linkShow" :obj="linksObj" gameTypeName="幸运盲盒" :isNew="true"></links>
   </section>
 </template>
@@ -208,43 +210,45 @@ export default {
       ]
     };
   },
-  created() {
+  mounted() {
+    if (this.$route.meta.refresh) {
+      this.dateTime = [];
+      this.listParams = {
+        gameName: '',
+        status: '',
+        startTime: '',
+        endTime: '',
+        pageNum: 1,
+        pageSize: 20
+      };
+    } else {
+      const data = JSON.parse(sessionStorage.getItem('listParams'));
+      const { dateTime, listParams } = data;
+      this.dateTime = dateTime;
+      this.listParams = Object.assign({}, listParams);
+    }
     this.getTableList();
   },
-  // activated() {
-  //   console.log('activated');
-  //   console.log(this.$route.meta.refresh);
-  //   if (this.$route.meta.refresh) {
-  //     this.dateTime = [];
-  //     this.listParams = {
-  //       gameName: '',
-  //       status: '',
-  //       startTime: '',
-  //       endTime: '',
-  //       pageNum: 1,
-  //       pageSize: 20
-  //     };
-  //   }
-  //   console.log(JSON.stringify(this.listParams));
-  //   this.getTableList();
-  // },
   beforeRouteEnter(to, from, next) {
-    // const {
-    //   meta: { type, path, refresh }
-    // } = from;
-    // console.log(type, path, refresh);
-    // if (path !== '/cmh') {
-    //   to.meta.refresh = true;
-    // } else {
-    //   if (type === 'add' && refresh) {
-    //     to.meta.refresh = true;
-    //   } else {
-    //     to.meta.refresh = false;
-    //   }
-    // }
-    console.log(to.meta.refresh);
+    const {
+      path,
+      meta: { type, refresh }
+    } = from;
+    if (path.indexOf('/cmh') <= 0) {
+      to.meta.refresh = true;
+    } else {
+      if (type === 'add' && refresh) {
+        to.meta.refresh = true;
+      } else {
+        to.meta.refresh = false;
+      }
+    }
     next();
   },
+  destroyed() {
+    const data = { dateTime: this.dateTime, listParams: this.listParams };
+    sessionStorage.setItem('listParams', JSON.stringify(data));
+  },
   methods: {
     getLink(row) {
       const { startDate, gameId, gameName } = row;
@@ -260,7 +264,6 @@ export default {
       })
         .then(() => {
           stopGame({ gameId }).then(res => {
-            console.log(res);
             this.$message.success('终止成功');
             this.getTableList();
           });
@@ -272,6 +275,7 @@ export default {
       this.getTableList();
     },
     handleSizeChange(val) {
+      this.listParams.pageNum = 1;
       this.listParams.pageSize = val;
       this.getTableList();
     },
@@ -308,7 +312,6 @@ export default {
       this.loading = true;
       cmhPage(this.listParams)
         .then(res => {
-          console.log(res);
           this.tableList = res.result.list || [];
           this.total = res.result.total || 0;
           this.notShrink = this.tableList.length > 0 ? 0 : 1;
@@ -322,7 +325,6 @@ export default {
     },
     pageStatistics(ids) {
       pageStatistics({ ids }).then(res => {
-        console.log(res);
         const { result } = res;
         let obj = {};
         result.forEach(element => {
@@ -351,12 +353,14 @@ export default {
 p {
   margin: 0;
 }
+
 .game {
   width: 100%;
   padding: 16px 20px;
   box-sizing: border-box;
   background: #f7f8fa;
 }
+
 .game-content {
   display: flex;
   justify-content: flex-start;
@@ -367,16 +371,21 @@ p {
     font-size: 14px;
     margin-bottom: 16px;
   }
+
   .mini-title {
     font-size: 12px;
   }
+
   .gameIntro {
     margin-left: 90px;
+
     .content {
       display: flex;
       margin-bottom: 30px;
+
       .text {
         margin-left: 58px;
+
         p {
           font-size: 12px;
           margin-bottom: 10px;

src/views/message/record.vue

@@ -140,6 +140,12 @@ export default {
   created() {
     this.getTableList();
     this.getQuantity();
+    document.addEventListener('scroll', () => {
+      console.log('--->scroll');
+      // console.log(document.body.scrollHeight);
+      // console.log(window.screen.height);
+      // console.log(document.body.scrollTop);
+    });
   },
   methods: {
     formatDateTimeByType,