hemall.terabimsoft.com.cn/plugins/shop_server/components/default/topMenu.vue

<template>
  <div class="menu_select" :class="{'fixed-top': headOver && basicSet.set.set_top == 1,'padding0': basicSet.set.set_top == 1}">
    <div v-html="css"></div>
    <div class="select_content m-auto flex">
      <!--商品分类-->
      <div class="item item-200 flex flex-j-c flex-a-c" @click.stop="openClass" :class="{'showClass': showClass}" v-if="basicCategory.data">
        <span>全部商品分类</span><img src="~/assets/images/icon/select.png" class="down_arrow">
        <div class="hide_menu otherClass double_hide_menu" style="width:100%;" :class="{'show-all': basicSet.set.category_show == 1 && !headOver && isHome > -1}" v-if="!isClick">
          <div style="position: relative;width:100%;">
            <div class="hide_item flex flex-j-c flex-a-c" @click.stop="openChild(ind)" :class="{'showChild': showClass && showChild == ind}" v-for="(item,ind) in basicCategory.data.slice(0,10)"
                 :key="ind"> <span>{{item.name}}</span>
              <div class="hide_item_item" @click.stop>
                <div class="title flex flex-a-c" @click.stop="toCategoryChild({id: item.id})"><span class="line"></span>{{item.name}}分类</div>
                <div class="no-goods" v-if="!item.children || item.children.length <= 0">
                  暂无更多
                </div>
                <div class="icon-box">
                  <div class="icon" v-for="(obj,bidx) in item.children" :key="bidx"
                       @click.stop="toCategoryChild({id: obj.id})">
                    <div class="img flex flex-a-c flex-j-c">
                      <img :src="obj.thumb_src">
                    </div>
                    <p class="icon-name">{{obj.name}}</p>
                  </div>
                </div>
              </div>
              <div class="adv-img-box" @click.stop="toLink(item)">
                <img v-if="item.pc_adv_img_src" :src="item.pc_adv_img_src" alt="">
              </div>
            </div>
            <div class="hide_item flex flex-j-c flex-a-c" v-if="basicCategory.total > 10"
                 @click.stop="toUrl('category')">查看更多分类
            </div>
          </div>
        </div>

      </div>
      <!--商品分类end-->

      <!--后台自定义链接-->
      <div class="item item-1 flex flex-j-c flex-a-c" v-for="(item,index) in basicSet.nav_top" :key="index"
           @click="toLink(item)">
        <img :src="item.img_src" v-if="item.img_src" style="margin: 3px 10px 0 0;" class="nav-icon"> <span>{{item.nav_name}}</span>
        <img src="~/assets/images/icon/select.png" v-if="item.sub_nav && item.sub_nav.length>0" class="down_arrow">
        <div class="hide_menu">
          <template v-if="item.sub_nav && item.sub_nav.length>0">
            <div class="hide_item flex flex-j-c flex-a-c" v-for="(list,ind) in item.sub_nav" :key="ind"
                 @click="toLink(list)">{{list.nav_name}}</div>
          </template>
        </div>
      </div>
      <!--后台自定义链接end-->

    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";

  // 自定义样式
  const css = function () {
    return `
        .menu_select {
          --dark_color: ${this.dark_color}
        }
        .menu_select .select_content .hide_menu{
           background-color: ${this.dark_color};
        }

    `;
  };

  export default {
    props: {
      menu: {
        type: Array
      }
    },
    data() {
      return {
        showClass: false,
        showChild: -1,
        isClick: false,
        isHome: -1,
        headOver: false,
        dark_color: "#ffffff",
        category_template: '01'
      };
    },
    computed: {
      ...mapState(["basicSet", "basicCategory", "basic_info"]),
      css() {
        return "<style>" + css.call(this) + "</style>";
      }
    },
    watch: {
      '$route'(res) {
        if (res.name == 'home') {
          this.isHome = 1;
        }else {
          this.isHome = -1;
          if(res.name == 'catelist-id'){
            if(this.basicSet.set.pc_temp == 2){
              this.isHome = 1;
            }
          }
        }
      }
    },
    mounted() {
      let color =
        this.basicSet.set && this.basicSet.set.theme_color
          ? this.basicSet.set.theme_color
          : "#29ba9c";

      this.dark_color = this.changeColor(color, 0.15, true);

      // 获取分类模板
      if (this.basic_info.home && this.basic_info.home.item && this.basic_info.home.item.is_decorate === 1) {
        if (this.basic_info.home.item.ViewSet.category.is_default != 0) {
          this.category_template = this.basic_info.home.item.ViewSet.category.code.substring(8);
        } else {
          this.category_template = "01"
        }
      }

      this.isHome = window.location.href.indexOf('/home?') || window.location.href.indexOf('/home/?');
      window.addEventListener('scroll', this.handleScroll);
      if(this.$route.name == 'catelist-id'){
        // 分类模板2要求不显示下拉
        if(this.basicSet.set.pc_temp == 2){
          this.isHome = 1;
        }
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
      pad(num, totalChars) {
        var pad = "0";
        num = num + "";
        while (num.length < totalChars) {
          num = pad + num;
        }
        return num;
      },
      // Ratio is between 0 and 1
      changeColor(color, ratio, darker) {
        // Trim trailing/leading whitespace
        color = color.replace(/^\s*|\s*$/, "");

        // Expand three-digit hex
        color = color.replace(
          /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
          "#$1$1$2$2$3$3"
        );

        // Calculate ratio
        let difference = Math.round(ratio * 256) * (darker ? -1 : 1),
          // Determine if input is RGB(A)
          rgb = color.match(
            new RegExp(
              "^rgba?\\(\\s*" +
              "(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])" +
              "\\s*,\\s*" +
              "(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])" +
              "\\s*,\\s*" +
              "(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])" +
              "(?:\\s*,\\s*" +
              "(0|1|0?\\.\\d+))?" +
              "\\s*\\)$",
              "i"
            )
          ),
          alpha = !!rgb && rgb[4] != null ? rgb[4] : null,
          // Convert hex to decimal
          decimal = !!rgb
            ? [rgb[1], rgb[2], rgb[3]]
            : color
              .replace(
                /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
                function () {
                  return (
                    parseInt(arguments[1], 16) +
                    "," +
                    parseInt(arguments[2], 16) +
                    "," +
                    parseInt(arguments[3], 16)
                  );
                }
              )
              .split(/,/),
          returnValue;

        // Return RGB(A)
        return !!rgb
          ? "rgb" +
          (alpha !== null ? "a" : "") +
          "(" +
          Math[darker ? "max" : "min"](
            parseInt(decimal[0], 10) + difference,
            darker ? 0 : 255
          ) +
          ", " +
          Math[darker ? "max" : "min"](
            parseInt(decimal[1], 10) + difference,
            darker ? 0 : 255
          ) +
          ", " +
          Math[darker ? "max" : "min"](
            parseInt(decimal[2], 10) + difference,
            darker ? 0 : 255
          ) +
          (alpha !== null ? ", " + alpha : "") +
          ")"
          : // Return hex
          [
            "#",
            this.pad(
              Math[darker ? "max" : "min"](
                parseInt(decimal[0], 10) + difference,
                darker ? 0 : 255
              ).toString(16),
              2
            ),
            this.pad(
              Math[darker ? "max" : "min"](
                parseInt(decimal[1], 10) + difference,
                darker ? 0 : 255
              ).toString(16),
              2
            ),
            this.pad(
              Math[darker ? "max" : "min"](
                parseInt(decimal[2], 10) + difference,
                darker ? 0 : 255
              ).toString(16),
              2
            )
          ].join("");
      },

      openClass() {
        this.showClass = !this.showClass;
        if(!this.showClass) {
          this.showChild = -1;
        }
      },
      openChild(ind) {
        if(this.showChild == ind) {
          this.showChild = -1;
        }else {
          this.showChild = ind;
        }
      },
      toCategoryChild(params) {
        this.isClick = true;
        this.showClass = false;
        this.showChild = -1;
        if (this.category_template === '03') {
          if(this.$baseURL) {
            // 静态部署环境下
            this.$router.push(this.fun.getUrl('category_child',{}, params));
          }else {
            this.$router.push(this.fun.getUrl('category_child-id', params));
          }
        }else {
          if(this.$baseURL) {
            // 静态部署环境下
            this.$router.push(this.fun.getUrl('catelist',{}, params));
          }else {
            this.$router.push(this.fun.getUrl('catelist-id', params));
          }
        }
        setTimeout(()=>{
          this.isClick = false;
        },500);
      },
      toUrl(url, params) {
        this.$router.push(this.fun.getUrl(url, params));
      },
      toLink(item) {
        this.showClass = false;
        this.showChild = -1;
        if(item.pc_adv_url) {
          window.open(item.pc_adv_url, "_blank");
          return;
        }
        if ((item.sub_nav && item.sub_nav.length > 0) || !item.url) {
          return;
        }
        if(item.url) {
          window.open(item.url, "_blank");
        }
      },
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 132) {
          this.headOver = true;
        } else {
          this.headOver = false;
        }
      },
    }
  };
</script>
<style lang="scss" scoped>
  .menu_select {
    width: 100%;
    /*margin: 0 auto 10px auto;*/
    padding-top: 130px;
    height: 45px;
    background-color: var(--color);
    .select_content {
      width: 1200px;
      .item:last-child {
        margin-right: 0;
      }
      .item {
        color: #fff;
        font-size: 16px;
        height: 44px;
        cursor: pointer;
        position: relative;
        padding: 0 20px;
        /*margin-right: 50px;*/
        .nav-icon {
          width: 20px;
          height: 20px;
        }
        .down_arrow {
          margin-left: 8px;
          /*display: none;*/
        }
        .hide_menu {
          opacity: 0;
          position: absolute;
          /*background-color: #2c7a60;*/
          top: 43px;
          white-space: nowrap;
          z-index: 99;
          transition: all 0.5s;
          width: 100%;
          .hide_item {
            transition: all 0.5s;
            min-height: 0px;
            height: 0px;
            opacity: 0;
            width: 100%;
            display: flex;
            font-size: 0;
            padding: 0 20px;
            box-sizing: border-box;
            word-break: break-all;
            white-space: pre-line;
            .hide_item_item::-webkit-scrollbar {display:none}
            .adv-img-box {
              display: none;
              position: absolute;
              width: 260px;
              height: 100%;
              left: 940px;
              z-index: 99;
              top: 0;
              img {
                width: 260px;
                height: 100%;
              }
            }
            .hide_item_item {
              transition: all 0.3s;
              display: none;
              background-color: #fff;
              box-shadow: 0px 2px 10px 0px rgba(171, 171, 171, 0.5);
              width: 720px;
              height: 100%;
              min-height: 300px;
              padding: 15px 40px;
              overflow-y: scroll;
              box-sizing: border-box;
              position: absolute;
              left: 220px;
              z-index: 99;
              top: 0;
              color: #333;
              .line {
                width: 3px;
                height: 15px;
                background-color: var(--color);
                display: inline-block;
                margin-right: 4px;
              }
              .title {
                font-weight: bold;
                font-size: 15px;
              }
              .icon-box {
                display: flex;
                flex-wrap: wrap;
              }
              .icon {
                display: inline-block;
                margin: 8px 15px;
                text-align: center;
                width: 90px;
                .img {
                  width: 90px;
                  height: 90px;
                  border-radius: 50%;
                  margin-bottom: 14px;
                  img {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .icon-name {
                width: 90px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            &:hover {
              background-color: #fff;
              color: var(--color);
              .hide_item_item {
                display: block;
              }
              .adv-img-box {
                display: block;
              }
            }
            &.showChild {
              background-color: #fff;
              color: var(--color);
              .hide_item_item {
                display: block;
              }
              .adv-img-box {
                display: block;
              }
            }
            .no-goods {
              margin: 20px;
              font-size: 16px;
              color: var(--color);
            }
          }
        }
      }
      .item-200 {
        background-color: var(--dark_color);
        min-width: 200px;
        padding: 0 10px;
      }
      .item:hover {
        background-color: var(--dark_color);
        .hide_menu {
          opacity: 1;
          .hide_item {
            min-height: 47px;
            height: auto;
            font-size: 14px;
            opacity: 1;
          }
        }
        .otherClass {
          height: 470px;
        }
        .down_arrow {
          display: block;
        }
        .double_hide_menu {
          display: flex;
          min-width: 200px;
        }
      }
      .item.showClass {
        background-color: var(--dark_color);
        .hide_menu {
          opacity: 1;
          .hide_item {
            min-height: 47px;
            height: auto;
            font-size: 14px;
            opacity: 1;
          }
        }
        .otherClass {
          height: 470px;
        }
        .down_arrow {
          display: block;
        }
        .double_hide_menu {
          display: flex;
          min-width: 200px;
        }
      }
    }
  }
  .menu_select.fixed-top {
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 100;
    transform: translateX(-50%);
  }
  .padding0 {
    padding-top: 0;
  }

  .double_hide_menu.show-all {
    opacity: 1!important;
    display: flex;
    min-width: 200px;
    height: 470px;
    .hide_item {
      min-height: 47px!important;
      height: auto;
      font-size: 14px!important;
      opacity: 1!important;
    }
  }
</style>