talent_map/pc/pages/search/search.vue

<template>
	<div class="goods-search flex-col bg-white">
		<div class="nav-container flex">
		    <el-breadcrumb style="flex: 1;" separator="/">
		        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		        <el-breadcrumb-item class="line1" style="max-width: 800px;">搜索：{{ keyword}}</el-breadcrumb-item>
		    </el-breadcrumb>
		</div>
		<div v-show="showHistory" class="search-content bg-white">
			<div :scroll-y="true" style="height: 100%">
				<div class="search-words">
					<div class="title flex row-between">
						<div>历史搜索</div>
						<div class="xs muted m-r-20" style="padding: 10px 20px" @click="clearSearchFun">清空</div>
					</div>
					<div class="words flex flex-wrap">
						<div v-for="(item, index) in historyList" :key="index" class="item m-r-20 m-b-20 line-1"
							@click="onChangeKeyword(item)">{{item}}
						</div>
					</div>
				</div>
				<div class="search-words">
					<div class="title">热门搜索</div>
					<div class="words flex flex-wrap">
						<div v-for="(item, index) in config.hot_search" :key="index"
							class="item m-r-20 m-b-20 line-1" @click="onChangeKeyword(item)">{{item}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content" v-show="!showHistory">
			<!-- 搜索结果列表 -->
			<div v-if="talentsList.length > 0">
				<talents-list :list="talentsList" />
				<div class="pagination flex row-center" style="padding-bottom: 38px" v-if="count">
					<el-pagination background hide-on-single-page layout="prev, pager, next" :page-size="9"
						:total="count" prev-text="上一页" next-text="下一页" @current-change="changePage">
					</el-pagination>
				</div>
			</div>
			<null-data v-else :img="require('@/static/images/goods_null.png')" text="暂无数据~"></null-data>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import {
		trottle
	} from '@/utils/tools';

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

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

		created() {
			this.onSearch = trottle(this.onSearch, 500, this);
			this.init();
		},
		mounted() {
			this.$nuxt.$on('search', (val) => {
				this.keyword = val
				this.showHistory = false
				this.getTalents()
			})
			this.$nuxt.$on('searchFouce', (val) => {
				this.showHistory = true
			})
		},
		computed: {
			...mapState(['sysInfo', 'config']),
			actionStyle() {
				return {
					'background': '#DD4250',
					'border-radius': '100px',
					'font-size': '24px',
					'width': '100px',
					'height': '60px',
					'line-height': '60px',
					'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() {
				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() {
				this.$get('article/history-search', {}).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() {
				this.getTalents()
			},
			changePage(current) {
				this.page = current
				this.getTalents()
			},
			async getTalents() {
				const params = {
					page_size: 9,
					page_no: this.page,
					cid: this.cateTwoId,
					chain: this.chain
				}
				const {
					code,
					data,
					_meta
				} = await this.$get('article', {
					params,
				})
				if (code == 1) {
					this.talentsList = data
					this.count = _meta.totalCount
				}
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.$nuxt.$emit('keyword', this.keyword);
				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 30px 20px;
			}
		}
		.nav-container {
			padding: 24px 24px 0;
		}

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

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

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

				.words {
					.item {
						line-height: 33px;
						height: 33px;
						padding: 0 24px;
						background: #F7F8FA;
						border-radius: 8px 8px 8px 8px;
						// font-size: 24px;
						color: #666666;
						cursor: pointer;
					}
				}
			}
		}

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

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