feat(实时资讯): 新增已发布资讯列表页面及接口

- 添加已发布资讯列表页面 indexRelease.vue
- 新增获取已发布列表的接口 getReleaseList
- 修改 RankList 组件支持隐藏展开按钮
- 在 pages.json 中注册新页面路由

src/api/index.ts

@@ -62,3 +62,8 @@ export const searchNews = (data: any) => {
   return Request.post("/news/search", data);
 };
 
+
+// 已发布列表
+export const getReleaseList = (data: any) => {
+  return Request.post("/news/top_news_release_h5_d", data);
+};

src/components/RankList.vue

@@ -1,19 +1,8 @@
 <template>
   <view class="news-rank-list">
-    <u-skeleton
+    <u-skeleton rows="5" title loading style="margin-bottom: 30rpx" v-if="loading"></u-skeleton>
-      rows="5"
-      title
-      loading
-      style="margin-bottom: 30rpx"
-      v-if="loading"
-    ></u-skeleton>
     <view class="list" v-else>
-      <view
+      <view v-for="(item, index) in rankListLocal" :key="index" class="news-item" @click="goDetail(item, 0)">
-        v-for="(item, index) in rankListLocal"
-        :key="index"
-        class="news-item"
-        @click="goDetail(item, 0)"
-      >
         <view class="rank-tag">
           <view v-if="index == 0" class="rank-text-top3">
             <img src="@/assets/zixun/ranking_icon_1.png" />
@@ -27,20 +16,15 @@
           <text class="rank-text" v-else>{{ index + 1 }}</text>
         </view>
 
-        <view
+        <view class="news-content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
-          class="news-content"
-          :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }"
-        >
           <text class="news-title">{{ item.title }}</text>
           <text class="news-desc">{{ item.summary }}</text>
           <view class="news-meta">
             <view>
               <text class="source">{{ item.source }}</text>
-              <text class="time">{{
+              <text class="time">{{ dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss") }}</text>
-                dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss")
-              }}</text>
             </view>
-            <text class="score">
+            <text class="score" v-if="!needExp">
               <text v-if="index < 3">资讯评分：</text>
               {{ item.news_score }}</text
             >
@@ -49,7 +33,7 @@
       </view>
     </view>
 
-    <view @click="isExp = !isExp" class="r_exp">
+    <view @click="isExp = !isExp" class="r_exp" v-if="needExp">
       <text v-if="isExp">收起</text>
       <text v-else>展开全部</text>
       <img src="@/assets/zixun/up_icon.png" class="exp_up" v-if="isExp" />
@@ -60,8 +44,7 @@
       :show="LoginShow"
       @handlePopupClose="handlePopupClose"
       @handlePopupSuccessCallback="handlePopupSuccessCallback"
-      @handlePopupErrorCallback="handlePopupErrorCallback"
+      @handlePopupErrorCallback="handlePopupErrorCallback" />
-    />
   </view>
 </template>
 
@@ -113,6 +96,10 @@ const props = defineProps({
     required: true,
     default: () => [],
   },
+  needExp: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const clickItem = ref({});

src/pages.json

@@ -19,6 +19,9 @@
     {
       "path": "pages/mine/index"
     },
+    {
+      "path": "pages/realtimeInfo/indexRelease"
+    },
     {
       "path": "pages/sreachReq/index"
     },

src/pages/realtimeInfo/indexRelease.vue

@@ -0,0 +1,290 @@
+<template>
+  <!-- 顶部 banner 区域 -->
+  <view class="all">
+    <view style="background-color: white; padding-top: 40rpx">
+      <RankList :newsList="newsList" :needExp="false"></RankList>
+    </view>
+
+    <view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
+
+    <LoginPopup
+      :show="LoginShow"
+      @handlePopupClose="handlePopupClose"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback"
+      @handlePopupErrorCallback="handlePopupErrorCallback" />
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, reactive } from "vue";
+import Line from "@/components/charts/Line.vue";
+import bannerImg from "@/assets/zixun/banner_pic.png";
+import bannerTitle from "@/assets/zixun/banner_title.png";
+import tagicon_1_bg from "@/assets/zixun/tagicon_1_bg.png";
+import tagicon_2_bg from "@/assets/zixun/tagicon_2_bg.png";
+import tagicon_1 from "@/assets/zixun/tagicon_1.png";
+import tagicon_2 from "@/assets/zixun/tagicon_2.png";
+import LoginPopup from "@/components/loginPopup/index.vue";
+import { Session } from "@/utils/storage";
+
+import { getindustryCount, getConceptCount, getTopNews, getTopIndustry_d, getTopConcept_d, getNews_cnt_d, newsInfoScore } from "@/api/newsInfo";
+import countTo from "@/components/count-to/vue-countTo.vue";
+import RankList from "@/components/RankList.vue"; // 路径根据实际调整
+import InfoSummary from "@/components/InfoSummary.vue"; // 路径根据实际调整
+import indexMenuTitle from "@/components/indexMenuTitle.vue"; // 路径根据实际调整
+import dayjs from "dayjs/esm/index";
+import HotIndustryList from "@/components/HotIndustryList.vue"; // 路径根据实际调整
+
+const newsList = ref([]);
+
+const lastLeftNum = ref(0);
+const lastRightNum = ref(0);
+
+const industryList = ref([]);
+const topConceptList = ref([]);
+const newsNum = ref(0);
+const lineData = ref();
+const handleViewAll = () => {
+  // 在这里处理点击“查看全部”的逻辑，比如跳转新页面等
+  console.log("点击了查看全部");
+};
+
+const topNum = ref({});
+
+// 获取顶部两个统计数据
+async function getTopNum() {
+  let res1 = await getindustryCount({});
+  topNum.value.leftNum = res1.aggregations.industry_non_empty.doc_count;
+  let res2 = await getConceptCount({});
+  topNum.value.rightNum = res2.aggregations.concept_non_empty.doc_count;
+
+  lastLeftNum.value = topNum.value.leftNum;
+  lastRightNum.value = topNum.value.rightNum;
+}
+
+// 概念标签贴标
+async function getNewsList() {
+  newsList.value = await getTopNews({});
+}
+
+// 热门行业top10
+async function getTopIndustry_dFn() {
+  industryList.value = await getTopIndustry_d({});
+}
+
+// 风口概念池top10
+async function getTopConcept_dFn() {
+  topConceptList.value = await getTopConcept_d({});
+}
+
+// 今日精选
+async function getNews_cnt_dFn() {
+  let temp = await getNews_cnt_d({});
+
+  newsNum.value = temp[0].value;
+}
+
+// 获取柱状图数据
+async function getLineData() {
+  let res = await newsInfoScore({});
+  lineData.value = res;
+}
+
+function initData() {
+  // 获取柱状图数据
+  getLineData();
+  // 获取顶部两个统计数据
+  getTopNum();
+  // 概念标签贴标
+  getNewsList();
+  // 热门行业top10
+  getTopIndustry_dFn();
+  // 风口概念池top10
+  getTopConcept_dFn();
+  // 今日精选
+  getNews_cnt_dFn();
+}
+
+const type = ref();
+function onViewAll(type) {
+  type.value = type;
+  if (Session.get("token")) {
+    uni.navigateTo({
+      url: "/pages/realtimeInfo/rankDetail?type=" + type,
+    });
+  } else {
+    LoginShow.value = true;
+  }
+}
+
+const timer = setInterval(() => {
+  initData();
+}, 5000);
+
+const LoginShow = ref(false);
+const isLoginStatus = ref();
+// 关闭弹框
+const handlePopupClose = () => {
+  LoginShow.value = false;
+};
+
+// 登录成功之后的回调
+const handlePopupSuccessCallback = () => {
+  isLoginStatus.value = true;
+
+  // uni.navigateTo({
+  //   url: "/pages/realtimeInfo/rankDetail?type=" + type.value,
+  // });
+};
+
+// 登录失败之后的回调
+const handlePopupErrorCallback = () => {
+  console.log("登录失败");
+};
+
+function loginOut() {
+  Session.clear();
+  window.location.reload();
+}
+
+onUnmounted(() => {
+  clearInterval(timer);
+});
+
+onMounted(async () => {
+  initData();
+  if (!Session.get("token")) {
+    LoginShow.value = true;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.all {
+  display: flex;
+  flex-direction: column;
+  background: #f3f5f8;
+}
+
+.banner {
+  position: relative;
+}
+
+.banner_bk {
+  width: 100vw;
+}
+
+.r_banner_title {
+  position: absolute;
+  top: 160rpx;
+  left: 50rpx;
+  display: flex;
+  flex-direction: column;
+
+  .banner_title {
+    width: 364rpx;
+    height: 134rpx;
+  }
+
+  text {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+
+.tag {
+  display: flex;
+  margin-top: -150rpx;
+  position: relative;
+  z-index: 999;
+  padding: 0 25rpx;
+  gap: 20rpx;
+}
+
+.r_tag_img {
+  width: calc(50vw - 20rpx);
+  height: 175rpx;
+  position: relative;
+  box-shadow: 0 10rpx 10rpx rgba(80, 80, 80, 0.1);
+  border-radius: 20rpx;
+}
+
+.tag_bk {
+  width: 100%;
+  height: 100%;
+}
+
+.tag_content {
+  display: flex;
+  position: absolute;
+  top: 40rpx;
+  left: 30rpx;
+  width: 83%;
+  justify-content: space-between;
+
+  .tag_item_left {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tag_title {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #222222;
+    line-height: 33rpx;
+  }
+
+  .tag_num {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: bold;
+    font-size: 38rpx;
+    color: #222222;
+    line-height: 56rpx;
+  }
+
+  .tag_status {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 22rpx;
+    color: #999999;
+    line-height: 33rpx;
+    margin-top: 15rpx;
+    margin-left: 7rpx;
+  }
+
+  .tag_item_right {
+    width: 70rpx;
+    height: 84rpx;
+  }
+}
+
+.tag_icon {
+  width: 70rpx;
+  height: 84rpx;
+}
+
+.view-all {
+  font-size: 14px;
+  color: #999;
+  text-decoration: underline;
+}
+
+.logout {
+  // width: 100%;
+  height: 80rpx;
+  background-color: red;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  margin-top: 50rpx;
+  border-radius: 20rpx;
+  margin-left: 20rpx;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+}
+</style>