143 lines
3.1 KiB
Vue
143 lines
3.1 KiB
Vue
<template>
|
|
<div class="search">
|
|
<div class="search_top">
|
|
<van-icon size="20" @click="$router.back()" name="arrow-left" />
|
|
<van-search
|
|
class="search_input"
|
|
show-action
|
|
@focus="InputFocus"
|
|
@blur="InputBlur"
|
|
:clearable="true"
|
|
placeholder="请输入搜索关键词"
|
|
shape="round"
|
|
v-model="SearchKeyword">
|
|
<div slot="action" @click="getSearch">搜索</div>
|
|
</van-search>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="search_tj" v-if="ShowHot">
|
|
<p>热门搜索</p>
|
|
<van-tag
|
|
plain
|
|
size="large"
|
|
v-for="(item,index) in tagList"
|
|
@click="HotClick(item)"
|
|
:key="index"
|
|
>{{item.text}}</van-tag>
|
|
</div>
|
|
|
|
<div class="list_item" v-else>
|
|
<van-row type="flex" style="flex-wrap: wrap">
|
|
<van-col v-for="(i,index) in searchList" class="item" span="11" :key="index">
|
|
<router-link :to="{ name: 'info', params: { id: i.wares_id } }">
|
|
<img :src="i | FirstImage" :alt="i.wares_title" />
|
|
<h3 class="title">{{i.wares_title}}</h3>
|
|
<p class="info">{{ i.wares_info | LineText }}</p>
|
|
<p class="pice">{{ i.wares_nowprice}}</p>
|
|
</router-link>
|
|
</van-col>
|
|
</van-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
ShowHot: true,
|
|
SearchKeyword: "",
|
|
searchList: [],
|
|
tagList: [
|
|
{ text: "小米" },
|
|
{ text: "华为" },
|
|
{ text: "16t" },
|
|
{ text: "11Pro" },
|
|
{ text: "锤子" },
|
|
{ text: "三星" }
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
SearchKeyword (newVal, oldVal) {
|
|
if(newVal.length == 0) {
|
|
this.searchList = []
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
InputBlur() {
|
|
if(this.searchList.length != 0) {
|
|
this.ShowHot = false
|
|
}
|
|
},
|
|
InputFocus() {
|
|
this.ShowHot = true
|
|
},
|
|
HotClick(data) {
|
|
this.SearchKeyword = "";
|
|
this.SearchKeyword = data.text;
|
|
this.getSearch();
|
|
},
|
|
async getSearch() {
|
|
var list = await this.$http.searchService.getSearchList({
|
|
keyword: this.SearchKeyword
|
|
});
|
|
|
|
this.ShowHot = false
|
|
|
|
this.searchList = list;
|
|
}
|
|
},
|
|
filters: {
|
|
// 手机介绍太长，截短
|
|
LineText(text) {
|
|
return text.substring(0, 10) + "..";
|
|
},
|
|
// 取出 wares_masterimg 主图第一张图片，作为缩略图
|
|
FirstImage(par) {
|
|
return JSON.parse(par.wares_masterimg)[0];
|
|
}
|
|
},
|
|
inject: ["close", "open"],
|
|
beforeRouteEnter(to, from, next) {
|
|
next(vm => vm.close());
|
|
},
|
|
beforeRouteLeave(to, from, next) {
|
|
this.open();
|
|
next();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.van-icon-arrow-left {
|
|
margin: 0 auto;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.search_top .search_input {
|
|
width: 93%;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 46px;
|
|
}
|
|
|
|
.van-tag {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.search_tj {
|
|
padding: 10px;
|
|
padding-top: 26px;
|
|
|
|
p {
|
|
margin-bottom: 10px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
</style>
|