menduner/src/views/mall/components/navbar.vue

<template>
<div>
  <div class="stickyBox py-5">
    <div class="default-width d-flex align-center justify-space-between">
      <div class="header-link d-flex">
        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">
          <v-icon size="24" class="mr-2">mdi-shopping-outline</v-icon>
          首页
        </span>
        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="handleTo('/mall/user')">
          <v-icon size="24" class="mr-2">mdi-account-circle-outline</v-icon>
          我的
        </span>
        <!-- <span class="cursor-pointer d-flex align-center ml-8" @click="emit('pointExchange')">
          <v-icon>mdi-octagram-outline</v-icon>
          积分兑换
        </span> -->
        <!-- <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/order')}" @click="handleTo('/mall/user/order')">
          <v-icon size="20" class="mr-2">mdi-order-bool-ascending</v-icon>
          我的订单
        </span> -->
        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/cart')}" @click="handleTo('/mall/cart')">
          <v-icon size="20" class="mr-2">mdi-cart-outline</v-icon>
          购物车
        </span>
      </div>
      <div v-if="!props.hideSearch" class="search d-flex align-center">
        <v-text-field
          v-model="inputVal"
          placeholder="请输入商品关键词"
          color="primary"
          variant="plain"
          density="compact"
          clearable
          :hide-details="true"
          class="ml-3 px-2"
          style="height: 100%; line-height: 100%;"
          @keyup.enter="handleSearch"
        ></v-text-field>
        <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
      </div>
    </div>
  </div>
  <!-- 快速登录 -->
  <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
</div>
</template>

<script setup>
defineOptions({ name: 'mall-navbar'})
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'; const route = useRoute()
import { useRouter } from 'vue-router'; const router = useRouter()
import { getToken } from '@/utils/auth'
import Snackbar from '@/plugins/snackbar'
import loginPage from '@/views/common/loginDialog.vue'
import { getPrizeByGoodsId } from '@/api/mall/prize'

const emit = defineEmits(['login', 'pointExchange', 'search'])
const props = defineProps({
  hideSearch: {
    type: Boolean,
    default: false,
  },
})

const isActive = computed(() => (path, hasChild) => {
  const currentPath = router.currentRoute.value.path
  return hasChild ? currentPath.includes(path) : currentPath === path
})

const showLogin = ref(false)
const handleTo = (path) => {
  if (!getToken()) {
    Snackbar.warning('请先登录')
    showLogin.value = true // 打开快速登录弹窗
    return
  }
  router.push(path)
}

const open = false
// 更新路由进行搜素
const inputVal = ref(route?.query?.keyWord || '')
const handleSearch = () => {
  if (!open) return
  const path = '/mall/goodsList'
  router.push({ path, query: { keyWord: inputVal.value } })
  emit('search', inputVal.value)
}

// 快速登录
const loginSuccess = () => {
  showLogin.value = false
  Snackbar.success('登录成功')
}

const loginClose = () => {
  showLogin.value = false
  Snackbar.warning('您已取消登录')
}
</script>

<style scoped lang="scss">
.stickyBox {
  position: sticky;
  top: 48px;
  z-index: 999;
  background-color: #fff;
}
.active-route {
  position: relative;
  color: var(--v-primary-base);
  &::before {
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: -8px;
    left: 0;
    background-color: var(--v-primary-base);
  }
}
.header-link span:hover {
  color: var(--v-primary-base);
}
.search {
  height: 50px;
  width: 350px;
  border: 2px solid var(--v-primary-base);
  border-radius: 5px;
  .searchBtn {
    width: 100px;
    height: 49px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: var(--v-primary-base);
    cursor: pointer;
  }
}
</style>