fzxfb_org_cn/components/home/pageHead.vue

<template>
    <header>
        <div class="headerContainer">
            <div class="headerBox">
                <div class="headerMain">
                    <div class="headerBox_left">欢迎来到全国法制资讯发布中心!</div>
                    <div class="headerBox_right">
                        <NuxtLink to="#">收藏</NuxtLink>
                        <span>|</span>
                        <NuxtLink to="/">人员查询</NuxtLink>
                        <span>|</span>
                        <NuxtLink to="/">车辆查询</NuxtLink>
                        <span>|</span>
                        <NuxtLink to="/" @click="phone_close_fun">用户登录</NuxtLink>
                    </div>
                </div>
            </div>
            <div class="logoBox">
                <div class="logoBox_left">
                    <NuxtLink to="/">
                        <img src="../../public/header/logo.png" alt="logo">
                    </NuxtLink>
                </div>
                <div class="logoBox_right">
                    <div class="logoBox_right_top">
                        <NuxtLink to="http://www.mps.gov.cn/">公安部</NuxtLink>
                        <NuxtLink to="http://www.court.gov.cn/">最高人民法院</NuxtLink>
                        <NuxtLink to="http://www.spp.gov.cn/">最高人民检察院</NuxtLink>
                        <NuxtLink to="http://www.moj.gov.cn/">司法部</NuxtLink>
                        <NuxtLink to="http://www.ccdi.gov.cn/">中央纪委国家监委</NuxtLink>
                    </div>
                    <div class="logoBox_right_center">
                        <h2>
                            <NuxtLink to="/">全国法制资讯发布中心 官网</NuxtLink>
                        </h2>
                    </div>
                    <div class="logoBox_right_bottom">
                        <h4 class="g_text">
                            <NuxtLink to="/">全国政务信息一体化应用平台</NuxtLink>
                        </h4>
                        <h4>
                            <NuxtLink to="/">fzxfb.org.cn</NuxtLink>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- <header>
        <nav class="headerNav">
            <div class="inner">
                <div class="left">
                    <span>
                        <a href="http://znxyw.org.cn/" target="_blank">中农兴业网团</NuxtLink>
                    </span>
                    <span>旗下网站：<span>农业百强网站（政府类30强）</span></span>
                    <div class="phone_head_btn" @click="togglePanel"></div>
                </div>
                <div class="right ">
                    <div class="menu">
                        <button class="reg" @click="goTopic">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon1.png" alt="商圈">商圈
                        </button>
                        <button class="reg" @click="goAdvertising">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon2.png" alt="广告服务">广告服务
                        </button>
                        <button class="reg" @click="goLogin" v-show="!showToken">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="登录">登录
                        </button>
                        <button class="reg" @click="goRegister" v-show="!showToken">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon4.png" alt="注册">注册
                        </button>
                        <button class="reg" @click="userCenter" v-if="showToken">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="用户信息">
                            {{ username }}
                        </button>
                        <button class="reg" @click="goSearch">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/searchicon.png" alt="搜索">搜索
                        </button>
                    </div>
                    <ul class="userInfo11" v-if="isShow">
                        <li @click="gotosystem">个人中心</li>
                        <li @click="exit">退出</li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="headerLogo">
            <div class="inner">
                <img :src="logo" :alt="webSiteName" class="left" @click="backHome">
                <div class="titlead" v-if="adImg">
                    <a href="http://sannongdy.org.cn/" v-if="adImg.image_url == null" target="_blank"
                        :title="adImg.introduce">
                        <img :src="adImg.thumb" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
                    </NuxtLink>
                    <a :href="adImg.image_url" v-else :title="adImg.introduce">
                        <img :src="adImg.image_src" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
                    </NuxtLink>
                </div>
                <div class="logo_right_box">
                    <div class="logo_right_btn" @click="goTopic">
                        <img class="logo_right_btn_img" src="../../public/image/4.png" alt="商圈">

                        <span class="logo_right_btn_text" >商圈</span>
                    </div>
                    <div class="logo_right_btn" @click="user_fun">
                        <img class="logo_right_btn_img" src="../../public/image/6.png" alt="用户">
                        <span class="logo_right_btn_text" >用户</span>
                    </div>
                    <div class="logo_right_btn" @click="goSearch">
                        <img class="logo_right_btn_img" src="../../public/image/7.png" alt="搜索">
                        <span class="logo_right_btn_text" >搜索</span>
                    </div>
                </div>
            </div>
        </div>
        <El-dialog v-model="dialogTableVisible" width="800">
            <div class="tips">
                <p>
                    <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/tips.png"> 提示:注册请联系管理员操作!
                </p>
                <p>联系电话:010-56019387</p>
                <p>QQ ： 2909421493 、213552413</p>
            </div>
        </El-dialog>
        <El-dialog v-model="dialogTableVisible_phone" width="800"> 
            <div class="tips">
                <p>
                    <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/tips.png"> 注册请联系管理员操作!
                </p>
                <p>联系电话:010-56019387</p>
                <p>QQ ： 2909421493 、213552413</p>

                <div class="dialog_load_btn" @click="phone_close_fun">登录</div> 
            </div>
        </El-dialog>
        <section class="HomePanel_out" v-show="panelVisible">
            <HomePanel></HomePanel> 
        </section>
    </header> -->
</template>

<script setup>
// 引入全局状态-HomePanel_out
const panelVisible = useState('panelVisible')
//1.加载基本依赖 start ---------------------------------------->
import { ref, watch, onMounted } from 'vue'
import { ElDialog, ElMessage } from 'element-plus'
import { getToken, setToken, removeToken } from '@/store/useCookieStore'
import { setTicket, removeTicket } from '@/store/useticketStore'
//网站地址
const { $webUrl, $CwebUrl, $BwebUrl, $LoginWebUrl } = useNuxtApp()
//1.加载基本依赖 end ---------------------------------------->
//1.登录逻辑 start ---------------------------------------->
let ticket = ref('')
let token = ref('')
let route = useRoute()
//页面每次刷新先判断一下用户状态是否已经过期了
//如果没有过期再储存token
ticket.value = route.query.ticket
token.value = route.query.admintoken
if (ticket.value) {
    setTicket(ticket.value)
}
if (token.value) {
    setToken(token.value)
}
//搜索框
let keyword = useState('keyword', () => '')
//用户名
let username = useState('username', () => '用户中心')
//是否删除
let isDel = useState('isDel', () => 1)
//是否显示用户中心
let isShow = useState('isShow', () => false)
let token1 = useState("token1", () => '')
let showToken = useState("showToken", () => '')
token1.value = getToken()
//检测登录状态
let tokenStatus = ref('');
tokenStatus.value = getToken()
if (tokenStatus.value == undefined) {
    console.log("-------------------------------------未获取到用户token")
} else {
    console.log("--------------------------------已获取到用户token")
}
//点击登录按钮
let goLogin = () => {
    //开启线上登录模式 start---------------------------------------->
    isDel.value = 0
    token1.value = getToken()
    window.open($BwebUrl + "/#/login?backurl=" + $CwebUrl, '_blank');
    //开启线上登录模式 end---------------------------------------->
    //开启本地登录模式 start---------------------------------------->
    // window.location.href = $BwebUrl + "/auth/login.php?backurl=" + $CwebUrl;
    //"http://adminpre.bjzxtw.org.cn/auth/login.php?backurl=http://nwpre.bjzxtw.org.cn";
    //开启本地登录模式 end---------------------------------------->
}
let dialogTableVisible = ref(false)
let dialogTableVisible_phone = ref(false)
//点击注册按钮
let goRegister = () => {
    dialogTableVisible.value = true
}
//点击用户中心
let userCenter = () => {
    if (isShow.value) {
        isShow.value = false
        return
    } else {
        isShow.value = true
        return
    }
}
// 添加点击事件处理函数
const handleClickOutside = (event) => {
    // 获取用户信息菜单元素
    const userInfoMenu = document.querySelector('.userInfo11');
    // 获取用户按钮元素
    const userButton = document.querySelector('.reg img[alt="用户信息"]')?.parentElement;
    // 如果点击的不是菜单本身且不是用户按钮，则隐藏菜单
    if (userInfoMenu &&
        !userInfoMenu.contains(event.target) &&
        !userButton?.contains(event.target)) {
        isShow.value = false;
    }
}
//2.登录逻辑 end ---------------------------------------->

//3.跳转菜单逻辑 start ---------------------------------------->
let gotosystem = () => {
    let url = $BwebUrl + '/#/login?userurl=' + $CwebUrl;
    isShow.value = false;
    //window.location.href = url; 
    window.open(url, '_blank');
}
//点击退出按钮
let exit = () => {
    window.location.href = $CwebUrl;
    isDel.value = 1
    token1.value = getToken()
    isShow.value = false;
    let tokendata = getToken()
    let url = $LoginWebUrl + '/api/logout?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
    window.location.href = url;
    removeToken()
    removeTicket()
}
//点击返回首页
let backHome = () => {
    window.location.href = $CwebUrl;
}
//点击搜索按钮
let goSearch = () => {
    const route = `/search/search?keyword=${keyword.value}`;
    window.location.href = route;
}
// 点击广告服务
let goAdvertising = () => {
    // window.open('/advertising?activeName=1', '_blank');//测试
    //本地启动广告服务
    //线上启动
    if (getToken()) {
        window.open($CwebUrl + '/advertising?activeName=1', '_blank');
    } else {
        goLogin()
    }
}
//点击商圈
let goTopic = () => {
    if (getToken()) {
        window.open($CwebUrl + '/topic', '_blank');
    } else {
        goLogin()
    }
}
//点击用户==手机版11
let user_fun = () => {
    if (getToken()) {
        //已经登录
        goLogin()
    } else {
        //没有登录
        dialogTableVisible_phone.value = true
        return
    }
}
// 添加关闭对话框处理函数
const phone_close_fun = () => {
    // 在这里可以添加关闭对话框前需要执行的逻辑
    dialogTableVisible_phone.value = false;
    // 确保对话框关闭
    goLogin()
}
// 监听token状态
watch(token1, (newval, oldval) => {
    showToken.value = newval
}, {
    deep: true,
    immediate: true,
})
// 获得网站logo
const logo = ref("")
const webSiteName = ref("")
let getLogo = async () => {
    const responseStatus = await requestDataPromise('/web/getWebsiteHead', {
        method: 'GET',
        query: {},
    });
    if (responseStatus.code == 200) {
        logo.value = responseStatus.data.logo;
        webSiteName.value = responseStatus.data.website_name;
    } else if (responseStatus.code == 0) {
        window.location.href = $CwebUrl + '/404';
    }
}
getLogo();
//3.跳转菜单逻辑 end ---------------------------------------->
//4.获取广告 start ---------------------------------------->
let adImg = ref({})
//4.获取广告 end ---------------------------------------->
//5.获取登录状态 start ---------------------------------------->
// 在组件卸载时移除事件监听
onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside);
})
onMounted(async () => {
    //添加监听关闭个人中心菜单
    document.addEventListener('click', handleClickOutside);
    //从客户端获取登录状态
    //从客户端阶段开始 持续查询登录状态
    let getLoginStatus = async () => {
        //获得token
        const token = getToken();
        const { $webUrl, $CwebUrl } = useNuxtApp();
        if (token == undefined) {
            //如果没有获取到token 不访问后端获取在线状态
            console.log("没有获取到token！无需查询登录状态！")
            showToken.value = false;
        } else {
            //如果获取到了token 访问后端查询状态
            console.log("已获取到用户token,开始查询登录状态！")
            const queryParams = new URLSearchParams({
                token: getToken()
            });
            let url = `${$webUrl}/api/loginStatus?${queryParams.toString()}`
            const responseStatus = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Userurl': $CwebUrl,
                    //'token': getToken(),
                    'Origin': $CwebUrl
                }
            });
            const result = await responseStatus.json();
            console.log(result)
            if (result.code == 200) {
                console.log("用户已经登录！");
                showToken.value = true;
            }
            if (result.code == -1) {
                isShow.value = false;
                showToken.value = false;
                removeToken();
                removeTicket();
                ElMessage.error('您没有权限登录该网站！')
            }
            if (result.code == -2) {
                isShow.value = false;
                showToken.value = false;
                removeToken();
                removeTicket();
                ElMessage.error('您已退出登录！')
            }
        }
    }
    getLoginStatus();
    setInterval(getLoginStatus, 3000);
    //从客户端获取广告
    //从客户端获取行政职能部门 加快打开速度
    const { $webUrl, $CwebUrl } = useNuxtApp();
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_top`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg.value = resultAd1.data[0];
    //从客户端获取用户名
    let userInfoUrl = `${$webUrl}/user/getUserInfo`
    const userInfoResponse = await fetch(userInfoUrl, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const userInfo = await userInfoResponse.json();
    if (userInfo.code == 200) {
        username.value = userInfo.data.nickname
    }
})
//5.获取登录状态 end ---------------------------------------->
//点击手机
// 添加全局状态
// const panelVisible = useState('panelVisible', () => false)
const togglePanel = () => {
  panelVisible.value = true
}
</script>

<style lang="less" scoped>
//PC端 start ---------------------------------------->
.headerContainer {
    width: 100%;
}
.headerBox {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    .headerMain {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1400px;
        .headerBox_left {
            font-size: 18px;
            color:#0f50d5;
        }
        .headerBox_right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            a {
                font-size: 18px;
                color:#0f50d5;
                margin-left: 6px;
            }
            span {
                margin-left: 6px;
            }
        }
    }
}
.logoBox {
    width: 1300px;
    height: 190px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logoBox_left {
        width: 180px;
        img {
            width: 180px;
            height: 145px;
            margin-top: 40px;
        }
    }
    .logoBox_right {
        width: 1000px;
        height: 190px;
        .logoBox_right_top {
            text-align: right;
            a {
                font-size: 22px;
                color: #0828bb;
                font-weight: bold;
                padding-left: 2%;
                -webkit-text-stroke: 1px #FFF;
            }
        }
        .logoBox_right_center {
            h2 {
                width: 100%;
                height: 120px;
                line-height: 120px;
            }
            a {
                font-size: 81px;
                color: #0828bb;
                font-weight: bold;
                -webkit-text-stroke: 3px #FFF;
            }
        }
        .logoBox_right_bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            h4 {
                height: 40px;
                line-height: 40px;
                a {
                    font-size: 22px;
                    color: #0828bb;
                    font-weight: bold;
                    -webkit-text-stroke: .5px #FFF;
                }
            }
        }
    }
}
//PC端 end ---------------------------------------->

// .userInfo11 {
//     width: 100px;
//     height: 80px;
//     background-color: #fff;
//     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
//     border-radius: 3px;
//     position: absolute;
//     top: 40px;
//     right: 35px;
//     font-size: 14px;
//     z-index: 999;
//     li {
//         height: 40px;
//         line-height: 40px;
//         color: #333333;
//         padding-left: 10px;
//     }
//     >li:hover {
//         color: #028E21;
//     }
// }
// .tips {
//     padding: 20px 0;
//     text-align: center;
//     font-size: 20px;
//     color: #40663B;
//     font-weight: bold;
//     img {
//         width: 78px;
//         height: 78px;
//         vertical-align: middle;
//         margin-right: 20px;
//         p {
//             line-height: 30px;
//         }
//     }
//     p {
//         line-height: 40px;
//     }
//     >p:first-child {
//         margin-bottom: 30px;
//     }
// }
// /* 页面头部 */
// header {
//     width: 100%;
//     // height: 201px;
//     font-size: 12px;
//     font-family: PingFang SC-Regular;
//     color: #666666;
//     background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/head/headtopbg.png") repeat-x;
// }
// .headerNav {
//     width: 100%;
//     height: 33px;
//     line-height: 33px;
// }
// .headerNav .left>span {
//     margin-right: 20px;
//     a {
//         color: #666666;
//     }
// }
// .headerNav .right {
//     display: flex;
//     margin-right: 10px;
//     position: relative;
//     button {
//         font-size: 12px;
//         color: #666666;
//         border: none;
//         background: none;
//         cursor: pointer;
//     }
//     .login {
//         width: 36px;
//         height: 19px;
//         color: #fff;
//         border-radius: 4px;
//         background-color: #028E21;
//         margin-right: 15px;
//         cursor: pointer;
//     }
//     .menu,.right-top-menu {
//         display: flex;
//     }
//     .reg {
//         margin-right: 20px;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         height: 33px;
//         img {
//             margin-right: 5px;
//         }
//     }
// }
// .headerNav .right {
//     float: right;
//     font-size: 12px;
//     span {
//         margin-right: 20px;
//     }
//     .home,.collection {
//         display: inline-block;
//         width: 16px;
//         height: 16px;
//         vertical-align: -3px;
//     }
//     .home {
//         background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
//     }
//     .collection {
//         background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
//     }
//     .exit {
//         line-height: 30px;
//     }
// }
// // 头部logo
// .headerLogo {
//     height: 145px;
//     position: relative;
//     .titlead {
//         position: absolute;
//         bottom: 5px;
//         right: 0;
//         width: 830px;
//         height: 120px;
//         overflow: hidden;
//         a {
//             display: block;
//             height: 110px;
//             overflow: hidden;
//         }
//         img {
//             width: 100%;
//             height: 110px;
//         }
//     }
//     .inner {
//         position: relative;
//         height: 145px;
//     }
//     .inner>img {
//         margin-top: 22px;
//         cursor: pointer;
//     }
//     // 搜索框部分
//     .search {
//         float: left;
//         width: 440px;
//         height: 40px;
//         background-color: #fff;
//         line-height: 40px;
//         margin-left: 39px;
//         margin: 71px 39px 48px;
//         position: relative;
//         em {
//             display: inline-block;
//             width: 30px;
//             height: 30px;
//             background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png") no-repeat;
//             position: absolute;
//             top: 5px;
//             left: 15px;
//         }
//         input {
//             float: left;
//             width: 351px;
//             height: 40px;
//             border: none;
//             outline: none;
//             padding-left: 65px;
//             box-sizing: border-box;
//             border: 1px solid #028E21;
//             border-right: none;
//             border-radius: 4px 0px 0px 4px;
//         }
//         button {
//             float: right;
//             width: 89px;
//             height: 40px;
//             background-color: #028E21;
//             border-radius: 0px 4px 4px 0px;
//             border: none;
//             font-size: 14px;
//             color: #fff;
//             font-family: PingFang SC, PingFang SC;
//             font-weight: 500;
//         }
//     }
//     // 右侧小图标
//     .serve {
//         float: right;
//         height: 60px;
//         margin-top: 60px;
//         margin-right: 60px;
//         >li {
//             float: left;
//             height: 64px;
//             margin-left: 48px;
//         }
//         >li>a {
//             display: inline-block;
//             height: 64px;
//         }
//         >li img {
//             width: 29px;
//             height: 29px;
//             padding: 8px 14px;
//         }
//         >li p {
//             height: 28px;
//             text-align: center;
//             color: #666666;
//         }
//     }
// }

//移动端 start ---------------------------------------->
@media screen and (min-width:801px){
    .logo_right_box{display:none;}
    .phone_head_btn{display:none;}
    .menu_phone{display:none;}
    .pc_none{display:none;}
}
@media screen and (max-width:800px){/*ipad_phone*/
    .headerNav .inner .left{width:100%;}
    .phone_head_btn{display:block;float:right;width:26px;height:26px; margin-top:4px;
        background:url(../../public/image/2.png) no-repeat 0 0px;background-size:100% 100%;
    }
    .headerNav{overflow:hidden;height:auto; padding:5px 0px;background:#f7f7f7;}
    .headerNav .left > span{margin-right:0px;}
    .headerNav .left > span:nth-of-type(1){margin-right:8px;}
    .headerLogo{
        height:auto;
        margin-top:8px;
    }
    .headerLogo .left{
        float:none;
    }
    .headerLogo .inner{
        display: flex;margin:4px auto; height:auto;
        justify-content: space-between;
    }
    .headerLogo .titlead{
        position:relative;bottom:auto;right:auto;height:auto;
        width:100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .headerLogo .titlead img{
        height:100%;
    }
    .headerLogo .titlead a{
        height:100%;
    }
    .headerLogo .inner>img{ 
        height:40px;
        margin:0px 10px 0px 0px;
    }
    .headerNav .right{
        margin-right:0px;
        width:100%;
        display:block;
        text-align:center;
    }                    
    .headerNav .right .menu{
        display:block;
        width:100%;
        word-break: keep-all; 
        white-space: nowrap;  
    }
    .headerNav .right .menu .reg:nth-of-type(1){
        float:left;
        margin:0px!important;
    }
    .headerNav .right .menu .reg:nth-last-of-type(1){
        float:right;
        margin:0px!important;
    }
    .headerNav .right .reg{
        margin:0px 4.2vw!important;width:auto;font-size:3vw;
        display:inline-block!important;line-height:33px;
    } 
    .headerLogo .titlead {
        display:none;
    }
    .logo_right_box{ 
        .logo_right_btn{
            float:left; 
            width:10vw;
            margin-left:7vw;
            text-align:center;
        }    
        .logo_right_btn:nth-of-type(1){
            margin-left:0px;
        }    
        .logo_right_btn_img{
            width:6vw; 
            display:inline-block; 
        }    
        .logo_right_btn_text{
            display:block;
            width:100%;
            height:16px;
            color:#333;
            text-align:center;
            line-height:16px;
            font-size:3vw;
        }    
    }   
    .tips{
        font-size:16px;
    }
    .tips img{
        width:60px;
        height:60px;
        margin-right:7px;
    }
    .tips p{
        line-height:28px;
    }
    .tips > p:first-child(1){
        margin-bottom:13px;
    }
    .dialog_load_btn{
        line-height:33px;
        width:111px;
        margin:40px auto 0;
        border-radius:4px; 
        height:33px;text-align:center;
        background: #40663B;
        font-size: 14px;
        color: #fff; 
    }
    .inner .right{
        display:none!important;
    }
    .phone_none{display:none;}
}
.el-overlay{ 
    width:100%;
    .el-overlay-dialog{
        width:90%;
        left:5%;
    }
    .el-dialog{
        width:100%;
    }
}
//移动端 end ---------------------------------------->
</style>