hfysite/components/header/menuDrops/menuDrop.vue

<template>
  <div class="dropMap drop-default">
    <div class="drop-menus">
      <a  v-for="item in menus"
          :key="item.typeKey"
          :class="`menu ${nowMenuKey===item.typeKey?'now':''}`"
          :href="pHref+item.href"
          @mouseenter="toMenuHandle(item)"
      >
        <span >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</span>
      </a>
    </div>
    <div class="drop-view noScroll">
      <div
        v-for="(item,i) in showMenuItems"
        :class="`sub-item ${nowSubMenuId===item.id?'now-sub':''}`"
        :key=" `${nowMenuKey}-${item.id}-${i}`"
        @mouseenter="subItemHandle(item.id)"
        @click="subItemClickHandle(item)"
      >
        <div class="con">
          <div class="img-box">
            <img :src="'/public/'+item.image" :alt="item.name"  class="img"/>
          </div>
          <div class="text-box">
            <div class="name">{{item.name}}</div>
            <div class="remark">{{item.remark}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import langMap from "~/map/langMap";
import {handle} from "~/until/handle";
import {indexTypes} from "../../../store";
import {mapGetters} from "vuex";
import {productMenus} from "~/map/productMap";
/**
 * 解决方案
 * @type {[{typeKey: string, text: string}, {typeKey: string, text: string}]}
 */
const solutionMenus = [
  {
    text: "解决方案",
    typeKey: "sol",
    href: '/sol'
  },
  {
    text: "行业应用",
    typeKey: "acs",
    href: '/acs'
  },
  {
    text: "电力案例",
    typeKey: "epower",
    href: '/epower'
  },
];
export default {
  name: "menuDrop",
  props:{
    lang:{
      default: langMap.lang.cn
    },
    type:{default:'product'},
    pHref: {default:''}
  },
  computed:{
      products(){return this.$store.getters.productTypes},
      solutions(){return this.$store.getters.solutionTypes},
  },
  // 使用vuex getter 获取数据
  data(){
    return {
      langType: langMap.lang,
      menus: [
      ],
      menuSubItems: {},
      showMenuItems: [],
      nowMenuKey: "",
      nowSubMenuId: ""
    }
  },

  beforeMount() {
    this.loadMenus();
    console.log(this.menus);
    if(this.menus && this.menus.length){
      this.nowMenuKey = this.menus[0].typeKey;
      this.loadMenuItems();
    }else{
      console.log('no menu data');
    }

  },
  methods:{
    getLangText(str){
      return langMap.getText(this.lang,str);
    },
    getAbbrText(str){
      return langMap.getAbbrText(this.lang,str);
    },
    loadMenus(){
      if(this.type === "solution"){
        console.log("solution data")
        this.menus = this.solutions;
        console.log(this.menus);
      }else{
        this.menus = this.products;
        console.log(this.menus);
      }

    },
    subItemHandle(id){
      this.nowSubMenuId = id;
    },
    toMenuHandle(item){
      this.nowMenuKey = item.typeKey;
      this.loadMenuItems();
    },
    async loadMenuItems(){
      if(this.menuSubItems[this.nowMenuKey]){
        console.log('load catch');
        this.showMenuItems = this.menuSubItems[this.nowMenuKey];
        return null;
      }
      let url = '';
      if(this.type === "solution"){
        url = 'api/solution/load'
      }else{
        url = 'api/product/load'
      }
      url+=`?key=${this.nowMenuKey}&p=1&l=10`
      // 请求服务端接口
      let [err,result] = await handle(this.$axios.get(url));
      if(err){
        console.log(err);
        return;
      }
      let res = result.data;
      console.log(res)
      if(res.code === 1){
        this.menuSubItems[this.nowMenuKey] = res.data;
        this.showMenuItems = this.menuSubItems[this.nowMenuKey];
        this.nowSubMenuId = this.showMenuItems[0].id;
        console.log(this.nowSubMenuId);
        // console.log(this.menuSubItems);
      }else{
        console.error(res);
        console.log(res.msg);
      }
    },
    subItemClickHandle(item){
      if(item.sourceType == "1"){
        // 尝试加载特定静态页面
        window.location.href = item.source
      }else{
        window.location.href = `${this.pHref}/info/${this.nowMenuKey}?id=${item.id}`
      }
    }
  }
}
</script>

<style scoped>

</style>