nyzy_vue/src/views/gateway/common/header.vue

<template>
  <div>
    <div class="header">
      <div class="headerbox">
        <div class="logo left"><img :src="$tImg(commonData,'heardLogoUrl')" ></div>
        <div class="search right">
          <div class="sch_up">
            <ul>
              <li><a href="javascript:void(0);" @click="window.open($tf(commonData,'homepageUrl'))">{{$t('common.schoolHomePage')}}</a></li>
              <!-- <li><a href="javascript:void(0);" @click="$to('home')">{{$t('common.homePage')}}</a></li> -->
              <!-- <li><a href="javascript:void(0);">{{$t('common.contactUs')}}</a></li> -->
              <li v-if="utils.isCn()"><a href="javascript:void(0);" @click="$i18n.locale = utils.langMap.en">{{($i18n.$langs.find(x => x.langKey == utils.langMap.en) || {}).name}}</a></li>
              <li v-if="utils.isEn()"><a href="javascript:void(0);" @click="$i18n.locale = utils.langMap.cn">{{($i18n.$langs.find(x => x.langKey == utils.langMap.cn) || {}).name}}</a></li>
            </ul>
          </div>
          <div class="sch_down">
            <div class="sch_downbox">
              <input v-model="searchText" :placeholder="$t('common.searchPlaceholder')"/>
              <span class="sch_img right" @click="() => {searchText?$to('listPage',{findStr:searchText}):''}"><img src="img/search.png" ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="MutiNav">
      <ul class="multiUl">
        <li>
          <a class="mulgo" href="javascript:void(0);" @click="$to('home')">
            <span class="mulgochie">{{$t('common.homeName')}}</span>
            <!-- <span class="mulgoeng">Home</span> -->
          </a>
        </li>
        <!-- 从后台查出栏目拼接 -->
        <li v-for="(column,columnIndex) in columnList" :key="columnIndex" @mouseenter="openMenu" @mouseleave="closeMenu">
          <a class="mulgo " :class="{bg_active:column.id==$route.query.pid}" href="javascript:void(0);" @click="$to('listPage',{pid:column.id,id:(((column || {}).list || [])[0] || {}).id})">
            <span class="mulgochie">{{$tf(column,'name')}}</span>
            <!-- <span class="mulgoeng">{{column.nameen}}</span> -->
          </a>
          <blockquote v-if="column.list && column.list.length">
            <div class="ChildNavIn">
              <a v-for="(children,childrenIndex) in column.list" :class="childrenIndex==0?'First':''" href="javascript:void(0);" :key="childrenIndex" @click="$to('listPage',{pid:children.parent,id:children.id})">
                <span class="mulgochie2">{{$tf(children,'name')}}</span>
                <!-- <span class="mulgoeng">{{children.nameen}}</span> -->
              </a>
            </div>
          </blockquote>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
import { getAction } from '@/api/manage'

let mst;

export default {
  mixins:[getwayMixin],
  props:{
  },
  computed:{
  },
  data(){
    return {
      window,
      searchText: '',
      columnList: [],
    }
  },
  mounted(){
    this.loadData();
  },
  updated(){
  },
  methods:{
    loadData(){
      if(this.$route.query.findStr){
        this.searchText = this.$route.query.findStr;
      }
      //查询栏目
      getAction('/gateway/gatewayColumn/list',{pageSize:-1,isEnable:'Y',type:'!!BLANK'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          let map = {};
          //转成，map
          let parentList = list.filter(x => {
            if(x.parent){
              return false;
            }else{
              map[x.id] = x;
              return true;
            }
          });
          //孩子找父亲
          list.forEach(x => {
            let parent = map[x.parent] || {};
            if(!parent.list) parent.list = [];
            parent.list.push(x);
          });
          this.columnList = parentList;
        }
      });
    },
    //鼠标移入菜单上，显示其下菜单
    openMenu(e){
      var curItem = jQuery(e.target);
      mst = setTimeout(function(){//延时触发
        curItem.find("blockquote").slideDown('fast');
        mst = null;
      });
    },
    //鼠标移出菜单时，隐藏其下菜单
    closeMenu(e){
      if(mst)clearTimeout(mst);
      jQuery(e.target).find("blockquote").slideUp('fast');
    }
  },
}
</script>

<style scoped>
</style>