分了两个组件 ：
NavCom,
ViewSearchProduct
共分四步走
一、 src/views/sea/SearchList.vue 页面
<template>
<div>
<NavCom left_text="" @right-click="search()" @left-click="$router.back()" bg_color="#fafafa">
<template #icon_left>
<span class="iconfont icon-fanhuijiantouxiangqingye"></span>
</template>
<template #title>
<input type="text" v-model="searchObj.query" class="searchBox" placeholder="请求输入关键字">
</template>
<template #icon_right>
<span class="iconfont icon-sousuo"></span>
</template>
</NavCom>
<div class="nav-main">
<div @click="showLay=true" :class="{'active':searchObj.main_sort==4||searchObj.main_sort==0}">{
{val1}} <span
class="xxsmall">▼</span>
</div>
<div @click="$set(searchObj,'main_sort',1)" :class="{'active':searchObj.main_sort==1}">销量</div>
<!-- 单击价格 设置价格有选中的sel类 -->
<div @click="setSortPrice()" :class="{'sel':searchObj.main_sort==2}">
<!-- 如果sort等于2 文字就会高亮 -->
<span :class="{'active':searchObj.main_sort==2}">价格</span>
<!-- 如果当前orderby的值为asc 添加act类名 -->
<span class="col">
<span class="xxsmall" :class="{'act':searchObj.sort_by=='asc'}">▲</span>
<span class="xxsmall" :class="{'act':searchObj.sort_by=='dsc'}">▼</span></span>
</div>
<div>筛选</div>
</div>
<div class="lay" v-if="showLay">
<div class="item" @click="searchIt(4,'新品')">
新品优先
</div>
<div class="item" @click="searchIt(0,'综合')">
综合排序
</div>
</div>
<div class="list" v-if="searchResult.list_v2">
<div class="item" v-for="product in searchResult.list_v2" :key="product.body.product_id">
<ViewSearchProduct :data="product.body" v-if="product.view_type=='view_search_product'">
</ViewSearchProduct>
</div>
</div>
</div>
</template>
<script>
import NavCom from '@/components/NavCom.vue'
// 导入搜索api
import {
Search
} from '@/api/search.js'
// 导入组件
import ViewSearchProduct from '@/components/ViewSearchProduct.vue'
export default {
components: {
NavCom,
ViewSearchProduct
},
data() {
return {
// 定义搜索条件
searchObj: {
query: '', //搜索关键字
page_index: 1, // 当前页
page_size: 20, //每页数量
client_id: 180100031051, //当前用户id
version: 2, //版本
webp: 1,
channel_id: '',
activity_id: '',
activity_type: '',
},
searchResult: {},
val1: '新品', //第一条件显示的文本
showLay: false, //是不是显示弹框
}
},
created() {
this.search();
},
methods: {
setSortPrice() {
// 为还说呢么通过$set 因为首次单击的时候可能没有 "main_sort" 需要动态添加用$set这个方法
// 只要单击 都会把"main_sort"设置为2
this.$set(this.searchObj, "main_sort", 2);
// 如果没有sortby属性就添加sortby属性
if (!this.searchObj.sort_by) {
this.$set(this.searchObj, "sort_by", 'asc');
} else {
// 如果属性是asc 就变为dsc
if (this.searchObj.sort_by === 'asc') {
this.searchObj.sort_by = 'dsc'
} else {
// 就变成 asc
this.searchObj.sort_by = 'asc'
}
}
// 执行搜索
this.search();
},
// 当单击选项的时候
searchIt(main_sort, val1) {
// 强制更新搜索条件 main_sort
this.$set(this.searchObj, "main_sort", main_sort);
// 执行搜索
this.search();
// 关闭弹框
this.showLay = false;
// 更新第一个选项的文本
this.val1 = val1;
},
search() {
Search(this.searchObj)
.then(res => {
// 输出搜索的内容
this.searchResult = res.data.data;
console.log(res.data.data)
})
}
}
}
</script>
<style lang="scss" scoped>
.nav-main {
display: flex;
height: .88rem;
line-height: .88rem;
background-color: #fafafa;
color: #777
}
.nav-main .active {
color: #f70;
}
.nav-main>div {
flex: 1;
text-align: center;
.xxsmall {
font-size: .2rem;
transform: scale(.7);
}
.col {
display: inline-block;
line-height: .18rem;
vertical-align: middle;
}
.col .xxsmall {
// 默认是灰色
color: #999;
display: block;
}
}
// 如果父组件有sel 当前组件有act 类名才高亮
.nav-main .sel .act.xxsmall {
color: #f70 !important;
}
.lay {
background-color: rgba(0, 0, 0, .3);
position: fixed;
top: 1.76rem;
left: 0;
right: 0;
bottom: 0;
}
.lay .item {
height: .88rem;
line-height: .88rem;
background-color: #fff;
padding: 0 .3rem;
}
.searchBox {
flex: 1;
line-height: .60rem;
width: 100%;
border: none;
background-color: #fff;
}
</style>
二、src/components/NavCom
<template>
<div class="nav" :style="{backgroundColor:bg_color,color:text_color}">
<!-- 子向父组件传递参数通过事件 $emit -->
<div class="left" @click="$emit('left-click',$event)">
<!-- 左插槽 -->
<slot name="icon_left"></slot>{
{left_text}}
</div>
<div class="title">
<!-- {
{a}} -->
<slot name="title"></slot>{
{title}}
</div>
<div class="right" @click="$emit('right-click',$event)">
{
{right_text}}
<!-- 右插槽 -->
<slot name="icon_right"></slot>
</div>
<!-- 在NavCom 里面访问 App.vue 两个组件是非父子关系，实现跨层级传参 （bus事件车）-->
<!-- <p>来自app组件：{
{myMsg}}</p> -->
<!-- <p
:style="{'backgroundColor':myColor}"
@click="$parent.outNum++">访问父组件的outNum：{
{$parent.outNum}}</p> -->
</div>
</template>
<style lang="scss" scoped="scoped">
.nav {
height: .88rem;
line-height: .88rem;
display: flex;
align-items: center;
font-size: .2rem;
.title {
flex: 1;
text-align: center;
}
.left,
.right {
padding: 0 .3rem;
}
}
</style>
<script>
import bus from '@/utils/bus.js'
export default {
inject:["a"],
created() {
bus.$on("msgchange", $event => {
console.log("msgchange")
this.myMsg = $event;
})
},
data() {
return {
myColor: "#f30",
myMsg: '',
}
},
props: {
// 文本颜色
text_color: {
type: String,
default: "#000"
},
// 背景颜色
bg_color: {
type: String,
default: "#fff"
},
// 标题
title: {
type: String,
default: ""
},
// 左边文本
left_text: {
type: String,
default: "返回"
},
// 右边文本
right_text: {
type: String,
default: ""
}
}
}
</script>
三、src/components/ProductList
<template>
<div class="view_search_product">
<div class="pic">
<img :src="data.image" alt="" />
</div>
<div class="body">
<h3>{
{data.name}}</h3>
<p v-html="data.desc" class="desc"></p>
<p>{
{data.price}}</p>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object
}
}
}
</script>
<style lang="scss" scoped>
.view_search_product {
display: flex;
margin-bottom: .15rem;
.desc{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;
font-size: .2rem;
}
.pic {
width: 35%;
img {
width: 100%;
}
}
.body {
flex: 1;
}
}
</style>
四、HomeView页面引用 并配置路由
<input type="text" @focus="$router.push('/search/list')">
{
path:"/search/list",
name:"slist",
component:()=>import('../views/search/SearchList.vue'),
// 隐藏底部栏导航
meta: {
noFoot:true ,
}
},