feat(资讯头条): 添加日期筛选功能并修改API请求参数

在资讯头条页面添加日历组件，允许用户选择日期范围进行筛选。同时修改getTopNews API请求参数，支持按日期范围查询数据。新增时间格式化工具函数用于处理日期参数。

src/api/newsInfo.ts

@@ -17,8 +17,8 @@ export const getConceptCount = (data: any) => {
 
 // 概念标签贴标
 export const getTopNews = (data: any) => {
-  return request.get("/top_news_h5_d", data);
-  // return request.get("/top_news_release_h5_all", data);
+  return request.get("/top_news_h5_period?start_date=" + data.start_date + "&end_date=" + data.end_date + "&limit_num=" + data.limit_num, data);
+  // return request.get("/top_news_h5_d", data);
 };
 // 概念标签贴标
 export const getTopNewsAll = (data: any) => {

src/pages/realtimeInfo/index.vue

@@ -64,7 +64,10 @@
     </view>
 
     <view style="background-color: white; margin-top: 40rpx">
-      <indexMenuTitle title="资讯头条 Top20"></indexMenuTitle>
+      <div style="display: flex; justify-content: space-between; align-items: center">
+        <indexMenuTitle title="资讯头条 Top20"></indexMenuTitle>
+        <u-icon name="calendar" size="26" style="margin-right: 10px; margin-top: 10px" @click="showCalendar"></u-icon>
+      </div>
       <RankList :newsList="newsList"></RankList>
     </view>
 
@@ -99,6 +102,8 @@
       @handlePopupClose="handlePopupClose"
       @handlePopupSuccessCallback="handlePopupSuccessCallback"
       @handlePopupErrorCallback="handlePopupErrorCallback" />
+
+    <u-calendar :show="calendarShow" mode="range" @confirm="calendarConfirm"> </u-calendar>
   </view>
 </template>
 
@@ -122,6 +127,7 @@ import indexMenuTitle from "@/components/indexMenuTitle.vue"; // 路径根据实
 import dayjs from "dayjs/esm/index";
 import HotIndustryList from "@/components/HotIndustryList.vue"; // 路径根据实际调整
 
+const calendarShow = ref(false);
 const newsList = ref([]);
 
 const lastLeftNum = ref(0);
@@ -149,9 +155,33 @@ async function getTopNum() {
   lastRightNum.value = topNum.value.rightNum;
 }
 
+const chooseDate = reactive({
+  startDate: null,
+  endDate: null,
+});
+const today = new Date();
+
+function calendarConfirm(dateList) {
+  if (dateList && dateList.length > 0) {
+    chooseDate.startDate = dateList[0];
+    chooseDate.endDate = dateList[dateList.length - 1];
+  }
+  getNewsList();
+  calendarShow.value = false;
+  console.log("🚀 ~ calendarConfirm ~ chooseDate:", chooseDate);
+}
+
 // 概念标签贴标
 async function getNewsList() {
-  newsList.value = await getTopNews({});
+  newsList.value = await getTopNews({
+    start_date: chooseDate.startDate
+      ? timeFormat(chooseDate.startDate)
+      : timeFormat(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0)),
+    end_date: chooseDate.endDate
+      ? timeFormat(chooseDate.endDate)
+      : timeFormat(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 0, 0, 0)),
+    limit_num: 20,
+  });
 }
 
 // 热门行业top10
@@ -208,6 +238,10 @@ const timer = setInterval(() => {
   initData();
 }, 5000);
 
+function showCalendar() {
+  calendarShow.value = true;
+}
+
 const LoginShow = ref(false);
 const isLoginStatus = ref();
 // 关闭弹框
@@ -244,6 +278,54 @@ onMounted(async () => {
     LoginShow.value = true;
   }
 });
+
+/**
+ * @description 格式化时间
+ * @param {String|Number} dateTime 需要格式化的时间戳
+ * @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
+ * @returns {string} 返回格式化后的字符串
+ */
+function timeFormat(dateTime = null, formatStr = "yyyy-mm-dd hh:MM:ss") {
+  let date;
+  // 若传入时间为假值，则取当前时间
+  if (!dateTime) {
+    date = new Date();
+  }
+  // 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
+  else if (/^\d{10}$/.test(dateTime.toString().trim())) {
+    date = new Date(dateTime * 1000);
+  }
+  // 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
+  else if (typeof dateTime === "string" && /^\d+$/.test(dateTime.trim())) {
+    date = new Date(Number(dateTime));
+  }
+  // 其他都认为符合 RFC 2822 规范
+  else {
+    // 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
+    date = new Date(typeof dateTime === "string" ? dateTime.replace(/-/g, "/") : dateTime);
+  }
+
+  const timeSource = {
+    y: date.getFullYear().toString(), // 年
+    m: (date.getMonth() + 1).toString().padStart(2, "0"), // 月
+    d: date.getDate().toString().padStart(2, "0"), // 日
+    h: date.getHours().toString().padStart(2, "0"), // 时
+    M: date.getMinutes().toString().padStart(2, "0"), // 分
+    s: date.getSeconds().toString().padStart(2, "0"), // 秒
+    // 有其他格式化字符需求可以继续添加，必须转化成字符串
+  };
+
+  for (const key in timeSource) {
+    const [ret] = new RegExp(`${key}+`).exec(formatStr) || [];
+    if (ret) {
+      // 年可能只需展示两位
+      const beginIndex = key === "y" && ret.length === 2 ? 2 : 0;
+      formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex));
+    }
+  }
+
+  return formatStr;
+}
 </script>
 
 <style scoped lang="scss">