From de20b194f0254879bb30907d076e579acf4c11a9 Mon Sep 17 00:00:00 2001
From: "34701892@qq.com" <34701892@qq.com>
Date: Fri, 5 Sep 2025 20:27:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=99=BB=E5=BD=95):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=8A=B6=E6=80=81=E5=88=A4=E6=96=AD=E5=8F=8A?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=A8=A1=E7=B3=8A=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

实现未登录状态下内容模糊显示功能，添加登录弹窗组件及相关回调处理。同时优化部分页面样式布局。

- 在indexNewsInfo.vue中添加登录状态判断及模糊效果
- 引入LoginPopup组件处理登录逻辑
- 优化realtimeInfo.vue页面布局和样式
---
 src/components/article/indexNewsInfo.vue | 39 ++++++++++++---
 src/pages/realtimeInfo/index.vue         | 64 ++++++------------------
 2 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/src/components/article/indexNewsInfo.vue b/src/components/article/indexNewsInfo.vue
index 2357436..952b404 100644
--- a/src/components/article/indexNewsInfo.vue
+++ b/src/components/article/indexNewsInfo.vue
@@ -1,8 +1,8 @@
 <template>
   <view class="main">
-    <view class="title">{{ props.data.title }}</view>
+    <view class="title" :class="{ 'mohu': !isLogin }">{{ props.data.title }}</view>
     <view class="author">
-      <view class="name">
+      <view class="name" :class="{ 'mohu': !isLogin }">
         <text class="text">来源:</text>
         <text class="text">{{ props.data.tag }}</text>
       </view>
@@ -11,11 +11,11 @@
         <text class="text">编辑:</text>
         <text class="text">{{ props.data.editor }}</text>
       </view>
-      <view class="time">{{ props.data.publishTime }}</view>
+      <view class="time" :class="{ 'mohu': !isLogin }">{{ props.data.publishTime }}</view>
     </view>
 
     <!-- 两个标签 start -->
-    <view class="r_r_tags">
+    <view class="r_r_tags" :class="{ 'mohu': !isLogin }">
       <view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw">
         <view class="r_tags">
           <view class="tag" style="background-color: #fff9ec; color: #ffb100"
@@ -33,7 +33,7 @@
     <!-- 两个标签 end -->
 
     <!-- 摘要 -->
-    <view class="desc" v-if="props.data.summary">
+    <view class="desc" v-if="props.data.summary" :class="{ 'mohu': !isLogin }">
       <!-- <view class="bill_icon"></view> -->
       {{ props.data.summary }}
     </view>
@@ -42,7 +42,7 @@
       <image :src="props.data.picture" mode="widthFix" />
     </view>
 
-    <view style="padding: 35rpx;">
+    <view style="padding: 35rpx;" :class="{ 'mohu': !isLogin }">
       <text class="articleDes" :class="props?.data?.needpay && 'needpay'" style="white-space: pre-wrap;"
         v-html="props.data.content">
       </text>
@@ -54,6 +54,10 @@
       v-html="props.data.content"
     >
     </view> -->
+
+
+    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
   </view>
 </template>
 
@@ -67,7 +71,10 @@ import {
   onShareTimeline,
 } from "@dcloudio/uni-app";
 import articleMock from "@/mock/article.js";
+import LoginPopup from "@/components/loginPopup/index.vue";
+import { Session } from "@/utils/storage";
 
+const isLogin = ref(Session.get('token'))
 const props = defineProps({
   data: {
     type: Object,
@@ -85,6 +92,18 @@ const tagList1 = ref([
     name: "医药生物-医疗服务",
   },
 ]);
+const LoginShow = ref(false);
+// 关闭弹框
+const handlePopupClose = () => {
+  LoginShow.value = false;
+  isLogin.value = Session.get('token');
+};
+// 登录成功回调
+const handlePopupSuccessCallback = () => {
+  isLogin.value = Session.get('token');
+  console.log("🚀 ~ handlePopupSuccessCallback ~  isLogin.value:", isLogin.value)
+};
+
 
 const tagList2 = ref([
   {
@@ -106,6 +125,10 @@ const handleClick = (value: any) => {
 
 onLoad((option) => {
   type.value = option?.type || "list";
+
+  if (!isLogin.value) {
+    LoginShow.value = true;
+  }
 });
 
 const handleSub = () => {
@@ -284,4 +307,8 @@ const handleSub = () => {
     white-space: nowrap;
   }
 }
+
+.mohu {
+  filter: blur(4px);
+}
 </style>
diff --git a/src/pages/realtimeInfo/index.vue b/src/pages/realtimeInfo/index.vue
index 264cd37..3caab47 100644
--- a/src/pages/realtimeInfo/index.vue
+++ b/src/pages/realtimeInfo/index.vue
@@ -6,11 +6,9 @@
       <img :src="bannerImg" class="banner_bk" />
       <view class="r_banner_title">
         <img :src="bannerTitle" class="banner_title" />
-        <text
-          >数据更新时间:{{
-            dayjs(new Date().getTime()).format("YYYY-MM-DD")
-          }}</text
-        >
+        <text>数据更新时间:{{
+          dayjs(new Date().getTime()).format("YYYY-MM-DD")
+        }}</text>
       </view>
     </view>
     <!-- banner end -->
@@ -25,12 +23,7 @@
 
               <view style="display: flex; margin-top: 15rpx">
                 <!-- <text class="tag_num">{{ topNum.leftNum }}</text> -->
-                <countTo
-                  :startVal="lastLeftNum"
-                  :endVal="topNum.leftNum"
-                  :duration="5000"
-                  class="tag_num"
-                ></countTo>
+                <countTo :startVal="lastLeftNum" :endVal="topNum.leftNum" :duration="5000" class="tag_num"></countTo>
 
                 <text class="tag_status">已处理</text>
               </view>
@@ -49,12 +42,7 @@
               <text class="tag_title">概念标签贴标</text>
               <view style="display: flex; margin-top: 15rpx">
                 <!-- <text class="tag_num">{{ topNum.rightNum }}</text> -->
-                <countTo
-                  :startVal="lastRightNum"
-                  :endVal="topNum.rightNum"
-                  :duration="5000"
-                  class="tag_num"
-                ></countTo>
+                <countTo :startVal="lastRightNum" :endVal="topNum.rightNum" :duration="5000" class="tag_num"></countTo>
 
                 <text class="tag_status">已处理</text>
               </view>
@@ -72,16 +60,14 @@
       <indexMenuTitle title="资讯评分分布区间"></indexMenuTitle>
       <Line style="margin-top: 30rpx" :data="lineData"></Line>
 
-      <view
-        style="
+      <view style="
           display: flex;
           flex-direction: column;
           text-align: center;
           justify-content: center;
           align-items: center;
           padding-bottom: 30rpx;
-        "
-      >
+        ">
         <InfoSummary style="width: 85%" :count="newsNum"></InfoSummary>
       </view>
     </view>
@@ -92,15 +78,13 @@
     </view>
 
     <view style="background-color: white; margin-top: 40rpx">
-      <view
-        style="
+      <view style="
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding-right: 30rpx;
           height: 100rpx;
-        "
-      >
+        ">
         <indexMenuTitle title="热门行业池 Top10"></indexMenuTitle>
         <view style="display: flex; gap: 3rpx">
           <text class="view-all" @click="onViewAll(0)">查看全部</text>
@@ -108,23 +92,17 @@
           <u-icon size="12" name="arrow-right"></u-icon>
         </view>
       </view>
-      <HotIndustryList
-        :industryList="industryList"
-        :type="0"
-        @viewAll="handleViewAll"
-      />
+      <HotIndustryList :industryList="industryList" :type="0" @viewAll="handleViewAll" />
     </view>
 
     <view style="background-color: white; margin-top: 40rpx">
-      <view
-        style="
+      <view style="
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding-right: 30rpx;
           height: 100rpx;
-        "
-      >
+        ">
         <indexMenuTitle title="风口概念池 Top10"></indexMenuTitle>
         <view style="display: flex; gap: 3rpx">
           <text class="view-all" @click="onViewAll(1)">查看全部</text>
@@ -132,23 +110,13 @@
           <u-icon size="12" name="arrow-right"></u-icon>
         </view>
       </view>
-      <HotIndustryList
-        :type="1"
-        :industryList="topConceptList"
-        @viewAll="handleViewAll"
-      />
+      <HotIndustryList :type="1" :industryList="topConceptList" @viewAll="handleViewAll" />
     </view>
 
-    <view class="logout" @click="loginOut" v-if="Session.get('token')"
-      >退出登录</view
-    >
+    <view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
 
-    <LoginPopup
-      :show="LoginShow"
-      @handlePopupClose="handlePopupClose"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback"
-      @handlePopupErrorCallback="handlePopupErrorCallback"
-    />
+    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
   </view>
 </template>