From 6a0db7df63e8f499f401e0f3dfae41e0e1eace88 Mon Sep 17 00:00:00 2001
From: "34701892@qq.com" <34701892@qq.com>
Date: Thu, 20 Nov 2025 13:46:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=B5=84=E8=AE=AF=E9=A1=B5=E9=9D=A2):=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E8=B5=84=E8=AE=AF=E5=88=97=E8=A1=A8=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=A0=E8=BD=BD=E5=92=8C=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加分页加载逻辑，支持上拉加载更多
- 重构搜索功能，整合搜索和自定义搜索事件
- 优化资讯列表显示，使用格式化后的时间字符串
- 调整退出登录按钮样式和位置
---
 src/pages/realtimeInfo/indexEtf.vue | 147 +++++++++++++++-------------
 1 file changed, 78 insertions(+), 69 deletions(-)

diff --git a/src/pages/realtimeInfo/indexEtf.vue b/src/pages/realtimeInfo/indexEtf.vue
index 1654e24..84758cc 100644
--- a/src/pages/realtimeInfo/indexEtf.vue
+++ b/src/pages/realtimeInfo/indexEtf.vue
@@ -4,7 +4,6 @@
   <view class="all">
     <text class="top_menu_text">海外资讯</text>
     <view class="banner">
-
       <img :src="bannerImg" class="banner_bk" />
       <view class="r_banner_title">
         <img :src="bannerTitle2" class="banner_title" />
@@ -16,7 +15,7 @@
       <!-- 搜索 start -->
       <view class="r_sreach">
         <view class="sreach">
-          <u-search v-model="form.keyword" placeholder="搜索资讯" @search="getData" />
+          <u-search v-model="form.keyword" placeholder="搜索资讯" @search="onSreach" @custom="onSreach" />
           <!-- <view class="sreach_icon">
             <image :src="icon_search"></image>
           </view>
@@ -46,7 +45,7 @@
             <view class="card_right">
               <view v-for="item in item.list" :key="item.time">
                 <view class="item_time">
-                  <text>{{ item.time }}</text>
+                  <text>{{ item.timeStr }}</text>
                   <text class="item_source_title">来自 <text class="item_source">中国证券报</text></text>
                 </view>
                 <view class="item_title">
@@ -56,28 +55,28 @@
                   <text>{{ item.summary }}</text>
                 </view>
                 <view class="item_etf">
-
-
                   <view v-for="etf in item.etfs" :key="etf.code" class="item_etf_item">
                     <text>{{ etf.name }}</text>
-                    <div class="btn-play">
-                    </div>
+                    <div class="btn-play"></div>
                   </view>
                 </view>
               </view>
             </view>
           </view>
-
         </view>
       </view>
-
-
     </view>
 
-    <view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
+    <view class="r_logout">
+      <view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
+    </view>
 
-    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
+    <LoginPopup
+      :show="LoginShow"
+      @handlePopupClose="handlePopupClose"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback"
+      @handlePopupErrorCallback="handlePopupErrorCallback"
+    />
   </view>
 </template>
 
@@ -92,42 +91,44 @@ import time_icon from "@/assets/zixun/time_icon.png";
 import LoginPopup from "@/components/loginPopup/index.vue";
 import { Session } from "@/utils/storage";
 import dayjs from "dayjs/esm/index";
+import { onReachBottom } from "@dcloudio/uni-app";
+import { getEtfIndexList } from "@/api/index";
 
-import {
-  getEtfIndexList,
-} from "@/api/index";
-
-
-const listData = ref(
-  [
-    {
-      "day": "2026-10-26",
-      "list": [
-        {
-          "time": "11:30:56",
-          "title": "刚果延长禁令后，中国钴价和库存飙升刚果延长禁令后，中国钴价和库存飙升",
-          "summary": "刚果民主共和国将钴出口禁令延长至9月，导致全球约四分之三的钴供应受到影响。这一消息引…",
-          "etfs": [
-            {
-              "name": "医药 ETF",
-              "code": "string"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-)
+const listData = ref([
+  {
+    day: "2026-10-26",
+    list: [
+      {
+        time: "11:30:56",
+        title: "刚果延长禁令后，中国钴价和库存飙升刚果延长禁令后，中国钴价和库存飙升",
+        summary: "刚果民主共和国将钴出口禁令延长至9月，导致全球约四分之三的钴供应受到影响。这一消息引…",
+        etfs: [
+          {
+            name: "医药 ETF",
+            code: "string",
+          },
+        ],
+      },
+    ],
+  },
+]);
 
 const form = ref({
-  keyword: ""
-})
+  page: 1,
+  keyword: null,
+});
 async function getData() {
   let { code, data } = await getEtfIndexList({
-    ...form.value
-  })
+    ...form.value,
+    size: 20,
+  });
   if (code == 200) {
-    listData.value = data
+    if (form.value.page == 1) {
+      listData.value = [];
+      listData.value = data.list;
+    } else {
+      listData.value = [...listData.value, ...data.list];
+    }
   }
 }
 
@@ -148,6 +149,7 @@ const handlePopupErrorCallback = () => {
   console.log("登录失败");
 };
 import { doLogout } from "@/api";
+import { onPullDownRefresh } from "@dcloudio/uni-app";
 function loginOut() {
   doLogout({
     financialAccount: Session.get("userPhone"),
@@ -156,11 +158,15 @@ function loginOut() {
   window.location.reload();
 }
 
-function goSreach() {
+onReachBottom(() => {
+  form.value.page++;
+  getData();
+});
+
+function onSreach() {
   if (Session.get("token")) {
-    uni.navigateTo({
-      url: "/pages/sreachReq/index",
-    });
+    form.value.page = 1;
+    getData();
   } else {
     LoginShow.value = true;
   }
@@ -170,7 +176,7 @@ onMounted(async () => {
   if (!Session.get("token")) {
     LoginShow.value = true;
   }
-  getData()
+  getData();
 });
 </script>
 
@@ -190,12 +196,11 @@ onMounted(async () => {
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
     font-size: 34rpx;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 36rpx;
     text-align: center;
     font-style: normal;
   }
-
 }
 
 .banner {
@@ -221,14 +226,23 @@ onMounted(async () => {
   text {
     font-family: AlibabaPuHuiTiM;
     font-size: 32rpx;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 44rpx;
     text-align: left;
     font-style: normal;
   }
 }
 
-
+.r_logout {
+  position: fixed;
+  bottom: 0rpx;
+  right: 0rpx;
+  z-index: 9999;
+  background-color: white;
+  width: 100vw;
+  height: auto;
+  box-shadow: 0 -10rpx 20rpx rgba(73, 73, 73, 0.1);
+}
 
 .logout {
   // width: 100%;
@@ -239,14 +253,13 @@ onMounted(async () => {
   justify-content: center;
   align-items: center;
   color: white;
-  margin-top: 50rpx;
+  margin-top: 20rpx;
   border-radius: 20rpx;
   margin-left: 20rpx;
   margin-right: 20rpx;
   margin-bottom: 20rpx;
 }
 
-
 .logo_text {
   width: 88rpx;
   height: 40rpx;
@@ -261,12 +274,12 @@ onMounted(async () => {
   position: relative;
   z-index: 9999;
 
-  background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%);
+  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
   border-radius: 24rpx 24rpx 0rpx 0rpx;
   margin-top: -70px;
   padding: 10rpx 30rpx;
 
-  background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%);
+  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
   // min-height: 80vh;
 
   .r_sreach {
@@ -285,7 +298,7 @@ onMounted(async () => {
     border-radius: 100rpx;
     width: 100%;
     height: 100%;
-    background: #F3F5F8;
+    background: #f3f5f8;
     border-radius: 36rpx;
     // box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
   }
@@ -313,8 +326,6 @@ onMounted(async () => {
   }
 }
 
-
-
 .item_day {
   font-family: PingFangSC, PingFang SC;
   font-weight: bold;
@@ -324,7 +335,6 @@ onMounted(async () => {
   font-style: normal;
   margin-top: -10rpx;
   margin-left: 10rpx;
-
 }
 
 .item_top {
@@ -341,25 +351,24 @@ onMounted(async () => {
   .item_point {
     width: 12rpx;
     height: 12rpx;
-    background: #EB5D46;
+    background: #eb5d46;
     border-radius: 100rpx;
   }
 
   .item_line {
     width: 1rpx;
     height: 35rpx;
-    border-left: 2px dashed #D9D7D7;
+    border-left: 2px dashed #d9d7d7;
   }
 }
 
 .list_card {
   display: flex;
-  height: 334rpx;
-  background: #FFFFFF;
+  // height: 334rpx;
+  background: #ffffff;
   border-radius: 24rpx;
   padding: 20rpx 30rpx;
 
-
   .card_left {
     display: flex;
     flex-direction: column;
@@ -373,7 +382,7 @@ onMounted(async () => {
     .left_line {
       width: 1rpx;
       height: 100%;
-      border-left: 2px dashed #D9D7D7;
+      border-left: 2px dashed #d9d7d7;
       margin-top: 10rpx;
     }
   }
@@ -446,7 +455,7 @@ onMounted(async () => {
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       font-size: 24rpx;
-      color: #B3B3B3;
+      color: #b3b3b3;
       line-height: 33rpx;
       text-align: left;
       font-style: normal;
@@ -456,7 +465,7 @@ onMounted(async () => {
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       font-size: 24rpx;
-      color: #5978B2;
+      color: #5978b2;
       line-height: 33rpx;
       text-align: left;
       font-style: normal;
@@ -472,7 +481,7 @@ onMounted(async () => {
       .item_etf_item {
         // width: 168rpx;
         height: 48rpx;
-        background: #EDF1F5;
+        background: #edf1f5;
         border-radius: 125rpx;
         padding: 5rpx 25rpx;
         display: flex;