zhitiqiao/src/view/layout.vue

<template>
  <div>
    <div class="tabBox">
      <div class="main">
        <img src="../assets/image/56454@2x.png" alt="" class="logo">
        <el-menu
        :router="true"
    :default-active="activeIndex"
    class="el-menu"
    mode="horizontal"
    :ellipsis="false"
    text-color="#666666"
    active-text-color="#16542D"
    @select="handleSelect"
  >
    <el-menu-item index="index">首页</el-menu-item>
    <el-menu-item index="special">专题</el-menu-item>
    <el-menu-item index="meal">数据套餐</el-menu-item>
    <el-menu-item index="about">关于我们</el-menu-item>
    <el-menu-item :index="item.url" v-for="(item,index) in navList" :key="index">{{item.title}}</el-menu-item>
  </el-menu>
  <div class="login" @click="dialogTableVisible=true" v-if="!isLogin">
    注册/登录
  </div>
  <div class="login" v-else>
     <img :src="info.headimg" alt="">
     <el-dropdown trigger="click" @command="changeDropdown">
        <span class="el-dropdown-link">
         {{info.name}}<el-icon class="imgPosition"><CaretBottom /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="UserFilled" command="1">
              个人中心
            </el-dropdown-item>
            <el-dropdown-item :icon="SwitchButton" command="2">退出登录</el-dropdown-item>
            
          </el-dropdown-menu>
        </template>
      </el-dropdown>
  </div>
      </div>
      
    </div>
    <LoginBox @toMent="toMent"  :openid="openid" @getInfo="getInfo" v-model="dialogTableVisible"/>
    <router-view  v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"  v-if="router.currentRoute.value.meta.keepAlive" :key="router.currentRoute.value.name"/>
        </keep-alive>
        <component :is="Component"  v-if="!router.currentRoute.value.meta.keepAlive" :key="router.currentRoute.value.name"/>
    </router-view>
    <div class="message u-flex u-col-center" v-if="router.currentRoute.value.name!='profile'" @click="toMessage">
      <img src="../assets/image/message.png" alt="">
      <span>留言板</span>
    </div>
    <img :src="advList[0].logo" @click="toAdv(0)" class="slide slideLeft" alt="" v-show="activeIndex=='index'" v-if="advList.length>0">
    <div class="slide slideRight"  v-show="activeIndex=='index'">
      <img :src="advList[1].logo" @click="toAdv(1)" alt="" v-if="advList.length>1">
      <img :src="advList[2].logo" @click="toAdv(2)" alt="" v-if="advList.length>2">
    </div>
    <div class="bottom">
        <div class="content">
            <div class="contact">
                <span style="margin-right: 40px;">联系我们：{{baseInfo.phone}}</span>           公司地址：{{baseInfo.address}}

            </div>
            <div class="copyright">
                {{configInfo.archival_information}}
            </div>
        </div>
    </div>
  </div>
  </template>
  
  <script setup>
  import {useRouter } from "vue-router"
  import {onMounted ,ref,provide, watch} from "vue"
  import LoginBox from '../components/LoginBox.vue'
import { member_info,WeChat_login,config_info,adv_list,about_us,navigation_list} from "@/utils/api";

  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    UserFilled,
    SwitchButton,CaretBottom,CircleCloseFilled
} from '@element-plus/icons-vue'
const router=useRouter()
let configInfo=ref({})
let info=ref({})
let openid=ref('')
let advList=ref([])
let baseInfo=ref({})
const activeIndex = ref('/')
watch(()=>router.currentRoute.value.name,(newVal,oldVal)=>{
  activeIndex.value=newVal
},{ immediate: true })
  onMounted(()=>{
    console.log('getQueryString',getQueryString());
    let obj=getQueryString()
    if(obj.code){
      WeChat_login({code:obj.code}).then(res=>{
        if(res.data.openid){
        openid.value=res.data.openid
          dialogTableVisible.value=true
        }
        if(res.data.token){
          localStorage.setItem('token',res.data.token)
          window.location.href='https://zhitq.hdlkeji.com/dist'
        }
      })
    }
    about_us().then(res=>{
      baseInfo.value=res.data
    })
    getNavigation()
    getAdvList()
    getConfig()
   
    if(localStorage.getItem('token')){
      getInfo()
    }
    activeIndex.value=router.currentRoute.value.name
  })
  function getQueryString() {
  let data = {};
  let src = window.location.href;
  let index = src.indexOf("?");
  if (index === -1) {
    return data;
  }
  let dataStr = src.substring(src.indexOf("?") + 1);
  let dataArray = dataStr.split("&"); 
  dataArray.forEach((str)=>{
    let param =str.split("=");
    data[param[0]] = param[1];
  })
  return data;
}
  let navList=ref([])
  let getNavigation=()=>{
    navigation_list().then(res=>{
      navList.value=res.data
    })
  }
  let toAdv=(index)=>{
    window.location.href=advList.value[index].url
  }
  let getAdvList=()=>{
    adv_list().then(res=>{
      advList.value=res.data
    })
  }
  let getConfig=()=>{
    config_info().then(res=>{
      configInfo.value=res.data
    })
  }
  let toMessage=()=>{
    if(!isLogin.value){
      // ElMessage.error('请先登录')
      dialogTableVisible.value=true
      return
    }
    router.push('/profile?current=2')
  }
  provide('provideData',{
    toLogin:()=>{
      dialogTableVisible.value=true
    }
  })
  let getInfo=()=>{
    member_info().then(res=>{
      console.log('res',res);
      info.value=res.data
      isLogin.value=true
      dialogTableVisible.value=false
    })
  }
  let toMent=()=>{
    dialogTableVisible.value=false
    router.push('text')
  }
  let isLogin=ref(false)
  let dialogTableVisible=ref(false)
  
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
  if(key.length>=8){
    activeIndex.value='index'
    // window.location.href=key
    window.open(key, '_blank');
  }
  
}
let changeDropdown=(e)=>{
if(e==1){
  router.push('/profile')
}
if(e==2){
  ElMessageBox.confirm(
    '确定要退出登录吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      localStorage.removeItem('token')
      isLogin.value=false
      ElMessage({
        type: 'success',
        message: '已成功退出',
      })
    })
    .catch(() => {
      
    })
}
}
  
  const goSearch=()=>{
      router.push('/search')
  }
  const goLogin=()=>{
      router.push('/login')
  }
  const goEntrust=()=>{
      router.push('/entrust')
  }
  </script>
  
  <style lang="scss" scoped>
  
  .login{
    display: flex;
    align-items: center;
    img{
      width: 48px;
      height: 48px;
      margin-right: 12px;
      border-radius: 50%;
    }
    .imgPosition{
      margin-top: 5px;
    }
  }
  .slide{
    z-index: 999;
    position: fixed;
    top: 590px;
  }
  .slideLeft{
    left: 20px;
    width: 210px;
height: 440px;
border-radius: 10px;
  }
  .slideRight{
    display: flex;
    flex-direction: column;
    right: 20px;
    img{
      width: 210px;
height: 210px;
border-radius: 10px;
margin-bottom: 10px;
    }
  }
  .message{
    position: fixed;
    top: 460px;
    right: 30px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
    width: 80px;
height: 110px;
background: #FFFFFF;
border-radius: 10px;
    img{
      width:60px;
      height: 60px;
      margin-bottom: 9px;
    }
  }
  .bottom{
    // position: fixed;
    // z-index: 1000;
    // bottom: 0;
    width: 100%;
    height: 224px;
background: #494949;
.content{
    color: #fff;
    width: 1200px;
    margin: 0 auto;
    .contact{
        line-height: 140px;
        border-bottom: 1px solid #fff;
    }
    .copyright{
        line-height: 82px;
    }
}
  }
  .tabBox{
    width: 100%;
height: 80px;
background: #FFFFFF;
.main{
    height: 80px;
    display: flex;
   align-items: center;
   justify-content: space-between;
    width:1200px;
   margin: 0 auto;
   .logo{
    line-height: 80px;
    width: 101px;
    height: 47px;
   }
   .el-menu{
    height:80px;
   }
}
  }
  </style>