zhongshen_project/addon/pc/source/os/layouts/components/NsHeaderMid.vue

<template>
  <div class="header-in">
    <router-link to="/" class="header-left"><img v-if="siteInfo.logo" :src="$img(siteInfo.logo)" /></router-link>
    <div class="header-content">
      <nav>
        <ul>
          <li
            v-for="(nav_item, nav_index) in navList"
            :key="nav_index"
            :class="nav_item.url == navSelect ? 'router-link-active' : ''"
            @click="navUrl(nav_item.url, nav_item.is_blank)"
          >
            {{ nav_item.nav_title }}
          </li>
        </ul>
      </nav>
    </div>
    <div class="header-right">
      <span class="iconfont icon-xiaosuo"></span>
      <input type="text" :placeholder="defaultSearchWords" v-model="keyword" @keyup.enter="search" maxlength="50" />
      <el-button size="small" @click="search">搜索</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { apiDefaultSearchWords } from '@/api/pc';
import { navList } from '@/api/website';
export default {
  props: {},
  data() {
    return {
      keyword: '',
      defaultSearchWords: '请输入您要查询的商品',
      cartTotalPrice: 0,
      navList: [],
      navSelect: '',
      searchType: 'goods'
    };
  },
  components: {},
  computed: {
    ...mapGetters(['siteInfo', 'defaultGoodsImage', 'member'])
  },
  created() {
    this.keyword = this.$route.query.keyword || '';
    this.$store.dispatch('site/siteInfo');
    this.getDefaultSearchWords();
    this.nav();
  },
  watch: {
    $route(curr) {
      this.initNav(curr.path);
      if (this.keyword !== curr.query.keyword) {
        this.keyword = curr.query.keyword;
      }
      if (curr.path == '/goods/list') {
        this.navSelect = '';
      }
    },
    member() {
      if (!this.member) {
        this.$store.commit('cart/SET_CART_COUNT', 0);
        this.cartTotalPrice = 0;
      }
    }
  },
  methods: {
    search() {
      if (this.searchType == 'goods')
        this.$router.push({
          path: '/goods/list',
          query: {
            keyword: this.keyword ? this.keyword : this.defaultSearchWords
          }
        });
      else
        this.$router.push({
          path: '/street',
          query: {
            keyword: this.keyword
          }
        });
    },
    getDefaultSearchWords() {
      apiDefaultSearchWords({}).then(res => {
        if (res.code == 0 && res.data.words) {
          this.defaultSearchWords = res.data.words;
        }
      });
    },
    nav() {
      navList({})
        .then(res => {
          if (res.code == 0 && res.data) {
            this.navList = res.data;
            for (let i in this.navList) {
              this.navList[i]['url'] = JSON.parse(this.navList[i]['nav_url']).url;
            }
            this.initNav(this.$route.path);
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    initNav(path) {
      for (let i in this.navList) {
        if (this.navList[i]['url'] == path) {
          this.navSelect = path;
          continue;
        }
      }
    },
    navUrl(url, target) {
      if (!url) return;
      if (url.indexOf('http') == -1 || url.indexOf('https') == -1) {
        if (target) {
          let routeUrl = this.$router.resolve({
            path: url
          });
          window.open(routeUrl.href, '_blank');
        } else
          this.$router.push({
            path: url
          });
      } else {
        if (target) window.open(url);
        else window.location.href = url;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.header-in {
  display: flex;
  align-items: center;
  width: $width;
  height: 100px;
  margin: auto;

  .header-left {
    max-width: 200px;
    max-height: 60px;
    margin-right: 40px;
    overflow: hidden;

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .header-content {
    overflow: hidden;
    flex: 1;
    &::-webkit-scrollbar {
      width: 10px;
      height: 5px;
    }
    &::-webkit-scrollbar-track {
      background: rgb(179, 177, 177);
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgb(136, 136, 136);
      border-radius: 10px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    margin-left: 20px;
    width: 250px;
    height: 36px;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;

    .iconfont {
      color: #999;
      margin-left: 10px;
      font-size: 18px;
    }

    input {
      height: 22px;
      background: none;
      outline: none;
      border: none;
      padding: 0 10px;
      font-size: 14px;
    }

    button {
      border: none;
      color: $base-color;
      font-size: 16px;
      padding: 0;
    }
  }

  nav {
    ul {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 28px;
      overflow: hidden;

      li {
        cursor: pointer;
        list-style: none;
        margin-right: 20px;
        font-size: 16px;
        float: left;

        &:last-of-type {
          margin-right: 0;
        }
      }

      li:hover {
        color: $base-color;
      }

      .router-link-active {
        color: $base-color;
      }
    }
  }
}
</style>