|
|
|
@ -1,20 +1,23 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="flex flex-center2 search_box"> |
|
|
|
<van-search v-model="searchKey" shape="round" background="#fffff" placeholder="请输入搜索关键词" class="flex1" @blur="handelBlurSearch" /> |
|
|
|
<van-search v-model="searchKey" shape="round" background="#fffff" placeholder="请输入搜索关键词" class="flex1" |
|
|
|
@blur="handelBlurSearch" /> |
|
|
|
<van-button type="info" round size="small" class="m-right10" @click="handelClickSearch">搜索</van-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
<span v-if="searchFlag" class="p-12 flex">按关键字“<span class="blue">{{searchKey}}</span>”搜索到的结果如下</span> |
|
|
|
<span v-if="searchFlag" class="p-12 flex">按关键字“<span class="blue">{{ searchKey }}</span>”搜索到的结果如下</span> |
|
|
|
<section class='card m-top10' v-else> |
|
|
|
<div class="title"><span>热门搜索</span></div> |
|
|
|
<van-button type="default" round size="small" class="m-right10 m-top10" v-for="(item, index) in topWordList" :key="index" @click="handelClickTopSearch(item.name)">{{ item.name}}</van-button> |
|
|
|
<van-button type="default" round size="small" class="m-right10 m-top10" v-for="(item, index) in topWordList" |
|
|
|
:key="index" @click="handelClickTopSearch(item.name)">{{ item.name }}</van-button> |
|
|
|
</section> |
|
|
|
<div class="card" v-if="searchFlag"> |
|
|
|
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getTable"> |
|
|
|
<van-cell v-for="(item, index) in tableList" :key="index" :label="item.date"> |
|
|
|
<van-cell v-for="(item, index) in tableList" :key="index" :label="item.createTime" |
|
|
|
style="min-height: 50px;" @click="toDetail(item)"> |
|
|
|
<template #title> |
|
|
|
<span v-html="textHighlighting(item.title, searchKey)" class="van-multi-ellipsis--l2"></span> |
|
|
|
<span v-html="textHighlighting(item.name, searchKey)" class="van-multi-ellipsis--l2"></span> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
</van-list> |
|
|
|
@ -23,94 +26,90 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { keyWordSearch,popularSearch } from '@/api/home'; |
|
|
|
import { keyWordSearch, popularSearch } from '@/api/home'; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
searchKey:this.$route.query.searchKey || null, |
|
|
|
searchKey: this.$route.query.searchKey || null, |
|
|
|
loading: false, |
|
|
|
finished: false, |
|
|
|
searchFlag:false, |
|
|
|
searchFlag: false, |
|
|
|
tableList: [ |
|
|
|
], |
|
|
|
pageSize:20, |
|
|
|
pageNo:1, |
|
|
|
topWordList:{} |
|
|
|
pageSize: 10, |
|
|
|
pageNo: 1, |
|
|
|
topWordList: {} |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
if(this.$route.query.searchKey){ |
|
|
|
this.searchFlag = true; |
|
|
|
created() { |
|
|
|
if (this.$route.query.searchKey) { |
|
|
|
this.searchFlag = true; |
|
|
|
} |
|
|
|
this.popularSearch() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handelBlurSearch(){ |
|
|
|
this.searchFlag = this.searchKey?true:false; |
|
|
|
toDetail(item) { |
|
|
|
if (item.type == 'activity') { |
|
|
|
this.$router.push({ path: '/activityDetail' }) |
|
|
|
} |
|
|
|
}, |
|
|
|
handelBlurSearch() { |
|
|
|
this.searchFlag = this.searchKey ? true : false; |
|
|
|
}, |
|
|
|
//只需在这里调接口 |
|
|
|
async getTable() { |
|
|
|
this.loading = true |
|
|
|
let parm = { |
|
|
|
pageSize: 10, |
|
|
|
pageNo: 1, |
|
|
|
keyWordList:this.searchKey |
|
|
|
keyWordList: [this.searchKey], |
|
|
|
pageSize: this.pageSize, |
|
|
|
pageNo: this.pageNo++ |
|
|
|
} |
|
|
|
let res = await keyWordSearch(parm) |
|
|
|
console.log(res); |
|
|
|
|
|
|
|
// setTimeout(() => { |
|
|
|
// for (let i = 0; i < 10; i++) { |
|
|
|
// this.tableList.push({title:'这是新加的市北区',date:'2024-10-5'}); |
|
|
|
// } |
|
|
|
// console.log(this.tableList); |
|
|
|
// // 加载状态结束 |
|
|
|
this.loading = false; |
|
|
|
|
|
|
|
// // 数据全部加载完成 |
|
|
|
// if (this.tableList.length >= 40) { |
|
|
|
// this.finished = true; |
|
|
|
// } |
|
|
|
// }, 1000); |
|
|
|
this.loading = false |
|
|
|
if (res) { |
|
|
|
if (res.list.length < this.pageSize) { |
|
|
|
this.finished = true; |
|
|
|
} |
|
|
|
this.tableList = res.list |
|
|
|
} |
|
|
|
}, |
|
|
|
handelClickTopSearch(parm){ |
|
|
|
handelClickTopSearch(parm) { |
|
|
|
console.log(parm); |
|
|
|
this.searchFlag = true; |
|
|
|
this.pageNo = 1; |
|
|
|
this.searchKey = parm; |
|
|
|
this.getTable(); |
|
|
|
}, |
|
|
|
handelClickSearch(){ |
|
|
|
handelClickSearch() { |
|
|
|
this.searchFlag = true; |
|
|
|
this.pageNo = 1; |
|
|
|
this.getTable(); |
|
|
|
}, |
|
|
|
async popularSearch(){ |
|
|
|
async popularSearch() { |
|
|
|
const res = await popularSearch() |
|
|
|
if(res.code==0){ |
|
|
|
if (res.code == 0) { |
|
|
|
this.topWordList = res.data |
|
|
|
console.log("1215"); |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
this.$toast(res.msg) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
components: { }, |
|
|
|
computed: { |
|
|
|
textHighlighting(textItem, searchText){ |
|
|
|
return (textItem,searchText) =>{ |
|
|
|
const searchTextArr = searchText.split('') |
|
|
|
const textItemArr = textItem.split('') |
|
|
|
const result = textItemArr.map(item => { |
|
|
|
return searchTextArr.includes(item) ? `<span class="blue">${item}</span>` : item |
|
|
|
}) |
|
|
|
return result.join('') |
|
|
|
} |
|
|
|
components: {}, |
|
|
|
computed: { |
|
|
|
textHighlighting(textItem, searchText) { |
|
|
|
return (textItem, searchText) => { |
|
|
|
console.log(searchText, textItem); |
|
|
|
const searchTextArr = searchText.split('') |
|
|
|
const textItemArr = textItem.split('') |
|
|
|
const result = textItemArr.map(item => { |
|
|
|
return searchTextArr.includes(item) ? `<span class="blue">${item}</span>` : item |
|
|
|
}) |
|
|
|
return result.join('') |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { }, |
|
|
|
}, |
|
|
|
watch: {}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
|
