jp-railway/pages/search/searchResult.vue

<template>
	<view>
		<u-navbar title="发布内容" v-show="false" ref="refNavbar"  >
			
		</u-navbar>
		<!-- 搜索框 -->
		<view class="search" >
		<u-icon name="arrow-left" size="36"  @tap="goBack" ></u-icon>
		<u-search   ref="searchinput"
		v-model="key"  @blur="blur()"  @focus="focus()" @custom="submit" @search="submit" @keyup.enter="submit" 
		search-icon="none"></u-search>
		</view>
		<!-- 搜索历史 -->
		<view class="main"  v-show="step">
			<view class="search-history"  >
				<view class="title">
					搜索历史
				</view>
				<view class="clear"  @click="clear()">
					清空历史
				</view>
			</view>
			<view class="history">
				<view class="item"  v-for="(mod,index) in searchHistory"  :key="index" v-text="mod" @click="key=mod,submit()">
					荆州
				</view>
				
			</view>
			
		</view>
		<!-- 搜索结果 -->
		<view class="result"  v-show="!step">
			 <view class="result-item" v-for="(item,i) in list" @click="ckInfo(item.id)" :key="i" >
				 <view class="content">
				 	<view class="title">
				 		{{item.title}}
				 	</view>
					<view class="infos">
						<view class="classify">
							{{item.typeName}}
						</view>
						<view class="date">
							{{substrDate(item.createTime)}}
						</view>
					</view>
				 </view>
				 <view class="picture">
					 <img  v-if="item.pic" :src="item.pic" alt="">
					 <img  v-else src="@/assets/img/default_img.png" alt="">
					 
				 </view>
			 	
			 </view>
			<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/news.js'
	
	export default {
		data() {
			return {
				step:true,//步骤 ，true第一步查询，false第二步显示结果
				 key:"",
				  recordsTotal:0,
				 listForm:{
					 typeId:"",
					 title:"",
				         pageIndex: 1,
				         pageSize: 4,
				         totalPage: 1,
				        
				     },
					 list: [
					 ],
					searchHistory:[],
			}
		},
		computed:{
			
		},
		onLoad(op){
			if(op.type){
				this.listForm.typeId=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
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.query();
			},
			setSearchHistory(obj){
				this.searchHistory=obj
					this.carhelp.set("setSearchHistory",obj)
			},
			focus(){
				this.step=true;
			},
			blur(){
			    // if(this.step&&this.$refs.searchinput.getRef()){
			    //     this.$refs.searchinput.getRef().focus()//自动聚焦
			    // }
			},
			clear(){
			    this.setSearchHistory([]);
			    mui.toast("搜索内容已清空");
			},
			goBack(){
				this.$refs.refNavbar.goBack()
			},
            setHistory(){
                //搜索记录保存
				console.log(this.key)
                var sz=this.searchHistory;
                if(!sz){
                    sz=[];
                }
                var temp =[];
                //去重 ，后插入的，排队到最前面
                if(sz.length){
                    for(var i in sz){
                        if(i==0){
                            temp.push(this.key);
                        }
                        if(sz[i]==this.key){
                            continue;
                        }
                        temp.push(sz[i]);

                        if(temp.length==10){
                            break
                        }

                    }
                }else{
                    temp.push(this.key);
                }
				
                this.setSearchHistory(temp);
            },
			 query(){
				
				 this.listForm.title=this.key
				 uni.showLoading({
				 	title: "加载中",
				 	mask: true,
				 })
				 
				 API.pageList(this.listForm).then((res) => {
				 	uni.hideLoading();
					if(this.listForm.pageIndex==1){
						this.list = res.data.data;
					}else{
						this.list = [
							...this.list,
							...res.data.data
						];
					}
				 	
				 	this.recordsTotal = res.data.recordsTotal;
				 }).catch(error => {
				 	uni.showToast({
				 		title: error,
				 		icon: "none"
				 	})
				 })
				 
			 }, submit(){
				 if(!this.key){
					return 
				 }
                this.setHistory()
				this.step=false;
				this.listForm.pageIndex=1
				// var ref =this.$refs.searchinput.getRef()
				// ref.blur()
				 this.query();
			}
			 
			 
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
		font-family: 'Regular';
	}
	// 搜索框
	.search{
		padding:12rpx 24rpx;
		display: flex;
		align-items: center;
		.u-icon--right{
			margin-right: 24rpx;
		}
		/deep/.u-content{
			border-radius: 8px !important;
		}
		/deep/.u-action{
			color: rgba(31, 74, 153, 1);
			font-size: 16px;
		}
	}

 // 搜索历史
   .main{
	   margin: 36rpx;
	   .search-history{
		   display: flex;
		   justify-content: space-between;
		   align-items: center;
		   .title{
			   color: #111111;
		   }
		   .clear{
			   color: rgba(31, 74, 153, 1);
			   font-size: 12px;
		   }
	   }
	   .history{
		   // display: flex;
		   margin-top: 24rpx;
		   .item{
			   min-width: 140rpx;
			   text-align: center;
			   display: inline-block;
			   border-radius:8px;
			   background-color: rgba(239, 240, 245, 1);
			   color: rgba(88, 88, 88, 1);
			   height: 66rpx;
			   line-height: 66rpx;
			   margin-right: 26rpx;
			   margin-top:12rpx;
			   font-size: 28rpx;
			   padding: 2rpx 48rpx;
		   }
	   }
   }
   // 搜索结果
   .result{
	   padding: 36rpx 32rpx;
	   .result-item{
		   display: flex;
		   justify-content: space-between;
		   margin-bottom: 40rpx;
		  
		   .content{
			   display: flex;
			     width: 100%;
			   justify-content: space-between;
			   flex-direction: column;
			   .title{
				   color: rgba(51, 51, 51, 1);
				   font-size: 32rpx;
				   text-align: justify;
			   }
			   .infos{
				   display: flex;
				   justify-content: space-between;
				   align-items: center;
				   .classify{
					   color: rgba(119, 119, 119, 1);
					   font-size: 24rpx;
				   }
				   .date{
					   color: rgba(119, 119, 119, 1);
					   font-size:24rpx;
				   }
			   }
		   }
	   
	    .picture{
			   margin-left: 24rpx;
			img{
				width: 224rpx;
				height: 172rpx;
				border-radius: 5px;
			}
		}
	   
	   }
   }
</style>