update: dist

src/mixins/table-sticky.js

+/* 组件需要提供parent字段，指定表格的className（字符串） */
+const rafThrottle = fn => {
+  let locked = false;
+  return function(...args) {
+    if (locked) return;
+    locked = true;
+    window.requestAnimationFrame(_ => {
+      fn.apply(this, args);
+      locked = false;
+    });
+  };
+};
+export default {
+  mounted() {
+    this.containerDom = document.getElementsByClassName(this.scrollClass);
+    this.clearListener();
+    let timer = setTimeout(() => {
+      this.initFixedHeader();
+      clearTimeout(timer);
+    }, 300);
+    window.addEventListener('resize', this.resizeChange);
+  },
+  deactivated() {
+    this.clearListener();
+  },
+  beforeDestroy() {
+    this.clearListener();
+    //取消监听窗口大小
+    window.removeEventListener('resize', this.resizeChange);
+  },
+  activated() {
+    this.initFixedHeader();
+    this.updateFixedRight();
+    window.addEventListener('resize', this.resizeChange);
+    let timer;
+    timer = setTimeout(() => {
+      let container = this.containerDom;
+      if (container[0].scrollTop > 0) {
+        container[0].scrollTop = container[0].scrollTop + 2;
+      }
+      clearTimeout(timer);
+    }, 1000);
+  },
+  methods: {
+    activatedReload() {
+      window.addEventListener('resize', this.resizeChange);
+      let timer = setTimeout(() => {
+        this.clearFixedStyle();
+        this.initFixedHeader();
+      }, 300);
+      this.timerList.push(timer);
+    },
+    reset() {
+      this.clearFixedStyle();
+    },
+    // 窗口大小变化时，初始化
+    resizeChange() {
+      this.headerDragend();
+      let timer = setTimeout(() => {
+        this.initFixedHeader();
+        clearTimeout(timer);
+      }, 300);
+    },
+    async initFixedHeader() {
+      if (this.parent) {
+        // console.log('启动监听，页面：', this.parent)
+        this.parentDom = document.getElementsByClassName(this.parent);
+        if (this.parentDom && this.parentDom.length !== 0) {
+          this.tableWidth = this.parentDom[0].querySelector('.el-table__header-wrapper').getBoundingClientRect().width;
+          this.setScrollXWidth();
+          this.tableDom = this.parentDom[0].getElementsByClassName('el-table__header-wrapper');
+          this.scrollDom = document.querySelector(`.${this.scrollClass}`);
+          this.scrollDom.addEventListener('scroll', this.scrollEvent);
+        }
+      }
+    },
+    // 清空监听事件
+    clearListener() {
+      if (this.scrollDom) {
+        this.scrollDom.removeEventListener('scroll', this.scrollEvent);
+        window.removeEventListener('resize', this.resizeChange);
+        this.clearFixedStyle();
+        // console.log('卸载监听,页面：', this.parent)
+        this.timerList.forEach(key => {
+          clearTimeout(key);
+        });
+      }
+    },
+    // 更新右侧固定栏
+    updateFixedRight() {
+      let { fixedRightHeaderDom, dom } = this.getFixedDom();
+      if (dom.classList.contains('fixed')) {
+        let timer = setTimeout(() => {
+          this.setFixedStyle({
+            dom: fixedRightHeaderDom,
+            left: this.fixedRightDom[0].getBoundingClientRect().left + 'px',
+            width: getComputedStyle(this.fixedRightDom[0]).width,
+            scrollLeft: fixedRightHeaderDom.scrollWidth
+          });
+          clearTimeout(timer);
+        }, 100);
+      }
+    },
+    async headerDragend() {
+      await this.updateWidth();
+      await this.updateFixedRight();
+      this.setScrollXWidth();
+      // await this.updateHeaderHeight()
+    },
+    setScrollXWidth() {
+      let timer = setTimeout(() => {
+        if (!this.parentDom) this.parentDom = document.getElementsByClassName(this.parent);
+        if (this.parentDom.length == 0) return;
+        let dom = this.parentDom[0].querySelector('.el-table__header');
+        this.tableWidth = this.parentDom[0].querySelector('.el-table__body-wrapper').getBoundingClientRect().width;
+        this.tableDom[0].style.width = this.tableWidth + 'px';
+        this.updateHeaderHeight();
+        this.headerWidth = dom.style.width;
+        clearTimeout(timer);
+      }, 200);
+    },
+    // 更新表格宽度，（拖拽改变宽度时使用）
+    updateWidth() {
+      if (!this.parentDom) this.parentDom = document.getElementsByClassName(this.parent);
+      const bodyWrapperDom = this.parentDom[0].getElementsByClassName('el-table__body-wrapper')[0];
+      const width = getComputedStyle(bodyWrapperDom).width; //表格宽度
+      // 给表格设置宽度。
+      const tableParent = this.tableDom;
+      for (let i = 0; i < tableParent.length; i++) {
+        tableParent[i].style.width = width;
+      }
+    },
+    getFixedDom() {
+      let fixedRightHeaderDom;
+      let fixedRightBox;
+      let fixedLeftHeaderDom;
+      let fixedLeftBox;
+      let dom = this.tableDom[0];
+      if (this.fixedLeftDom && this.fixedLeftDom[0]) {
+        let lefarr = this.fixedLeftDom[0].children;
+        fixedLeftHeaderDom = lefarr[0];
+        fixedLeftBox = lefarr[1];
+      }
+      if (this.fixedRightDom && this.fixedRightDom[0]) {
+        let rightarr = this.fixedRightDom[0].children;
+        fixedRightHeaderDom = rightarr[0];
+        fixedRightBox = rightarr[1];
+      }
+      return { fixedRightHeaderDom, fixedRightBox, fixedLeftHeaderDom, fixedLeftBox, dom };
+    },
+    // 更新表头高度，表头高度有可能改变
+    updateHeaderHeight() {
+      this.$nextTick(() => {
+        this.tableDom = this.parentDom[0].getElementsByClassName('el-table__header-wrapper');
+        let obj = this.tableDom[0].getBoundingClientRect();
+        if (obj.height != this.tablexy.height) {
+          this.tablexy.height = obj.height;
+          let { dom } = this.getFixedDom();
+          if (dom.classList.contains('fixed')) {
+            let timer = setTimeout(() => {
+              this.parentDom[0].getElementsByClassName('el-table__fixed-body-wrapper')[0].style.top = this.headerTop;
+              let container = this.containerDom;
+              if (container && container[0]) {
+                container[0].scrollTop = container[0].scrollTop + 3;
+              }
+              clearTimeout(timer);
+            }, 100);
+          }
+        }
+      });
+    },
+    // 获取表格属性
+    getTableXy() {
+      this.tablexy = this.tableDom[0].getBoundingClientRect();
+      this.tablexy.height = this.tableDom[0].offsetHeight;
+      return this.tablexy;
+    },
+    getDom() {
+      if (!this.parentDom) {
+        this.parentDom = document.getElementsByClassName(this.parent);
+      }
+    },
+    //滚动事件
+    scrollEvent: rafThrottle(async function(e) {
+      this.getDom();
+      this.tableDom = this.parentDom[0].getElementsByClassName('el-table__header-wrapper');
+      if (this.tablexy.top == 0 || !this.tablexy.height || !this.tablexy.top) {
+        await this.getTableXy();
+      }
+      this.fixedRightDom = this.parentDom[0].getElementsByClassName('el-table__fixed-right');
+      this.fixedLeftDom = this.parentDom[0].getElementsByClassName('el-table__fixed');
+      let { height, top, left } = this.tablexy;
+      let scrollTop = e.target.scrollTop;
+      let { fixedRightHeaderDom, fixedRightBox, fixedLeftHeaderDom, fixedLeftBox, dom } = this.getFixedDom();
+      if (scrollTop >= height / 2 + top) {
+        // 存在右侧固定表头
+        if (fixedRightHeaderDom) {
+          this.setFixedStyle({
+            dom: fixedRightHeaderDom,
+            left: this.fixedRightDom[0].getBoundingClientRect().left + 'px',
+            width: getComputedStyle(this.fixedRightDom[0]).width,
+            scrollLeft: fixedRightHeaderDom.scrollWidth
+          });
+          fixedRightBox.style.top = 0;
+        }
+        // 左侧固定
+        if (fixedLeftHeaderDom) {
+          this.setFixedStyle({
+            dom: fixedLeftHeaderDom,
+            left: left + 'px',
+            width: getComputedStyle(this.fixedLeftDom[0]).width,
+            scrollLeft: 0
+          });
+          fixedLeftBox.style.top = 0;
+        }
+        dom.classList.add('fixed'); //加一个固定标识
+        this.updateWidth();
+        dom.style.position = 'fixed';
+        dom.style.zIndex = '2000';
+        dom.style.top = this.headerTop;
+        dom.style.overflow = 'hidden';
+      } else {
+        this.clearFixedStyle();
+      }
+    }),
+    //设置固定
+    setFixedStyle(data) {
+      let { dom, scrollLeft, width, left } = data;
+      dom.style.zIndex = '2000';
+      dom.style.position = 'fixed';
+      dom.style.top = this.headerTop;
+      dom.scrollLeft = scrollLeft;
+      dom.style.width = width;
+      dom.style.overflow = 'hidden';
+      dom.style.left = left;
+    },
+    // 清除header固定
+    clearFixedStyle() {
+      if (!this.tableDom) return;
+      let { height, left } = this.tablexy;
+      let { dom, fixedRightHeaderDom, fixedRightBox, fixedLeftHeaderDom, fixedLeftBox } = this.getFixedDom();
+      if (dom.classList.contains('fixed')) {
+        if (fixedRightHeaderDom) {
+          fixedRightBox.style.top = height + 'px';
+          fixedRightHeaderDom.removeAttribute('style');
+        }
+
+        if (fixedLeftHeaderDom) {
+          fixedLeftHeaderDom.style.zIndex = '0';
+          fixedLeftHeaderDom.style.position = 'static';
+          fixedLeftHeaderDom.style.top = this.headerTop;
+          fixedLeftHeaderDom.style.left = left + 'px';
+          fixedLeftBox.style.top = getComputedStyle(dom).height;
+        }
+        dom.classList.remove('fixed');
+        dom.style.position = 'static';
+        dom.style.top = this.headerTop;
+        dom.style.zIndex = '0';
+      }
+    }
+  },
+  computed: {
+    __opened() {
+      return true;
+    }
+  },
+  watch: {
+    __opened() {
+      this.$nextTick(() => {
+        this.setScrollXWidth();
+      });
+    }
+  },
+  data() {
+    return {
+      tablexy: {}, //表格的左边宽度信息
+      fixedRightDom: null, //右侧
+      fixedLeftDom: null, //左侧栏固定
+      scrollDom: null, //滚动的dom
+      parentDom: null, //表格的父元素dom
+      tableWidth: 0,
+      timerList: [],
+      tableDom: null,
+      containerDom: null
+    };
+  }
+};

src/views/game/cmh/form.vue

@@ -112,13 +112,6 @@ export default {
       if (!['1', '2', '3', '5', '7'].includes(this.templateId)) {
         return '';
       }
-      // const bcImg = {
-      //   1: require(`@/assets/img/template${this.templateId}/mould_rule_page.png`),
-      //   2: require(`@/assets/img/template${this.templateId}/mould_prize_page.png`),
-      //   3: require(`@/assets/img/template${this.templateId}/mould_success_page.png`),
-      //   4: require(`@/assets/img/template${this.templateId}/mould_fail_page.png`),
-      //   5: require(`@/assets/img/template${this.templateId}/mould_share_page.png`)
-      // };
       const bcImg = {
         1: `https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template${this.templateId}/mould_rule_page.png`,
         2: `https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template${this.templateId}/mould_prize_page.png`,

src/views/game/cmh/index.vue

@@ -93,7 +93,6 @@ import { api as viewerApi } from 'v-viewer';
 import { cmhPage, stopGame, pageStatistics } from '@/service/api/gameApi.js';
 import links from '../common/links';
 import { formatDateTimeByType } from '@/utils/index.js';
-import img from '@/assets/img/template1/mould_share_page.png';
 
 export default {
   components: {
@@ -104,7 +103,7 @@ export default {
       formatDateTimeByType,
       linkShow: false,
       linksObj: {},
-      img,
+      img: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_share_page.png',
       listParams: {
         gameName: '',
         status: '',