cankao-h5/src/pages/realtimeInfo/pc/components/PageTop.vue

<template>
  <view class="page_top">
    <view class="r_menu">
      <image src="@/assets/images/logo.png" class="logo"></image>

      <view class="r_menu_item" @click="tabChange(1)">
        <text class="menu_item">资讯头条榜</text>
        <view class="line" v-if="tabIndex == 1"></view>
      </view>

      <view class="r_menu_item" @click="tabChange(2)">
        <text class="menu_item">热门行业</text>
        <view class="line" v-if="tabIndex == 2"></view>
      </view>

      <view class="r_menu_item" @click="tabChange(3)">
        <text class="menu_item">风口概念</text>
        <view class="line" v-if="tabIndex == 3"></view>
      </view>

      <view class="r_menu_item" @click="tabChange(4)">
        <text class="menu_item">编辑精选</text>
        <view class="line" v-if="tabIndex == 4"></view>
      </view>
    </view>

    <view @click="logout" v-if="Session.get('token')">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { Session } from "@/utils/storage";
import { doLogout } from "@/api";

const tabIndex = ref(0);
function tabChange(type) {
  // tabIndex.value = index;

  uni.navigateTo({
    url: "/pages/realtimeInfo/pc/index?type=" + type,
  });
}

import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

async function logout() {
  if (Session.get("userPhone")) {
    await doLogout({
      financialAccount: Session.get("userPhone"),
    });
  }

  Session.clear();

  // 解构路由参数，排除token
  const { token, ...otherQuery } = route.query;
  // 若存在token，替换路由清除参数
  if (token) {
    router.replace({
      path: route.path, // 保持当前路径不变
      query: otherQuery, // 保留其他参数
    });
  }

  nextTick(() => {
    setTimeout(() => {
      window.location.reload();
    }, 500);
  });
}

onLoad((e) => {
  if (e.type) tabIndex.value = e.type;

  console.log("🚀 ~ route.query.token:", route.query.token);
});
</script>

<style scoped lang="scss">
.page_top {
  width: 100vw;
  height: 120rpx;
  background-color: white;
  margin-bottom: 30rpx;
  box-shadow: 0 5rpx 2rpx rgba($color: #6d6d6d, $alpha: 0.1);
  display: flex;
  justify-content: center;
  align-items: center;

  .logo {
    width: 190rpx;
    height: 50rpx;
    margin-right: 50rpx;
  }

  .r_menu {
    width: 55vw;
    min-width: 1250px;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .r_menu_item {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-right: 100rpx;
  }

  .menu_item {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #1a1a1a;
  }

  .line {
    width: 64px;
    height: 4px;
    background: #007aff;
    position: absolute;
    bottom: 0;
  }
}
</style>