pageHead.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631
  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. isShow.value = false
  161. //window.location.href = url;
  162. window.open(url, '_blank');
  163. }
  164. //点击退出按钮
  165. let exit = () => {
  166. window.location.href = $CwebUrl;
  167. isShow.value = false
  168. isDel.value = 1
  169. token1.value = getToken()
  170. let tokendata = getToken()
  171. //王鹏
  172. // let url = $BwebUrl + '/auth/logout.php?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
  173. // console.log("用户退出登录======token为:", tokendata,url)
  174. //刘佳伟
  175. let url = $LoginWebUrl + '/api/logout?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
  176. window.location.href = url;
  177. removeToken()
  178. removeTicket()
  179. }
  180. //点击返回首页
  181. let backHome = () => {
  182. window.location.href = $CwebUrl;
  183. }
  184. //点击搜索按钮
  185. let goSearch = () => {
  186. const route = `/search/search?keyword=${keyword.value}`;
  187. window.location.href = route;
  188. }
  189. // 点击广告服务
  190. let goAdvertising = () => {
  191. //本地启动广告服务
  192. // window.open('/advertising?activeName=1', '_blank');
  193. //线上启动
  194. if (getToken()) {
  195. window.open($CwebUrl + '/advertising?activeName=1', '_blank');
  196. } else {
  197. goLogin()
  198. }
  199. }
  200. //点击商圈
  201. let goTopic = () => {
  202. //本地启动
  203. // window.open('/topic', '_blank');
  204. //线上启动
  205. if (getToken()) {
  206. window.open($CwebUrl + '/topic', '_blank');
  207. } else {
  208. goLogin()
  209. }
  210. }
  211. //监听token状态
  212. watch(token1, (newval, oldval) => {
  213. //console.log(newval, oldval);
  214. showToken.value = newval
  215. }, {
  216. deep: true,
  217. immediate: true,
  218. })
  219. //获得网站logo
  220. const logo = ref("")
  221. const webSiteName = ref("")
  222. let getLogo = async () => {
  223. const responseStatus = await requestDataPromise('/web/getWebsiteHead', {
  224. method: 'GET',
  225. query: {},
  226. });
  227. if (responseStatus.code == 200) {
  228. logo.value = responseStatus.data.logo;
  229. webSiteName.value = responseStatus.data.website_name;
  230. } else if (responseStatus.code == 0) {
  231. window.location.href = $CwebUrl + '/404';
  232. }
  233. }
  234. getLogo();
  235. //3.跳转菜单逻辑 end ---------------------------------------->
  236. //4.获取广告 start ---------------------------------------->
  237. let adImg = ref({})
  238. //4.获取广告 end ---------------------------------------->
  239. //5.获取登录状态 start ---------------------------------------->
  240. // 在组件卸载时移除事件监听
  241. onUnmounted(() => {
  242. document.removeEventListener('click', handleClickOutside);
  243. })
  244. onMounted(async () => {
  245. //添加监听关闭个人中心菜单
  246. document.addEventListener('click', handleClickOutside);
  247. //从客户端获取登录状态
  248. //从客户端阶段开始 持续查询登录状态
  249. let getLoginStatus = async () => {
  250. //获得token
  251. const token = getToken();
  252. const { $webUrl, $CwebUrl } = useNuxtApp();
  253. if (token == undefined) {
  254. //如果没有获取到token 不访问后端获取在线状态
  255. console.log("没有获取到token!无需查询登录状态!")
  256. showToken.value = false;
  257. } else {
  258. //如果获取到了token 访问后端查询状态
  259. console.log("已获取到用户token,开始查询登录状态!")
  260. const queryParams = new URLSearchParams({
  261. token: getToken()
  262. });
  263. let url = `${$webUrl}/api/loginStatus?${queryParams.toString()}`
  264. const responseStatus = await fetch(url, {
  265. method: 'GET',
  266. headers: {
  267. 'Content-Type': 'application/json',
  268. 'Userurl': $CwebUrl,
  269. //'token': getToken(),
  270. 'Origin': $CwebUrl
  271. }
  272. });
  273. const result = await responseStatus.json();
  274. console.log(result)
  275. if (result.code == 200) {
  276. console.log("用户已经登录!");
  277. showToken.value = true;
  278. }
  279. if (result.code == -1) {
  280. isShow.value = false;
  281. showToken.value = false;
  282. removeToken();
  283. removeTicket();
  284. ElMessage.error('您没有权限登录该网站!')
  285. }
  286. if (result.code == -2) {
  287. isShow.value = false;
  288. showToken.value = false;
  289. removeToken();
  290. removeTicket();
  291. ElMessage.error('您已退出登录!')
  292. }
  293. }
  294. }
  295. getLoginStatus();
  296. setInterval(getLoginStatus, 3000);
  297. //从客户端获取广告
  298. //从客户端获取行政职能部门 加快打开速度
  299. const { $webUrl, $CwebUrl } = useNuxtApp();
  300. //广告1
  301. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_top`
  302. const responseAd1 = await fetch(url, {
  303. headers: {
  304. 'Content-Type': 'application/json',
  305. 'Userurl': $CwebUrl,
  306. 'Origin': $CwebUrl
  307. }
  308. });
  309. const resultAd1 = await responseAd1.json();
  310. adImg.value = resultAd1.data[0];
  311. //从客户端获取用户名
  312. let userInfoUrl = `${$webUrl}/user/getUserInfo`
  313. const userInfoResponse = await fetch(userInfoUrl, {
  314. headers: {
  315. 'Content-Type': 'application/json',
  316. 'Userurl': $CwebUrl,
  317. 'Origin': $CwebUrl
  318. }
  319. });
  320. const userInfo = await userInfoResponse.json();
  321. if (userInfo.code == 200) {
  322. username.value = userInfo.data.nickname
  323. }
  324. })
  325. //5.获取登录状态 end ---------------------------------------->
  326. </script>
  327. <style lang="less" scoped>
  328. .userInfo11 {
  329. width: 100px;
  330. height: 80px;
  331. background-color: #fff;
  332. box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  333. border-radius: 3px;
  334. position: absolute;
  335. top: 40px;
  336. right: 35px;
  337. font-size: 14px;
  338. z-index: 999;
  339. li {
  340. height: 40px;
  341. line-height: 40px;
  342. color: #333333;
  343. padding-left: 10px;
  344. }
  345. >li:hover {
  346. color: #028E21;
  347. }
  348. }
  349. .tips {
  350. padding: 20px 0;
  351. text-align: center;
  352. font-size: 20px;
  353. color: #333333;
  354. font-weight: bold;
  355. img {
  356. width: 78px;
  357. height: 78px;
  358. vertical-align: middle;
  359. margin-right: 20px;
  360. p {
  361. line-height: 30px;
  362. }
  363. }
  364. p {
  365. line-height: 40px;
  366. }
  367. >p:first-child {
  368. margin-bottom: 30px;
  369. }
  370. }
  371. /* 页面头部 */
  372. header {
  373. width: 100%;
  374. height: 180px;
  375. font-size: 12px;
  376. font-family: PingFang SC-Regular;
  377. color: #666666;
  378. background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/head/headtopbg.png") repeat-x;
  379. }
  380. .headerNav {
  381. width: 100%;
  382. height: 33px;
  383. line-height: 33px;
  384. }
  385. .headerNav .left span {
  386. margin-right: 20px;
  387. a {
  388. color: #666666;
  389. }
  390. }
  391. .headerNav .right {
  392. display: flex;
  393. margin-right: 10px;
  394. position: relative;
  395. button {
  396. font-size: 12px;
  397. color: #666666;
  398. border: none;
  399. background: none;
  400. cursor: pointer;
  401. }
  402. .login {
  403. width: 36px;
  404. height: 19px;
  405. color: #fff;
  406. border-radius: 4px;
  407. background-color: #028E21;
  408. margin-right: 15px;
  409. cursor: pointer;
  410. }
  411. .menu,
  412. .right-top-menu {
  413. display: flex;
  414. }
  415. .reg {
  416. margin-right: 20px;
  417. display: flex;
  418. align-items: center;
  419. justify-content: center;
  420. height: 33px;
  421. img {
  422. margin-right: 5px;
  423. }
  424. }
  425. }
  426. .headerNav .right {
  427. float: right;
  428. font-size: 12px;
  429. span {
  430. margin-right: 20px;
  431. }
  432. .home,
  433. .collection {
  434. display: inline-block;
  435. width: 16px;
  436. height: 16px;
  437. vertical-align: -3px;
  438. }
  439. .home {
  440. background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
  441. }
  442. .collection {
  443. background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
  444. }
  445. .exit {
  446. line-height: 30px;
  447. }
  448. // .exit:hover{
  449. // color: #028E21;
  450. // }
  451. }
  452. /* // 头部logo */
  453. .headerLogo {
  454. height: 145px;
  455. position: relative;
  456. //background: url("../../public/head/topBg.png") no-repeat center;
  457. .titlead {
  458. position: absolute;
  459. bottom: 14px;
  460. right: 26px;
  461. width: 830px;
  462. height: 110px;
  463. overflow: hidden;
  464. a {
  465. display: block;
  466. width: 830px;
  467. height: 110px;
  468. overflow: hidden;
  469. }
  470. img {
  471. width: 100%;
  472. height: 110px;
  473. }
  474. }
  475. .inner {
  476. position: relative;
  477. height: 145px;
  478. }
  479. .inner>img {
  480. width: 297px;
  481. height: 110px;
  482. margin-top: 20px;
  483. cursor: pointer;
  484. }
  485. /* // 搜索框部分 */
  486. .search {
  487. float: left;
  488. width: 440px;
  489. height: 40px;
  490. background-color: #fff;
  491. line-height: 40px;
  492. margin-left: 39px;
  493. margin: 71px 39px 48px;
  494. position: relative;
  495. em {
  496. display: inline-block;
  497. width: 30px;
  498. height: 30px;
  499. background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png") no-repeat;
  500. position: absolute;
  501. top: 5px;
  502. left: 15px;
  503. }
  504. input {
  505. float: left;
  506. width: 351px;
  507. height: 40px;
  508. border: none;
  509. outline: none;
  510. padding-left: 65px;
  511. box-sizing: border-box;
  512. border: 1px solid #028E21;
  513. border-right: none;
  514. border-radius: 4px 0px 0px 4px;
  515. }
  516. button {
  517. float: right;
  518. width: 89px;
  519. height: 40px;
  520. background-color: #028E21;
  521. border-radius: 0px 4px 4px 0px;
  522. border: none;
  523. font-size: 14px;
  524. color: #fff;
  525. font-family: PingFang SC, PingFang SC;
  526. font-weight: 500;
  527. }
  528. }
  529. /* // 右侧小图标 */
  530. .serve {
  531. float: right;
  532. height: 60px;
  533. margin-top: 60px;
  534. margin-right: 60px;
  535. >li {
  536. float: left;
  537. height: 64px;
  538. margin-left: 48px;
  539. }
  540. >li>a {
  541. display: inline-block;
  542. height: 64px;
  543. }
  544. >li img {
  545. width: 29px;
  546. height: 29px;
  547. padding: 8px 14px;
  548. }
  549. >li p {
  550. height: 28px;
  551. text-align: center;
  552. color: #666666;
  553. }
  554. }
  555. }
  556. </style>