feat: 订阅推送列表新增筛选条件及列表信息流样式调整

src/components/article-item/ArticleItem.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="article-item" @click="onClick">
-    <div class="a-i-left ellipsis" v-html="calcTitle"></div>
+  <div class="article-item" :class="{'style-for-gray': config.gray, 'style-for-table': config.table }">
+    <input v-if="config.collect" @click.stop class="custom-checkbox title-text-checkbox" name="bid-list" type="checkbox" :dataid="article._id">
+    <div class="a-i-left ellipsis" @click="onClick" v-html="calcTitle"></div>
     <div class="a-i-right">
       <div class="tags">
         <span class="tag" v-if="article.area">{{ article.area }}</span>
@@ -9,15 +10,18 @@
         <span class="tag dpink" v-if="calcBudget">{{ calcBudget }}</span>
       </div>
       <div class="time-container">
-        <span class="el-icon-jy-time"></span>
+        <span class="el-icon-jy-time" v-if="!config.gray"></span>
         <span class="time-text">
           <slot name="right-time">{{ dateFromNow(article.publishtime * 1000) }}</slot>
         </span>
       </div>
+      <i class="icon-collect" @click.stop="collectChange(article, $event)" v-if="config.collect" :class="{'checked': article.collection}" :dataid="article._id"></i>
     </div>
   </div>
 </template>
+<script>
 
+</script>
 <script>
 import { Tag } from 'element-ui'
 import { moneyUnit, dateFromNow, replaceKeyword } from '@/utils/'
@@ -31,9 +35,19 @@ export default {
       type: [String, Number],
       default: '1'
     },
+    config: {
+      type: Object,
+      default() {
+        return {
+          gray: false,
+          table: false,
+          collect: false
+        }
+      }
+    },
     article: {
       type: Object,
-      default () {
+      default() {
         return {
           title: '', // 标题
           area: '', // 区域
@@ -47,27 +61,48 @@ export default {
     }
   },
   computed: {
-    calcBudget () {
+    calcBudget() {
       if (this.article.budget) {
         return moneyUnit(this.article.budget)
       } else {
         return this.article.budget
       }
     },
-    calcTitle () {
+    calcTitle() {
       const hightLightedTitle = replaceKeyword(this.article.title, this.article.matchkeys, ['<span class="highlight-text">', '</span>'])
       return `${this.index}. ${hightLightedTitle}`
     }
   },
   methods: {
     dateFromNow,
-    onClick () {
+    onClick() {
       this.$emit('onClick')
+    },
+    collectChange(item, event) {
+      this.$emit('onCollect', {
+        item: item,
+        event: event
+      })
     }
   }
 }
 </script>
-
+<style>
+.custom-toast .toast-container{
+  /* display: none; */
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  padding: 16px 32px;
+  font-size: 16px;
+  background: rgba(0, 0, 0, 0.65);
+  border-radius: 8px;
+  color: #fff;
+  transform: translateX(-50%) translateY(-50%);
+  z-index: 99;
+}
+</style>
 <style lang="scss" scoped>
   $border-color: #ECECEC;
   @include diy-icon('time', 20, 20);
@@ -76,7 +111,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 22px 0;
+    padding: 22px 16px;
     border-bottom: 1px solid $border-color;
     cursor: pointer;
 
@@ -85,6 +120,44 @@ export default {
       border-top: 1px solid $border-color;
     }
 
+    &.style-for-gray {
+
+      .icon-collect{
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        margin-left: 6px;
+        background: transparent url(https://cdn-ali.jianyu360.com/images/collect.png) center no-repeat;
+        background-size: contain;
+        cursor: pointer;
+        vertical-align: sub;
+      }
+      .icon-collect.checked{
+        background: transparent url(https://cdn-ali.jianyu360.com/images/collected.png) center no-repeat;
+        background-size: contain;
+      }
+
+      .tag,
+      .orange.tag,
+      .green.tag,
+      .dpink.tag {
+        background: #f5f5fb;
+        border: 1px solid #ececec;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #686868;
+        line-height: 20px;
+        height: 22px;
+        padding: 0 8px;
+      }
+    }
+    &.style-for-table {
+
+    }
+
     .a-i-left {
       flex: 1;
     }
@@ -107,7 +180,7 @@ export default {
       background-color: #2CB7CA;
       border-radius: 3px;
       &:not(:last-of-type) {
-        margin-right: 4px;
+        margin-right: 8px;
       }
 
       &.orange {

src/views/SubPush.vue

@@ -1,35 +1,40 @@
 <template>
   <div class="page--sub-push">
     <div class="page-content">
+      <div class="clearfix">
+        <span class="card-title">订阅推送</span>
+        <el-button v-if="canSubmanager" @click="goManage" class="sub-manager" type="plain" icon="el-icon-jy-edit">订阅管理
+        </el-button>
+      </div>
       <div class="border-box">
-        <TimeSelector  @onChange="changeTime" selectorType="line">
+        <TimeSelector ref="timeSelector" selectorTime="sub"  @onChange="changeTime" selectorType="line">
           <div slot="header">选择时间：</div>
         </TimeSelector>
         <AreaSelector @onChange="changeArea" ref="areaSelector" selectorType="line">
           <div slot="header">选择区域：</div>
         </AreaSelector>
-        <IndustrySelector selectorType="line">
+        <IndustrySelector @onChange="changeIndustry"  selectorType="line">
           <div slot="header">行业：</div>
         </IndustrySelector>
-        <BusinessScopeSelector selectorType="line">
+        <IndustrySelector @onChange="changeBuyer" dataType="buyer" selectorType="line">
           <div slot="header">采购单位类型：</div>
-        </BusinessScopeSelector>
-        <InfoTypeSelector selectorType="line">
+        </IndustrySelector>
+        <InfoTypeSelector @onChange="changeInfo" selectorType="line">
           <div slot="header">信息类型：</div>
         </InfoTypeSelector>
       </div>
-      <push-list :filters="filters" class="m-24" ref="pushList" :showMore="false"></push-list>
+      <push-list :config="config" :filters="filters" class="m-24" ref="pushList" :showMore="false"></push-list>
     </div>
   </div>
 </template>
 
 <script>
+import { Button } from 'element-ui'
 import PushList from '@/components/push-list/PushList.vue'
 import AreaSelector from '@/components/selector/AreaSelector.vue'
 import TimeSelector from '@/components/selector/TimeSelector.vue'
-import IndustrySelector from "@/components/selector/IndustrySelector.vue"
-import BusinessScopeSelector from "@/components/selector/BusinessScopeSelector.vue"
-import InfoTypeSelector from "@/components/selector/InfoTypeSelector.vue"
+import IndustrySelector from '@/components/selector/IndustrySelector.vue'
+import InfoTypeSelector from '@/components/selector/InfoTypeSelector.vue'
 
 export default {
   name: 'SubPush',
@@ -38,18 +43,74 @@ export default {
     AreaSelector,
     TimeSelector,
     IndustrySelector,
-    BusinessScopeSelector,
-    InfoTypeSelector
+    InfoTypeSelector,
+    [Button.name]: Button
   },
   data () {
     return {
+      config: {
+        gray: true,
+        table: true,
+        collect: true
+      },
       filters: {
         area: '',
-        time: ''
+        time: '',
+        selectTime: '',
+        city: '',
+        buyerclass: '',
+        subtype: '',
+        subscopeclass: '',
+        key: '',
+        vt: 'm',
+        exportNum: ''
       }
     }
   },
+  mounted () {
+    this.initQuery()
+  },
   methods: {
+    initQuery () {
+      const tempTime = this.$refs.timeSelector.getState()
+      let time = tempTime.exact
+      if (tempTime.exact === 'exact') {
+        time = tempTime.start / 1000 + '_' + tempTime.end / 1000
+      }
+      this.filters.selectTime = time
+      this.filters.time = time
+      this.doQuery()
+    },
+    formatIndustryMap (item) {
+      const tempArr = []
+      Object.keys(item).forEach(v => {
+        const tempItem = item[v]
+        if (Array.isArray(tempItem)) {
+          tempItem.forEach(vv => {
+            tempArr.push(`${v}_${vv}`)
+          })
+        }
+      })
+      return tempArr
+    },
+    changeIndustry (item) {
+      this.filters.subscopeclass = this.formatIndustryMap(item).join(',')
+      this.doQuery()
+    },
+    changeBuyer (item) {
+      this.filters.buyerclass = this.formatIndustryMap(item).join(',')
+      this.doQuery()
+    },
+    changeInfo (item) {
+      this.filters.subtype = item.join(',')
+      this.doQuery()
+    },
+    doQuery () {
+      this.$refs.pushList.doQuery(this.filters)
+    },
+    goManage () {
+      this.$router.push('/set_subscribe/config')
+    },
     changeTime (item) {
       let time = parseInt(item.start / 1000)
       if (item.end) {
@@ -57,10 +118,12 @@ export default {
       }
       if (item.start === 0 && item.end === 0) {
         this.filters.time = ''
+        this.filters.selectTime = ''
       } else {
         this.filters.time = time
+        this.filters.selectTime = time
       }
-      this.$refs.pushList.doQuery(this.filters)
+      this.doQuery()
     },
     changeArea (item) {
       const area = Object.keys(item).map(v => {
@@ -70,17 +133,48 @@ export default {
         return v
       })
       this.filters.area = area.join(',')
-      this.$refs.pushList.doQuery(this.filters)
+      this.doQuery()
+    }
+  },
+  computed: {
+    canSubmanager () {
+      return !this.$store.state.user.info?.isSubCount
     }
   },
-  computed: {},
   created () {}
 }
 </script>
 
 <style lang="scss" scoped>
+  @include diy-icon('edit', 20, 20);
   .page--sub-push {
     background-color: #fff;
+    .card-title {
+      font-size: 24px;
+      color: #1d1d1d;
+      line-height: 36px;
+    }
+    .clearfix .sub-manager {
+      float: right;
+      margin-bottom: 24px;
+    }
+
+    .sub-manager {
+      display: flex;
+      align-items: center;
+      padding: 8px 16px;
+      font-size: 14px;
+      line-height: 24px;
+      color: #1d1d1d;
+      border-color: #E0E0E0;
+
+      &.el-button:focus,
+      &.el-button:hover {
+        color: inherit;
+        background-color: inherit;
+      }
+    }
+
     .page-content {
       width: 1200px;
       margin: 0 auto;