mall4pc-bbc/components/common-header.vue

<template>
  <!-- 头部 -->
  <div class="head">
    <div :class="['content',this.$store.state.locale == 'en'?'content-en':'']">
      <nuxt-link to="/" class="logo">
        <img class="logo-img" v-if="webConfigData.pcLogoImgText" :src="webConfigData.pcLogoImgText"/>
        <!--<div class="name">
          <span class="cn">蓝海创新科技</span>
          <span class="en">Blue Ocean Mall</span>
        </div>-->
      </nuxt-link>
      <div :class="['menu',this.$store.state.locale == 'en'?'menu-en':'']">
        <nuxt-link to="/" class="item" >{{ $t('commonHead.home') }}</nuxt-link>
        <nuxt-link
          to="/list?st=0"
          :class="[
            'item',
            $route.path == '/list' && $route.query.st == 0 ? 'item-on' : ''
          ]"
         
          >{{ $t('commonHead.productList') }}</nuxt-link
        >
        <nuxt-link
          to="/list?st=1"
          :class="[
            'item',
            $route.path == '/list' && $route.query.st == 1 ? 'item-on' : ''
          ]"
         
          >{{ $t('commonHead.newProducts') }}</nuxt-link
        >
        <nuxt-link
          to="/special-discount"
          :class="['item', $route.path == '/special-discount' || $route.path == '/discount-detail' ? 'item-on' : '']"
         
          >{{ $t('commonHead.limitedTimeOffer') }}</nuxt-link
        >
        <nuxt-link
          to="/group-buy"
          :class="['item', $route.path == '/group-buy' ? 'item-on' : '']"
         
          >{{ $t('commonHead.groupDiscount') }}</nuxt-link
        >
        <nuxt-link
          to="/flash-sale"
          :class="['item', $route.path == '/flash-sale' ? 'item-on' : '']"
         
          >{{ $t('commonHead.spikeSpecial') }}</nuxt-link
        >
        <!-- <nuxt-link
          to="/coupons"
          :class="['item', $route.path == '/coupons' ? 'item-on' : '']"
          >领券中心</nuxt-link> -->
        <a
          href="javascript:void(0)"
          :class="['item', $route.path == '/coupons' ? 'item-on' : '']"
         
          @click="toCoupons"
          >{{ $t('commonHead.voucherCenter') }}</a>
      </div>
      <div class="search">
        <div class="search-input-box">
          <input
            type="text"
            v-model="searchTerms"
            class="search-input"
            @keyup.enter="toSearchProdPage"
            :placeholder="$t('searchByStOrpN')"
          />
          <div class="select-search" @click="selectChoose" :style="$t('language')=='en'?productShop:''">
            {{ searchItem }}
          </div>
          <ul class="select-list" v-if="showSelectItem">
            <li class="select-item" @click="selectSearchItem(0)">{{$t('index.prod')}}</li>
            <li class="select-item" @click="selectSearchItem(1)">{{$t('index.shop')}}</li>
          </ul>
        </div>
        <input
          type="submit"
          class="search-btn"
          :value="this.$t('index.search')"
          @click="toSearchProdPage"
          :style="$t('language')=='en'?'letter-spacing: 0px;':'letter-spacing: 2px;'"
        />
      </div>
    </div>
    <!-- 登录弹窗组件 -->
    <LoginPopup v-if="showLogin" v-on:hideLoginPop="hideLoginPop" />
    <!-- /登录弹窗组件 -->
  </div>
  <!-- /头部 -->
</template>

<script>
import Cookie from 'js-cookie'
import LoginPopup from '~/components/login-popup'
export default {
  components: {
    LoginPopup
  },
  data () {
    return {
      showLogin: false,
      searchItem: this.$t('index.prod'),  //搜索框内容
      showSelectItem: false, //下拉框显隐
      searchTerms: this.$route.query.pn, //搜索词
      searchType: 0,  //搜索类型 0商品 1店铺

      tabType: this.$router.history.current.query.st || 0,
      webConfigData: {},

      language: this.$store.state.locale,
      fontStyleDowmEn:{
        fontSize:'14px',
        padding:'0 15px'
      },
      productShop:{
        position: "relative",
        left: "-9px"
      }
    }
  },
  watch: {
    '$route' (to, from) { //监听路由是否变化
      if (to.query.st != from.query.st) {
        this.tabType = to.query.st
      }
      this.searchTerms = ''
      if (!to.query.st) {
        if (to.path == '/group-buy') {
          this.tabType = 3
        } else if (this.$router.history.current.path == '/special-discount') {
          this.tabType = 2
        } else if (this.$router.history.current.path == '/flash-sale') {
          this.tabType = 4
        } else if (this.$router.history.current.path == '/coupons') {
          this.tabType = 5
        } else {
          this.tabType = 0
        }
      }
    },
    // 监听搜索框搜索词是否为空
    // searchTerms (newValue,oldValue) {
    //   if(newValue == '') {
    //     oldValue = ''
    //     this.$router.history.current.query.pn = newValue
    //   }
    //   this.$router.history.current.query.pn = newValue
    // }
  },
  created () {
    if (this.$router.history.current.path == '/group-buy') {
      this.tabType = 3
    } else if (this.$router.history.current.path == '/flash-sale') {
      this.tabType = 4
    } else if (this.$router.history.current.path == '/coupons') {
      this.tabType = 5
    } else {
      this.tabType = 0
    }
  },
  mounted () {
    console.log(this.$route.query);
    if (this.$route.query&&this.$route.query.shopName) {
      this.selectSearchItem(1)
      this.searchTerms=this.$route.query.shopName
    }
    // 获取网站配置信息
    this.webConfigData = JSON.parse(localStorage.getItem('webConfig') || '{}')
  },
  methods: {
    /**
     * 统一跳转方法
     */
    routeTo (e) {
      let path = e.target.dataset.route
      switch (path) {
        case 'logoIndex':
          this.$router.push({ path: '/' })
          break;
        case 'index':
          this.$router.push({ path: '/' })
          break;
        case 'newArrivals':
          this.$router.push({ path: '' })
          break;
        case 'preferential':
          this.$router.push({ path: '' })
          break;
        case 'teamBuying':
          this.$router.push({ path: '' })
          break;
        case 'seckill':
          this.$router.push({ path: '' })
          break;
        case 'couponCenter':
          this.$router.push({ path: 'user-center/uc-coupons' })
          break;
        default:
          break;
      }
    },

    /**
     * 领券中心
     */
    toCoupons () {
      // if (Cookie.get('token')) {
      //   console.log('token1:',Cookie.get('token'))
      //   this.$router.push({ path: '/coupons' })
      // } else {
      //   console.log('token2:',Cookie.get('token'))
      //   this.showLogin = true
      // }
      console.log('coupons')
      this.$router.push({ path: '/coupons' })
    },
    /**
     * 隐藏登录弹窗
     */
    hideLoginPop () {
      this.showLogin = false
    },

    /** 搜索框选择 */
    selectChoose () {
      this.showSelectItem = !this.showSelectItem
    },
    /** 点击选择 店铺 || 商品 */
    selectSearchItem (sts) {
      if (sts === 0) {
        this.searchItem = this.$t('index.prod')
        this.showSelectItem = false
        this.searchType = 0 //商品
      } else if (sts === 1) {
        this.searchItem = this.$t('index.shop')
        this.showSelectItem = false
        this.searchType = 1 //店铺
      }
    },
    /**
     * 失去焦点
     */
    // changeSearchTerms (searchTerms) {
    //   this.searchTerms = searchTerms
    //   this.toSearchProdPage
    // },
    /**
     * 搜索
     */
    toSearchProdPage () {
      var searchType = this.searchType
      if(this.searchTerms!==undefined){
        var searchTerms = this.searchTerms.trim() //去除字符串的头尾空格
      }
      if (searchType == 0) {
        if (!searchTerms) {
          this.$message({
            message: this.$t('commonHead.productNameCannotBeEmpty'),
            type: 'error',
            duration: 1000
          })
          return
        }
        // 跳转到商品列表页
        this.$router.push({ path: '/list?pn=' + searchTerms })
      } else if (searchType == 1) {
        if (!searchTerms) {
          this.$message({
            message: this.$t('commonHead.storeNameCannotBeEmpty'),
            type: 'error',
            duration: 1000
          })
          return
        }
        // 跳转到店铺列表页
        this.$router.push({ path: '/shopList?shopName=' + searchTerms })
      }
    },
  },
}
</script>

<style scoped src='~/assets/css/home.css'></style>