feat(rankDetail): 重构排行详情页并添加搜索功能

- 重构排行详情页UI，添加顶部背景图和搜索框
- 实现搜索功能并添加搜索确认事件
- 添加下拉刷新功能
- 优化标题显示逻辑，修复切片显示问题
- 调整列表项样式，添加阅读数等统计信息
- 添加登录状态检查跳转逻辑

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,

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>

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";

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",

src/pages/minihome/index.vue

@@ -121,9 +121,15 @@ function tabChange(index) {
 }
 
 function goSreach() {
+  if (uni.getStorageSync("token")) {
     uni.navigateTo({
       url: "/pages/sreachReq/index",
     });
+  } else {
+    uni.navigateTo({
+      url: "/pages/login/indexMini",
+    });
+  }
 }
 
 const isScroll = ref(false);

src/pages/realtimeInfo/rankDetail.vue

@@ -1,12 +1,63 @@
 <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> -->
+
+    <image
+      class="top_bk"
+      src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"
+    ></image>
+
+    <view class="content">
+      <view
+        :style="{
+          height: getNavHeight() + 'px',
+          backgroundColor: isScroll ? '#fff' : 'transparent',
+          position: 'sticky',
+          top: 0,
+          zIndex: '999999',
+        }"
+      ></view>
+
+      <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">
@@ -36,7 +87,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>
 
@@ -46,14 +97,37 @@
               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>
+  </view>
 </template>
 
 <script setup>
@@ -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>

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"
         />