website/src/views/HeadMenu.vue

<template>
  <div class="header">
    <div class="logo" @click="toRouter('/index')">
      <img src="@/assets/image/logo.png" />
    </div>

    <ul class="header-menu">
      <router-link
        v-for="(item, index) in headlist"
        :key="index"
        :to="item.path"
      >
        <li>
          <span>{{ item.title }}</span>
        </li>
      </router-link>
    </ul>

    <div class="header_right">
      <div class="start">
        <el-button plain type="danger" @click="handleOpenStartPage">
          {{
            approval_status == -1 || approval_status == 4 || !isLoggedIn
              ? "立即入驻"
              : "查看审核状态"
          }}
        </el-button>
      </div>

      <!-- <div v-if="!isLoggedIn" class="login">
                <el-button plain color="#f85535"  @click="openLoginForm" class="login-button">
                  商家登录
                </el-button>
              </div> -->

      <div class="avatar" v-if="isLoggedIn">
        <div class="icon_avatar">
          <el-icon size="20" color="#ccc"><Avatar /></el-icon>
        </div>
        <el-button
          link
          @click="handleUserInfoClick"
          :title="
            approval_status == -1 || approval_status == 4
              ? '点击立即入驻'
              : '点击查看审核详情'
          "
        >
          {{ mobile }}
        </el-button>
      </div>

      <div v-if="isLoggedIn" class="logout">
        <el-button type="info" plain @click="logout" class="logout-button">
          退出
        </el-button>
      </div>

      <div class="sub_menu">
        <el-dropdown placement="bottom-end">
          <el-icon size="24"><Menu /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(item, index) in headlist"
                @click="toRouter(item.path)"
                :key="index"
                >{{ item.title }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/userStore";
import { Menu, Avatar } from "@element-plus/icons-vue";
import { getApproval_status } from "@/api/login";

const emits = defineEmits(["open-login-form", "open-register-form"]);

const openLoginForm = () => {
  emits("open-login-form");
};

const openRegisterForm = () => {
  emits("open-register-form");
};

// 导航栏数据
const headlist = ref([
  { title: "首页", path: "/index" },
  { title: "使用教程", path: "/help" },
  { title: "关于我们", path: "/about" },
]);
const toRouter = (pathString: string) => {
  router.push({ path: pathString });
};
const router = useRouter();
const userStore = useUserStore();

// 从 userStore 中获取登录状态
const isLoggedIn = ref(userStore.isLoggedIn);
const approval_status = ref(-1);
const token = ref(userStore.token);
const mobile = ref(userStore.mobilePhone);

watch(userStore, (newVal) => {
  token.value = newVal.token;
  mobile.value = newVal.mobilePhone.replace(
    /(^\d{3})(\d+)(\d{4})/g,
    "$1****$3"
  );
  isLoggedIn.value = !!token.value;
});

// 每次页面加载时检查 token
onMounted(() => {
  const mobile = localStorage.getItem("mobilePhone");
  if (mobile) {
    getApproval_status().then((res) => {
      if (res.code === 0 && res.status === 200) {
        approval_status.value = res.data.approval_status;
        console.log("res.data.approval_status", res.data.approval_status);
      }
    });
  }
});

// 监听 userStore.isLoggedIn 的变化
watch(
  () => userStore.isLoggedIn,
  (newVal) => {
    isLoggedIn.value = newVal; // 确保 isLoggedIn 始终与 userStore.isLoggedIn 保持一致
    if (isLoggedIn.value === null) console.log("登陆过期");
  }
);

// 处理免费开店按钮点击事件
const handleOpenStartPage = () => {
  if (!isLoggedIn.value) {
    openRegisterForm(); // 未登录弹出注册组件
    return;
  }

  if (approval_status.value == -1 || approval_status.value == 4) {
    router.push({ name: "start" });
  } else {
    router.push({ name: "check" });
  }
};

const handleUserInfoClick = () => {
  if (approval_status.value == -1 || approval_status.value == 4) {
    router.push({ name: "start" });
  } else {
    router.push({ name: "check" });
  }
};

// 退出登录函数
const logout = () => {
  userStore.clearToken();
  userStore.removeMobilePhone();
  userStore.removeIdentity();
  isLoggedIn.value = false; // 更新登录状态为未登录
  router.push("/"); // 可以根据需求跳转到其他页面
};

// 汉堡菜单相关逻辑
const isMenuOpen = ref(false);

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

// 监听窗口 resize 事件
let resizeHandler: () => void;
onMounted(() => {
  resizeHandler = () => {
    const clientWidth = document.documentElement.clientWidth;
    const isMobile = clientWidth <= 768;
    if (!isMobile && isMenuOpen.value) {
      isMenuOpen.value = false;
    }
  };
  window.addEventListener("resize", resizeHandler);
});

onUnmounted(() => {
  window.removeEventListener("resize", resizeHandler);
});
</script>

<style lang="scss" scoped>
.header {
  height: 70px;
  width: 100%;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.header-menu {
  flex: 1;
  display: flex;

  li {
    margin: 0 20px;
    list-style: none;
    position: relative;
    color: #333;

    span {
      font-size: 16px;
    }

    &:hover span {
      color: var(--bgcolor);
    }

    &::before {
      content: "";
      position: absolute;
      bottom: 0px;
      left: 50%;
      width: 0;
      height: 100%;
      border-bottom: 3px solid var(--bgcolor);
      transition: all 0.2s;
    }

    &:hover::before {
      content: "";
      left: 0;
      width: 100%;
    }
  }

  .router-link-active li::before {
    content: "";
    left: 0;
    width: 100%;
  }

  .router-link-active span {
    color: var(--bgcolor);
  }

  a {
    text-decoration: none;
    color: inherit;
  }
}

.logo {
  cursor: pointer;
  margin-right: 20px;
  img {
    height: 40px;
  }
}

.icon_avatar {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border-radius: 100%;
}

.start {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 5px;
}

.avatar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header_right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

.sub_menu {
  display: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .logo {
    img {
      height: 28px;
    }
  }

  .header {
    padding: 0 10px;
  }

  .header_right {
    gap: 5px;
  }

  .header-menu {
    display: none;
  }

  .avatar {
    display: none;
  }

  .sub_menu {
    display: block;
  }
}
</style>