pageHead.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. <template>
  2. <header>
  3. <nav class="headerNav">
  4. <div class="inner">
  5. <div class="left">
  6. <span class="znxy">
  7. <a href="http://znxyw.org.cn/" target="_blank">中农兴业网团</a>
  8. </span>
  9. <span>旗下网站 · 农业百强网站(科教文化类十强)</span>
  10. </div>
  11. <div class="right">
  12. <div class="menu">
  13. <button class="reg" @click="goTopic">
  14. <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon1.png" alt="商圈">商圈
  15. </button>
  16. <button class="reg" @click="goAdvertising">
  17. <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon2.png" alt="广告服务">广告服务
  18. </button>
  19. </div>
  20. <div class="right-top-menu">
  21. <button class="reg" @click="goLogin" v-show="!showToken">
  22. <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="登录">登录
  23. </button>
  24. <button class="reg" @click="goRegister" v-show="!showToken">
  25. <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon4.png" alt="注册">注册
  26. </button>
  27. <button class="reg" @click="userCenter" v-show="showToken">
  28. <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="用户信息">{{
  29. username }}
  30. </button>
  31. <button class="reg" @click="goSearch">
  32. <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/searchicon.png" alt="搜索">搜索
  33. </button>
  34. </div>
  35. <ul class="userInfo11" v-if="isShow">
  36. <li @click="gotosystem">个人中心</li>
  37. <li @click="exit">退出</li>
  38. </ul>
  39. </div>
  40. </div>
  41. </nav>
  42. <div class="headerLogo">
  43. <div class="inner">
  44. <img :src="logo" :alt="webSiteName" class="left" @click="backHome">
  45. <div class="titlead" v-if="adImg">
  46. <a href="http://sannongdy.org.cn/" v-if="adImg.image_url == null" target="_blank"
  47. :title="adImg.introduce">
  48. <img :src="adImg.thumb" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
  49. </a>
  50. <a :href="adImg.image_url" v-else :title="adImg.introduce">
  51. <img :src="adImg.image_src" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
  52. </a>
  53. </div>
  54. </div>
  55. </div>
  56. <el-dialog v-model="dialogTableVisible" width="800">
  57. <div class="tips">
  58. <p>
  59. <img src="@/public/topic/tips.png"> 提示:注册请联系管理员操作!
  60. </p>
  61. <p>联系电话:010-56019387</p>
  62. <p>QQ : 2909421493 、213552413</p>
  63. </div>
  64. </el-dialog>
  65. </header>
  66. </template>
  67. <script setup>
  68. //1.加载基本依赖 start ---------------------------------------->
  69. import { ref, watch, onMounted } from 'vue'
  70. import { ElDialog } from 'element-plus'
  71. import { getToken, setToken, removeToken } from '@/store/useCookieStore'
  72. import { setTicket, removeTicket } from '@/store/useticketStore'
  73. //网站地址
  74. const { $webUrl, $CwebUrl, $BwebUrl, $LoginWebUrl } = useNuxtApp()
  75. //1.加载基本依赖 end ---------------------------------------->
  76. //1.登录逻辑 start ---------------------------------------->
  77. let ticket = ref('')
  78. let token = ref('')
  79. let route = useRoute()
  80. //页面每次刷新先判断一下用户状态是否已经过期了
  81. //如果没有过期再储存token
  82. ticket.value = route.query.ticket
  83. token.value = route.query.admintoken
  84. if (ticket.value) {
  85. setTicket(ticket.value)
  86. }
  87. if (token.value) {
  88. setToken(token.value)
  89. }
  90. //搜索框
  91. let keyword = useState('keyword', () => '')
  92. //用户名
  93. let username = useState('username', () => '用户中心')
  94. //是否删除
  95. let isDel = useState('isDel', () => 1)
  96. //是否显示用户中心
  97. let isShow = useState('isShow', () => false)
  98. let token1 = useState("token1", () => '')
  99. let showToken = useState("showToken", () => '')
  100. token1.value = getToken()
  101. //检测登录状态
  102. let tokenStatus = ref('');
  103. tokenStatus.value = getToken()
  104. if (tokenStatus.value == undefined) {
  105. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  106. console.log('错误:未获取到用户token,如果在本地测试请忽略!');
  107. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  108. } else {
  109. console.log(tokenStatus.value);
  110. }
  111. //点击登录按钮
  112. let goLogin = () => {
  113. //开启线上登录模式 start---------------------------------------->
  114. isDel.value = 0
  115. token1.value = getToken()
  116. //王鹏
  117. //window.open($BwebUrl + "/auth/login.php?backurl=" + $CwebUrl, '_blank');
  118. //刘佳伟
  119. //window.open($LoginWebUrl + "/api/goLogin?backurl=" + $CwebUrl, '_blank');
  120. //党云龙
  121. window.open($BwebUrl + "/#/login?backurl=" + $CwebUrl, '_blank');
  122. //开启线上登录模式 end---------------------------------------->
  123. //开启本地登录模式 start---------------------------------------->
  124. // window.location.href = $BwebUrl + "/auth/login.php?backurl=" + $CwebUrl;
  125. //"http://adminpre.bjzxtw.org.cn/auth/login.php?backurl=http://nwpre.bjzxtw.org.cn";
  126. //开启本地登录模式 end---------------------------------------->
  127. }
  128. let dialogTableVisible = ref(false)
  129. //点击注册按钮
  130. let goRegister = () => {
  131. dialogTableVisible.value = true
  132. }
  133. //点击用户中心
  134. let userCenter = () => {
  135. if (isShow.value) {
  136. isShow.value = false
  137. return
  138. } else {
  139. isShow.value = true
  140. return
  141. }
  142. }
  143. // 添加点击事件处理函数
  144. const handleClickOutside = (event) => {
  145. // 获取用户信息菜单元素
  146. const userInfoMenu = document.querySelector('.userInfo11');
  147. // 获取用户按钮元素
  148. const userButton = document.querySelector('.reg img[alt="用户信息"]')?.parentElement;
  149. // 如果点击的不是菜单本身且不是用户按钮,则隐藏菜单
  150. if (userInfoMenu &&
  151. !userInfoMenu.contains(event.target) &&
  152. !userButton?.contains(event.target)) {
  153. isShow.value = false;
  154. }
  155. }
  156. //2.登录逻辑 end ---------------------------------------->
  157. //3.跳转菜单逻辑 start ---------------------------------------->
  158. let gotosystem = () => {
  159. let url = $BwebUrl + '/#/login?userurl=' + $CwebUrl;
  160. //window.location.href = url;
  161. window.open(url, '_blank');
  162. }
  163. //点击退出按钮
  164. let exit = () => {
  165. window.location.href = $CwebUrl;
  166. isDel.value = 1
  167. token1.value = getToken()
  168. let tokendata = getToken()
  169. //王鹏
  170. // let url = $BwebUrl + '/auth/logout.php?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
  171. // console.log("用户退出登录======token为:", tokendata,url)
  172. //刘佳伟
  173. let url = $LoginWebUrl + '/api/logout?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
  174. window.location.href = url;
  175. removeToken()
  176. removeTicket()
  177. }
  178. //点击返回首页
  179. let backHome = () => {
  180. window.location.href = $CwebUrl;
  181. }
  182. //点击搜索按钮
  183. let goSearch = () => {
  184. const route = `/search/search?keyword=${keyword.value}`;
  185. window.location.href = route;
  186. }
  187. // 点击广告服务
  188. let goAdvertising = () => {
  189. //本地启动广告服务
  190. //window.open('/advertising?activeName=1', '_blank');
  191. //线上启动
  192. if (getToken()) {
  193. window.open($CwebUrl + '/advertising?activeName=1', '_blank');
  194. } else {
  195. goLogin()
  196. }
  197. }
  198. //点击商圈
  199. let goTopic = () => {
  200. //本地启动
  201. // window.open('/topic', '_blank');
  202. //线上启动
  203. if (getToken()) {
  204. window.open($CwebUrl + '/topic', '_blank');
  205. } else {
  206. goLogin()
  207. }
  208. }
  209. //监听token状态
  210. watch(token1, (newval, oldval) => {
  211. //console.log(newval, oldval);
  212. showToken.value = newval
  213. }, {
  214. deep: true,
  215. immediate: true,
  216. })
  217. //获得网站logo
  218. const logo = ref("")
  219. const webSiteName = ref("")
  220. let getLogo = async () => {
  221. const responseStatus = await requestDataPromise('/web/getWebsiteHead', {
  222. method: 'GET',
  223. query: {},
  224. });
  225. if (responseStatus.code == 200) {
  226. logo.value = responseStatus.data.logo;
  227. webSiteName.value = responseStatus.data.website_name;
  228. } else if (responseStatus.code == 0) {
  229. window.location.href = $CwebUrl + '/404';
  230. }
  231. }
  232. getLogo();
  233. //3.跳转菜单逻辑 end ---------------------------------------->
  234. //4.获取广告 start ---------------------------------------->
  235. let adImg = ref({})
  236. //4.获取广告 end ---------------------------------------->
  237. //5.获取登录状态 start ---------------------------------------->
  238. // 在组件卸载时移除事件监听
  239. onUnmounted(() => {
  240. document.removeEventListener('click', handleClickOutside);
  241. })
  242. onMounted(async () => {
  243. //添加监听关闭个人中心菜单
  244. document.addEventListener('click', handleClickOutside);
  245. //从客户端获取登录状态
  246. //从客户端阶段开始 持续查询登录状态
  247. let getLoginStatus = async () => {
  248. //获得token
  249. const token = getToken();
  250. const { $webUrl, $CwebUrl } = useNuxtApp();
  251. if (token == undefined) {
  252. //如果没有获取到token 不访问后端获取在线状态
  253. console.log("没有获取到token!无需查询登录状态!")
  254. showToken.value = false;
  255. } else {
  256. //如果获取到了token 访问后端查询状态
  257. console.log("已获取到用户token,开始查询登录状态!")
  258. const queryParams = new URLSearchParams({
  259. token: getToken()
  260. });
  261. let url = `${$webUrl}/api/loginStatus?${queryParams.toString()}`
  262. const responseStatus = await fetch(url, {
  263. method: 'GET',
  264. headers: {
  265. 'Content-Type': 'application/json',
  266. 'Userurl': $CwebUrl,
  267. //'token': getToken(),
  268. 'Origin': $CwebUrl
  269. }
  270. });
  271. const result = await responseStatus.json();
  272. console.log(result)
  273. if (result.code == 200) {
  274. console.log("用户已经登录!");
  275. showToken.value = true;
  276. }
  277. if (result.code == -1) {
  278. isShow.value = false;
  279. showToken.value = false;
  280. removeToken();
  281. removeTicket();
  282. ElMessage.error('您没有权限登录该网站!')
  283. }
  284. if (result.code == -2) {
  285. isShow.value = false;
  286. showToken.value = false;
  287. removeToken();
  288. removeTicket();
  289. ElMessage.error('您已退出登录!')
  290. }
  291. }
  292. }
  293. getLoginStatus();
  294. setInterval(getLoginStatus, 3000);
  295. //从客户端获取广告
  296. //从客户端获取行政职能部门 加快打开速度
  297. const { $webUrl, $CwebUrl } = useNuxtApp();
  298. //广告1
  299. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmw_top`
  300. const responseAd1 = await fetch(url, {
  301. headers: {
  302. 'Content-Type': 'application/json',
  303. 'Userurl': $CwebUrl,
  304. 'Origin': $CwebUrl
  305. }
  306. });
  307. const resultAd1 = await responseAd1.json();
  308. adImg.value = resultAd1.data[0];
  309. //从客户端获取用户名
  310. let userInfoUrl = `${$webUrl}/user/getUserInfo`
  311. const userInfoResponse = await fetch(userInfoUrl, {
  312. headers: {
  313. 'Content-Type': 'application/json',
  314. 'Userurl': $CwebUrl,
  315. 'Origin': $CwebUrl
  316. }
  317. });
  318. const userInfo = await userInfoResponse.json();
  319. if (userInfo.code == 200) {
  320. username.value = userInfo.data.nickname
  321. }
  322. })
  323. //5.获取登录状态 end ---------------------------------------->
  324. </script>
  325. <style lang="less" scoped>
  326. @import url('@/assets/css/public/head.less');
  327. </style>