hjb_pc/layouts/default.vue

<template>
  <div class="w-100% h100vh relative">
    <!-- 头部广告 -->
    <LayoutAdvertisement :pc-home-con="pcHomeCon" v-if="pcHomeCon &&pcHomeCon.advertisement && pcHomeCon.advertisement.imageUrl && !pcHomeCon.advertisement.status && useStore.isHomePage"></LayoutAdvertisement>

    <!-- 共享的头部内容 -->
    <LayoutHeader :pc-home-con="pcHomeCon"></LayoutHeader>
    <main class="main_Box">
      <!-- 页面内容 -->
      <div class="h-100%">
        <!-- 内容区域 -->
        <div v-loading="loading">
          <slot></slot>
        </div>

        <!-- 右侧黑条-->
        <right-navigation :isShowCoupon="isShowCoupon"></right-navigation>
      </div>
    </main>
    <!-- 共享的底部内容 -->
    <LayoutFooter :pc-home-con="pcHomeCon"></LayoutFooter>
    <!-- 登录弹窗 -->
    <UserLogin ref="userLoginRef" @on-login-succeeded="onLoginSucceeded"></UserLogin>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: 'JAVA 多商户 PC',
  meta: [
    {
      name: 'description',
      content:
          'Java商城，PC商城，CRMEB开源商城系统，新零售社交电商，小程序商城，公众号商城，免费商城系统源码，商城系统开发，开源商城系统，微商城源码，直播商城系统，多商户商城，B2B2C，私域电商，分销商城，高性能商城系统，陀螺匠OA系统，咨询：400-8888-794',
    },
    {
      name: 'keywords',
      content:
          'CRMEB开源商城系统，围绕新零售、品牌连锁、商家入驻等多种商业模式，自主研发B2C商城系统、B2B2C多商户商城系统、连锁多门店商城系统、跨境电商系统等；应用于直播电商、社交新零售、商家入驻等多种应用场景，系统支持多语言、多端登录，代码开源、独立部署、永久免费升级。咨询：400-8888-794',
    },
  ],
  bodyAttrs: {
    class: 'test',
  },
})

import useDialog from "~/composables/useDialog";
import {pcHomeConfigApi} from "~/server/homeApi";
import {useUserStore} from "~/stores/user";
import { shallowRef, ref, onMounted } from 'vue'
import {useAppStore} from "~/stores/app";
import {tokenIsExistApi} from "~/server/userApi";
const userLoginRef = shallowRef()
const userStore = useUserStore()
const useStore = useAppStore()

const loading= ref<boolean>(false)


//没登录，清除缓存
if(!userStore.isLogin)window.localStorage.clear();

//首页配置
const { data: pcHomeCon } = useAsyncData(() => pcHomeConfigApi())

//动画
const { $aos } = useNuxtApp()
onMounted(() => {
  $aos().init({
    easing: 'ease-out-back',
    duration: 3000,
  })
  getTokenIsExist()
})

//购物车没登录状态下显示0
const { getCarNumber } = useAppStore()
const getTokenIsExist = async () =>{
  let data = await tokenIsExistApi()
  if(!data) await getCarNumber(0)
}

//登录弹窗
const nuxtApp = useNuxtApp()
nuxtApp.provide('onHandlerLogin', () => {
  userLoginRef.value.open()
})

//登录成功后回调
const onLoginSucceeded = () => {
 // location.reload();
}

//优惠券弹窗
const { bool: isShowCoupon, DialogOpen, DialogClose } = useDialog()
nuxtApp.provide('onHandlerCoupon', () => {
  DialogOpen()
})
nuxtApp.provide('onHandlerCloseCoupon', () => {
  DialogClose()
})
</script>
<style scoped lang="scss">
.floatClass:hover .floatTitle{
  display: block !important;
  animation: slideRight 0.5s forwards; /* 调用名为slideRight的动画，持续2秒 */
}
@keyframes slideRight {
  from {
    left: -150px; /* 元素初始位置在左侧屏幕外 */
  }
  to {
    left: -122px; /* 元素最终位置靠左边缘 */
  }
}
.floatClass:hover{
  width: 100%;
  background: #E93323;
}
.floatTitle{
  height: 40px;
  background: #222222;
  padding: 0 27px;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
  left: -122px;
  border-radius: 3px;
  display: none;
}
.floatTitle::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -16px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #222222; /* 右边三角形的颜色 */
  transform: translateY(-50%);
}
.right-278px,.right-0px{
  transition: all 1s;
}
.rightNavigation{
  .title{
    display: none;
  }
}

</style>