{"version":3,"file":"WebHeader.d52142f7.js","sources":["../../../src/assets/images/header-logo.png","../../../src/components/Home/WebHeader.vue"],"sourcesContent":["export default \"__VITE_ASSET__40e7cb5a__\"","<template>\r\n  <div class=\"web-header\" :class=\"headerClass\">\r\n    <router-link :to=\"{ name: 'Home' }\" custom v-slot=\"{ navigate }\">\r\n      <a-image\r\n        class=\"logo cursor\"\r\n        @click=\"navigate\"\r\n        :src=\"logo\"\r\n        :preview=\"false\"\r\n      />\r\n    </router-link>\r\n    <ul class=\"nav-menu\">\r\n      <router-link\r\n        custom\r\n        :to=\"{ name: 'Home' }\"\r\n        v-slot=\"{ navigate, isActive }\"\r\n      >\r\n        <li :class=\"{ active: isActive }\" :key=\"-1\" @click=\"navigate\">首页</li>\r\n      </router-link>\r\n      <li v-for=\"item in navigation\" :key=\"item.id\" @click=\"linkTo(item.link)\">\r\n        {{ item.label }}\r\n      </li>\r\n      <li :key=\"0\" @click=\"linkTo('/')\">遐客商城</li>\r\n    </ul>\r\n    <div class=\"header-right\">\r\n      <a-dropdown placement=\"bottom\" :overlayStyle=\"{ zIndex: 99999 }\">\r\n        <MenuOutlined ref=\"mobileIcon\" class=\"menu-icon\" />\r\n        <template #overlay>\r\n          <a-menu>\r\n            <router-link :to=\"{ name: 'Home' }\" custom v-slot=\"{ navigate }\">\r\n              <a-menu-item :key=\"-1\" @click=\"navigate\"> 首页 </a-menu-item>\r\n            </router-link>\r\n            <a-menu-item\r\n              v-for=\"item in navigation\"\r\n              :key=\"item.id\"\r\n              @click=\"linkTo(item.link)\"\r\n            >\r\n              {{ item.label }}\r\n            </a-menu-item>\r\n            <a-menu-item :key=\"-2\" @click=\"pushRoute('ShoppingCar')\">\r\n              <div class=\"shopping-car-menu\">\r\n                <span>购物车</span> <a-badge :count=\"shoppingCarCount\" />\r\n              </div>\r\n            </a-menu-item>\r\n            <a-menu-item :key=\"0\" @click=\"linkTo('/')\"> 遐客商城 </a-menu-item>\r\n          </a-menu>\r\n        </template>\r\n      </a-dropdown>\r\n      <router-link\r\n        :to=\"{ name: 'UploadMaterial' }\"\r\n        custom\r\n        v-slot=\"{ navigate }\"\r\n      >\r\n        <CloudUploadOutlined class=\"upload\" @click=\"navigate\" />\r\n        <span class=\"upload-text\" @click=\"navigate\">上传</span>\r\n      </router-link>\r\n      <router-link :to=\"{ name: 'ShoppingCar' }\" custom v-slot=\"{ navigate }\">\r\n        <a-badge\r\n          class=\"shopping-car-badge\"\r\n          :count=\"shoppingCarCount\"\r\n          :offset=\"[-22, 2]\"\r\n          @click=\"navigate\"\r\n        >\r\n          <ShoppingCartOutlined ref=\"pcIcon\" class=\"shopping-car-icon\" />\r\n        </a-badge>\r\n      </router-link>\r\n      <a-dropdown\r\n        v-if=\"isLogin\"\r\n        placement=\"bottom\"\r\n        :overlayStyle=\"{ zIndex: 99999 }\"\r\n      >\r\n        <a-space class=\"info cursor\">\r\n          <a-avatar :src=\"avatar\" />\r\n          <span class=\"username text-overflow\">{{ username }}</span>\r\n          <DownOutlined />\r\n        </a-space>\r\n        <template #overlay>\r\n          <a-menu @click=\"userAction\">\r\n            <a-menu-item key=\"Order\"> 我的订单 </a-menu-item>\r\n            <a-menu-item key=\"Collection\"> 我的收藏 </a-menu-item>\r\n            <a-menu-item key=\"WorksManagement\"> 作品管理 </a-menu-item>\r\n            <a-menu-item key=\"SalesRecords\"> 销售记录 </a-menu-item>\r\n            <a-menu-item key=\"userCenter\"> 个人中心 </a-menu-item>\r\n            <a-menu-item key=\"logout\"> 退出登录 </a-menu-item>\r\n          </a-menu>\r\n        </template>\r\n      </a-dropdown>\r\n      <span v-else class=\"login cursor\" @click=\"login\">登录</span>\r\n    </div>\r\n  </div>\r\n  <transition\r\n    @before-enter=\"beforeEnter\"\r\n    @enter=\"enter\"\r\n    @after-enter=\"afterEnter\"\r\n  >\r\n    <ShoppingCartOutlined class=\"ball\" v-if=\"shoppingCarState.elShow\" />\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nexport default {\r\n  name: 'WebHeader'\r\n}\r\n</script>\r\n\r\n<script lang=\"ts\" setup>\r\nimport {\r\n  CloudUploadOutlined,\r\n  DownOutlined,\r\n  MenuOutlined,\r\n  ShoppingCartOutlined\r\n} from '@ant-design/icons-vue'\r\nimport { useEventBus, useWindowScroll, useWindowSize } from '@vueuse/core'\r\nimport { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'\r\nimport { computed, onMounted, reactive, ref } from 'vue'\r\nimport { useRoute, useRouter } from 'vue-router'\r\nimport { useStore } from 'vuex'\r\n\r\nimport logo from '@/assets/images/header-logo.png'\r\nimport { IStore } from '@/types/store'\r\nimport { DIRECTORY } from '@/utils/env'\r\nimport { IS_SSR } from '@/utils/public'\r\n\r\ninterface IShoppingCarState {\r\n  initX: number\r\n  initY: number\r\n  elShow: boolean\r\n  count: number\r\n}\r\n\r\nconst props = defineProps({\r\n  scroll: {\r\n    type: Boolean,\r\n    default: false\r\n  }\r\n})\r\n\r\nconst store = useStore<IStore>()\r\nconst router = useRouter()\r\nconst route = useRoute()\r\n// 个人信息\r\nconst avatar = computed<string>(() => store.state.user.avatar)\r\nconst username = computed<string>(() => store.state.user.username)\r\nconst isLogin = computed<boolean>(() => store.getters['user/isLogin'])\r\nconst userAction = async ({ key }: MenuInfo) => {\r\n  if (key === 'userCenter') {\r\n    // 个人中心\r\n    router.push({ path: 'personalCenter' })\r\n  } else if (key === 'logout') {\r\n    // 退出登录\r\n    window.localStorage.clear()\r\n    const keys = document.cookie.match(/[^ =;]+(?==)/g)\r\n    if (keys) {\r\n      for (let i = keys.length; i--; ) {\r\n        document.cookie =\r\n          keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString()\r\n        document.cookie =\r\n          keys[i] +\r\n          '=0;path=/;domain=' +\r\n          document.domain +\r\n          ';expires=' +\r\n          new Date(0).toUTCString()\r\n        document.cookie =\r\n          keys[i] +\r\n          '=0;path=/;domain=ratingdog.cn;expires=' +\r\n          new Date(0).toUTCString()\r\n      }\r\n    }\r\n    if (route.meta.requireAuth) {\r\n      await router.push({ name: 'Home' })\r\n    }\r\n    window.location.reload()\r\n  } else if (\r\n    key === 'Order' ||\r\n    key === 'Collection' ||\r\n    key === 'WorksManagement' ||\r\n    key === 'SalesRecords'\r\n  ) {\r\n    router.push({ name: key })\r\n  }\r\n}\r\n// 滚动\r\nconst { y } = useWindowScroll()\r\nconst headerClass = computed(() => {\r\n  if (!props.scroll || y.value > 50) {\r\n    return 'header-black'\r\n  }\r\n  return 'header-transparent'\r\n})\r\n// 跳转\r\nconst linkTo = (url: string) => {\r\n  if (url) {\r\n    window.open(url)\r\n  }\r\n}\r\nconst pushRoute = (routeName: string) => {\r\n  router.push({ name: routeName })\r\n}\r\n// 登录\r\nconst login = () => {\r\n  window.localStorage.setItem('history', `${DIRECTORY}${route.fullPath}`)\r\n  router.push({ name: 'LoginRegister' })\r\n}\r\n// 导航\r\nconst navigation = computed(() => store.state.home.navigation)\r\n// 初始化\r\nconst shoppingCarCount = computed(() => store.state.home.shoppingCarCount || 0)\r\nonMounted(async () => {\r\n  await store.dispatch('home/getNavigation')\r\n  await store.dispatch('home/getShoppingCarCount')\r\n})\r\n// 购物车\r\nconst mobileIcon = ref<any>()\r\nconst pcIcon = ref<any>()\r\nconst bus = useEventBus<{ x: number; y: number; count: number }>('shoppingCar')\r\nconst { width } = useWindowSize()\r\nconst shoppingCarState = reactive<IShoppingCarState>({\r\n  initX: 0,\r\n  initY: 0,\r\n  elShow: false,\r\n  count: 0\r\n})\r\nconst beforeEnter = (el: any) => {\r\n  el.style.left = shoppingCarState.initX + 'px'\r\n  el.style.top = shoppingCarState.initY + 'px'\r\n  el.style.transform = 'scale(1.4)'\r\n}\r\nconst enter = (el: any, done: () => void) => {\r\n  let endLeft\r\n  let endTop\r\n  if (width.value >= 1200) {\r\n    const { left, top } = pcIcon.value.getBoundingClientRect()\r\n    endLeft = left\r\n    endTop = top\r\n  } else {\r\n    const { left, top } = mobileIcon.value.getBoundingClientRect()\r\n    endLeft = left\r\n    endTop = top\r\n  }\r\n  el.style.transition = 'all .6s cubic-bezier(.17,.67,.83,.67)'\r\n  el.style.left = endLeft + 'px'\r\n  el.style.top = endTop + 'px'\r\n  el.style.transform = 'scale(1)'\r\n  done()\r\n}\r\nconst afterEnter = () => {\r\n  shoppingCarState.elShow = false\r\n  store.commit('home/setShoppingCarCount', shoppingCarState.count)\r\n}\r\nconst shoppingCarListener = (event: {\r\n  x: number\r\n  y: number\r\n  count: number\r\n}) => {\r\n  shoppingCarState.initX = event.x + 35\r\n  shoppingCarState.initY = event.y\r\n  shoppingCarState.count = event.count\r\n  shoppingCarState.elShow = true\r\n}\r\n!IS_SSR && bus.on(shoppingCarListener)\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\n.web-header {\r\n  height: 50px;\r\n  padding: 0 20px;\r\n  position: fixed;\r\n  left: 0;\r\n  top: 0;\r\n  z-index: 200;\r\n  zoom: 1;\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  :deep(.ant-image) {\r\n    .logo {\r\n      width: auto;\r\n      height: 32px;\r\n    }\r\n  }\r\n}\r\n.header-right {\r\n  display: flex;\r\n  align-items: center;\r\n  :deep(.ant-badge) {\r\n    .ant-badge-count {\r\n      height: 16px;\r\n      line-height: 16px;\r\n      padding: 0 5px;\r\n    }\r\n  }\r\n}\r\n.username {\r\n  display: block;\r\n  max-width: 100px;\r\n}\r\n.info,\r\n.login {\r\n  color: #ffffff;\r\n}\r\n.header-transparent {\r\n  background-color: transparent;\r\n}\r\n.header-black {\r\n  background-color: rgba(60, 60, 60, 0.85);\r\n}\r\n.nav-menu {\r\n  display: flex;\r\n  align-items: center;\r\n  height: 50px;\r\n  li {\r\n    cursor: pointer;\r\n    color: #ffffff;\r\n    font-size: 18px;\r\n    padding: 0 25px;\r\n    height: 50px;\r\n    line-height: 50px;\r\n  }\r\n  li:hover {\r\n    color: @primary-color;\r\n  }\r\n  li.active {\r\n    color: @primary-color;\r\n  }\r\n}\r\n.menu-icon {\r\n  cursor: pointer;\r\n  margin-left: 20px;\r\n  font-size: 18px;\r\n  color: #ffffff;\r\n  display: none;\r\n}\r\n.shopping-car-badge {\r\n  .shopping-car-icon {\r\n    cursor: pointer;\r\n    margin-right: 20px;\r\n    font-size: 24px;\r\n    color: #ffffff;\r\n  }\r\n}\r\n.shopping-car-menu {\r\n  display: flex;\r\n  align-items: center;\r\n  * + * {\r\n    margin-left: 10px;\r\n  }\r\n}\r\n.upload {\r\n  cursor: pointer;\r\n  font-size: 24px;\r\n  color: #ffffff;\r\n  margin-right: 5px;\r\n}\r\n.upload-text {\r\n  margin-right: 20px;\r\n  display: block;\r\n  color: #ffffff;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n}\r\n.ball {\r\n  font-size: 30px;\r\n  color: @primary-color;\r\n  position: fixed;\r\n  z-index: 300;\r\n  zoom: 1;\r\n  transform: translateZ(0);\r\n}\r\n@media screen and (max-width: @xl) {\r\n  .menu-icon {\r\n    display: block;\r\n  }\r\n  .shopping-car-badge,\r\n  .upload,\r\n  .nav-menu {\r\n    display: none;\r\n  }\r\n  .username {\r\n    display: block;\r\n    max-width: 70px;\r\n  }\r\n  .upload-text {\r\n    margin-right: 0;\r\n  }\r\n  .header-right {\r\n    flex: 1;\r\n    justify-content: space-between;\r\n  }\r\n}\r\n</style>\r\n"],"names":["logo","__default__","props","__props","store","useStore","router","useRouter","route","useRoute","avatar","computed","username","isLogin","userAction","key","keys","i","y","useWindowScroll","headerClass","linkTo","url","pushRoute","routeName","login","DIRECTORY","navigation","shoppingCarCount","onMounted","mobileIcon","ref","pcIcon","bus","useEventBus","width","useWindowSize","shoppingCarState","reactive","beforeEnter","el","enter","done","endLeft","endTop","left","top","afterEnter","shoppingCarListener","event"],"mappings":"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"}