yzzn-middleground-supplier/src/views/components/login/topMenu.vue

<template>
  <div class="topMenu">
    <div class="topLogo">
      <img
          src="@/assets/images/new_text_log.png"
          style="width: 100%; height: 100%"
      />
    </div>
    <div class="menuSty">
      <el-dropdown
          v-for="(item,index1) in menuList"
          :key="index1"
          style="margin-right: 40px"
      >
        <span class="el-dropdown-link">
          {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(it,index2) in item.data" :key="index2">
            {{ it.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="topBtn">
      <span class="mobileSty">
        <i class="el-icon-phone-outline"></i>
        0513-88888888
      </span>
      <el-button
          type="primary"
          class="btnSty"
          @click="toRegister()"
          v-if="methodType === 1"
      >注册
      </el-button
      >
      <el-button
          type="primary"
          class="btnSty"
          @click="toLogin()"
          v-if="methodType === 2"
      >登录
      </el-button
      >
    </div>
  </div>
</template>

<script>
import { getLoginPagePopularizeModuleConfigPage } from '@/api/supplier/loginPagePopularizeModuleConfig'
import { getConfigData } from '@/api/infra/config'

export default {
  name: 'topMenu',
  props: {
    methodType: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      menuList: [
        {
          name: '行业解决方案',
          data: [
            { name: '行业解决方案1' },
            { name: '行业解决方案2' },
            { name: '行业解决方案3' }
          ]
        },
        {
          name: '行业标杆',
          data: [
            { name: '行业标杆1' },
            { name: '行业标杆2' },
            { name: '行业标杆3' }
          ]
        },
        {
          name: '服务支持',
          data: [{ name: '服务支持' }]
        },
        {
          name: '关于会助理',
          data: [{ name: '关于会助理' }]
        }
      ],
      loginMenuData: []
    }
  },
  mounted() {
    getConfigData('login_menu').then(res => {
      if (res.data) {
        this.menuList = JSON.parse(res.data.value)
        this.menuList.forEach(item => {
          this.getLoginPageData(item.parentId, 1, item)
        })
        console.log(this.menuList)
      }
    })
  },
  methods: {
    getLoginPageData(parentId, type, data) {
      let queryParams = {
        type: type,
        parentId: parentId,
        status: 1
      }
      // 执行查询
      getLoginPagePopularizeModuleConfigPage(queryParams).then(response => {
        if (response.data) {
          response.data.list.forEach(item => {
            data.data.push(item)
          })
        }
      })
    },
    /**
     * 跳转登录页面
     */
    toLogin() {
      this.$router.push('/login').catch(() => {
      })
    },
    /**
     * 跳转注册页面
     */
    toRegister() {
      this.$router.push('/register').catch(() => {
      })
    }
  }
}
</script>

<style scoped>
.menuSty {
  float: left;
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.mobileSty {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  line-height: 18px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.btnSty {
  font-size: 20px;
  width: 102px;
  height: 50px;
  margin-left: 3%;
}

.topBtn {
  float: left;
  width: 28%;
  height: 100%;
  display: flex;
  align-items: center;
}

.topLogo {
  float: left;
  width: 20%;
  height: 100%;
  margin-left: 12%;
}

.topMenu {
  background: #f0f7ff;
  height: 8vh;
}

.dropdown-link-text {
  font-size: 20px;
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  line-height: 18px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>