210 lines
5.9 KiB
Vue
210 lines
5.9 KiB
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';
|
|
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:'套件'},
|
|
{name:'资讯'},
|
|
],
|
|
currentIndex:0, //当前位置
|
|
page:1, //第几页
|
|
size:5, //查询条数
|
|
total:0, //总数
|
|
isShop:true, //是否商品
|
|
totalAll:-1, //判断总数
|
|
historyData:[], //历史搜索列表
|
|
keyword:'',//搜索关键词
|
|
keywords:'', //历史关键词
|
|
isKit:false, //是否套件
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
footHeight: state => state.moduleA.footHeight,
|
|
}),
|
|
},
|
|
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>
|