From aada0e1c2c2a49f82e264cf1cf30fb16225e2d9e Mon Sep 17 00:00:00 2001
From: zzp <34701892@qq.com>
Date: Wed, 27 Aug 2025 17:30:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(rankDetail):=20=E9=87=8D=E6=9E=84=E6=8E=92?=
 =?UTF-8?q?=E8=A1=8C=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构排行详情页UI，添加顶部背景图和搜索框
- 实现搜索功能并添加搜索确认事件
- 添加下拉刷新功能
- 优化标题显示逻辑，修复切片显示问题
- 调整列表项样式，添加阅读数等统计信息
- 添加登录状态检查跳转逻辑
---
 src/components/RankListMini.vue       |   4 +-
 src/components/articleList/index.vue  |   2 +-
 src/config/index.ts                   |   4 +-
 src/pages.json                        |   4 +-
 src/pages/minihome/index.vue          |  12 +-
 src/pages/realtimeInfo/rankDetail.vue | 252 +++++++++++++++++++++-----
 src/pages/sreachReq/index.vue         |   4 +-
 7 files changed, 230 insertions(+), 52 deletions(-)

diff --git a/src/components/RankListMini.vue b/src/components/RankListMini.vue
index fea3b18..36cad52 100644
--- a/src/components/RankListMini.vue
+++ b/src/components/RankListMini.vue
@@ -38,7 +38,7 @@
           <text style="">
             <text class="news-title">{{ item.title.slice(0, 3) }}</text>
             <text :class="['news-title', isLogin ? '' : 'mohu']">{{
-              item.title.slice(3, item.title.length - 1)
+              item.title.slice(3, item.title.length)
             }}</text>
           </text>
           <text :class="['news-desc', isLogin ? '' : 'mohu']">{{
@@ -340,7 +340,7 @@ const handlePopupErrorCallback = () => {
   justify-content: space-between;
   font-size: 12px;
   color: #999;
-  margin-top: 10rpx;
+  margin-top: 30rpx;
 }
 
 .source,
diff --git a/src/components/articleList/index.vue b/src/components/articleList/index.vue
index aaa54cc..3f6a821 100644
--- a/src/components/articleList/index.vue
+++ b/src/components/articleList/index.vue
@@ -27,7 +27,7 @@
           <view v-if="!isLogin">
             <text :class="['listItemTitle']">{{ item.title.slice(0, 3) }}</text>
             <text :class="['listItemTitle', isLogin ? '' : 'mohu']">
-              {{ item.title.slice(3, item.title.length - 1) }}
+              {{ item.title.slice(3, item.title.length) }}
             </text></view
           >
           <view v-else>
diff --git a/src/config/index.ts b/src/config/index.ts
index 7277d70..754b29d 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,7 +1,7 @@
-// const baseURL = "http://192.168.31.25:8060/api";
+// const baseUrl = "http://192.168.31.25:8060/api";
+// export const baseUrl = "http://127.0.0.1:8040/apih5";
 // export const baseUrl = "http://192.168.3.38:8040/apih5";
 export const baseUrl = "https://cankao.cs.com.cn/mini";
-// export const baseUrl = "https://cankao.cs.com.cn/apih5";
 
 export const baseUrlDataV = "https://cankao.cs.com.cn/zzck_datav";
 // export const baseUrlDataV = "http://123.60.153.169:9995/zzck_datav";
diff --git a/src/pages.json b/src/pages.json
index e92d312..702c6c0 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -26,7 +26,9 @@
       "path": "pages/login/indexMini"
     },
     {
-      "path": "pages/realtimeInfo/rankDetail"
+      "path": "pages/realtimeInfo/rankDetail",
+      "navigationStyle": "custom",
+      "enablePullDownRefresh": true
     },
     {
       "path": "pages/home/index",
diff --git a/src/pages/minihome/index.vue b/src/pages/minihome/index.vue
index 116a0ae..f80c655 100644
--- a/src/pages/minihome/index.vue
+++ b/src/pages/minihome/index.vue
@@ -121,9 +121,15 @@ function tabChange(index) {
 }
 
 function goSreach() {
-  uni.navigateTo({
-    url: "/pages/sreachReq/index",
-  });
+  if (uni.getStorageSync("token")) {
+    uni.navigateTo({
+      url: "/pages/sreachReq/index",
+    });
+  } else {
+    uni.navigateTo({
+      url: "/pages/login/indexMini",
+    });
+  }
 }
 
 const isScroll = ref(false);
diff --git a/src/pages/realtimeInfo/rankDetail.vue b/src/pages/realtimeInfo/rankDetail.vue
index 16a9054..0f52de4 100644
--- a/src/pages/realtimeInfo/rankDetail.vue
+++ b/src/pages/realtimeInfo/rankDetail.vue
@@ -1,58 +1,132 @@
 <template>
   <view class="all">
     <!-- #ifdef MP-WEIXIN -->
-    <view :style="{ height: getNavHeight() + 'px' }"></view>
+    <!-- <view :style="{ height: getNavHeight() + 'px' }"></view> -->
     <!-- #endif -->
 
-    <PageHeaderView
+    <!-- <PageHeaderView
       :title="type == 0 ? '热门行业池Top10' : '风口概念池Top10'"
-    ></PageHeaderView>
+    ></PageHeaderView> -->
 
-    <!-- 类目标签 start -->
-    <view class="page_content">
-      <view class="tag_list">
-        <view
-          :class="['tag_item', clickTagIndex == index ? tagClickedClass : '']"
-          class="tag_item"
-          v-for="(item, index) in tagList"
-          :key="index"
-          @click="clickTag(index)"
-        >
-          {{ item.content }}
-        </view>
-      </view>
-    </view>
-    <!-- 类目标签 end -->
+    <image
+      class="top_bk"
+      src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"
+    ></image>
 
-    <!-- 列表 start -->
-    <view class="list">
+    <view class="content">
       <view
-        v-for="(item, index) in list"
-        :key="index"
-        class="news-item"
-        @click="goDetail(item)"
-      >
-        <view class="news-content">
-          <text style="">
-            <text class="news-title">{{ item.title.slice(0, 3) }}</text>
-            <text :class="['news-title', isLogin ? '' : 'mohu']">{{
-              item.title.slice(3, item.title.length - 1)
-            }}</text>
-          </text>
+        :style="{
+          height: getNavHeight() + 'px',
+          backgroundColor: isScroll ? '#fff' : 'transparent',
+          position: 'sticky',
+          top: 0,
+          zIndex: '999999',
+        }"
+      ></view>
 
-          <!-- <text class="news-title">{{ item.title }}</text> -->
-          <!-- <text class="news-desc">{{ item.summary }}</text> -->
-          <text :class="['news-desc', isLogin ? '' : 'mohu']">{{
-            item.summary
-          }}</text>
-          <view :class="['news-meta', isLogin ? '' : 'mohu']">
-            <text class="source">{{ item.tag }}</text>
-            <text class="time">{{ item.time }}</text>
+      <view
+        :style="{
+          position: 'sticky',
+          top: getNavHeight() + 'px',
+          backgroundColor: isScroll ? '#fff' : 'transparent',
+          zIndex: '9999',
+        }"
+      >
+        <view class="r_sreach">
+          <!-- <image
+            class="logo_text"
+            src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"
+          >
+          </image> -->
+
+          <u-icon
+            name="arrow-left"
+            color="#333"
+            size="22"
+            @click="goBack"
+          ></u-icon>
+
+          <view class="sreach" @click="goSreach">
+            <view class="sreach_icon">
+              <image
+                src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"
+              ></image>
+            </view>
+            <view class="sreach_text">
+              <text>搜索资讯</text>
+            </view>
           </view>
         </view>
       </view>
+
+      <!-- 类目标签 start -->
+      <view class="page_content">
+        <view class="tag_list">
+          <view
+            :class="['tag_item', clickTagIndex == index ? tagClickedClass : '']"
+            class="tag_item"
+            v-for="(item, index) in tagList"
+            :key="index"
+            @click="clickTag(index)"
+          >
+            {{ item.content }}
+          </view>
+        </view>
+      </view>
+      <!-- 类目标签 end -->
+
+      <!-- 列表 start -->
+      <view class="list">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="news-item"
+          @click="goDetail(item)"
+        >
+          <view class="news-content">
+            <text style="">
+              <text class="news-title">{{ item.title.slice(0, 3) }}</text>
+              <text :class="['news-title', isLogin ? '' : 'mohu']">{{
+                item.title.slice(3, item.title.length)
+              }}</text>
+            </text>
+
+            <!-- <text class="news-title">{{ item.title }}</text> -->
+            <!-- <text class="news-desc">{{ item.summary }}</text> -->
+            <text :class="['news-desc', isLogin ? '' : 'mohu']">{{
+              item.summary
+            }}</text>
+            <view :class="['news-meta', isLogin ? '' : 'mohu']">
+              <view>
+                <text class="source">{{ item.tag }}</text>
+                <text class="time">{{ item.time }}</text>
+              </view>
+
+              <view class="r_option">
+                <image
+                  class="option_icon"
+                  src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/eye_icon%402x.png"
+                ></image>
+                <text class="option_text">{{ item.readNums }}</text>
+
+                <image
+                  class="option_icon"
+                  src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/like_icon%402x.png"
+                ></image>
+                <text class="option_text">{{ item.likeNums }}</text>
+
+                <image
+                  class="option_icon"
+                  src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png"
+                ></image>
+                <text class="option_text">{{ item.shareNums }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 列表 end -->
     </view>
-    <!-- 列表 end -->
   </view>
 </template>
 
@@ -169,8 +243,19 @@ function goDetail(item) {
   }
 }
 
-const tagClickedClass = ref("");
+function goSreach() {
+  if (uni.getStorageSync("token")) {
+    uni.navigateTo({
+      url: "/pages/sreachReq/index",
+    });
+  } else {
+    uni.navigateTo({
+      url: "/pages/login/indexMini",
+    });
+  }
+}
 
+const tagClickedClass = ref("");
 const props = reactive({});
 
 onLoad(async (e) => {
@@ -202,6 +287,9 @@ onMounted(async () => {});
 <style scoped lang="scss">
 .page_content {
   padding: 0 30rpx;
+  background-color: white;
+  padding-top: 10rpx;
+  margin-top: 30rpx;
 }
 
 .tag_list {
@@ -325,4 +413,84 @@ onMounted(async () => {});
 .mohu {
   filter: blur(7rpx);
 }
+
+.r_option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+
+  .option_icon {
+    width: 24rpx;
+    height: 24rpx;
+  }
+
+  .option_text {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #192236;
+    line-height: 33rpx;
+    text-align: justify;
+    font-style: normal;
+  }
+}
+
+.top_bk {
+  width: 100%;
+  height: 300rpx;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.content {
+  position: relative;
+  z-index: 99999;
+  padding-bottom: 300rpx;
+  .r_sreach {
+    display: flex;
+    align-items: center;
+    padding: 0 30rpx;
+  }
+
+  .logo_text {
+    width: 88rpx;
+    height: 45rpx;
+  }
+
+  .sreach {
+    display: flex;
+    align-items: center;
+    padding: 0rpx 30rpx;
+    background-color: #fff;
+    border-radius: 100rpx;
+    width: 47vw;
+    height: 68rpx;
+    margin-left: 20rpx;
+  }
+
+  .sreach_icon {
+    margin-right: 10rpx;
+    display: flex;
+    align-items: center;
+
+    image {
+      width: 35rpx;
+      height: 35rpx;
+      margin-top: 5rpx;
+    }
+  }
+
+  .sreach_text {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #999999;
+    line-height: 33rpx;
+    text-align: left;
+    font-style: normal;
+  }
+}
 </style>
diff --git a/src/pages/sreachReq/index.vue b/src/pages/sreachReq/index.vue
index 39d0e9e..9e6c5d3 100644
--- a/src/pages/sreachReq/index.vue
+++ b/src/pages/sreachReq/index.vue
@@ -43,9 +43,11 @@
         <u-input
           v-model="keyWord"
           @change="handleChange"
+          confirm-type="search"
+          @confirm="getData()"
           prefixIcon="search"
           style="flex: 1"
-          placeholder="搜索快讯"
+          placeholder="搜索资讯"
           class="sreach_input"
           :border="false"
         />