proginn-frontend/kaifain_v2/components/Toolbar.vue

<template lang="pug">
  .toolbar
    .container.is-content
      .level.is-mobile
        .level-left
          .level-item
            b-dropdown(
              :triggers="[isMobile ? 'click' : 'hover']"
              :append-to-body="isMobile"
              )
              .field.trigger(slot="trigger")
                span {{sortType === 1 ? '最新发布' : '综合排序'}}
                i.progico.progico-arrow
              b-dropdown-item(
                :focusable="false"
                @click="changeSortType(0)"
                ) 综合排序
              b-dropdown-item(
                :focusable="false"
                @click="changeSortType(1)"
                ) 最新发布

          .level-item
            b-dropdown.city-dropdown(
              ref="city-dropdown"
              :triggers="[isMobile ? 'click' : 'hover']"
              :class="{'is-force-hide': forceHideCityMenu}"
              :append-to-body="isMobile"
              custom
              )
              .field.trigger(
                slot="trigger"
                @mouseenter="onCityTriggerHover"
                )
                span {{cityId && cityMap[cityId] && cityMap[cityId].name || '所在地区'}}
                i.progico.progico-arrow
              .city-menu
                .row
                  .tag.is-rounded(
                    :class="!cityId || !cityMap[cityId] ? ['is-primary', 'is-light'] : []"
                    @click="changeCity()"
                    ) 不限城市
                .split
                .row.tags
                  .tag.is-rounded(
                    v-for="item in cities"
                    :key="item.id"
                    :class="cityId === item.id ? ['is-primary', 'is-light'] : []"
                    @click="changeCity(item)"
                    ) {{item.name}}

          .level-item
            .field
              b-checkbox(
                v-model="isChoiceCache"
                @input="changeIsChoice"
                ) 优选服务

        .level-right
          slot(name="right")
</template>

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

const enum SortType {
  Default,
  Recently
}

export default Vue.extend({
  name: 'Toolbar',
  props: {
    cities: {
      type: Array,
      default: () => [] as any[]
    },
    sortType: {
      type: Number,
      default: SortType.Default
    },
    cityId: {
      type: [Number, String],
      default: null
    },
    isChoice: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      isChoiceCache: false,
      forceHideCityMenu: false,
      // @ts-ignore
      isMobile: this.$deviceType.isMobile()
    }
  },

  computed: {
    cityMap(): any {
      return this.cities && this.cities.length ? this.cities.reduce((map, item) => {
        map[item.id] = item
        return map
      }, {}) : {}
    }
  },

  methods: {
    onCityTriggerHover() {
      this.forceHideCityMenu = false
    },

    changeSortType(type) {
      if (type !== this.sortType) {
        this.$emit('update:sortType', type)
      }
    },

    changeCity(item) {
      const id = item && item.id || null

      if (id !== this.cityId) {
        this.$emit('update:cityId', id)
      }

      if (this.isMobile) {
        // @ts-ignore
        this.$refs['city-dropdown'].toggle()
      }

      this.forceHideCityMenu = true
    },

    changeIsChoice(val) {
      if (val !== this.isChoice) {
        this.$emit('update:isChoice', val)
      }
    }
  },

  created() {
    this.isChoiceCache = this.isChoice
  }
})
</script>

<style lang="scss">
.kaifain-view {
  .toolbar {
    background: #f6f6f7;
    height: 36px;

    .level {
      margin: 0 -0.75rem;
    }

    .level-item {
      font-size: 0.75rem;
      color: #777;
      user-select: none;

      .field {
        height: 36px;
        min-width: 86px;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;

        &.trigger:hover {
          background: #fbfbfc;
          color: #555;
        }
      }

      .progico-arrow {
        transform: rotate(90deg);
        font-size: 10px;
        margin: 2px 0 0 4px;
        opacity: 0.86;
      }
    }

    .dropdown-menu {
      padding: 0;
      margin-top: -4px;
    }

    .dropdown-content {
      box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
      border-radius: 0;
    }

    .dropdown-item {
      font-size: 0.75rem;
    }

    @media screen and (max-width: 767px) {
      .level {
        margin: 0;
      }

      .level-left {
        flex: 1;
      }

      .level-right {
        display: none;
      }
    }
  }

  .city-dropdown {
    .city-menu {
      width: 392px;
      padding: 0.5rem 0 0.5rem 1rem;

      .split {
        height: 1px;
        background: #eee;
        margin: 0.75rem 1rem 0.75rem 0;
      }

      .tag {
        min-width: 68px;
        background: transparent;
        cursor: pointer;

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

      .tags > .tag {
        margin: 0 0.25rem 0.3125rem 0;
      }
    }

    &.is-mobile-modal {
      @media screen and (max-width: 767px) {
        .city-menu {
          width: auto;
        }
      }
    }
  }

  .dropdown.is-hoverable.is-force-hide .dropdown-menu {
    display: none;
  }
}
</style>