Merge branch 'dev1.2.1' of http://192.168.3.207:8080/jianyu/page_bigmember_pc into dev1.2.1

src/views/subscribe/components/key/List.vue

@@ -1,12 +1,40 @@
 <template>
-  <div class="classify">
+  <div class="classify" id="auxiliaryFindRange">
+    <div class="fixed-top-group">
+      <div class="classify-list " v-for="(item,index) in newWordsList" :key="'top-1' + index">
+        <div style="display: none" class="classify-title flex-r-c sb" @click="goThisTop(index)" :data-diy-sticky-mapping="'sticky-'+index">
+          <div class="flex-r-c">
+            <span class="title-text">{{item.s_item}}</span>
+            <span class="icon-edit" @click="editClassFn(item.s_item, item.groupIndex)"></span>
+            <span class="icon-delete" @click="deleteClassFn(item, item.groupIndex)"></span>
+          </div>
+          <div class="flex-r-c right">
+            <el-button type="primary" class="add-classfily" icon="el-icon-plus" @click="addNewKeyword(item, item.groupIndex)">新增关键词组</el-button>
+            <div class="flex-r-c center list-item-opened" @click="item.opened = !item.opened">
+              <span>{{item.opened ? '收起' : '展开'}}</span>
+              <i :class="item.opened ? 'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="classify-list" v-for="(item,index) in newWordsList" :key="'1' + index">
-      <div class="classify-title">
-        <span class="title-text">{{item.s_item}}</span>
-        <span class="icon-edit" @click="editClassFn(item.s_item, item.groupIndex)"></span>
-        <span class="icon-delete" @click="deleteClassFn(item, item.groupIndex)"></span>
+      <div class="classify-title flex-r-c sb" :data-diy-sticky-origin="'sticky-'+index">
+        <div class="flex-r-c">
+          <span class="title-text">{{item.s_item}}</span>
+          <span class="icon-edit" @click="editClassFn(item.s_item, item.groupIndex)"></span>
+          <span class="icon-delete" @click="deleteClassFn(item, item.groupIndex)"></span>
+        </div>
+        <div class="flex-r-c right">
+          <div class="flex-r-c center list-item-opened" @click="item.opened = !item.opened">
+            <span>{{item.opened ? '收起' : '展开'}}</span>
+            <i :class="item.opened ? 'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
+          </div>
+        </div>
       </div>
-      <div class="classify-content">
+      <el-collapse-transition>
+        <div class="classify-content" v-show="item.opened">
         <div class="add-words-box" @click="addNewKeyword(item, item.groupIndex)" v-if="!item.showForm" key="add">+新增关键词组</div>
         <div style="width:100%;" v-else key="add">
           <Edit
@@ -44,6 +72,7 @@
           </div>
         </div>
       </div>
+      </el-collapse-transition>
     </div>
     <!-- 修改分类dialog -->
     <el-dialog
@@ -141,10 +170,12 @@
 </template>
 <script>
 import { Tooltip, Dialog, Input, Button } from 'element-ui'
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
 import KeyCard from '@/components/selector/SelectorCard'
 import Edit from './Edit'
 import $bus from '@/utils/bus'
 import { setUserInfoVip } from '@/api/modules'
+let timeFn = null
 export default {
   name: 'keywords-list',
   components: {
@@ -153,7 +184,8 @@ export default {
     [Input.name]: Input,
     [Button.name]: Button,
     KeyCard,
-    Edit
+    Edit,
+    [CollapseTransition.name]: CollapseTransition,
   },
   props: {
     datas: {
@@ -181,7 +213,7 @@ export default {
         notkey: [], // 排除词
         appendkey: [] // 附加词
       },
-      newWordsList: [] // 将父组件传来的数据赋值给该变量
+      newWordsList: []// 将父组件传来的数据赋值给该变量,
     }
   },
   computed: {},
@@ -195,8 +227,37 @@ export default {
   },
   mounted () {
     this.formatDatasList()
+    timeFn = this.windowScrollFn.bind(this)
+    $(window).on('scroll', timeFn)
+  },
+  beforeDestroy () {
+    $(window).off('scroll', timeFn)
   },
   methods: {
+    goThisTop (index) {
+      const goTop = $('#auxiliaryFindRange *[data-diy-sticky-origin="sticky-' + index + '"]').offset().top
+      $(window).scrollTop(goTop)
+    },
+    windowScrollFn () {
+      const winScrollTop = $(window).scrollTop()
+      if ($(window).width() <= 1200) {
+        $('#auxiliaryFindRange .fixed-top-group').css('left', 60 - $(window).scrollLeft())
+      } else {
+        $('#auxiliaryFindRange .fixed-top-group').css('left', '50%')
+      }
+
+      $('#auxiliaryFindRange *[data-diy-sticky-origin]').each(function () {
+        const onlyKey = $(this).attr('data-diy-sticky-origin')
+        const itemOffsetTop = $(this).offset().top
+        const itemHeight = $(this).outerHeight()
+        const visibility = winScrollTop >= itemOffsetTop - itemHeight
+        const mapNodeDom = $('#auxiliaryFindRange *[data-diy-sticky-mapping="' + onlyKey + '"]')
+        if (visibility) {
+          $('#auxiliaryFindRange *[data-diy-sticky-mapping]').hide()
+        }
+        mapNodeDom[visibility ? 'show' : 'hide']()
+      })
+    },
     sortData (arr) {
       return arr.sort((a, b) => {
         return b.updatetime - a.updatetime
@@ -219,6 +280,9 @@ export default {
       this.sortData(lists)
       lists.forEach(v => {
         if (v) {
+          if (!(typeof v.opened === 'string' || typeof v.opened === 'boolean')) {
+            v.opened = true
+          }
           if (v.a_key && v.a_key.length > 0) {
             this.sortData(v.a_key)
           } else {
@@ -474,11 +538,64 @@ export default {
 .sub-dialog.small-dialog::v-deep.el-dialog{
   border-radius: 8px!important;
 }
+.fixed-top-group {
+  position: fixed;
+  width: 1080px;
+  top: 0;
+  left: 50%;
+  z-index: 99999;
+  transform: translateX(-50%);
+  @media only screen and (max-width: 1200px) {
+    background-color: red;
+    transform: unset;
+    left: 60px;
+  }
+  .classify-list {
+    margin-bottom: 0;
+  }
+  .classify-list  .classify-title {
+    width: 100%;
+    position: absolute;
+    background: #fff;
+    padding: 9px 32px;
+    margin: 0;
+    box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.16);
+  }
+}
 .classify-list{
-  margin-bottom: 30px;
+  margin-bottom: 8px;
+  .list-item-opened {
+    font-size: 14px;
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #686868;
+    text-shadow: 0px 0px 28px 0px rgba(0,0,0,0.16);
+    cursor: pointer;
+    i {
+      color: #aaaaaa;
+      margin-left: 7px;
+    }
+  }
+  .add-classfily{
+    line-height: 22px;
+    background-color: transparent;
+    border: 1px solid #2cb7ca;
+    border-radius: 6px;
+    text-align: center;
+    color: #2CB7CA;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 4px 16px;
+    box-sizing: border-box;
+    & + .list-item-opened {
+      margin-left: 16px;
+    }
+  }
   .classify-title{
     display: flex;
     align-items: center;
+    padding: 9px 0;
     .title-text{
       font-size: 16px;
       color: #1d1d1d;
@@ -502,6 +619,9 @@ export default {
     background-size: contain;
   }
   .classify-content{
+    .edit-form {
+      margin-top: 0;
+    }
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -509,7 +629,6 @@ export default {
     .add-words-box{
       width: 100%;
       height: 38px;
-      margin-top: 20px;
       line-height: 38px;
       border: 1px dashed #2cb7ca;
       border-radius: 6px;