flavorOfTimeSzMall/src/components/layout/HeaderNav.vue

<template>
  <header class="header-nav">
    <!-- 顶部通知栏 -->
    <div class="top-notice">
      <div class="container">
        <p>
          欢迎来到时味苏州平台！
          <router-link to="/Register" class="highlight" v-if="false"
            >立即注册</router-link
          >
        </p>
        <div class="top-links">
          <router-link to="/User" v-if="isLogin">
            <img v-lazy="userInfo.avatar" alt="用户头像" class="avatar" />
            {{ userInfo.username }}
          </router-link>
          <router-link to="/Login" v-else>登录</router-link>
          <span class="separator" v-if="false">|</span>
          <router-link to="/Register" v-if="false">注册</router-link>
          <router-link to="/User">采购人中心</router-link>
          <router-link to="/User/ShoppingCart"
            >购物车<span v-if="cartTotalCount > 0"
              >({{ cartTotalCount }}件)</span
            ></router-link
          >
          <router-link to="/User/OrderList" v-if="isLogin"
            >我的订单</router-link
          >
          <router-link to="javascript:;" @click="handleLogout" v-if="isLogin"
            >退出</router-link
          >
        </div>
      </div>
    </div>

    <!-- 主导航栏 -->
    <div class="main-nav">
      <div class="container">
        <div class="logo">
          <router-link to="/">
            <img
              src="https://static.ticket.sz-trip.com/shiweisuzhou/pc/logo.png"
              alt="logo"
              class="logo-img"
            />
          </router-link>
        </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>
            <router-link
              to="javascript:;"
              @click="
                searchText = '手机';
                handleSearch();
              "
              >手机</router-link
            >
            <router-link
              to="javascript:;"
              @click="
                searchText = '电脑';
                handleSearch();
              "
              >电脑</router-link
            >
            <router-link
              to="javascript:;"
              @click="
                searchText = '服装';
                handleSearch();
              "
              >服装</router-link
            >
          </div>
        </div>

        <!-- 电话 -->
        <div class="cart-entry">
          <router-link tos="cart-link">
            <img
              src="https://static.ticket.sz-trip.com/shiweisuzhou/pc/login/phone.png"
              alt=""
            />
            <span>0512-680541</span>
            <span class="cart-count" v-if="cartTotalCount > 0 && false">{{
              cartTotalCount
            }}</span>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav" v-if="false">
      <div class="container">
        <ul class="nav-list">
          <li class="nav-item">
            <router-link
              to="/"
              class="nav-link"
              :class="{ active: $route.path === '/' }"
              >首页</router-link
            >
          </li>
          <li
            v-for="category in categories"
            :key="category.id"
            class="nav-item"
          >
            <router-link
              to="/category/:id"
              :to="`/category/${category.id}`"
              class="nav-link"
              :class="{ active: $route.params.id == category.id }"
            >
              {{ category.name }}
            </router-link>
          </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.$store.getters.isUserLogin;
    },
    userInfo() {
      return this.getUserInfo || {};
    },
  },
  created() {
    this.fetchCategories();
  },
  methods: {
    ...mapActions(["fetchCategories", "logout"]),
    handleSearch() {
      this.$store.commit("setSearchText", this.searchText); // 保存到 Vuex

      // 判断当前是否在搜索结果页
      const isSearchPage =
        this.$route.path === "/ProductList" &&
        this.$route.query.type === "search";

      if (isSearchPage) {
        // 如果在搜索页，不跳转只触发重新搜索（假设通过事件或状态更新触发）
        this.$emit("search", this.searchText); // 可根据实际情况调整触发方式
      } else {
        // 不在搜索页则跳转
        this.$router.push({
          path: "/ProductList",
          query: { keyword: this.searchText, type: "search" },
        });
      }
    },
    handleLogout() {
      this.$confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.logout();
          this.$message.success("退出登录成功");
        })
        .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;
          margin-left: 10px;

          &:hover {
            color: #6a8a27;
          }
        }
      }
    }
  }

  .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 500px;
      }

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

      .search-input {
        width: 100%;
        border: 1px solid #6a8a27;
      }

      .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;

        span {
          margin-left: 10px;
        }

        .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>