luban-mall/pagesB/search/search.vue

<template>
	<view>
		<status-nav :ifReturn="true" navBarTitle="搜索" :marginBottom="0"></status-nav>
		<!-- 搜索 -->
		<view class="search-bg" style="padding-bottom: 0rpx;">
			<view class="search flex">
				<image class="search-img" src="/static/public/icon-search.png" mode="widthFix"></image>
				<input class="search-input" v-model="keyword" type="text" placeholder="请输入关键词" placeholder-style="color: #666666">
				<view class="search-line"></view>
				<view class="search-btn flex" @tap="toSearch">搜索</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="nav-list-bg" :style="{top:newTop+'px'}">
			<nav-tab :list="navTabList" @chooseEv="chooseEv" :type="'radio'"></nav-tab>
		</view>
		<!-- 历史搜索 -->
		<view class="search-history flex" v-if="historyData.length>0 && total==0">
			<view class="title flex">
				<text>历史搜索</text>
				<image class="search-img" src="/static/public/icon-clear.png" mode="widthFix" @tap="clearHistory"></image>
			</view>
			<view class="item clips1" @tap="changeKeyword(item.keyword)" v-for="(item,index) in historyData" :key="index">{{item.keyword}}</view>
		</view>
		<view class="search-keyword" v-if="total !== 0">关键词：<text>{{keywords}}</text>(<text>{{total}}</text>)</view>
		<!-- 列表 -->
		<view class="news-list-bg" :class="isKit?'all-width':''">
			<pull-list :list="searchList" :isShop="isShop" :isKit="isKit" @toDetail="toDetail"></pull-list>
		</view>
		<!-- 暂无更多内容 -->
		<view class="more-txt more-txt-other" v-if="totalAll == total">暂无更多内容</view>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import navTab from '@/components/nav-tab/nav-tab.vue';
	import pullList from '@/components/pull-list/pull-list.vue';
	export default {
		components:{
			statusNav,
			navTab,
			pullList
		},
		data() {
			return {
				newTop:uni.getSystemInfoSync().statusBarHeight + 50,
				searchList:[], //解答&资讯列表
				navTabList:[ //导航列表
					{name:'产品'},
					{name:'套件'},
					{name:'资讯'},
				],
				currentIndex:0, //当前位置
				page:1, //第几页
				size:5, //查询条数
				total:0, //总数
				isShop:true, //是否商品
				totalAll:-1, //判断总数
				historyData:[], //历史搜索列表
				keyword:'',//搜索关键词
				keywords:'', //历史关键词
				isKit:false, //是否套件
			}
		},
		onLoad(op) {
			this.keywords = op.keyword;
			this.getSearchList(this.currentIndex);
			this.getHistory(this.currentIndex);
		},
		onReachBottom(e) {
			if(this.searchList.length<this.total){
				this.page++;
				this.getSearchList(this.currentIndex);
			}
		},
		methods: {
			// 切换事件
			chooseEv(type){
				if(type == 2){
					this.isShop = false;
					this.isKit =false;
				}else if(type == 1){
					this.isShop = false;
					this.isKit =true;
				}else{
					this.isShop = true;
					this.isKit =false;
				}
				
				if(this.currentIndex !== type){
					this.page = 1;
					this.currentIndex = type;
					this.getSearchList(this.currentIndex);
					this.getHistory(this.currentIndex);
				}
			},
			// 获取历史搜索结果
			getHistory(index){
				let historyType = ['spu','spu','article'];
				this.$requst.get('/api/index/keyword-history',{type:historyType[index]}).then(res=>{
					if(res.code == 0){
						let newArr = [];
						res.data.forEach(item=>{
							let obj = {
								keyword:item.keyword,
							}
							newArr.push(obj)
						})
						this.historyData = newArr;
					}
				})
			},
			
			//搜索
			toSearch(){
				if(this.keyword !== ''){
					this.keywords = this.keyword;
					this.getSearchList(this.currentIndex);
					this.getHistory(this.currentIndex);
				}
			},
			
			// 选择历史搜索
			changeKeyword(keyword){
				this.keywords =keyword;
				this.getSearchList(this.currentIndex);
				this.getHistory(this.currentIndex);
			},
			
			// 清空历史搜索
			clearHistory(){
				let historyType = ['spu','spu','article'];
				this.$requst.get('/api/index/clear-keyword-history',{type:historyType[this.currentIndex]}).then(res=>{
					if(res.code == 0){
						this.historyData = [];
					}
				})
			},
			
			// 获取搜索结果
			getSearchList(index){
				uni.showLoading({
					title: '加载中'
				});
				let params = [
					{keyword:this.keywords,is_series:0},
					{keyword:this.keywords,is_series:1},
					{keyword:this.keywords}
				];
				let searchApi = ['/api/spu/list','/api/spu/series','/api/archives/list'];
				this.$requst.get(searchApi[index],params[index]).then(res=>{
					if(res.code == 0){
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								src:item.cover,
								title:item.name?item.name:item.title,
								subtitle:item.subtitle?item.subtitle:'',
								time:item.published_at?this.dateFormat(item.published_at.replace(/-/g,'/')):'',
								series:item.series?item.series:''
							}
							newArr.push(obj)
						})
						this.searchList = newArr;
						this.keyword = '';
						if(this.searchList.length == this.total){
							this.totalAll = this.total;
						}
					}
				})
				uni.hideLoading();
			},
			
			// 时间格式转换
			dateFormat (dateData) {
			    var date = new Date(dateData)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
			    const time = y + '.' + m + '.' + d
			    return time
			},
			
			// 跳转详情页
			toDetail(id){
				let detailUrl=[`/pagesA/shop/detail?id=${id.id}&source=shop`,`/pages/tabbar/kit/detail?id=${id.id}`,`/pages/tabbar/news/detail?id=${id.id}`];
				uni.navigateTo({
					url:detailUrl[this.currentIndex]
				})
			},
		}
	}
</script>

<style>
	
</style>