|
|
@@ -0,0 +1,342 @@
|
|
|
+<template>
|
|
|
+ <!-- <div>当前皮肤：{{ skinId }}</div> -->
|
|
|
+ <header>
|
|
|
+ <nav class="headerNav">
|
|
|
+ <div class="inner">
|
|
|
+ <div class="left">你好，欢迎来到{{webSiteName}}！</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">商圈</button>
|
|
|
+ <button class="reg" @click="goAdvertising"><img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon2.png">广告服务</button>
|
|
|
+ </div>
|
|
|
+ <div class="right-top-menu">
|
|
|
+ <button class="reg" @click="goLogin" v-show="!showToken"><img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png">登录</button>
|
|
|
+ <button class="reg" @click="goRegister" v-show="!showToken"><img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon4.png">注册</button>
|
|
|
+ <button class="reg" @click="userCenter" v-show="showToken"><img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png">{{username}}</button>
|
|
|
+ <button class="reg" @click="goSearch"><img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/searchicon.png">搜索</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"></a>
|
|
|
+ <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"></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog v-model="dialogTableVisible" width="800">
|
|
|
+ <div class="tips">
|
|
|
+ <p><img src="@/public/topic/tips.png"> 提示:注册请联系管理员操作!</p>
|
|
|
+ <p>联系电话:010-56019387</p>
|
|
|
+ <p>QQ ： 2909421493 、213552413</p>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </header>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+
|
|
|
+//1.加载基本依赖 start ---------------------------------------->
|
|
|
+import { ref, watch, onMounted } from 'vue'
|
|
|
+import { ElDialog } from 'element-plus'
|
|
|
+import { getToken, setToken, removeToken } from '@/store/useCookieStore'
|
|
|
+import { setTicket, removeTicket } from '@/store/useticketStore'
|
|
|
+import { useTemplateBaseStore } from '@/stores/templateBase'
|
|
|
+const templateBaseStore = useTemplateBaseStore()
|
|
|
+//网站地址
|
|
|
+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("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
+ // console.log('错误：未获取到用户token,如果在本地测试请忽略！');
|
|
|
+ // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
+} else {
|
|
|
+ console.log(tokenStatus.value);
|
|
|
+}
|
|
|
+
|
|
|
+//点击登录按钮
|
|
|
+let goLogin = () => {
|
|
|
+ //开启线上登录模式 start---------------------------------------->
|
|
|
+ isDel.value = 0
|
|
|
+ token1.value = getToken()
|
|
|
+ //王鹏
|
|
|
+ //window.open($BwebUrl + "/auth/login.php?backurl=" + $CwebUrl, '_blank');
|
|
|
+ //刘佳伟
|
|
|
+ //window.open($LoginWebUrl + "/api/goLogin?backurl=" + $CwebUrl, '_blank');
|
|
|
+ //党云龙
|
|
|
+ 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 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;
|
|
|
+ //window.location.href = url;
|
|
|
+ window.open(url, '_blank');
|
|
|
+}
|
|
|
+
|
|
|
+//点击退出按钮
|
|
|
+let exit = () => {
|
|
|
+ window.location.href = $CwebUrl;
|
|
|
+
|
|
|
+ isDel.value = 1
|
|
|
+ token1.value = getToken()
|
|
|
+
|
|
|
+ let tokendata = getToken()
|
|
|
+
|
|
|
+ //王鹏
|
|
|
+ // let url = $BwebUrl + '/auth/logout.php?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
|
|
|
+ // console.log("用户退出登录======token为：", tokendata,url)
|
|
|
+ //刘佳伟
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//监听token状态
|
|
|
+watch(token1, (newval, oldval) => {
|
|
|
+ //console.log(newval, oldval);
|
|
|
+ showToken.value = newval
|
|
|
+}, {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+})
|
|
|
+//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=nmw_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 ---------------------------------------->
|
|
|
+
|
|
|
+
|
|
|
+//6.获得网站基本信息与广告池 start ---------------------------------------->
|
|
|
+//获得网站logo
|
|
|
+const logo = ref("")
|
|
|
+const webSiteName = ref("")
|
|
|
+const skinId = ref("")
|
|
|
+if(templateBaseStore.webSiteInfo.website_head){
|
|
|
+ logo.value = templateBaseStore.webSiteInfo.website_head.logo;
|
|
|
+ webSiteName.value = templateBaseStore.webSiteInfo.website_head.title;
|
|
|
+ //获得皮肤id
|
|
|
+ skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
|
|
|
+}
|
|
|
+//adImg.value
|
|
|
+//获得广告
|
|
|
+if(templateBaseStore.webAdList){
|
|
|
+ //console.log(templateBaseStore.webAdList)
|
|
|
+ adImg.value = requestAd(templateBaseStore.webAdList,templateBaseStore.webSiteInfo.website_head.ad_key + "_" + "top")
|
|
|
+}
|
|
|
+//6.获得网站基本信息与广告池 end ---------------------------------------->
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import url('@/assets/css/public/head.less');
|
|
|
+</style>
|
dangyunlong