refactor(搜索页面): 优化搜索页面布局和交互逻辑

重构搜索页面样式，调整搜索框宽度和样式
添加搜索按钮并实现搜索确认功能
修改搜索结果为空时的显示样式
优化搜索结果跳转逻辑，增加登录判断
移除无用代码和注释

src/pages/sreachReq/index.vue

@@ -1,64 +1,66 @@
 <template>
   <view class="sreachcss">
+    <!-- 导航栏 start -->
+    <!-- <view
+      class="custom-bav-bar"
+      :style="{
+        position: 'sticky',
+        top: getNavHeight() + 'px',
+        left: 0,
+        background: '#fff',
+        zIndex: '9999',
+      }">
+      <view class="left">
+        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon" @click="handleBack" />
+      </view>
+      <view class="center">
+        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/detail_logo.png" class="logo_icon" />
+      </view>
+    </view> -->
+
     <!-- 搜索 start -->
     <view class="sreach">
-      <view
+      <view style="width: 75vw; margin-left: 50rpx">
-        style="height: 100%; display: flex; align-items: center"
-        @click="goBack"
-      >
-        <u-icon name="arrow-left" color="#333" size="20" bold></u-icon>
-      </view>
-
-      <view style="width: 60vw; margin-left: 50rpx">
         <u-input
           v-model="keyWord"
           @change="handleChange"
+          confirm-type="search"
+          @confirm="getData()"
           prefixIcon="search"
           style="flex: 1"
-          placeholder="搜索快讯"
+          placeholder="搜索资讯"
           class="sreach_input"
-          :border="false"
+          :border="false" />
-        />
       </view>
+      <text class="serach_btn" @click="getData()">搜索</text>
     </view>
     <!-- 搜索 end -->
 
-    <List
+    <List :data="screenList" @onClick="handleSwiperJump" v-if="screenList.length !== 0" />
-      :data="screenList"
-      @onClick="handleSwiperJump"
-      v-if="screenList.length !== 0"
-    />
     <!-- 列表 end -->
     <!-- 加载更多的按钮 -->
-    <view
+    <!-- <view class="onLoad-btn" @click="onload" v-if="finish === false && inputValue">加载更多</view> -->
-      class="onLoad-btn"
-      @click="onload"
-      v-if="finish === false && inputValue"
-      >加载更多</view
-    >
 
+    <view style="margin-top: 20vh">
       <u-empty
         v-if="screenList.length === 0"
-      text="搜索结果为空"
+        text="无搜索结果"
-      mode="search"
+        width="157"
-      style="margin-top: 20vh"
+        height="50"
-    ></u-empty>
+        icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/nosearch_icon%E5%A4%87%E4%BB%BD%402x.png"></u-empty>
+    </view>
 
-    <view v-if="finish && screenList.length > 0" class="noMore">
+    <!-- <view v-if="finish && screenList.length > 0" class="noMore">
       <view class="line"></view>
       <view class="text">暂无更多结果</view>
       <view class="line"></view>
-    </view>
+    </view> -->
 
     <!-- 订阅 支付 -->
     <Pay :show="payShow" @onClick="handleClose" @handleSub="handleSub" />
 
     <!-- 登录弹框 -->
-    <LoginPopup
+    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose" @handlePopupSuccessCallback="handlePopupSuccessCallback" />
-      :show="LoginShow"
-      @handlePopupClose="handlePopupClose"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback"
-    />
   </view>
 </template>
 
@@ -82,6 +84,13 @@ function goBack() {
   uni.navigateBack();
 }
 
+// 导航栏路由返回
+const handleBack = () => {
+  uni.navigateBack({
+    delta: 1,
+  });
+};
+
 // login 弹框是否显示
 const LoginShow = ref(false);
 
@@ -99,6 +108,7 @@ const handleSub = async () => {
       if (item.type === itemType) {
         item.needpay = false;
       }
+
       return item;
     });
     articleList.value = articleResult;
@@ -140,14 +150,23 @@ const handleShowPay = (type) => {
 // 点击轮播图进入详情
 const handleSwiperJump = (item: any) => {
   console.log("item ===>", item);
-  if (item.needpay) {
+  if (uni.getStorageSync("token")) {
-    // 需要先弹出订阅的弹框
+    uni.navigateTo({
-    handleShowPay(item.type);
+      url: `/pages/detail/indexNewsInfo?id=${item.id}&type=${item.type}`,
+    });
   } else {
     uni.navigateTo({
-      url: `/pages/detail/index?id=${item.id}&type=${item.type}`,
+      url: "/pages/login/indexMini",
     });
   }
+  // if (item.needpay) {
+  //   // 需要先弹出订阅的弹框
+  //   handleShowPay(item.type);
+  // } else {
+  //   uni.navigateTo({
+  //     url: `/pages/detail/indexNewsInfo?id=${item.id}&type=${item.type}`,
+  //   });
+  // }
 };
 
 const handleChange = (val: string) => {
@@ -188,16 +207,14 @@ const getData = async () => {
       screenResult = res.data.filter((item) => {
         item.newType = "search";
         item.time = formatTimestamp(item.time);
-        item.MarkInRedTitle = item.title.replace(
+        item.MarkInRedTitle = item.title.replace(new RegExp(inputValue.value, "gi"), `<text style="color: #E7303F">$&</text>`);
-          new RegExp(inputValue.value, "gi"),
+
-          `<text style="color: #E7303F">$&</text>`
+        item.title = item.title.replace(keyWord.value, '<span style="color: red;">' + keyWord.value + "</span>");
-        );
+        console.log("🚀 ~ getData ~    item.title :", item.title);
+
         item.MarkInRedContent =
           item.contentText &&
-          extractText(item.contentText, inputValue.value).replace(
+          extractText(item.contentText, inputValue.value).replace(new RegExp(inputValue.value, "gi"), `<text style="color: #E7303F">$&</text>`);
-            new RegExp(inputValue.value, "gi"),
-            `<text style="color: #E7303F">$&</text>`
-          );
         return item;
       });
       if (screenList.value.length > 0) {
@@ -223,7 +240,7 @@ onShow(() => {
 .sreachcss {
   min-height: 100vh;
   background-color: #ffffff;
-  padding: 0 30rpx;
+  // padding: 0 30rpx;
 
   .sreach {
     display: flex;
@@ -244,6 +261,11 @@ onShow(() => {
     height: 70%;
     border-radius: 20rpx;
     padding: 0 20rpx;
+    border-radius: 100rpx;
+  }
+
+  :deep(.u-input) {
+    background-color: rgba(118, 118, 128, 0.12);
   }
 
   .tabsListContainer {
@@ -260,11 +282,13 @@ onShow(() => {
     align-items: center;
     box-sizing: border-box;
     padding: 21rpx 0;
+
     .line {
       width: 69rpx;
       height: 3rpx;
       background-color: #b9b9b9;
     }
+
     .text {
       padding: 0 10rpx;
     }
@@ -282,4 +306,50 @@ onShow(() => {
     color: #828b92;
   }
 }
+
+.custom-bav-bar {
+  width: 100%;
+  height: 88rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .back_icon {
+    width: 40rpx;
+    height: 40rpx;
+  }
+
+  .logo_icon {
+    width: 168rpx;
+    height: 40rpx;
+    margin-right: 6rpx;
+  }
+
+  .left {
+    position: absolute;
+    top: 24rpx;
+    left: 40rpx;
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // font-size: 28rpx;
+    font-size: var(--h2-font-size);
+    color: #333;
+  }
+}
+
+.serach_btn {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #d13e3c;
+  line-height: 45rpx;
+  text-align: right;
+  font-style: normal;
+}
 </style>