Vue封装 搜索页面 search 价格按升序降序排列

分了两个组件 ：

 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,'综合'