head.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. <template>
  2. <div>
  3. <!-- 顶部导航 -->
  4. <nav class="headerNav">
  5. <div class="inner">
  6. <div class="left">
  7. <span>中农兴业网团</span>
  8. <span>旗下网站:
  9. <span>农业百强网站(政府类30强)</span>
  10. </span>
  11. <span class="ad">商圈</span>
  12. </div>
  13. <div class="right">
  14. <div class="menu">
  15. <button class="reg" @click="goTopic">
  16. <img src="../../static/head/topicon1.png" alt="商圈">
  17. 商圈
  18. </button>
  19. <button class="reg" @click="goAdvertising">
  20. <img src="../../static/head/topicon2.png" alt="广告服务">
  21. 广告服务
  22. </button>
  23. </div>
  24. <div class="right-top-menu">
  25. <button class="reg" @click="goLogin" v-show="!showToken">
  26. <img src="../../static/head/topicon3.png" alt="登录">
  27. 登录
  28. </button>
  29. <button class="reg" @click="goRegister" v-show="!showToken">
  30. <img src="../../static/head/topicon4.png" alt="注册">
  31. 注册
  32. </button>
  33. <button class="reg" @click="userCenter" v-show="showToken">
  34. <img src="../../static/head/topicon3.png" alt="用户信息">
  35. {{ username }}
  36. </button>
  37. <button class="reg" @click="goSearch">
  38. <img src="../../static/head/searchicon.png" alt="搜索">
  39. 搜索
  40. </button>
  41. </div>
  42. <ul class="userInfo11" v-if="isShow">
  43. <li @click="gotosystem">个人中心</li>
  44. <li @click="exit">退出</li>
  45. </ul>
  46. </div>
  47. </div>
  48. </nav>
  49. <el-dialog v-model="dialogTableVisible" title="" width="800">
  50. <div class="tips">
  51. <p>
  52. <img src="../../static/topic/tips.png" alt="">
  53. 提示:注册请联系管理员操作!
  54. </p>
  55. <p>
  56. 联系电话:010-56019387
  57. </p>
  58. <p>
  59. QQ : 2909421493 、213552413
  60. </p>
  61. </div>
  62. </el-dialog>
  63. </div>
  64. </template>
  65. <script setup>
  66. import { ref, onMounted, watch } from 'vue'
  67. import { ElPopover, ElDialog } from 'element-plus'
  68. import { getToken, setToken, removeToken } from '@/store/useCookieStore'
  69. import { setTicket, removeTicket } from '@/store/useticketStore'
  70. // import { navigateTo } from '@nuxtjs/composables';
  71. const { $webUrl, $CwebUrl, $BwebUrl, $LoginWebUrl} = useNuxtApp()
  72. const nuxtApp = useNuxtApp();
  73. console.log("===:", nuxtApp) // 输出: someValue
  74. const axios = nuxtApp.$axios;
  75. let ticket = ref('')
  76. let token = ref('')
  77. let route = useRoute()
  78. ticket.value = route.query.ticket
  79. token.value = route.query.admintoken
  80. if (ticket.value) {
  81. setTicket(ticket.value)
  82. }
  83. if (token.value) {
  84. setToken(token.value)
  85. }
  86. console.log('查询参数:', ticket.value);
  87. console.log('查询参数:', token.value);
  88. definePageMeta({
  89. middleware: 'auth'
  90. });
  91. let keyword = useState('keyword', () => '')
  92. let username = useState('username', () => '')
  93. let isDel = useState('isDel', () => 1)
  94. let isShow = useState('isShow', () => false)
  95. //点击登录按钮
  96. let goLogin = () => {
  97. isDel.value = 0
  98. token1.value = getToken()
  99. //王鹏
  100. //let url = $BwebUrl + '/auth/login.php?backurl=' + $CwebUrl;
  101. //刘佳伟
  102. let url = $LoginWebUrl + '/api/goLogin?backurl=' + $CwebUrl;
  103. window.location.href = url;
  104. //"http://adminpre.bjzxtw.org.cn/auth/login.php?backurl=http://nwpre.bjzxtw.org.cn"
  105. token1.value = getToken()
  106. }
  107. let dialogTableVisible = ref(false)
  108. //点击注册按钮
  109. let goRegister = () => {
  110. dialogTableVisible.value = true
  111. }
  112. let userCenter = () => {
  113. if(isShow.value){
  114. isShow.value = false
  115. return
  116. }else{
  117. isShow.value = true
  118. return
  119. }
  120. }
  121. let gotosystem = () => {
  122. let url = $BwebUrl + '/#/login?userurl=' + $CwebUrl;
  123. window.location.href = url;
  124. //"http://adminpre.bjzxtw.org.cn/#/login?userurl=http://nwpre.bjzxtw.org.cn"
  125. }
  126. //点击退出按钮
  127. let exit = () => {
  128. //window.location.href = ('http://nwpre.bjzxtw.org.cn/')
  129. window.location.href = $CwebUrl;
  130. isDel.value = 1
  131. token1.value = getToken()
  132. // axios.get(`http://adminpre.bjzxtw.org.cn/auth/logoutapi.php?token=${token}`).then(response => {
  133. // console.log("退出登录", response);
  134. // isDel.value = response.data.isDel
  135. // })
  136. //王鹏
  137. //let url = $BwebUrl + '/auth/logout.php?backurl=' + $CwebUrl + '&admintoken=' + token1;
  138. //刘佳伟
  139. let url = $LoginWebUrl + '/api/logout?backurl=' + $CwebUrl + '&admintoken=' + token1;
  140. window.location.href = url;
  141. removeToken()
  142. removeTicket()
  143. }
  144. //点击搜索按钮
  145. let goSearch = () => {
  146. const route = `/search/search?keyword=${keyword.value}`;
  147. window.open(route, '_blank');
  148. }
  149. // 点击广告服务
  150. let goAdvertising = () => {
  151. // window.location.href = ('http://localhost:3000/advertising?activeName=${1}')
  152. let url = $CwebUrl + '/advertising?activeName=${1}';
  153. if (getToken()) {
  154. window.open(url, '_blank');
  155. } else {
  156. goLogin()
  157. }
  158. }
  159. //点击商圈
  160. let goTopic = () => {
  161. // window.location.href = ('http://localhost:3000/topic')
  162. if (getToken()) {
  163. let url = $CwebUrl + '/topic';
  164. window.open(url, '_blank');
  165. } else {
  166. goLogin()
  167. }
  168. }
  169. //获取用户信息
  170. let getUserInfo = async () => {
  171. try {
  172. const response = await axios.get("/user/getUserInfo");
  173. console.log('获取用户信息', response);
  174. username.value = response.data.nickname
  175. } catch (error) {
  176. console.error(error);
  177. }
  178. }
  179. let token1 = useState("token1", () => '')
  180. let showToken = useState("showToken", () => '')
  181. token1.value = getToken()
  182. watch(token1, (newval, oldval) => {
  183. console.log(newval, oldval);
  184. showToken.value = newval
  185. }, {
  186. deep: true,
  187. immediate: true,
  188. })
  189. onMounted(() => {
  190. //获取用户信息
  191. getUserInfo()
  192. //获取登录状态
  193. getLoginStatus()
  194. })
  195. //检测登录状态
  196. //http://adminpre.bjzxtw.org.cn/auth/loginstatus.php?token=XXXXXXXXXXXX
  197. let tokenStatus = ref('');
  198. tokenStatus.value = getToken()
  199. console.log(tokenStatus.value);
  200. //获取用户信息
  201. let getLoginStatus = async () => {
  202. try {
  203. let url = $CwebUrl + '/auth/loginstatus.php?token=' + tokenStatus;
  204. const response = await axios.get(url);
  205. console.log('登录状态', response);
  206. if (response.data.code == 200) {
  207. if(response.data.data.islogin == true){
  208. showToken.value = true
  209. }else{
  210. showToken.value = false
  211. exit()
  212. }
  213. } else if (response.data.code == 0) {
  214. //退出登录
  215. exit();
  216. }
  217. } catch (error) {
  218. console.error(error);
  219. }
  220. }
  221. </script>
  222. <style lang="less" scoped>
  223. // 广告页面头部
  224. .headerNav {
  225. width: 100%;
  226. height: 56px;
  227. line-height: 56px;
  228. border-bottom: 1px solid #E5E5E5;
  229. // background-color: red;
  230. }
  231. .headerNav .left>span {
  232. margin-right: 47px;
  233. color: #666666;
  234. }
  235. .headerNav .left>.ad {
  236. border-left: 1px solid #E5E5E5;
  237. padding-left: 45px;
  238. color: #333333;
  239. font-weight: 600px;
  240. }
  241. .headerNav .right {
  242. display: flex;
  243. margin-right: 10px;
  244. position: relative;
  245. button {
  246. font-size: 12px;
  247. color: #666666;
  248. border: none;
  249. background: none;
  250. cursor: pointer;
  251. }
  252. .login {
  253. width: 36px;
  254. height: 19px;
  255. color: #fff;
  256. border-radius: 4px;
  257. background-color: #028E21;
  258. margin-right: 15px;
  259. cursor: pointer;
  260. }
  261. .menu,
  262. .right-top-menu {
  263. display: flex;
  264. }
  265. .reg {
  266. margin-right: 20px;
  267. display: flex;
  268. align-items: center;
  269. justify-content: center;
  270. height: 50px;
  271. img {
  272. margin-right: 5px;
  273. }
  274. }
  275. }
  276. .headerNav .right {
  277. float: right;
  278. font-size: 12px;
  279. // margin-top: 10px;
  280. span {
  281. margin-left: 26px;
  282. }
  283. .home,
  284. .collection {
  285. display: inline-block;
  286. width: 16px;
  287. height: 16px;
  288. vertical-align: -3px;
  289. }
  290. .exit {
  291. line-height: 30px;
  292. }
  293. }
  294. .userInfo11 {
  295. width: 100px;
  296. height: 80px;
  297. background-color: #fff;
  298. box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  299. border-radius: 3px;
  300. position: absolute;
  301. top: 50px;
  302. right: 0;
  303. font-size: 14px;
  304. z-index: 999;
  305. li {
  306. height: 40px;
  307. line-height: 40px;
  308. color: #333333;
  309. padding-left: 10px;
  310. }
  311. >li:hover {
  312. color: #028E21;
  313. }
  314. }
  315. //提示信息
  316. .tips {
  317. padding: 20px 0;
  318. text-align: center;
  319. font-size: 20px;
  320. color: #40663B;
  321. font-weight: bold;
  322. img {
  323. width: 78px;
  324. height: 78px;
  325. vertical-align: middle;
  326. margin-right: 20px;
  327. p {
  328. line-height: 30px;
  329. }
  330. }
  331. p {
  332. line-height: 40px;
  333. }
  334. >p:first-child {
  335. margin-bottom: 30px;
  336. }
  337. }
  338. </style>