jp-zeroWorkerStation/pages/packages/search/search.vue

<template>
	<view>
		<u-navbar back-text="搜索" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>

		<!-- 搜索框 -->
		<view class="search">
			<view class="search-box">
				<view class="option">
					<nxsearch :selectList="selectList" button="inside"  @search="doSearch" @confirm="doSearch" v-model="searchQuery.keyword" placeholder="输入关键字找工作" />
         

				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history">
			<view class="top">
				<view class="title">
					搜索历史
				</view>
				<view class="clear" @click="clear()" >
					清空历史
				</view>
			</view>
			<view class="history">
				<view class="tag" v-for="(mod,index) in searchHistory"  :key="index" v-text="mod" @click="searchQuery.keyword=mod,submit()">
					打杂
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	import nxsearch from "@/components/nx-search.vue"

	export default {
		components: {
			nxsearch
		},

		data() {
			return {
				step:true,//步骤 ，true第一步查询，false第二步显示结果
				
				
				searchQuery: {
					keyword: '',
					selectIndex: 0
				},
				selectList: [
					{
						id: 1,
						name: '找零工'
					},
					{
						id: 0,
						name: '找工作'
					}
				],
				recordsTotal:0,
				listForm:{
						typeId:"",
						title:"",
				        pageIndex: 1,
				        pageSize: 4,
				        totalPage: 1,
				       
				    },
				list: [
				 ],
				searchHistory:[],

			}
		},
		onLoad(op){
			if(op.type){
				this.searchQuery.selectIndex=op.type
			}
			
			var sz=this.carhelp.get("setSearchHistory");
			if(sz){
				this.searchHistory=sz
			}else{
				this.searchHistory= []
			}
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			ckInfo(id){
				var url="/pages/news/articleDetails?id="+id;
				uni.navigateTo({
					url:url
				})
			},
			clear(){
			    this.setSearchHistory([]);
			    mui.toast("搜索内容已清空");
			},
			setHistory(){
			    //搜索记录保存
				var key =this.searchQuery.keyword;
			    var sz=this.searchHistory;
			    if(!sz){
			        sz=[];
			    }
			    var temp =[];
			    //去重 ，后插入的，排队到最前面
			    if(sz.length){
			        for(var i in sz){
			            if(i==0){
			                temp.push(key);
			            }
			            if(sz[i]==key){
			                continue;
			            }
			            temp.push(sz[i]);
			
			            if(temp.length==10){
			                break
			            }
			
			        }
			    }else{
			        temp.push(key);
			    }
				
			    this.setSearchHistory(temp);
			},
			setSearchHistory(obj){
				this.searchHistory=obj
					this.carhelp.set("setSearchHistory",obj)
			},
			blur(){
			   
			},
			focus(){
				this.step=true;
			},
			 submit(){
				 if(!this.searchQuery.keyword){
					return 
				 }
			    this.setHistory()
				this.step=false;
				this.listForm.pageIndex=1
				// var ref =this.$refs.searchinput.getRef()
				// ref.blur()
				 this.query();
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.query();
			},
			query(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findRecruitSearch({
					pageIndex:1,
					pageSize:20,
					type:this.selectList[this.searchQuery.selectIndex].id,
					content:this.searchQuery.keyword
				}).then((res) => {
					uni.hideLoading();
					this.tabList[this.current].list=res.data.data
					this.tabList[this.current].recordsTotal=res.data.recordsTotal
					
				}).catch(error => {
				
					uni.showToast({
						title: error
					})
					//this.getPhone()
					
				})
			},
             // 执行搜索
            doSearch(searchQuery) {
                console.log('searchQuery', searchQuery);
				this.submit()
            },

		}
	}
</script>

<style lang="scss" scoped>
	// 搜索框
	.search {
		padding: 16rpx 32rpx;

		.search-box {
			border-radius: 50px;
			// background-color: rgba(243, 246, 249, 1);
			height: 72rpx;
			line-height: 72rpx;
		}
	}
	// 搜索历史
	.search-history{
		padding: 0 32rpx;
		margin-top: 40rpx;
      .top{
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  .title{
			  color: #101010;
		  }
		  .clear{
			  color: rgba(169, 169, 169, 1);
			  font-size: 24rpx;
		  }
	  }
	  .history{
		  display: flex;
		  margin-top: 16rpx;
		  .tag{
			  width: 144rpx;
			  height: 56rpx;
			  line-height: 56rpx;
			  border-radius: 4px;
			  background-color: rgba(241, 244, 247, 1);
			  color: rgba(88, 88, 88, 1);
			  font-size: 12px;
			  text-align: center;
			  font-family: Arial;
			  margin-right: 16rpx;
		  }
	  }
	}
	 
</style>