Divided into two components:
NavCom,
ViewSearchProduct
Divided into four steps
1. src/views/sea/SearchList.vue page
<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}">Sales</div>
< !-- Click the price to set the price and the sel class is selected-->
<div @click="setSortPrice()" :class="{'sel':searchObj.main_sort==2}"> <!
-- If sort If equal to 2, the text will be highlighted -->
<span :class="{'active':searchObj.main_sort==2}">Price</span>
<!-- If the current orderby value is asc, add the act class name -->
<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 { // Define search conditions searchObj: { query: '', // Search keyword page_index: 1, // Current page page_size: 20, // Each Number of pages client_id: 180100031051, //Current user id version: 2, //Version webp: 1, channel_id: '', activity_id: '', activity_type: '', },
searchResult: {},
val1: 'New product', //The text displayed in the first condition
showLay: false, //Whether the pop-up box is displayed
}
},
created() { this.search(); }, methods: { setSortPrice() { // Why pass $set because there may not be "main_sort" when you click for the first time. You need to dynamically add this with $set Method // As long as you click, "main_sort" will be set to 2 this.$set(this.searchObj, "main_sort", 2); // If there is no sortby attribute, add the sortby attribute if (!this.searchObj.sort_by) { this.$set(this.searchObj, "sort_by", 'asc'); } else { // If the attribute is asc, it becomes dsc if (this.searchObj.sort_by === 'asc') {
this.searchObj.sort_by = 'dsc'
} else { // It becomes asc this.searchObj.sort_by = 'asc' } } // Perform search this.search(); }, // When clicking the option searchIt (main_sort, val1) { // Force update of search condition main_sort this.$set(this.searchObj, "main_sort", main_sort); // Execute search this.search(); // Close pop-up box this.showLay = false; // Update the text of the first option
this.val1 = val1;
},
search() { Search(this.searchObj) .then(res => { // Output the search content 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 { //The default is gray color: #999; display: block; }
}
// If the parent component has sel and the current component has act class name, it will be highlighted.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>
<!-- Access App.vue in NavCom. The two components have a non-parent-child relationship and realize cross-level parameter transfer (bus event car) --> <!-- <p>
From app component: {
{myMsg}}</p > -->
<!-- <p
:style="{'backgroundColor':myColor}"
@click="$parent.outNum++">Access the outNum of the parent component: {
{$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"
},
// Background color
bg_color: { type: String, default: "#fff" }, // Title title: { type: String, default: "" }, // Left text left_text: { type: String, default: "Return" }, // Right text 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 ; /* Here are more than a few lines omitted*/ overflow: hidden; font-size: .2rem; } .pic { width: 35%; img { width: 100%; } }
.body {
flex: 1;
}
}
</style>
4. Reference and configure routing on HomeView page
<input type="text" @focus="$router.push('/search/list')">
{ path:"/search/list", name:"slist", component:()=>import('../views/search/SearchList.vue'), // Hide bottom bar navigation meta: { noFoot:true , } },
