yicangzongtai_app_240321/pages/government/search.vue

<template>
	<view class="">

		<navbar :config="config" backColor="#999999"></navbar>
		<view class="search-box" :style="{'height':topFixedHeight + 'rpx'}">
			<view class="search">
				<u-search border-color="transparent" bg-color="transparent" :show-action="false"
					search-icon-color="#000" placeholder-color="#999999" color="#333333"
					:placeholder="defaultKeyword ? defaultKeyword : '请输入检索关键字'" v-model="keyword"
					@search="searchData"></u-search>
				<text class="search-btn" @click.stop="searchData">搜索</text>
			</view>
		</view>
		<scroll-view class="search-content" :style="{'height':pageHeight+ 'px'}" scroll-y="true">
			<view class="" v-show="searchContent" style="min-height: 100%;">
				<template v-if="searchList.length > 0 || searchLoading">
					<view class="search-item" v-for="item in searchList" @click.stop="$openPage(item)">
						<image class="search-icon" :src="$getImgPath(item.icon)" mode="aspectFit"></image>
						<text class="search-text">{{item.thirdName}}</text>
						<text class="search-look iconfont_yige">&#xe65f;</text>
					</view>
				</template>
				<template v-else>
					<view class="empty-data">
						<EmptyDate />
					</view>
				</template>
			</view>

			<view class="" v-show="!searchContent">
				<view class="search-hint" v-if="keywordArr && keywordArr.length > 0">
					<view class="hint-title">
						<text>历史搜索</text>
						<text @click.stop="clearSearchRecord()">清除</text>
					</view>
					<view class="hint-content">
						<block v-for="item in keywordArr">
							<text v-if="item" @click.stop="defaultSearch(item)">{{ item }}</text>
						</block>
					</view>
				</view>
				<view class="search-hint" v-if="topSearch && topSearch.length > 0">
					<view class="hint-title">
						热门搜索
					</view>
					<view class="hint-content">
						<block v-for="item in topSearch">
							<text v-if="item" @click.stop="defaultSearch(item)">{{ item }}</text>
						</block>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getThirdSearch
	} from "@/api/government.js"
	import Mixin from "./Mixin.js"
	import {
		getSearchInfo
	} from "@/api/government.js"
	export default {
		mixins: [Mixin],
		data() {
			return {
				topFixedHeight: 100,
				config: {
					back: true,
					closePath: '',
					title: '搜索',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				topSearch: [],
				keyword: "",
				defaultKeyword: '',
				keywordArr: [],
				searchContent: false,
				searchList: [],
				searchLoading: false
			}
		},
		onLoad() {
			uni.getStorage({
				key: this.$keys.search_keyword,
				success: res => {
					// this.keywordArr = ['社会白社会白社会白社会白社会白社会白社会白社会白社会白社会白社会白社会白社会白社会白', ...res.data] || []
					this.keywordArr = res.data || []
				},
				fail: err => {
					this.keywordArr = []
				}
			});
			getSearchInfo().then(res => {
				const data = res.data || {}
				this.defaultKeyword = data?.defaultKeyword;
				const arr = data?.keywords.split(",")
				this.topSearch = arr;
			})
		},
		onShow() {

		},

		methods: {
			clearSearchRecord() {
				uni.removeStorage({
					key: this.$keys.search_keyword,
					success: res => {
						this.keywordArr = []
					}

				});
			},
			defaultSearch(e) {
				this.keyword = e;
				this.searchData()
			},
			searchData() {
				if (!this.keyword && !this.defaultKeyword) return
				this.keyword = this.keyword || this.defaultKeyword
				const text = this.keyword;
				this.searchLoading = true;
				this.searchList = [];
				this.searchContent = true;
				getThirdSearch({
					keyword: text,
					status:true
				}).then(res => {
					this.searchList = res.rows
				}).finally(() => {
					this.searchLoading = false;
					this.setHotKeyword(text)
				})
			},
			setHotKeyword(text) {
				try {
					this.keywordArr.forEach((el, index) => {
						if (el === text) {
							this.keywordArr.splice(index, 1)
							throw new Error()
						}
					});

				} catch (e) {
					//TODO handle the exception
				}
				if (this.keywordArr.length >= 10) {
					this.keywordArr.splice(9, this.keywordArr.length - 9)
				}
				this.keywordArr.unshift(this.keyword)
				uni.setStorage({
					key: this.$keys.search_keyword,
					data: this.keywordArr,
					success: function() {
						console.log('success');
					}
				});

			}

		},
		watch: {
			keyword: {
				handler: function(newKw, oldKw) {
					if (!newKw && this.searchContent) this.searchContent = false
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		.search {
			width: 100%;
			border: 1rpx solid #999999;
			border-radius: 42rpx;
			height: 82rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 38rpx;

			.search-btn {
				font-size: 30rpx;
				font-family: Microsoft YaHei, Microsoft YaHei-Bold;
				font-weight: 700;
				text-align: left;
				color: #5fcee5;
			}
		}
	}

	.search-content {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.search-item {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;

			.search-icon {
				width: 50rpx;
				height: 50rpx;
			}

			.search-text {
				flex: 1;
				padding: 0 20rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei, Microsoft YaHei-Regular;
				font-weight: 400;
				color: #333333;
			}

			.search-look {
				font-size: 34rpx;
				color: #c2c2c2;
			}
		}

		.empty-data {
			padding-top: 100rpx;
		}
	}



	.search-hint {
		padding-top: 40rpx;

		.hint-title {
			font-size: 34rpx;
			font-weight: bold;
			padding-bottom: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text+text {
				font-size: 28rpx;
				font-weight: 400;
				color: #b9b8b8;
			}
		}

		.hint-content {
			width: 100%;
			display: flex;
			align-items: stretch;
			flex-wrap: wrap;

			text {
				flex-shrink: 0;
				margin: 20rpx 20rpx 0 0;
				// border-radius: 5rpx;

				padding: 15rpx 30rpx;
				font-size: 24rpx;
				line-height: 1.3;
				background: #f6f8fa;
				border-radius: 20rpx;
			}
		}
	}





	// .search-page {
	// 	width: 100%;
	// 	padding: 0 20rpx;











	// }
</style>