https://www.wenweipo.com/static/wenweipo/revision2025/js/pageHeader.js?v=20260911

1// 页面顶部相关事件
2let access_token = ""
3let userIcon = ""
4let userNum = ""
5let nickname = ""
6
7let topWordCache = ""
8let isTopicsPage = false
9
10// 获取当前栏目的dirname
11function getCurDirname() {
12  const columnInfo = globalData.column
13  if (columnInfo) {
14    const parentCol = columnInfo.parentColumns
15    return parentCol && parentCol[0] ? parentCol[0].dirname : columnInfo.dirname
16  } else {
17    const currentPath = window.location.pathname;
18    if (currentPath === "/") return "/"
19
20    const pathArr = currentPath.split("/").filter(item => item !== "")
21    return pathArr[0]
22  }
23}
24// 设置当前栏目
25function setActiveColumn() {
26  // 区分pc端和h5端的导航栏
27  const isTopBarVisible = $(".top-bar").css("display") !== "none";
28  const columnSelector = isTopBarVisible ? ".column-name" : ".top-bar-h5 .column-name";
29
30  $(columnSelector).removeClass("active");
31
32  const curDirname = getCurDirname()
33
34  if (curDirname === "inland" || curDirname === "aroundNews") {
35    $(`${columnSelector}[data-id="aroundNews"]`).css("display", "block");
36  }
37
38  $(columnSelector).each(function() {
39    const columnId = $(this).data('id');
40    if (columnId && curDirname === columnId) {
41      $(this).addClass('active');
42      return false;
43    }
44  });
45}
46
47// 设置用户头像
48function setUserIcon() {
49  if (access_token) {
50    const Authorization = "Bearer"+ access_token
51    $.ajax({
52      type: "get",
53      url: "/ucs/api/v1/private/profile",
54      headers: {
55        Authorization,
56        Accept: "application/json; charset=utf-8",
57      },
58      dataType: "JSON",
59      success: (result) => {
60        const { data: { uuid, nickname: n_name } } = result
61
62        userNum = uuid
63        nickname = n_name
64        userIcon = `/ucs/api/v1/avatars/${uuid}?${Math.random()}`
65
66        $(".login-bar .login-btn").removeClass("show")
67        $(".login-bar .user-bar").addClass("show")
68        $(".login-bar .user-bar .user-icon").attr('src', userIcon)
69        $("#details") && $("#details .input-bar .user-icon").attr("src", userIcon)
70
71        $.cookie("uuid", uuid, { path: "/" })
72
73        const info = { avatar: userIcon }
74        const keys = [ "uuid", "firstName", "lastName", "mobile", "nickname", "username", "sex", "age", "ageGroup", "birthDay", "city", "address", "comment", "voteCategory" ]
75        keys.forEach(key => {
76          info[key] = result.data[key] || ""
77        })
78        sessionStorage.setItem("userInfo", JSON.stringify(info))
79        window.dispatchEvent(new Event("storage"))
80
81        // TODO: md-pub中的埋點移至此處
82        // mini_paq.push(["setUserId",uuid ? uuid : '']);
83      }
84    })
85  } else $(".login-bar .login-btn").addClass("show")
86}
87
88// 显示用户操作选项
89function showUserSelectBar() {
90  const $userIcon = $(".login-bar .user-bar .user-icon")
91  const $selectBar = $(".login-bar .user-select")
92  let isInhover = false
93
94  function showBar(isSelf) {
95    isInhover = isSelf
96    $selectBar.addClass("show")
97  }
98
99  function hideBar(isSelf) {
100    setTimeout(() => {
101      if (!isSelf && isInhover) return
102      $selectBar.removeClass("show")
103    }, 200)
104  }
105
106  $userIcon.on("mouseenter", () => showBar(false)).on("mouseleave", () => hideBar(false))
107  $selectBar.on("mouseenter", () => showBar(true)).on("mouseleave", () => hideBar(true))
108}
109
110// 跳转至用户中心
111function gotoUserInfoCenter() {
112
113  const $selectBar = $(".login-bar .user-select")
114
115  $selectBar.removeClass("show")
116  if (access_token) {
117    window.open("/ucs/center/main")
118    // window.open("/userCenter")
119  } else {
120    $(".login-bar .login-btn").addClass("show")
121    $(".login-bar .user-bar").romoveClass("show")
122  }
123}
124
125// 退出登录
126function loginOut() {
127
128  $(".login-bar .login-btn").addClass("show")
129  $(".login-bar .user-bar").removeClass("show")
130  $(".login-bar .user-select").removeClass("show")
131
132  $(".h5-login-btn").css({ display: "block" })
133  $(".user-center").css({ display: "none" })
134
135  $.removeCookie('access_token',{ path: '/', domain: '.wenweipo.com' });
136  sessionStorage.removeItem("userInfo")
137  // 当前是个人中心页面 -- 跳登录页
138  const cur_page = window.location.pathname
139  if (cur_page === "/userCenter") window.location.href = "https://www.wenweipo.com/ucs/login/index"
140}
141
142// 天气数据
143function getWeatherData() {
144  const nowWeatherUrl = "/rest/weather/now";
145  let city = "香港";
146  let temperature = "20";
147  let icon = "https://wwp-static.wenweipo.com/img/weather/100.png";
148  let windDir = "南风";
149  $.ajax({
150    url : nowWeatherUrl,
151    type: 'GET',
152    dataType:"json",
153    success:function(res){
154      if(res.code && res.code == "200"){
155        temperature = res.now.temp;
156        icon = "https://wwp-static.wenweipo.com/img/weather/" + res.now.icon + ".png";
157        windDir = res.now.windDir;
158       }
159
160      const weatherInfo = `

161        <span class="city">${city}</span>
162        <img src="${icon}" alt="weather-icon" />
163        <span class="desc">${windDir}</span>
164        <span class="temp">${temperature}°C</span>
165      `
166      $(".weather").html(weatherInfo);
167
168      /*如果icon为151隐藏天气图片（暂时没这个图片）*/
169      if(res.now.icon=="151"){
170        setTimeout(() => {
171          $(".weather img").hide();
172        }, 50);
173      }
174    },
175    error:function(){
176       const dom = setHtml(temperature,city,icon,windDir);
177       $(".global-header-top .global-header-logo-date #he-plugin-simple").html(dom);
178    }
179  })
180}
181
182function currentDate() {
183  const now = new Date()
184  const year = now.getFullYear()
185  const month = now.getMonth() + 1
186  const day = now.getDate()
187  const week = now.getDay()
188
189  const dayList = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ]
190  const weekStr = dayList[week]
191
192  const today = `<span class="today">${year}年${month}月${day}日</span><span>${weekStr}</span>`
193  $(".today").html(today)
194}
195
196// 顯示登錄窗口
197function loginDialogShowHandle() {
198  $(".dialog-wrap .close").on("click", () => {
199    $(".dialog-wrap").removeClass("active")
200    $(".dialog-wrap .inner-wrap").attr("class", "inner-wrap")
201  })
202  $(".login-btn").on("click", () => $(".dialog-wrap").addClass("active"))
203}
204
205// 導航欄欄目hover事件
206function navBarHoverHandle() {
207  let hoverTimer = null;
208  let currentDirname = null;
209  let isInMenuArea = false;
210
211  // 创建一个包含column-name和sub-column-wrap的父元素选择器
212  const $menuContainer = $('.navbar'); // 请根据实际HTML结构调整这个选择器
213  const $topBar = $('.top-bar');
214
215  $menuContainer
216    .on('mouseenter', function() {
217      clearTimeout(hoverTimer);
218      isInMenuArea = true;
219    })
220    .on('mouseleave', function() {
221      isInMenuArea = false;
222      hoverTimer = setTimeout(() => {
223        $('.sub-column-wrap').removeClass('active');
224      }, 200);
225    });
226
227  $('.column-name')
228    .on('mouseenter', function() {
229      clearTimeout(hoverTimer);
230      currentDirname = $(this).data('id');
231      $(".sub-column-wrap").removeClass('active');
232      const $targetSubMenu = $(".sub-column-wrap").filter(`[data-id="${currentDirname}"]`);
233      $targetSubMenu.addClass('active');
234
235      if ($topBar.length) {
236          const columnBarHeight = $topBar.outerHeight();
237          $targetSubMenu.css('top', columnBarHeight + 'px');
238        }
239    });
240
241  $('.sub-column-wrap')
242    .on('mouseenter', function() {
243      clearTimeout(hoverTimer);
244      $(this).addClass('active');
245    })
246    .on('mouseleave', function() {
247      hoverTimer = setTimeout(() => {
248        if (!isInMenuArea) {
249          $(this).removeClass('active');
250        }
251      }, 200);
252    });
253}
254
255function setDefaultHotKeywords() {
256  const url = "https://search2.wenweipo.com/wwp/rest/topWords"
257  $.ajax({
258    url,
259    type: 'GET',
260    dataType:"json",
261    success:function(res){
262      const [topWords] = res
263      if(topWords) {
264        topWordCache = topWords
265        $("#inputBar").val(topWords)
266        $("#hotWordsInput").val(topWords)
267        $("#H5InputBar").val(topWords)
268
269        res.forEach(function(item) {
270          const $wordItem = `<span class="word">${item}`
271          $(".hot-words .words").append($wordItem)
272        })
273
274        $(".hot-words .words").on("click", ".word", function() {
275          const keyword = $(this).text()
276          window.open(`https://search2.wenweipo.com/search?query=${keyword}`);
277        })
278      }
279    }
280  })
281}
282
283function showToolList(obj) {
284  const $linklist = $(".tool-list")
285  const isShow = $linklist.css('display')
286  if(isShow === "flex") {
287    obj.setAttribute("src", "https://wwp-static.wenweipo.com/img/wenweipo_web_revision202507/home/tools.webp")
288    $linklist.css({ display: "none" })
289  } else {
290    obj.setAttribute("src", "https://wwp-static.wenweipo.com/img/wenweipo_web_revision202507/home/tools-close.webp")
291    $linklist.css({ display: "flex" })
292
293    $(".hot-words").css({ display: "none" })
294
295    document.querySelectorAll('main, footer').forEach(el => {
296      el.style.display = 'block';
297    });
298
299    if(access_token) {
300      $(".h5-login-btn").css({ display: "none" })
301
302      const $userCenter = $(".user-center")
303      $userCenter.css({ display: "flex" })
304
305      const $userInfo = $(".infos")
306      $userInfo.html(`
307        <img class="user-icon" src="${userIcon}" alt="user-icon" />

308        <span class="nickname">${nickname}</span>`
309      )
310
311      $(".h5-login-bar .btns").css({ display: "flex" })
312    } else {
313      $(".h5-login-btn").css({ display: "block" })
314      $(".user-center").css({ display: "none" })
315    }
316  }
317}
318
319function searchHandle() {
320  $('#inputBar').on('focus', function() {
321    $(this).val("")
322
323    const $searchBar = $(this).closest('.search-bar');
324    const $hotWords = $('.hot-words');
325
326    if ($searchBar.length && $hotWords.length) {
327      const searchBarPos = $searchBar.offset();
328      const searchBarWidth = $searchBar.outerWidth();
329
330      $hotWords.css({
331        'position': 'absolute',
332        'left': searchBarPos.left + 'px',
333        'top': (searchBarPos.top + $searchBar.outerHeight() + 15) + 'px',
334        'width': searchBarWidth + 'px',
335        'display': 'block'
336      });
337    }
338  });
339
340  // 移动端搜索框聚焦处理
341  $('#H5InputBar').on('focus', function() {
342    // 隐藏tool-list
343    $('.tool-list').css({ display: 'none' });
344    // 恢复tool-bar按钮图标
345    $('.tb-btn').attr('src', 'https://wwp-static.wenweipo.com/img/wenweipo_web_revision202507/home/tools.webp');
346
347    // 显示hotWordsInput并设置hot-words样式
348    $("#hotWordsInput").val("")
349    $('.hot-words').css({
350      position: "absolute",
351      top: "52px",
352      left: 0,
353      display: "block",
354      height: "calc(100vh - 52px)"
355    });
356
357    $(".hot-words .words").css({ gap: "15px" })
358    $("main, footer").css({ display: "none" })
359
360    // 聚焦到hotWordsInput
361    $('#hotWordsInput').focus();
362  });
363
364  // 公共失焦处理
365  $('#inputBar').on('blur', function() {
366    setTimeout(() => {
367      $(this).val(topWordCache)
368      $('.hot-words').css('display', 'none');
369    }, 200);
370  });
371
372
373  $('#inputBar, #hotWordsInput').on('keypress', function(event) {
374    if (event.which === 13) {
375      event.preventDefault();
376      const inputValue = $(this).val().trim();
377
378      // mini_paq.push(["eventSearch", "search_keyword", $(this).val(), {}]);
379      window.open(`https://search2.wenweipo.com/search?query=${inputValue}`);
380    }
381  });
382
383  $('.btn-bar, .input-btn').on('click', function() {
384    const inputSelector = $(this).hasClass('btn-bar') ? '#inputBar' : '#hotWordsInput';
385    const inputValue = $(inputSelector).val().trim();
386
387    // mini_paq.push(["eventSearch", "search_keyword", $(inputSelector).val(), {}]);
388    window.open(`https://search2.wenweipo.com/search?query=${inputValue}`);
389  });
390}
391
392function closeHotwordsInH5() {
393  $(".hot-words .close").on("click", function() {
394    $(".hot-words").css({ display: "none" })
395    $("main, footer").css({ display: "block" })
396  })
397}
398
399function getNavlist() {
400  if ($('.top-bar-h5').css('display') === 'block') return;
401  $.ajax({
402    url: "/navlist",
403    type: 'GET',
404    success: function(res){
405      const objElement = document.createElement("div")
406      objElement.innerHTML = res
407      let $html = $(objElement.innerHTML)
408      $(".nav-input-bar .navbar").append($html)
409    }
410  })
411}
412
413function getRecentStory() {
414    $.ajax({
415        url: "/common/recentNews/list",
416        type: 'GET',
417        dataType:"json",
418        success:function(res){
419            if (res.code == 1) {
420                const { data: { content: list } } = res
421                
422                if (list.length == 0) {
423                    $(".hot-word").style("display", "none")
424                    return false
425                }
426                
427                list.forEach((item, index) => {
428                    const { uuid, keyword, link, name, showChannelFlag: flag } = item
429                        
430                    if (flag == 0 || flag == 2 ) {
431                        const topWordLink = link ? link : `https://www.wenweipo.com/topics?keyword=${keyword}`
432                        const selector = index == 0 ? ".recent-story-word .top-word" : ".recent-story-list .list-wrap"
433                        
434                        $(selector).append($("<a>", { class: "normal-word", "data-id": uuid }).text(name).attr('href', topWordLink))
435                    }
436                })
437                
438                $(".recent-story-list .normal-word").on("click", function() {
439                    const { id } = $(this)[0].dataset
440                    localStorage.setItem("recentWord_active_id", id)
441                    
442                    if (isTopicPage) {
443                        $(".recent-story-list .normal-word").removeClass("active")
444                        $(this).addClass("active")
445                    }
446                })
447                
448                checkRecentTopWord()
449            }
450        }
451    })
452}
453
454function checkRecentTopWord() {
455    
456    if (isTopicPage) {
457        const recentWord_active_id = localStorage.getItem("recentWord_active_id")
458        if (recentWord_active_id) {
459          $(".recent-story-list .normal-word").removeClass("active").filter(`[data-id="${recentWord_active_id}"]`).addClass("active")
460        }
461        window.addEventListener("storage", e => {
462          if (e.key == "recentWord_active_id") {
463              const _id = e.newValue
464              _id && $(".recent-story-list .normal-word").removeClass("active").filter(`[data-id="${_id}"]`).addClass("active")
465          }
466        })
467    }
468
469}
470
471$(document).ready(() => {
472  const { pathname, search } = location
473  isTopicPage = pathname == "/topics" || search.includes("column-topic")
474
475  access_token = $.cookie("access_token")
476
477  currentDate()
478  getWeatherData()
479  setDefaultHotKeywords()
480  getRecentStory()
481  setActiveColumn()
482  setUserIcon()
483  showUserSelectBar()
484  navBarHoverHandle()
485  loginDialogShowHandle()
486  searchHandle()
487  getNavlist()
488  closeHotwordsInH5()
489
490  $(window).on('scroll', function() {
491    const $hotWords = $('.hot-words')
492    // 判断hotWords当前是否显示
493    if ($hotWords.css('display') !== 'none') {
494      $hotWords.css('display', 'none')
495    }
496    $('#inputBar').blur()
497  })
498
499  $("button").on("click", function() {
500      const _target = $(this)[0]
501      const { dataset: { action } } = _target
502      
503      if (action == "userCenter") return gotoUserInfoCenter()
504      else if (action == "loginout") return loginOut()
505  })
506
507  $("img[data-action='showTools']").on("click", function() {
508      showToolList($(this)[0])
509  })
510})