app_ancientSayings/pages/booksSearchList/booksSearchList.vue

<template>
	<view class="booksSearchList_content">
		<view v-if="!searchFlag">
			<view class="step_search_box">
				<view class="search_box_con">
					<u-search v-model="bookKeyword" placeholder="输入你想看的小说" height="80rpx" :showAction="false"
						bgColor="#F3F4F6" @clear="clearBookKeyword" confirmType="search"></u-search>
					<view class="search_button" @tap="handelSearch">
						<text>搜索</text>
					</view>
				</view>
			</view>
			<view v-if="!searchBooksData.length">
				<view class="search_record_box">
					<view class="search_popular_record">
						<SearchRecord searchRecordTitle="热门搜索" :dataList="searchRecordList"
							@handelSearchRecord="handelSearchRecord" />
					</view>
				</view>
				<view class="search_history_box">
					<view class="search_history_record">
						<SearchRecord @handelDel="searchHistoryDel" :headerRightDelete="true" searchRecordTitle="历史搜索"
							:dataList="searchHistoryList" @handelSearchRecord="handelSearchRecord" />
					</view>
				</view>
			</view>
			<view class="search_books_body" v-else>
				<view class="search_books_list">
					<view class="search_books_list_item" v-for="m in searchBooksData" :key="m.id">
						<CommBookItemThree :bookTips="m.category_name" :bookName="m.title" :bookImage="m.cover"
							:bookIntroduction="m.intro" :bookId="m.id" :bookcase="bookcase"
							@addBookshelf="addBookshelf" />
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty :icon="search_empty" width="504rpx" text="未找到小说，正在努力产出中..." />
		</view>
	</view>
</template>

<script>
	import SearchRecord from './searchRecord.vue'
	import CommBookItemThree from '@/components/commBookItemThree/index.vue'
	import search_empty from '@/static/images/search_empty.png'
	import {
		myGetStorage,
		mySetStorage
	} from '@/utils/storage/index.js'
	import {
		baseUrlImage
	} from '@/utils/utils'
	export default {
		components: {
			SearchRecord,
			CommBookItemThree
		},
		data() {
			return {
				search_empty: search_empty,
				searchRecordList: [],
				searchFlag: false,
				bookKeyword: '',
				searchHistoryList: [],
				searchBooksData: [],
				bookcase: 0
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			});
			const parameter = {
				custom: {
					token: true
				}
			}
			uni.$u.http.post('/getSearchTags', {}, parameter).then((res) => {
				uni.hideLoading();
				if (res.status == 1) {
					const {
						module
					} = res.data;
					this.searchRecordList = module;
				}
			}).catch((err) => {
				uni.hideLoading();
				console.log(err, "========")
			})
			this.getAndSetSearchHistory();
		},
		methods: {
			searchHistoryDel() {
				mySetStorage('searchHistory', JSON.stringify([]));
				this.searchHistoryList = [];
			},
			getSearchBooks(keyword) {
				if (!keyword) {
					uni.showToast({
						title: '请先输入书名',
						icon: 'none'
					})
					return;
				}

				uni.showLoading({
					title: '搜索中...'
				});

				const data = {
					keyword,
				}

				uni.$u.http.post('/getSearch', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						const {
							module,
							bookcase
						} = res.data;
						// this.searchRecordList = module;
						this.bookcase = bookcase;
						this.searchBooksData = baseUrlImage([module]);
						this.getAndSetSearchHistory(keyword);
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, "========")
				})
			},
			handelSearch() {
				const bookKeyword = this.bookKeyword;
				this.getSearchBooks(bookKeyword);
			},
			getAndSetSearchHistory(keyword) {
				const searchHistoryList = myGetStorage('searchHistory') || '[]';
				const list = JSON.parse(searchHistoryList);
				let temp = list;
				if (keyword) {
					temp = [{
						id: Math.random(),
						title: keyword
					}, ...list]
					if (temp.length > 10) {
						temp.splice(11, temp.length - 10)
					}
					mySetStorage('searchHistory', JSON.stringify(temp))
				}
				this.searchHistoryList = temp
			},
			handelSearchRecord(event) {
				const title = event.currentTarget.dataset.title;
				this.bookKeyword = title;
			},
			addBookshelf() {
				this.bookcase = 1;
			},
			clearBookKeyword() {
				this.searchBooksData = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.booksSearchList_content {
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx;

		.step_search_box {
			width: 100%;

			.search_box_con {
				display: flex;
				align-items: center;
				background-color: #F3F4F6;
				border-radius: 40rpx;

				.search_button {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 136rpx;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #FF728F;
					border-radius: 40rpx;
					font-size: 36rpx;
					color: #fff;
				}
			}
		}

		.search_record_box {
			width: 100%;

			.search_popular_record {
				width: 100%;
				padding: 32rpx 0;
			}
		}

		.search_history_box {
			width: 100%;

			.search_history_record {
				width: 100%;
				padding: 32rpx 0;
			}
		}

		.search_books_body {
			width: 100%;

			.search_books_list {
				width: 100%;

				.search_books_list_item {
					margin-top: 32rpx;
				}
			}
		}
	}
</style>