talent_map/uniapp/pages/search/search.vue

<template>
	<view class="goods-search flex-col">
		<view class="header-wrap">
			<view class="search">
				<u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch" @custom="onSearch"
					bg-color="#F4F4F4" :height="60" :action-style="actionStyle"></u-search>
			</view>
		</view>
		<view v-show="showHistory" class="search-content bg-white">
			<scroll-view :scroll-y="true" style="height: 100%">
				<view class="search-words">
					<view class="title flex row-between">
						<view>历史搜索</view>
						<view class="xs muted m-r-20" style="padding: 10rpx 20rpx" @tap="clearSearchFun">清空</view>
					</view>
					<view class="words flex flex-wrap">
						<view v-for="(item, index) in historyList" :key="index" class="item m-r-20 m-b-20 line-1"
							@tap="onChangeKeyword(item)">{{item}}
						</view>
					</view>
				</view>
				<view class="search-words">
					<view class="title">热门搜索</view>
					<view class="words flex flex-wrap">
						<view v-for="(item, index) in appConfig.hot_search" :key="index"
							class="item m-r-20 m-b-20 line-1" @tap="onChangeKeyword(item)">{{item}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content">
			<!-- 搜索结果列表 -->
			<search-list :keyword="keyword"></search-list>
		</view>
	</view>
</template>

<script>
	import {
		getHistorySearch,
		clearSearch
	} from '@/api/app';
	import {
		mapGetters
	} from 'vuex';
	
	import {
		trottle
	} from '@/utils/tools';

	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				showHistory: false,
				historyList: []
			};
		},

		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) {
					this.showHistory = true
				}
			},
			showHistory(value) {
				if (value) {
					this.getSearchpageFun();
				}
			},
		},

		onLoad(options) {
			this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
		},

		computed: {
			...mapGetters(['sysInfo', 'appConfig']),
			actionStyle() {
				return {
					'background': '#DD4250',
					'border-radius': '100rpx',
					'font-size': '24rpx',
					'width': '100rpx',
					'height': '60rpx',
					'line-height': '60rpx',
					'color': '#ffffff',
					'flex': 'none'
				}
			}
		},
		methods: {
			downCallback() {
				this.onRefresh()
			},
			onChange(e) {
				this.keyword = e.value
			},
			clearSearchFun() {
				clearSearch().then(res => {
					if (res.code == 1) {
						this.getSearchpageFun();
					}
				});
			},
			init(option) {
				const {
					id,
					name,
					type
				} = this.$Route.query
				this.type = type
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.$nextTick(() => {
						this.onRefresh()
					})
				} else {
					uni.setNavigationBarTitle({
						title: '人才搜索'
					});
					this.showHistory = true

				}
			},
			getSearchpageFun() {
				getHistorySearch().then(res => {
					if (res.code == 1) {
						this.historyList = res.data
					}
				});
			},

			onClear() {
				if (this.id) {
					this.onRefresh();
				}
			},
			onSearch() {
				this.showHistory = false
				this.$nextTick(() => {
					this.onRefresh()
				})
			},
			onRefresh() {
				//通风报信
				uni.$emit("refreshTalentsSearchList", {
				    keyword: this.keyword
				})
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.goods-search {
		height: 100%;
		position: relative;

		.header-wrap {
			position: relative;
			z-index: 999;

			.search {
				background: #fff;
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
				position: relative;
				z-index: 1;
				padding: 0 30rpx 20rpx;
			}
		}

		.search-content {
			position: absolute;
			width: 100%;
			height: 100%;
			padding-top: 100rpx;
			z-index: 100;

			.search-words {
				padding-left: 24rpx;
				padding-bottom: 20rpx;

				.title {
					padding: 26rpx 0;
					font-size: 32rpx;
					font-weight: 500;
				}

				.words {
					.item {
						line-height: 66rpx;
						height: 66rpx;
						padding: 0 24rpx;
						background: #F7F8FA;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}

		.content {
			flex: 1;
			min-height: 0;

			.goods-list {
				overflow: hidden;
			}
		}
	}
</style>