flavorOfTimeSzMall/src/components/layout/HeaderNav.vue

<template>
  <header class="header-nav">
    <!-- 顶部通知栏 -->
    <div class="top-notice">
      <div class="container">
        <p>
          欢迎来到企业采购平台！
          <a href="/register" class="highlight">立即注册</a>
        </p>
        <div class="top-links">
          <a href="/user" v-if="isLogin">
            <img v-lazy="userInfo.avatar" alt="用户头像" class="avatar" />
            {{ userInfo.username }}
          </a>
          <a href="/login" v-else>登录</a>
          <span class="separator" v-if="isLogin">|</span>
          <a href="/register" v-if="isLogin">注册</a>
          <a href="/user">采购人中心</a>
          <a href="/userCenter" v-if="isLogin">我的订单</a>
          <a href="">商户后台</a>
          <a href="javascript:;" @click="handleLogout" v-if="isLogin">退出</a>
        </div>
      </div>
    </div>

    <!-- 主导航栏 -->
    <div class="main-nav">
      <div class="container">
        <div class="logo">
          <a href="/">
            <h1>精品商城</h1>
          </a>
        </div>

        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            placeholder="请输入搜索内容"
            v-model="searchText"
            class="search-input"
            @keyup.enter.native="handleSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            ></el-button>
          </el-input>
          <div class="hot-tags">
            <span>热门搜索：</span>
            <a
              href="javascript:;"
              @click="
                searchText = '手机';
                handleSearch();
              "
              >手机</a
            >
            <a
              href="javascript:;"
              @click="
                searchText = '电脑';
                handleSearch();
              "
              >电脑</a
            >
            <a
              href="javascript:;"
              @click="
                searchText = '服装';
                handleSearch();
              "
              >服装</a
            >
          </div>
        </div>

        <!-- 购物车入口 -->
        <div class="cart-entry">
          <a href="/cart" class="cart-link">
            <i class="el-icon-shopping-cart-full cart-icon"></i>
            <span>购物车</span>
            <span class="cart-count" v-if="cartTotalCount > 0">{{
              cartTotalCount
            }}</span>
          </a>
        </div>
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav" v-if="false">
      <div class="container">
        <ul class="nav-list">
          <li class="nav-item">
            <a
              href="/"
              class="nav-link"
              :class="{ active: $route.path === '/' }"
              >首页</a
            >
          </li>
          <li
            v-for="category in categories"
            :key="category.id"
            class="nav-item"
          >
            <a
              href="/category/:id"
              :to="`/category/${category.id}`"
              class="nav-link"
              :class="{ active: $route.params.id == category.id }"
            >
              {{ category.name }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "HeaderNav",
  data() {
    return {
      searchText: "",
    };
  },
  computed: {
    ...mapGetters([
      "getCategories",
      "getCartTotalCount",
      "isUserLogin",
      "getUserInfo",
    ]),
    categories() {
      return this.getCategories;
    },
    cartTotalCount() {
      return this.getCartTotalCount;
    },
    isLogin() {
      // return this.isUserLogin;
      return true;
    },
    userInfo() {
      return this.getUserInfo || {};
    },
  },
  created() {
    this.fetchCategories();
  },
  methods: {
    ...mapActions(["fetchCategories", "logout"]),
    handleSearch() {
      if (this.searchText.trim()) {
        // 这里实际项目中应该跳转到搜索结果页
        this.$message.success(`搜索: ${this.searchText}`);
      } else {
        this.$message.warning("请输入搜索内容");
      }
    },
    handleLogout() {
      this.$confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.logout();
          this.$message.success("退出登录成功");
          this.$router.push("/");
        })
        .catch(() => {
          // 取消退出
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.header-nav {
  width: 100%;

  .top-notice {
    background-color: #f5f5f5;
    padding: 8px 0;

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      p {
        font-size: 14px;
        color: #666;

        .highlight {
          color: #ff4400;
          margin: 0 5px;
          font-weight: 500;
        }
      }

      .top-links {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 14px;

        .avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 5px;
          vertical-align: middle;
        }

        .separator {
          color: #ccc;
        }

        a {
          color: #666;
          transition: color 0.2s;

          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }

  .main-nav {
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .logo {
      a {
        display: block;

        h1 {
          font-size: 28px;
          color: #409eff;
          margin: 0;
          font-weight: 700;
        }
      }
    }

    .search-box {
      flex: 0 0 500px;

      @media (max-width: 992px) {
        flex: 0 0 350px;
      }

      @media (max-width: 768px) {
        display: none;
      }

      .search-input {
        width: 100%;
      }

      .hot-tags {
        margin-top: 8px;
        font-size: 12px;
        color: #999;

        span {
          margin-right: 5px;
        }

        a {
          margin: 0 5px;
          color: #666;

          &:hover {
            color: #409eff;
            text-decoration: underline;
          }
        }
      }
    }

    .cart-entry {
      .cart-link {
        display: flex;
        align-items: center;
        color: #333;
        font-size: 16px;

        .cart-icon {
          font-size: 20px;
          margin-right: 5px;
        }

        .cart-count {
          display: inline-block;
          width: 18px;
          height: 18px;
          background-color: #ff4400;
          color: white;
          border-radius: 50%;
          font-size: 12px;
          text-align: center;
          line-height: 18px;
          margin-left: 5px;
        }
      }
    }
  }

  .category-nav {
    background-color: #409eff;

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-list {
      display: flex;
      margin: 0;
      padding: 0;

      @media (max-width: 992px) {
        overflow-x: auto;
        white-space: nowrap;
      }

      .nav-item {
        list-style: none;

        .nav-link {
          display: inline-block;
          padding: 12px 20px;
          color: #fff;
          font-size: 16px;
          transition: background-color 0.2s;

          &:hover,
          &.active {
            background-color: #337ab7;
          }
        }
      }
    }
  }
}
</style>