crm_extend/src/pages/indent-manage/index.vue

<template>
  <div :class="{ 'pt-[48px]': currentPath !== '' }">
    <div
      v-if="currentPath !== ''"
      class="fixed z-50 top-0 left-0 shadow-sm w-[100vw]"
    >
      <div class="max-w-[1800px] mx-auto h-[48px] flex bg-sky-600">
        <div class="leading-[48px] px-8 font-black text-white">Indent APP</div>
        <div class="flex">
          <div
            v-for="item in navList"
            :key="item.key"
            @click="$router.push(item.path)"
            class="cursor-pointer h-[100%] w-[100px] leading-[48px] px-4 no-underline text-white hover:font-bold flex justify-center"
            :class="{
              'font-bold': currentPath === item.key,
              'bg-sky-900': currentPath === item.key,
            }"
          >
            {{ item.key }}
          </div>
        </div>
      </div>
    </div>
    <router-view class="bg-white" />
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, provide, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Cookie from 'js-cookie'
defineComponent({
  name: 'IndentManageIndex',
})
provide('mediaRegExp', /^(https?:)?\/\/.+(.com.au\/|.com\/)/)
const $route = useRoute()
const token = Cookie.get('indent-token')
const originQuery = $route.query as {
  [key: string]: string
}

if (originQuery.id) {
  Cookie.set('indent-crm-id', originQuery.id || '')
}
if (originQuery.full_name) {
  Cookie.set('indent-crm-fullname', originQuery.full_name || '')
}

const $router = useRouter()
// 访问非登录页, 未登录状态调整登录页
if (!token && $route.path !== '/indent-manage/login') {
  const params: any = {
    origin: encodeURIComponent($route.path),
  }

  if (originQuery.u?.length && originQuery.p?.length) {
    params.action = 'autoLogin'
    params.p = originQuery.p.trim()
    params.u = originQuery.u.trim()
  }
  console.log('未登录重定向')
  $router.replace({
    path: '/indent-manage/login',
    query: params,
  })
} else if (originQuery.u) {
  console.log('已登录')
  $router.replace({ path: $route.path })
}
const navList = [
  {
    key: 'indent',
    path: '/indent-manage/indent/list',
  },
  {
    key: 'product',
    path: '/indent-manage/product/list',
  },
  {
    key: 'supplier',
    path: '/indent-manage/supplier/list',
  },
  {
    key: 'user',
    path: '/indent-manage/user',
  },
]
let currentPath = computed(() => {
  let result = ''

  if (/indent-manage\/indent/.test($route.path)) {
    result = 'indent'
  } else if (/indent-manage\/product/.test($route.path)) {
    result = 'product'
  } else if (/indent-manage\/user/.test($route.path)) {
    result = 'user'
  } else if (/indent-manage\/supplier/.test($route.path)) {
    result = 'supplier'
  }
  return result
})
</script>
<style>
.bg-white {
  background-color: #fefefe;
}
</style>