update： 置顶

src/components/layout/index.vue

@@ -4,7 +4,7 @@
     <aside-menu v-show="showAside" :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
     <div class="hb-layout-content" :style="{ width: showAside ? 'calc(100% - 206px)' : '100%' }">
       <bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
-      <div class="hb-layout-pager" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%', 'padding-bottom': pagePaddingBottom }">
+      <div class="hb-layout-pager" id="hb-layout-pager-one" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%', 'padding-bottom': pagePaddingBottom }">
         <!-- 页面内容 -->
         <!-- <router-view v-if="activeBrand" :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab"></router-view> -->
         <keep-alive>

src/views/salesleads/actCodeManage/staffActCode/actCodeDetail.vue

 <template>
   <div class="app-detail-wrap p-20" v-loading="loading">
     <div class="flex p-b-40">
-      <img v-if="codeInfo.hmType == 2" class="img-200" src="../../../../assets/data/time.png" />
+      <el-image v-if="codeInfo.hmType == 2" class="img-200" :src="codeInfo.wxQrcode" />
       <div class="text-ellipsis-white color-303133" :style="codeInfo.hmType == 1 ? 'width:100%;' : 'width: calc(100% - 230px);'">
         <div class="p-t-12 flex">
           <div class="font-16 line-22 text-ellipsis-white height-22 font-w-500">{{ codeInfo.name }}</div>
@@ -37,12 +37,20 @@
         </div>
       </div>
     </div>
+    <div class="fixed-tab" v-if="scrollTop > 300">
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="详情信息" name="first"> <div></div> </el-tab-pane>
+        <el-tab-pane label="数据统计" name="second">
+          <div></div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
     <el-tabs v-model="activeName" type="card">
       <el-tab-pane label="详情信息" name="first">
         <act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId"></act-code-detail-info>
       </el-tab-pane>
       <el-tab-pane label="数据统计" name="second">
-        <act-code-detail-statistics :brand-id="brandId"></act-code-detail-statistics>
+        <act-code-detail-statistics></act-code-detail-statistics>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -50,16 +58,13 @@
 <script>
 import actCodeDetailInfo from './actCodeDetailInfo.vue';
 import actCodeDetailStatistics from './actCodeDetailStatistics.vue';
+import { _throttle } from '@/common/js/public';
 // import { getRequest } from '@/api/api';
 import errMsg from '@/common/js/error';
 export default {
   name: 'actCodeDetail',
   components: { actCodeDetailInfo, actCodeDetailStatistics },
   props: {
-    brandId: {
-      type: String,
-      default: ''
-    },
     actCode: {
       type: String,
       default: ''
@@ -77,12 +82,14 @@ export default {
         { value: '待生效', style: 'info' },
         { value: '正常-今日已达上限', style: 'warning' }
       ],
-      statusIndex: 1
+      statusIndex: 1,
+      scrollTop: 0,
+      scrollStyle: 'position:fixed;top:80px;z-index:1;padding-bottom:0;height:40px;background:yellow;'
     };
   },
   methods: {
     downloadQR() {
-      // window.open(this.codeInfo.url)
+      window.open(this.codeInfo.wxQrcode);
     },
     modifyCode() {
       // this.$router.push(`/addActCode?actCodeData=`);
@@ -95,7 +102,7 @@ export default {
       //     let resData = res.data;
       //     that.loading = false;
       //     if (resData.errorCode == 1) {
-      //       that.getActCodeInfo()
+      //       that.getActCodeInfo();
       //       return;
       //     }
       //     errMsg.errorMsg(resData);
@@ -105,7 +112,7 @@ export default {
       //       duration: 1000,
       //       message: error.message
       //     });
-      //   })
+      //   });
     },
     async getActCodeInfo() {
       const that = this;
@@ -127,7 +134,8 @@ export default {
             createTime: 182736347383,
             passFlag: 0,
             welcomeId: 'b680a2cf18b742cc9f4560f6195c9ec6',
-            enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3'
+            enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3',
+            wxQrcode: ''
           }
         }
       };
@@ -147,19 +155,22 @@ export default {
       //   });
       // });
     },
-    scrollMethod(res) {
-      // console.log(1);
-      // console.log(res);
-      // console.log(document.body.scrollTop);
-    }
+    scrollMethod: _throttle(function() {
+      this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
+    }, 100)
+    // scrollMethod(res) { // 节流不自然
+    //   // console.log(document.getElementById('hb-layout-pager-one').scrollTop);
+    //   // if (this.scrollTop > 280) return;
+    //   this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
+    // }
   },
   mounted() {
     let that = this;
     that.getActCodeInfo();
-    // window.addEventListener('scroll', that.scrollMethod);
+    document.getElementById('hb-layout-pager-one').addEventListener('scroll', that.scrollMethod);
   },
   destroyed() {
-    // window.removeEventListener('scroll', this.scrollMethod);
+    document.getElementById('hb-layout-pager-one').removeEventListener('scroll', this.scrollMethod);
   }
 };
 </script>
@@ -188,4 +199,13 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.fixed-tab {
+  position: fixed;
+  top: 75px;
+  z-index: 1;
+  padding-bottom: 0;
+  height: 40px;
+  background: white;
+  width: 100%;
+}
 </style>

src/views/salesleads/actCodeManage/staffActCode/actCodeDetailInfo.vue

@@ -99,7 +99,7 @@ export default {
         6: 'iconwenjianleixing-xiaochengxu', // 带参小程序
         7: 'icongongzhonghao1' // 带参公众号
       },
-      useMemberData: [{ cardName: '电话电话电话' }],
+      useMemberData: [{ cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }],
       loading: false,
       currentPage: 1,
       pageSize: 20,
@@ -153,7 +153,6 @@ export default {
       const that = this;
       that.loading = true;
       let para = {
-        // gicEnterpriseId: that.brandId,
         pageNum: that.currentPage, // 当前页
         pageSize: that.pageSize // 一页显示个数
       };
@@ -181,7 +180,6 @@ export default {
   },
   mounted() {
     let that = this;
-    // 判断brandId
     that.getUseTableList();
   },
   watch: {

src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="flex">
           <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
-          <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
+          <div class="color-1890ff font-14 p-l-6" @click="explain('http://baidu.com')">指标说明</div>
         </div>
       </div>
       <ul class="flex">
@@ -54,7 +54,7 @@
         </div>
         <div class="flex">
           <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
-          <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
+          <div class="color-1890ff font-14 p-l-6" @click="explain('http://baidu.com')">指标说明</div>
         </div>
       </div>
       <data-detail :id="actCode"></data-detail>
@@ -69,12 +69,6 @@ export default {
   name: 'act-code-detail-statistics',
   components: { dataDetail, newAddChart },
   props: {
-    brandId: {
-      type: String,
-      default() {
-        return '';
-      }
-    },
     actCode: {
       type: String,
       default() {
@@ -84,7 +78,6 @@ export default {
   },
   data() {
     return {
-      welcomeSpeech: false,
       useMemberData: [{ cardName: '电话电话电话' }],
       loading: false,
       dateKey: 0,
@@ -132,14 +125,13 @@ export default {
     };
   },
   methods: {
-    explain() {
-      console.log(11);
+    explain(url) {
+      window.open(url);
     },
     getUseTableList() {
       const that = this;
       that.loading = true;
       let para = {
-        // gicEnterpriseId: that.brandId,
         pageNum: that.currentPage, // 当前页
         pageSize: that.pageSize // 一页显示个数
       };
@@ -229,7 +221,6 @@ export default {
   },
   mounted() {
     let that = this;
-    // 判断brandId
     // 默认显示近七天
     that.btnChange(0);
     that.getUseTableList();