364 lines
7.7 KiB
Vue
Executable File
364 lines
7.7 KiB
Vue
Executable File
<template>
|
|
<div class="container">
|
|
<!-- 搜索框 -->
|
|
<div class="search-input-box flexacenter">
|
|
<div class="search-input flexacenter">
|
|
<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
|
|
<input class="search-input-input flex1" @keyup.enter="handleSearchResult()" placeholder="请输入搜索关键词"
|
|
v-model="kw" maxlength="20" />
|
|
<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
|
|
</div>
|
|
|
|
<div class="search-input-cancel" @click.stop="handCancel">取消</div>
|
|
</div>
|
|
|
|
<!-- 结果数量 -->
|
|
<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
|
|
<div class="result-box flexacenter" v-if="list.length != 0 || loading">
|
|
<div class="result-item flexflex" v-for="(item, index) in list" :key="index" @click.stop="toDetail(item.tid)">
|
|
<div class="result-header one-line">
|
|
<div class="result-label">{{ item.forum }}</div>
|
|
<div class="result-title" v-html="item.subject"></div>
|
|
</div>
|
|
|
|
<div class="result-content two-lines" v-html="item.message"></div>
|
|
|
|
<div class="result-info flexacenter flex1">
|
|
<div class="user-info flexacenter">
|
|
<img class="icon-head" :src="item.avatar">
|
|
<div class="user-name" v-html="item.author"></div>
|
|
</div>
|
|
<div class="item-data flexacenter">
|
|
<div class="item-data-item flexacenter">
|
|
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
|
|
<div>{{ item.views }}</div>
|
|
</div>
|
|
<div class="item-data-item flexacenter">
|
|
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
|
|
<div>{{ item.replies }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 精华 -->
|
|
<div class="rightTop" v-if="item.digest > 0">
|
|
<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
|
|
<span>精华</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-empty-box flexcenter shadow" v-else>
|
|
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
|
|
</div>
|
|
|
|
<div v-if="count > limit" class="paging flexcenter">
|
|
<el-pagination small background layout="prev, pager, next" @current-change="currentChange()"
|
|
:current-page.sync="page" :page-size="limit" :total="count * 1">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "SearchResult",
|
|
data() {
|
|
return {
|
|
kw: "",
|
|
count: 0,
|
|
limit: 4,
|
|
nextpage: true,
|
|
page: 1,
|
|
list: [],
|
|
searchResultState: false,
|
|
loading: null,
|
|
}
|
|
},
|
|
components: {
|
|
|
|
},
|
|
|
|
mounted() {
|
|
let { kw, page } = this.$route.query
|
|
this.kw = kw
|
|
if (page) this.page = Number(page)
|
|
this.getSearchResult()
|
|
|
|
},
|
|
|
|
watch: {
|
|
searchResultState(val, oldval) {
|
|
if (val) this.$startupUnderLoading(this)
|
|
else this.$closeUnderLoading(this)
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
// 处理点击取消的返回上一页
|
|
handCancel() {
|
|
if (this.$route.params.page > 1) this.$router.go(-1)
|
|
else this.$router.push('/recommend')
|
|
},
|
|
|
|
// 处理搜索框回车
|
|
handleSearchResult() {
|
|
let kw = this.kw
|
|
if (!kw) return
|
|
this.page = 1
|
|
|
|
this.$router.push({ path: `/searchResult`, query: { kw: this.kw, page: this.page } })
|
|
|
|
// this.getSearchResult()
|
|
// this.$updateURLSearchParams({ kw: this.kw, page: this.page })
|
|
},
|
|
|
|
// 获取搜索结果数据
|
|
getSearchResult() {
|
|
if (!this.kw) return
|
|
|
|
if (this.searchResultState) return
|
|
this.searchResultState = true
|
|
let kw = this.kw
|
|
this.$http.get("/api/search", {
|
|
keyword: kw,
|
|
page: this.page,
|
|
limit: this.limit
|
|
}).then(res => {
|
|
|
|
if (res.code != 200) return
|
|
let data = res.data
|
|
|
|
this.list = data.data
|
|
this.count = data.count
|
|
this.limit = data.limit
|
|
|
|
document.documentElement.scrollTop = 0;
|
|
document.body.scrollTop = 0;
|
|
// this.searchResultState = false
|
|
}).finally(() => {
|
|
this.$store.commit('setHistoricalSearch', this.kw)
|
|
this.searchResultState = false
|
|
})
|
|
},
|
|
|
|
// 点击改变页数
|
|
currentChange() {
|
|
|
|
this.$router.push({ path: `/searchResult`, query: { kw: this.kw, page: this.page } })
|
|
// this.getSearchResult()
|
|
|
|
},
|
|
|
|
// 跳转详情
|
|
toDetail(tid) {
|
|
this.$router.push(`/detailIndex?tid=${tid}`)
|
|
},
|
|
|
|
// 点击清空 input 的值
|
|
emptyKw() {
|
|
this.kw = ""
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding-top: 1.3rem;
|
|
padding-bottom: 1.3rem;
|
|
|
|
.search-input-box {
|
|
margin-left: .32rem;
|
|
|
|
.search-input {
|
|
width: 8.2rem;
|
|
height: .96rem;
|
|
border-radius: 2.56rem;
|
|
background: rgba(235, 235, 235, 1);
|
|
|
|
.search-input-icon,
|
|
.search-input-cross {
|
|
width: .4rem;
|
|
height: .4rem;
|
|
}
|
|
|
|
.search-input-icon {
|
|
padding: 0 .4rem;
|
|
}
|
|
|
|
.search-input-cross {
|
|
padding-right: .4rem;
|
|
}
|
|
|
|
.search-input-input {
|
|
height: 100%;
|
|
font-size: 0.40rem;
|
|
}
|
|
|
|
}
|
|
|
|
.search-input-cancel {
|
|
color: #000;
|
|
font-size: .36rem;
|
|
padding-left: .46rem;
|
|
width: .74rem;
|
|
}
|
|
}
|
|
|
|
.numberResults {
|
|
font-size: .32rem;
|
|
color: #555;
|
|
// margin-top: .64rem;
|
|
margin: .64rem .32rem .48rem;
|
|
|
|
.number {
|
|
color: #000;
|
|
font-weight: 650;
|
|
margin: 0 .1667rem;
|
|
}
|
|
}
|
|
|
|
.result-box {
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
|
|
.result-item {
|
|
margin-bottom: .32rem;
|
|
width: 9.36rem;
|
|
height: 3.96rem;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: none;
|
|
border-radius: .32rem;
|
|
-moz-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.0784313725490196);
|
|
-webkit-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 0 .16rem rgba(0, 0, 0, .08);
|
|
padding: 0.4rem;
|
|
box-sizing: border-box;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
.result-header {
|
|
margin-bottom: .32rem;
|
|
|
|
.result-label {
|
|
font-size: .28rem;
|
|
height: .52rem;
|
|
line-height: .52rem;
|
|
background: rgb(51, 51, 51);
|
|
color: #fff;
|
|
display: inline-block;
|
|
border-radius: .16rem;
|
|
padding: 0 .12rem;
|
|
margin-right: .12rem;
|
|
}
|
|
|
|
.result-title {
|
|
color: #000;
|
|
font-size: 0.37333rem;
|
|
line-height: 0.65rem;
|
|
display: inline;
|
|
|
|
/deep/ em {
|
|
color: #F95D5D;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.result-content {
|
|
line-height: .52rem;
|
|
font-size: .3rem;
|
|
color: #7f7f7f;
|
|
height: 1.04rem;
|
|
}
|
|
|
|
.reply-visible {
|
|
font-size: .32rem;
|
|
height: 1.04rem;
|
|
background: rgba(242, 242, 242, 0.7);
|
|
}
|
|
|
|
.result-info {
|
|
align-items: self-end;
|
|
|
|
justify-content: space-between;
|
|
|
|
.user-info {
|
|
.icon-head {
|
|
width: .64rem;
|
|
height: .64rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: .32rem;
|
|
color: #333;
|
|
margin-left: .2rem;
|
|
}
|
|
}
|
|
|
|
.item-data {
|
|
|
|
font-size: .28rem;
|
|
|
|
.item-data-item {
|
|
|
|
&:last-of-type {
|
|
margin-left: .4rem;
|
|
}
|
|
|
|
.icon-look {
|
|
width: .4267rem;
|
|
height: .18rem;
|
|
margin-right: .16rem;
|
|
}
|
|
|
|
.icon-msg {
|
|
width: .32rem;
|
|
height: .28rem;
|
|
margin-right: .16rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.paging {
|
|
margin-top: .48rem;
|
|
|
|
::v-deep {
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background: rgba(98, 177, 255, 1);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.el-pagination .btn-next .el-icon,
|
|
.el-pagination .btn-prev .el-icon {
|
|
font-size: .4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.result-empty-box {
|
|
height: 70vh;
|
|
width: 9.36rem;
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
border-radius: 0.32rem;
|
|
|
|
.result-empty-icon {
|
|
width: 2.04rem;
|
|
height: 2.4rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|