feat: 优化! 组件样式以及组件逻辑

src/components/push-list/PushList.vue

@@ -57,6 +57,15 @@ export default {
     showMore: {
       type: Boolean,
       default: true
+    },
+    filters: {
+      type: Object,
+      default () {
+        return {
+          area: '',
+          time: ''
+        }
+      }
     }
   },
   computed: {
@@ -98,7 +107,9 @@ export default {
     async getList (filters) {
       const query = {
         pagenum: this.listState.pageNum,
-        pageSize: this.listState.pageSize
+        pageSize: this.listState.pageSize,
+        area: this.filters.area,
+        time: this.filters.time
       }
 
       if (filters && Object.keys(filters).length > 0) {

src/components/selector/AreaSelectorCard.vue

@@ -1,19 +1,19 @@
 <template>
   <selector-card
-    class="area-selector"
+    class="area-selector card"
     @onConfirm="onConfirm"
     @onCancel="onCancel"
   >
     <div slot="header">选择区域</div>
     <div class="selector-content" v-loading="loading">
-      <div class="search-copntainer">
+      <div class="search-container">
         <el-input v-model="searchContent" placeholder="搜索" prefix-icon="el-icon-search"></el-input>
       </div>
-      <div class="select-list scrollbar" ref="areaList">
-        <div v-for="(item, key) in provinceListMap" :key="key" class="province-item-container">
+      <div class="select-list scrollbar" ref="selectList">
+        <div v-for="(item, key) in provinceListMap" :key="key" class="select-group-container">
           <div class="index-anchor" :id="key" :data-index="key" v-if="key !== '#'">{{ key }}</div>
           <el-collapse-transition v-for="(province, ii) in item" :key="ii*2">
-            <div class="province-item tab_content global" v-if="province.name == '全国'">
+            <div class="select-group tab-content global" v-if="province.name == '全国'">
               <button
                 class="j-button-item global"
                 :class="{
@@ -23,11 +23,11 @@
                 @click="changeCityState(province, '#')"
               >{{ province.name }}</button>
             </div>
-            <div class="province-item" v-else>
+            <div class="select-group" v-else>
               <div class="tab" :class="province.id">
-                <div class="province" @click="clickCheckbox(province)">
+                <div class="tab-name-container" @click="clickCheckbox(province)">
                   <div class="j-checkbox" :class="province.selectedState"></div>
-                  <span class="province-name">{{ province.name }}</span>
+                  <span class="tab-name">{{ province.name }}</span>
                 </div>
                 <span style="flex: 1; height: 100%;" @click="changeExpandState($event, province)"></span>
                 <span
@@ -41,8 +41,8 @@
                 </span>
               </div>
               <el-collapse-transition>
-                <div v-show="province.expanded" class="tab_content">
-                  <div class="content">
+                <div v-show="province.expanded" class="tab-content">
+                  <div class="content-list">
                     <button v-for="(city, iii) in province.children" :key="iii*3"
                       class="j-button-item"
                       :class="{
@@ -151,31 +151,41 @@ export default {
         canExpanded: false,
         // 选中状态: half(半选)、checked(全选)、''(未选中)、checkeddisabled(全选不能点击)、nonedisabled(未选不能点击)
         selectedState: '',
-        children: []
+        children: [],
+        id: ''
       }
     }
   },
   watch: {
     searchContent: debounce(function (newVal, oldVal) {
       const search = newVal
-      const { findP } = this.getCPWithString(search)
+      const { findP } = this.getProvinceWithString(search)
       const id = findP[0] && findP[0].id
       if (id) {
         if (findP[0].canExpanded) {
           findP[0].expanded = true
         }
         this.$nextTick(() => {
-          this.$refs.areaList.scrollTop = document.querySelector(`.${id}`).offsetTop
+          const wrapper = document.querySelector('.area-selector.card')
+          this.$refs.selectList.scrollTop = wrapper.querySelector(`.${id}`).offsetTop
           // document.querySelector(`.${id}`).scrollIntoView() // 兼容性有问题
         })
       }
-    }, 300)
+    }, 300),
+    initCityMap (newVal) {
+      if (newVal && Object.keys(newVal).length !== 0) {
+        this.setCitySelected(newVal)
+      }
+    }
   },
   created () {
     this.initIndexBarAndAreaMap()
     this.provinceListMap['#'][0].selectedState = 'checked'
   },
   methods: {
+    changeLoadingState (s) {
+      this.loading = s
+    },
     // 整理城市数据列表(并初始化indexBar数据)
     initIndexBarAndAreaMap () {
       // 整理数据得到indexListMap()，同时获得indexList
@@ -235,7 +245,7 @@ export default {
       return chinaMapJSON.find(item => item.name.indexOf(provinceName) !== -1)
     },
     // 输入字符串，找到其所在省份
-    getCPWithString (s = '') {
+    getProvinceWithString (s = '') {
       // 找是否有省份相同的
       const findP = [] // 匹配到的省份数组
       const findC = [] // 匹配到的市数组
@@ -558,51 +568,36 @@ export default {
     transform: rotate(180deg);
   }
 
-  .selector-content {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    width: 400px;
-    height: 100%;
-    border-radius: 5px;
-    border: 1px solid rgba(0,0,0,.05);
-    .select-list {
-      position: relative;
-      flex: 1;
-      overflow-y: scroll;
-    }
-    .index-anchor {
-      margin-top: 10px;
-      padding: 0 20px;
-      height: 30px;
-      line-height: 30px;
-      background-color: #f5f5fb;
-      text-align: left;
+  .j-button-item {
+    border-color: transparent;
+  }
+
+  .select-group {
+    font-size: 14px;
+    &.global {
+      padding: 0 18px;
     }
-    .province-item {
-      font-size: 14px;
-      .tab {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 18px;
-        height: 40px;
-        border-bottom: 1px solid rgba(0,0,0,.05);
-        cursor: pointer;
-      }
+    .tab {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 18px;
+      height: 40px;
+      border-bottom: 1px solid rgba(0,0,0,.05);
+      cursor: pointer;
     }
-    .province {
+    .tab-name-container {
       display: flex;
       align-items: center;
-      .province-name {
+      .tab-name {
         margin-left: 10px;
         font-weight: bold;
       }
     }
-    .tab_content {
+    .tab-content {
       padding: 0 18px;
       // border-bottom: 1px solid rgba(0,0,0,.05);
-      .content {
+      .content-list {
         display: flex;
         flex-wrap: wrap;
         padding: 2px 0;

src/components/selector/SelectorCard.vue

@@ -44,7 +44,7 @@ export default {
       background-color: #f7f7f7;
       border-radius: 22px;
     }
-    .search-copntainer {
+    .search-container {
       margin: 20px auto;
       width: 360px;
       .el-icon-search {
@@ -58,19 +58,50 @@ export default {
       display: flex;
       align-items: center;
       margin: 6px 5px;
-      padding: 4px;
+      padding: 2px 6px;
       line-height: 20px;
       border-radius: 4px;
       font-size: 14px;
       text-align: center;
       background-color: #fff;
-      border: 1px solid transparent;
+      border: 1px solid rgba(0,0,0,.05);
       cursor: pointer;
+      &:hover {
+        color: #2abed1;
+      }
       &.active {
         color: #2abed1;
         border-color: #2abed1;
       }
     }
+
+    // 子组件卡片布局样式
+    .selector-content {
+      display: flex;
+      flex-direction: column;
+      margin: 0 auto;
+      width: 400px;
+      height: 100%;
+      border-radius: 5px;
+      border: 1px solid rgba(0,0,0,.05);
+    }
+
+    // 搜索框下的列表
+    .select-list {
+      position: relative;
+      flex: 1;
+      overflow-y: scroll;
+    }
+
+    // indexBar样式
+    .index-anchor {
+      margin-top: 10px;
+      padding: 0 20px;
+      height: 30px;
+      line-height: 30px;
+      background-color: #f5f5fb;
+      text-align: left;
+    }
   }
 
   .selector-card {