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">
			<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="news-list-bg">
			<pull-list :list="searchList" :isShop="isShop" @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';
	import {getCartNum} from '@/jsFile/public-api.js';
	import { mapState } from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
			navTab,
			pullList
		},
		data() {
			return {
				newTop:uni.getSystemInfoSync().statusBarHeight + 50,
				searchList:[], //解答&资讯列表
				navTabList:[ //导航列表
					{name:'产品'},
					{name:'资讯'},
				],
				currentIndex:0, //当前位置
				page:1, //第几页
				size:5, //查询条数
				total:0, //总数
				isShop:true, //是否商品
				totalAll:-1, //判断总数
				historyData:[], //历史搜索列表
				keyword:'',//搜索关键词
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			this.keyword = op.keyword;
			this.getSearchList();
			this.getHistory();
		},
		onReachBottom(e) {
			if(this.searchList.length<this.total){
				this.page++;
				this.getSearchList();
			}else{
				this.totalAll = this.total;
				return false;
			}
			
		},
		methods: {
			// 切换事件
			chooseEv(type){
				if(type == 0){
					this.isShop = true;
				}
				if(type == 1){
					this.isShop = false;
				}
				if(this.currentIndex !== type){
					this.page = 1;
					this.currentIndex = type;
					this.getSearchList();
					this.getHistory();
				}
			},
			// 获取历史搜索结果
			getHistory(){
				if(this.currentIndex == 0){
					this.$requst.get('/api/index/keyword-history',{type:'spu'}).then(res=>{
						if(res.code == 0){
							let newArr = [];
							res.data.forEach(item=>{
								let obj = {
									keyword:item.keyword,
								}
								newArr.push(obj)
							})
							this.historyData = newArr;
						}
					})
				}
				if(this.currentIndex == 1){
					this.$requst.get('/api/index/keyword-history',{type:'article'}).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.getSearchList();
					this.getHistory();
				}
			},
			// 选择历史搜索
			changeKeyword(keyword){
				this.keyword = keyword;
				this.getSearchList();
				this.getHistory();
			},
			// 清空历史搜索
			clearHistory(){
				
			},
			// 获取搜索结果
			getSearchList(){
				let params = {
					keyword:this.keyword
				}
				if(this.currentIndex == 0){
					this.$requst.get('/api/spu/list',params).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,
									time:'',
								}
								newArr.push(obj)
							})
							this.searchList = newArr;
						}
					})
				}
				if(this.currentIndex == 1){
					this.$requst.get('/api/archives/list',params).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.title,
									time:this.dateFormat(item.published_at)
								}
								newArr.push(obj)
							})
							this.searchList = newArr;
						}
					})
				}
			},
			// 时间格式转换
			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){
				if(this.currentIndex == 0){
					uni.navigateTo({
						url:`/pagesA/shop/detail?id=${id.id}&source=shop`
					})
				}
				if(this.currentIndex == 1){
					uni.navigateTo({
						url:`/pages/tabbar/news/detail?id=${id.id}`
					})
				}
			},
		}
	}
</script>

<style>
	
</style>