yizhizan-h5/pages/msg/search.vue

<template>
	<view class="search-page">
		<!-- 顶部导航栏 -->
		<view class="nav-header" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-leftward" color="rgba(51, 51, 51, 1)" size="42"></u-icon>
			</view>
			<view class="nav-center">
				<text class="nav-title">消息搜索</text>
			</view>
			<view class="nav-right"></view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<u-icon name="search" color="rgba(153, 153, 153, 1)" size="32" style="margin-right: 20rpx;"></u-icon>
				<input 
					v-model="searchKeyword" 
					class="search-input" 
					placeholder="您好" 
					placeholder-style="color: #999999; font-size: 16px;"
					@input="onSearchInput"
					@confirm="onSearchConfirm"
				/>
			</view>
			<view class="cancel-btn" @click="goBack">
				<text class="cancel-text">取消</text>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading && !searchKeyword">
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 搜索结果 -->
		<view class="search-results" v-if="searchResults.length > 0">
			<view class="margin-top-sm content">
				<view class="radius padding-lr-sm bg" style="margin-top: 4rpx;" @click="goToChat(item)"
					v-for="(item,index) in searchResults" :key='index'>
					<view class="flex padding-tb">
						<view class="avatar-container">
							<u-image shape="circle" width='80rpx' height="80rpx" :src="item.avatar"></u-image>
							<view class="online-dot"></view>
						</view>
						<view class="flex-sub margin-left-sm">
							<view class="flex justify-between align-center">
								<view class="text-white flex align-center userNameleng">
									<view class="text-white" style="font-size: 28rpx;">
										{{item.userName}}
									</view>
									<text class="text-grey"
										style="font-size: 22rpx;margin-left: 10rpx;">{{item.stationName}}
									</text>
								</view>
								<view class="text-grey">{{item.messageTime ? getMonthOrDay(item.messageTime) : ''}}</view>
							</view>
							<view class="flex justify-between" style="margin-top: 10rpx;">
								<view class="text-grey" v-if="item.messageType == 1">{{item.content}}</view>
								<view class="text-grey" v-else-if="item.messageType == 18">位置</view>
								<view class="text-grey" v-else-if="item.messageType == 9">简历请求</view>
								<view class="text-grey" v-else-if="item.messageType == 6">微信请求</view>
								<view class="text-grey" v-else-if="item.messageType == 5">手机号请求</view>
								<view class="text-grey" v-else-if="item.messageType == 2">[图片]</view>
								<view class="text-grey" v-else-if="item.messageType == 4">[表情]</view>
								<view class="text-grey" v-else-if="item.messageType == 20">[视频通话]</view>
								<view class="text-grey" v-else-if="item.messageType == 21">[语音通话]</view>
								<view v-if="item.contentCount"
									style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
									{{item.contentCount}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 无搜索结果 -->
		<view class="no-results" v-if="searchKeyword && searchResults.length === 0 && !loading">
			<text class="no-results-text">暂无搜索结果</text>
		</view>
		
		<!-- 默认状态 -->
		<view class="default-state" v-if="!searchKeyword && !loading">
			<text class="default-text">请输入关键词搜索消息</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			searchKeyword: '',
			searchResults: [],
			allChatList: [], // 存储所有聊天记录
			page: 1,
			limit: 100,
			loading: false,
			hasMore: true
		}
	},
	onLoad() {
		// 获取状态栏高度
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		// 页面加载时获取聊天记录
		this.getChatList()
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.page = 1
		this.hasMore = true
		this.getChatList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		onSearchInput(e) {
			this.searchKeyword = e.detail.value
			this.performSearch()
		},
		onSearchConfirm() {
			this.performSearch()
		},
		// 获取聊天记录列表
		getChatList() {
			if (this.loading) return
			this.loading = true
			
			this.$Request.get("/app/chat/selectChatConversationPage", {
				page: this.page,
				limit: this.limit
			}).then(res => {
				this.loading = false
				if (res.code == 0) {
					if (this.page === 1) {
						this.allChatList = res.data.list || []
					} else {
						this.allChatList = this.allChatList.concat(res.data.list || [])
					}
					
					// 检查是否还有更多数据
					if (res.data.list && res.data.list.length < this.limit) {
						this.hasMore = false
					}
					
					// 如果有搜索关键词，执行搜索
					if (this.searchKeyword.trim()) {
						this.performSearch()
					}
				}
			}).catch(err => {
				this.loading = false
				console.error('获取聊天记录失败:', err)
			})
		},
		// 执行搜索
		performSearch() {
			if (!this.searchKeyword.trim()) {
				this.searchResults = []
				return
			}
			
			console.log('搜索关键词:', this.searchKeyword)
			
			// 从所有聊天记录中搜索，直接使用原始数据结构
			this.searchResults = this.allChatList.filter(item => {
				const keyword = this.searchKeyword.toLowerCase()
				return (
					(item.userName && item.userName.toLowerCase().includes(keyword)) ||
					(item.content && item.content.toLowerCase().includes(keyword)) ||
					(item.stationName && item.stationName.toLowerCase().includes(keyword))
				)
			})
		},
		// 把时间转换为月日（与首页保持一致）
		getMonthOrDay(time) {
			let date = new Date(time) // 获取时间
			let month = date.getMonth() + 1 // 获取月
			let strDate = date.getDate() // 获取日
			return month + '月' + strDate + '日'
		},
		goToChat(item) {
			// 跳转到聊天页面，使用与首页相同的跳转方式
			uni.navigateTo({
				url: `/pages/msg/im?chatConversationId=${item.chatConversationId}&byUserId=${item.focusedUserId}&postPushId=${item.postPushId}&resumesId=${item.resumesId}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.search-page {
	min-height: 100vh;
    // padding: 80rpx 0 0 0;
}

.nav-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 20rpx;
	background-color: #ffffff;
	
	.nav-left, .nav-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav-center {
		flex: 1;
		text-align: center;
	}
	
	.nav-title {
        color: rgba(51, 51, 51, 1);
        font-family: DM Sans;
        font-size: 20px;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: undefined;
        text-align: center;
	}
}

.search-container {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background-color:rgba(241, 241, 241, 1);
		border-radius: 38rpx;
		padding: 15rpx 30rpx;
		margin-right: 20rpx;
		
		.search-input {
            color: rgba(153, 153, 153, 1);
            font-family: DM Sans;
            font-size: 12px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: undefined;
            text-align: left;
		}
	}
	
	.cancel-btn {
		padding: 10rpx 20rpx;
		
		.cancel-text {
            color: rgba(153, 153, 153, 1);
            font-family: DM Sans;
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: undefined;
            text-align: center;
		}
	}
}

.search-results {
	padding: 20rpx 0;
	
	.result-item {
		display: flex;
		align-items: flex-start;
		padding: 30rpx;
		background-color: #ffffff;
		margin-bottom: 2rpx;
		
		&:active {
			background-color: #f5f5f5;
		}
		
		.avatar-container {
			position: relative;
			margin-right: 30rpx;
			
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			
			.online-dot {
				position: absolute;
				bottom: 5rpx;
				right: 5rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #00ff00;
				border-radius: 50%;
				border: 2rpx solid #ffffff;
			}
		}
		
		.result-content {
			flex: 1;
			
			.result-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				
				.user-name {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(29, 33, 41, 1);
				}
				
				.message-date {
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			
			.result-info {
				margin-bottom: 10rpx;
				
				.company-info {
					font-size: 28rpx;
					color: rgba(102, 102, 102, 1);
				}
			}
			
			.message-preview {
				.preview-text {
					font-size: 28rpx;
					color: rgba(153, 153, 153, 1);
					line-height: 1.4;
				}
			}
		}
	}
}

// 引入首页的样式
.margin-top-sm {
	margin-top: 0 !important;
}

.content {
	padding: 0 20rpx;
}

.radius {
	border-radius: 15rpx;
}

.padding-lr-sm {
	padding-left: 20rpx;
	padding-right: 20rpx;
}

.bg {
	background-color: #ffffff;
}

.flex {
	display: flex;
}

.padding-tb {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.flex-sub {
	flex: 1;
}

.margin-left-sm {
	margin-left: 20rpx;
}

.justify-between {
	justify-content: space-between;
}

.align-center {
	align-items: center;
}

.text-white {
	color: #333333;
}

.text-grey {
	color: #999999;
}

.userNameleng {
	max-width: 400rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.avatar-container {
	position: relative;
}

.online-dot {
	position: absolute;
	bottom: 5rpx;
	right: 5rpx;
	width: 20rpx;
	height: 20rpx;
	background-color: #00ff00;
	border-radius: 50%;
	border: 2rpx solid #ffffff;
}

.loading-state, .no-results, .default-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	
	.loading-text, .no-results-text, .default-text {
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
	}
}
</style>