fgm
/
cankao-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

重构搜索页面样式，调整搜索框宽度和样式
添加搜索按钮并实现搜索确认功能
修改搜索结果为空时的显示样式
优化搜索结果跳转逻辑，增加登录判断
移除无用代码和注释
This commit is contained in:
zzp 2025-09-12 09:57:38 +08:00
parent 643f49a72f
commit 7d93c48a1e
1 changed files with 118 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/pages/sreachReq/index.vue
View File

@ -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
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">
<view style="width: 75vw; 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
:data="screenList"
@onClick="handleSwiperJump"
v-if="screenList.length !== 0"
/>
<List :data="screenList" @onClick="handleSwiperJump" v-if="screenList.length !== 0" />
<!-- 列表 end -->
<!-- 加载更多的按钮 -->
<view
class="onLoad-btn"
@click="onload"
v-if="finish === false && inputValue"
>加载更多</view
>
<!-- <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="搜索结果为空"
mode="search"
style="margin-top: 20vh"
></u-empty>
text="无搜索结果"
width="157"
height="50"
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
:show="LoginShow"
@handlePopupClose="handlePopupClose"
@handlePopupSuccessCallback="handlePopupSuccessCallback"
/>
<LoginPopup :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) {
// 需要先弹出订阅的弹框
handleShowPay(item.type);
if (uni.getStorageSync("token")) {
uni.navigateTo({
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(
new RegExp(inputValue.value, "gi"),
`<text style="color: #E7303F">$&</text>`
);
item.MarkInRedTitle = item.title.replace(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(
new RegExp(inputValue.value, "gi"),
`<text style="color: #E7303F">$&</text>`
);
extractText(item.contentText, inputValue.value).replace(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>