liebao-website/src/App.vue

<script lang="ts">
import DevelopAgreement from '@/components/developAgreement.vue';
export default defineComponent({
  components: {
    DevelopAgreement
  },
})
</script>
<script setup lang="ts">
import { defineComponent, nextTick, onMounted, provide, ref, watch } from 'vue'
import { useRouter } from 'vue-router';
import emitter from '@/util/eventBus'
import { message } from 'ant-design-vue';
window._AMapSecurityConfig = {
  securityJsCode: '23cf1bca0e52bbf8cb129047cdb46f10',
}
const router = useRouter()
let nickName = ref<string>('')
let avatar = ref<string>('https://joeschmoe.io/api/v1/random')
let isTop = ref<boolean>(true)
let menuList = ref(['首页', '优巨引擎官网', '文档中心', '管理中心'])
const container = ref()
let currentRouteName = ref()
let visible = ref<boolean>(false)
let isRouterAlive = ref<boolean>(true);
let showAgreement = ref<boolean>(false)
let activeIndex = ref<number>(0)
let index = localStorage.getItem('activeIndex')
if (index) {
  activeIndex.value = Number(index)
}
const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true
  })
}
provide("reload", reload);
watch(() => router.currentRoute.value.name, (newValue, oldValue) => {
  currentRouteName.value = newValue
  if (newValue !== 'home') {
    if (newValue === 'login') {
      isTop.value = false
    } else {
      isTop.value = false
    }
    window.removeEventListener('scroll', handleScrollY, true)
  } else {
    isTop.value = true
    window.addEventListener('scroll', handleScrollY, true)
  }

})
onMounted(() => {
  let userInfo = localStorage.getItem('userInfo')
  if (userInfo) {
    let info = JSON.parse(userInfo)
    nickName.value = info.nickname
    avatar.value = info.avatar || 'https://joeschmoe.io/api/v1/random'
  }
  emitter.on('userInfo', (e: any) => {
    let userInfo = JSON.parse(e)
    console.log('userInfo:', userInfo);
    nickName.value = userInfo.nickname
    avatar.value = userInfo.avatar || 'https://joeschmoe.io/api/v1/random'
  })
})
function handleScrollY() {
  isTop.value = !container.value.getBoundingClientRect().top
}
const loginOut = () => {
  localStorage.clear()
  visible.value = false
  nickName.value = ''
  avatar.value = ''
  router.push('/')
}
const menu = (i: number) => {
  let token = localStorage.getItem('token')
  if (i !== 1) {
    activeIndex.value = i
    localStorage.setItem('activeIndex', String(i))
  }
  switch (i) {
    case 0:
      router.push('/')
      break;
    case 1:
      window.open("http://www.liebaoai.cn/", "_blank");
      break;
    case 2:
      router.push('/docsCenter')
      break;
    case 3:
      if (token) {
        router.push('/management/appInfo')
      } else {
        router.push('/login')
        message.warning('请登录后再点击管理中心！')
      }
      break;
    default:
      break;
  }
}
</script>

<template>
  <a-layout>
    <!-- 头部 -->
    <a-layout-header
      :class="['header', isTop ? '' : 'header-color', currentRouteName === 'login' ? 'login-header' : '']">
      <div class="container">
        <div class="left" @click="router.push('/')">
          <img v-if="isTop" class="img" src="@/assets/images/1.png" alt="">
          <img v-else class="img" src="@/assets/images/1-2.png" alt="">
          <div class="name">优巨引擎·开放平台</div>
        </div>
        <div class="right">
          <div @click="menu(i)" class="btn hover:text-blue-400" v-for="(v, i) in menuList" :key="i"
            :class="activeIndex === i && !isTop ? 'active-btn' : ''">
            {{ v }}</div>
          <template v-if="nickName">
            <a-tooltip placement="bottom" color="white">
              <template #title>
                <!-- <div class="flex items-center px-10px py-20px cursor-pointer hover:bg-gray-300">
                  <img class="w-18px h-18px mr-10px" src="@/assets/images/18-1.png" alt="">
                  <div class="text-14px font-500 text-dark-400">通知</div>
                </div>
                <div style="height: 2px; background-color: #F0F0F0"></div> -->
                <div @click="loginOut" class="flex items-center px-10px py-20px cursor-pointer hover:bg-gray-300">
                  <img class="w-18px h-18px mr-10px" src="@/assets/images/18-2.png" alt="">
                  <div class="text-14px font-500 text-dark-400">账号退出</div>
                </div>
              </template>
              <div class="flex items-center cursor-pointer">
                <a-avatar size="30" :src="avatar" class="bg-[#f7f7f7]"></a-avatar>
                <div class="text-18 ml-10px">{{ nickName }}</div>
              </div>
            </a-tooltip>
          </template>
          <template v-else>
            <div v-if="currentRouteName === 'login'" class="login" @click="router.push('/register')">注册</div>
            <div v-else class="login" @click="router.push('/login')">登录</div>
          </template>
        </div>
      </div>
    </a-layout-header>
    <!-- 内容 -->
    <a-layout-content>
      <div ref="container" class="lb-container">
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </a-layout-content>
    <!-- 底部 -->
    <a-layout-footer class="footer">
      <!-- <div class="name">优巨引擎</div> -->
      <div class="agreement">
        <div @click="showAgreement = true" class="cursor-pointer">开发者服务协议</div>
        <div>&ensp;|&ensp;苏州优巨引擎智能数字科技有限公司</div>
      </div>
      <div class="record-number">
        备案号：苏ICP备2021010118号
      </div>
    </a-layout-footer>
  </a-layout>
  <!-- 客服、公众号 -->
  <div v-if="activeIndex !== 3" class="fixed top-40vh right-20px">
    <a-tooltip placement="left" color="white">
      <template #title>
        <div class="flex flex-col items-center px-20px py-20px">
          <div class="text-16px mb-10px text-dark-500">在线客服，扫码联系</div>
          <img class="w-160px h-160px" src="@/assets/images/16-1.png" alt="">
        </div>
      </template>
      <div
        class="flex flex-col justify-center items-center w-60px h-60px bg-white rounded-10px cursor-pointer customer">
        <img class="w-30px h-30px" src="@/assets/images/3-1.png" alt="">
        <div class="text-14px font-500 text-dark-400">客服</div>
      </div>
    </a-tooltip>
    <a-tooltip placement="left" color="white">
      <template #title>
        <div class="flex flex-col items-center px-20px py-20px">
          <div class="text-16px mb-10px text-dark-500">关注公众号，了解更多</div>
          <img class="w-160px h-160px" src="@/assets/images/16-2.png" alt="">
        </div>
      </template>
      <div
        class="mt-20px flex flex-col justify-center items-center w-60px h-60px bg-white rounded-10px cursor-pointer customer">
        <img class="w-30px h-30px" src="@/assets/images/3-2.png" alt="">
        <div class="text-14px font-500 text-dark-400">公众号</div>
      </div>
    </a-tooltip>
  </div>
  <!-- 开发者协议 -->
  <a-modal centered v-model:visible="showAgreement" :footer="null" :width="900">
    <DevelopAgreement></DevelopAgreement>
  </a-modal>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: $header-height  !important;
  color: #FFFFFF !important;
  background: none !important;
  padding: 0 !important;
  z-index: 99;

  .left {
    display: flex;
    align-items: center;

    .img {
      width: 40px;
      height: 40px;
      cursor: pointer;
    }

    .name {
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      margin-left: 20px;
    }
  }

  .right {
    display: flex;
    align-items: center;

    .btn {
      font-size: 15px;
      margin-right: 40px;
      cursor: pointer;
    }

    .active-btn {
      color: #0077EE;
      font-weight: bold;
    }

    .login {
      width: 80px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: linear-gradient(141deg, #50A7FF 0%, #1B8DFF 100%);
      border-radius: 16px 16px 16px 16px;
      font-size: 14px;
      color: #FFFFFF;
      cursor: pointer;
    }
  }

}

.header-color {
  background-color: #ffffff !important;
  box-shadow: 0px 4px 4px rgb(198 198 198 / 25%);
  color: #222222 !important;

  .name {
    color: #0077EE;
  }

}

.login-header {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.06);
  opacity: 0.9;

  .name {
    color: #0077EE;
  }
}

.lb-container {
  min-height: calc(100vh - $footer-height);
  background: white;
}

.footer {
  height: $footer-height;
  padding: 10px 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background: #252525 !important;
  color: #FFFFFF !important;

  .name {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }

  .agreement,
  .record-number {
    display: flex;
    font-size: 12px;
    font-weight: 400;
  }

}

.customer {
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
}
</style>