proginn-frontend/kaifain_v2/components/CategoryNav.vue

<template lang="pug">
  .category-nav.container.is-content
    .columns
      .column.label 解决方案
      .column.tags
        a.tag(
          v-for="item in fullyClasses"
          :class="topCatId === item.id ? ['is-primary', 'is-light'] : []"
          :href="item.id !== '_' ? `/c/${item.id}` : '#'"
          @click.stop.prevent="changeClass(item)"
          ) {{item.name}}
        .subnav(changeCategory
          v-for="item in fullyClasses"
          v-if="item.categories && item.categories.length"
          v-show="topCatId === item.id"
          )
          a.tag.is-sub(
            v-for="cat in item.categories"
            :class="catId === cat.cat_id ? ['is-primary', 'is-light'] : []"
            :href="cat.cat_id !== '_' ? `/c/${cat.cat_id}` : '#'"
            @click.stop.prevent="changeCategory(item, cat)"
            ) {{cat.alias || cat.name}}


    .columns
      .column.label 服务方式
      .column.tags
        #st-mark
        .tag(
          v-for="item in fullyServiceTypes"
          :class="serviceType === item.hash_id ? ['is-primary', 'is-light'] : []"
          @click="changeServiceType(item)"
          ) {{item.alias || item.name}}

</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'CategoryNav',
  props: {
    classes: {
      type: Array,
      default: () => [] as any[]
    },
    serviceTypes: {
      type: Array,
      default: () => [] as any[]
    },
    topCatId: {
      type: String,
      default: '_'
    },
    catId: {
      type: String,
      default: '_'
    },
    serviceType: {
      type: String,
      default: '_'
    }
  },

  data() {
    return {
    }
  },

  computed: {
    fullyClasses(): any[] {
      return [{
        id: '_',
        name: '全部'
      },
      ...this.classes.map((row) => {
        const { hash_id, name, categories } = row
        const categoriesCopy = categories && categories.length ? [...categories] : []

        if (categoriesCopy.length) {
          categoriesCopy.unshift({
            cat_id: '_',
            name: '全部'
          })
        }

        return {
          id: hash_id,
          name,
          categories: categoriesCopy
        }
      })]
    },

    fullyServiceTypes(): any[] {
      return [{
        hash_id: '_',
        name: '全部'
      },
      ...this.serviceTypes
      ]
    }
  },

  methods: {
    changeClass(item) {
      this.$emit('update:topCatId', item.id)
      this.$emit('update:catId', '_')
    },

    changeCategory(topCat, cat) {
      this.$emit('update:topCatId', topCat.id)
      this.$emit('update:catId', cat.cat_id)
    },

    changeServiceType(item) {
      this.$emit('update:serviceType', item.hash_id)
    }
  }
})
</script>

<style lang="scss">
.kaifain-view .category-nav {
  padding: 2rem 0;

  .column {
    &.label {
      font-size: 0.8125rem;
      font-weight: 500;
      flex: none;
      margin: 4px 0 0;
      user-select: none;
    }
  }

  .tags {
    &:last-child {
      margin-bottom: -1rem;
    }

    > .tag {
      margin-right: 0.75rem;
    }
  }

  .tag {
    font-size: 0.782rem;
    min-width: 64px;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;

    &:not(.is-primary):hover {
      background: #efeff0;
    }

    &.is-sub {
      background: #f9f9fa;
    }
  }

  .subnav {
    background: #f9f9fa;
    border-radius: 8px;
    padding: 0.5rem 0.75rem 1px;
    margin: 0.125rem 0 0.5rem;
  }
}

.kaifain-view {
  @media screen and (max-width: 767px) {
    .category-nav {
      padding: 0.75rem 0 1.5rem;

      .column.label {
        padding: 0.25rem 0.75rem 0.125rem;
      }
    }
  }
}
</style>