talk_appAmin/pages/search/index.vue

<template>
	<view class="">
		<!-- 搜索栏 -->
		<view class="sousuoBox1 flex alignCenter justifyBetween">
			<view class="sousuoBox flex alignCenter justifyBetween">
				<view class="souBOx flex alignCenter justifyBetween">
					<image src="../../static/images/icon/tu2-2.png" class="img3"></image>
					<input v-model="keyword" @input="toContent" @confirm="onSearch" class="shuruText"
						:placeholder="placeholderText" type="text">
				</view>
				<image @click.stop="toScanCode" src="../../static/images/icon/tu2-3.png" class="img4"></image>
			</view>
			<view class="category-dropdown flex alignCenter">
				<text class="text1 flex alignCenter" @click="onSearch">搜索</text>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history" v-if="!searchOpen">
			<view class="history-top">
				<view class="history-title">搜索历史</view>
				<image src="../../static/images/icon/tu3-4.png" class="history-icon" @click="clearHistory"></image>
			</view>
			<view class="history-center">
				<view v-for="(item, index) in historyList" :key="index" class="history-item">
					<text @click="clickHistory(index)" class="history-item-text">{{ item }}</text>
				</view>
			</view>
		</view>
		<!-- 搜索后显示 -->
		<view class="" v-if="searchOpen">
			<!-- tab -->
			<up-sticky offset-top="0">
				<view class="tabsinfo flex alignCenter justifyCenter">
					<up-tabs :list="list4" lineWidth="20" lineHeight="2" @click="tabsClick" :current="typeIndex"
						lineColor="#3477FC" :activeStyle="{
						color: '#000000',
						fontSize: '28rpx',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#999999',
						fontSize: '28rpx',
						transform: 'scale(1.05)'
					}" itemStyle="  width: 150rpx; padding-bottom:18rpx;">
					</up-tabs>
				</view>
			</up-sticky>
			<!-- 有内容 -->
			<view class="" v-if="!noHistortOpen">
				<!-- 列表 -->
				<view class="bc-color" v-if="typeIndex == 0" v-for="(postItem, postIndex) in postList" :key="postIndex">
					<PostView :postValue="postItem" :postViewIndex="2" :postViewType="0"></PostView>
					<u-line></u-line>
				</view>
			</view>
			<!-- 无内容 -->
			<view v-if="noHistortOpen">
				<view class="noContent">
					<image src="../../static/images/icon/tu4-9.png" class="img6"></image>
					<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import PostView from "@/pages/common/postview/index.vue";
	import {
		listPost,
		listPostFollow,
		getPost,
		delPost,
		addPost,
		updatePost,
		getLoginUserinfo
	} from "@/api/talk/post";

	// 响应式状态
	const keyword = ref('');
	const placeholderText = '在食堂捡到一张饭卡';
	const bgColor = 'rgba(170, 0, 0, 0)';
	const noHistortOpen = ref(false);
	const searchOpen = ref(false);
	const typeIndex = ref(0);
	const historyList = reactive(['钥匙丢了 111', '外卖丢了', 'U盘丢了', '我丢了', '丢']);
	const postList = ref([])

	const list4 = reactive([{
			name: '话题'
		},
		{
			name: '活动'
		},
		{
			name: '兼职'
		},
		{
			name: '美食'
		},
		{
			name: '用户'
		},
	]);
	const total = ref(0);
	const queryParams = reactive({
		pageNum: 1,
		pageSize: 10,
		title: null,
		type: null
	});

	// 从缓存中读取历史记录
	onMounted(() => {
		const hisList = JSON.parse(uni.getStorageSync('kw')) || [];
		if (hisList.length != 0) {
			historyList.splice(0, historyList.length, ...hisList);
		}
	});

	onLoad((options) => {
		onReachBottom(() => {
			console.log('触底了')
			if (total.value > postList.value.length) {
				queryParams.value.pageNum += 1;
				getList();
			}
		})
	})

	function clickHistory(index) {
		keyword.value = historyList[index];
	}

	function toContent() {
		noHistortOpen.value = false;
	}

	function toScanCode() {
		// 允许从相机和相册扫码
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}

	function removePage() {
		queryParams.pageNum = 1;
	}

	// tabs
	function tabsClick(index) {
		console.log(index)
		typeIndex.value = index.index
		removePage();
		getList();
	}

	// 查询话题
	function getPostList() {
		listPost(queryParams).then(response => {
			if (queryParams.pageNum > 1) {
				postList.value.push(...response.rows);
			} else {
				postList.value = response.rows;
			}
			total.value = response.total;
			if (total.value === 0) {
				noHistortOpen.value = true;
			} else {
				noHistortOpen.value = false;
			}
		});
	}

	// 查询列表
	function getList() {
		if (typeIndex.value == 0) {
			getPostList();
		}
	}

	function onSearch() {
		console.log('搜索  ' + keyword.value);
		if (keyword.value === '') {
			console.log('空的');
			return;
		}
		searchOpen.value = true;
		queryParams.title = keyword.value;
		getList();
		saveHistory();
	}

	// 保存历史记录
	function saveHistory() {
		historyList.unshift(keyword.value);
		// 把用户输入的内容保存到历史记录当中
		uni.setStorageSync('kw', JSON.stringify(historyList));
	}

	// 清空历史记录
	function clearHistory() {
		historyList.splice(0, historyList.length);
		uni.setStorageSync('kw', '[]');
	}
</script>


<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.bgc {
		width: 750rpx;
		height: 108rpx;
		background: #FAF9FA;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: -1;
	}

	.sousuoBox1 {
		margin: 16rpx 32rpx;
		width: auto;
	}

	.sousuoBox {
		width: 580rpx;
		height: 60rpx;
		border: #B3D7FF solid 2rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		background: #ffffff80;
	}

	.souBOx {
		margin-left: 32rpx;
	}

	.img3 {
		width: 36rpx;
		height: 36rpx;
	}

	.img4 {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}

	.category-dropdown {
		margin-left: 42rpx;
	}

	.text1 {
		font-weight: 400;
		width: 62rpx;
		font-size: 30rpx;
		text-align: left;
		color: #1B1B1B;
	}

	.img5 {
		width: 26rpx;
		height: 26rpx;
	}

	.shuruText {
		font-weight: 400;
		font-size: 28rpx;
		text-align: left;
		margin-left: 18rpx;
		color: #333333;
		flex-grow: 1;
		/* 让输入框占据剩余空间 */
		width: 380rpx;
	}

	.history {
		margin-top: 44rpx;
		padding: 0 32rpx;
	}

	.history-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.history-title {
		font-weight: 400;
		width: 140rpx;
		font-size: 34rpx;
		text-align: left;
		color: #1B1B1B;
	}

	.history-icon {
		width: 42rpx;
		height: 42rpx;
	}

	.history-center {}

	.history-item {
		display: inline-block;
		/* 将 history-item 设置为行内块元素 */
		margin: 10rpx 12rpx;
	}

	.history-item-text {
		font-weight: 400;
		font-size: 28rpx;
		text-align: left;
		color: #666666;
		border-radius: 30rpx;
		/* 调整圆角 */
		background: #f6f6f6;
		display: flex;
		/* 使用 Flex 布局 */
		align-items: center;
		/* 垂直居中 */
		padding: 14rpx 20rpx;
		/* 添加内边距 */
	}

	.img6 {
		width: 326rpx;
		height: 280rpx;
	}

	.noContent {
		margin-top: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.noContentText {
		font-weight: 400;
		width: 490rpx;
		height: 30rpx;
		font-size: 30rpx;
		text-align: center;
		color: #333333;
	}

	.tabsinfo {
		width: 100%;
		height: 2.125rem;
		background-color: #FFFFFF;
		display: flex;
		align-items: flex-end;
	}
</style>