feat(登录): 添加登录状态判断及内容模糊效果

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

- 在indexNewsInfo.vue中添加登录状态判断及模糊效果
- 引入LoginPopup组件处理登录逻辑
- 优化realtimeInfo.vue页面布局和样式

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>

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
+        <text>数据更新时间:{{
-          >数据更新时间:{{
+          dayjs(new Date().getTime()).format("YYYY-MM-DD")
-            dayjs(new Date().getTime()).format("YYYY-MM-DD")
+        }}</text>
-          }}</text
-        >
       </view>
     </view>
     <!-- banner end -->
@@ -25,12 +23,7 @@
 
               <view style="display: flex; margin-top: 15rpx">
                 <!-- <text class="tag_num">{{ topNum.leftNum }}</text> -->
-                <countTo
+                <countTo :startVal="lastLeftNum" :endVal="topNum.leftNum" :duration="5000" class="tag_num"></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
+                <countTo :startVal="lastRightNum" :endVal="topNum.rightNum" :duration="5000" class="tag_num"></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
+      <view style="
-        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
+      <view style="
-        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
+      <HotIndustryList :industryList="industryList" :type="0" @viewAll="handleViewAll" />
-        :industryList="industryList"
-        :type="0"
-        @viewAll="handleViewAll"
-      />
     </view>
 
     <view style="background-color: white; margin-top: 40rpx">
-      <view
+      <view style="
-        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
+      <HotIndustryList :type="1" :industryList="topConceptList" @viewAll="handleViewAll" />
-        :type="1"
-        :industryList="topConceptList"
-        @viewAll="handleViewAll"
-      />
     </view>
 
-    <view class="logout" @click="loginOut" v-if="Session.get('token')"
+    <view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
-      >退出登录</view
-    >
 
-    <LoginPopup
+    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
-      :show="LoginShow"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
-      @handlePopupClose="handlePopupClose"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback"
-      @handlePopupErrorCallback="handlePopupErrorCallback"
-    />
   </view>
 </template>