1230

project.config.json

@@ -65,6 +65,12 @@
                     "id": -1,
                     "name": "我的",
                     "pathName": "pages/My",
+                    "scene": null
+								},
+								{
+                    "id": -1,
+                    "name": "搜索",
+                    "pathName": "pagesHome/Search",
                     "scene": null
                 },
                 {

src/components/bar/FilterSortBar.vue

@@ -26,7 +26,7 @@
                 </block>
             </div>
 
-            <div class="showType" @click="changeShowType">
+            <div class="showType" @click="changeShowType" v-if="changeShow">
                 <van-icon :size="16" v-if="showType === 'grid'" :color="$colors.text" name="apps-o" />
                 <van-icon
                     :size="16"
@@ -97,6 +97,10 @@ export default {
         background: {
             type: String,
             default: '#fff'
+        },
+        changeShow: {
+            type: Boolean,
+            default: true
         }
     },
     data() {

src/components/bar/SearchBar.vue

@@ -4,8 +4,8 @@
             <img class="logo" src="../../static/imgs/home_logo.png" alt="" />
             <div class="search" @click="navigateTo('/pagesHome/Search', false)">
                 <van-icon name="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/search.png" />
-                <!-- <span>搜索展商/产品/资讯</span> -->
-                <span>搜索...</span>
+                <span>搜索展商/产品/资讯</span>
+                <!-- <span>搜索...</span> -->
             </div>
         </div>
     </div>

src/main.js

@@ -72,7 +72,19 @@ export default {
         subPackages: [
             {
                 root: 'pagesHome',
-                pages: ['Product', 'Brand', 'ProductList', 'Authorized', 'FilterPage', 'Edit', 'Search', 'ShowView']
+                pages: [
+                    'Product',
+                    'Brand',
+                    'InformationList',
+                    'VendorList',
+                    'ProductList',
+                    'Authorized',
+                    'FilterPage',
+                    'Edit',
+                    'Search',
+                    'SearchList',
+                    'ShowView'
+                ]
             },
             {
                 root: 'pagesImt',

src/mixins/commont.js

@@ -20,12 +20,15 @@ export default {
     },
     methods: {
         getImport(name) {
-            if (this.search) {
-                var searchs = this.search.split('');
+            console.log(name);
+            if (this.search && name) {
+                var searchs = this.search.split('').map(item => {
+                    return item.toLowerCase();
+                });
                 var names = name.split('');
                 return names
                     .map(item => {
-                        return searchs.includes(item) ? `<span style='color:#ffa526'>${item}</span>` : item;
+                        return searchs.includes(item.toLowerCase()) ? `<span class='important'>${item}</span>` : item;
                     })
                     .join('');
             } else {

src/pages/Classify.vue

@@ -19,7 +19,6 @@
             <div class="navBar" :style="narStyle">
                 <div class="title">产品分类</div>
                 <van-search
-                    @click="navigateTo('/pagesHome/Search', false)"
                     :value="search"
                     @search="confirm"
                     shape="round"

src/pagesHome/InformationList.vue

@@ -0,0 +1,127 @@
+<config>
+{
+'navigationBarTitleText': '',
+'navigationStyle':'custom',
+'navigationBarTextStyle':'black',
+'backgroundColorBottom': '#f5f7fa',
+'backgroundColorTop': '#fff',
+}
+</config>
+<template>
+    <div>
+        <div :style="{ height: barHeight + 'px' }">
+            <search-bar v-model="searchKey" :dark="false" :ratio="ratio" @search="submitSearch"></search-bar>
+        </div>
+        <div class="main" id="main">
+            <sort-list :empty="empty" emptyText="敬请期待" :loading="loading" :finish="finish" top="0px">
+                <div class="product-list2">
+                    <div class="item" v-for="item in list" :key="item.id">
+                        <news-row :info="item"></news-row>
+                    </div>
+                </div>
+            </sort-list>
+        </div>
+    </div>
+</template>
+<script>
+import SearchBar from '../components/bar/SearchBarWithValue';
+import searchList from '../mixins/searchList';
+import SortList from '../components/SortList';
+import NewsRow from '../components/News/Row.vue';
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            url: '/information/all',
+            formType: {
+                header: {
+                    'Content-Type': 'application/json'
+                }
+            },
+            main: null,
+            ratio: 1
+        };
+    },
+    mixins: [searchList],
+    computed: {
+        ...mapState(['barTop', 'barHeight']),
+        listQuery() {
+            return {
+                query: { status: 'PASS' },
+                sort: 'createdAt,desc'
+            };
+        }
+    },
+    onLoad(options) {
+        if (options.search) {
+            this.search = options.search;
+            this.searchKey = options.search;
+        }
+        this.getData();
+    },
+    onReachBottom() {
+        if (!this.loading && !this.finish) {
+            this.page++;
+            this.getData();
+        }
+    },
+    components: {
+        SortList,
+        SearchBar,
+        NewsRow
+    }
+    // watch: {
+    //     defaultCategoryId() {
+    //         this.categoryIds = '';
+    //         this.$nextTick(() => {
+    //             this.refreash();
+    //         });
+    //     }
+    // }
+};
+</script>
+
+<style lang="less">
+.tab-content {
+    background: @prim;
+    .van-tabs__scroll {
+        background: @prim;
+        .van-tab {
+            color: #fff;
+            &.van-tab--active {
+                color: @warn;
+            }
+        }
+
+        .van-tabs__line {
+            bottom: 8px;
+            left: 7.5px;
+        }
+    }
+}
+
+.banner-box {
+    padding: 16px 16px 4px;
+}
+.top {
+    height: 44px;
+}
+
+.product-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px;
+    .clo-2 {
+        width: 50%;
+        padding: 6px;
+        box-sizing: border-box;
+    }
+}
+
+.product-list2 {
+    padding: 16px;
+    .item + .item {
+        margin-top: 16px;
+    }
+}
+</style>

src/pagesHome/Search.vue

@@ -10,58 +10,176 @@
   "van-sidebar": "../native/vant/sidebar/index",
   "van-sidebar-item": "../native/vant/sidebar-item/index"
 },
-'disableScroll': true
+'disableScroll': false
 }
 </config>
 <template>
-    <div class="container" :style="{ paddingTop: barHeight + 'px' }">
-        <van-sticky :offset-top="0">
+    <div class="container" :style="`padding-top:${barHeight}px`">
+        <van-sticky :offset-top="0" :style="`height:${barHeight}px`">
             <div class="navBar" :style="narStyle">
                 <van-icon name="arrow-left" @click="navigateBack" :size="24" color="#000" />
 
                 <van-search
                     :focus="focus"
                     left-icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/search.png"
-                    :value="search"
+                    :value="searchKey"
                     @search="confirm"
                     shape="round"
                     placeholder="搜索..."
                     @change="changeSearch"
+                    :maxlength="60"
+                    @focus="focus = true"
+                    @clear="clearSearch"
+                    @blur="blurSearch"
                 />
+
+                <scroll-view
+                    v-if="searchKey && focus"
+                    scroll-y
+                    class="popupPage"
+                    :style="`height: calc(100vh - ${barHeight}px + 30rpx)`"
+                >
+                    <div class="popuptext top" @click="goVendor(searchKey)">
+                        搜索“
+                        <span> {{ searchKey }}</span>
+                        ”相关的展商
+                    </div>
+                    <div class="popuptext top" @click="goInformation(searchKey)">
+                        搜索“
+                        <span> {{ searchKey }}</span>
+                        ”相关的资讯
+                    </div>
+                    <div
+                        class="popuptext"
+                        v-html="getImport(item)"
+                        v-for="(item, index) in matchList"
+                        :key="index"
+                        @click="goNext(item)"
+                    ></div>
+                </scroll-view>
+
+                <scroll-view
+                    v-else-if="focus"
+                    scroll-y
+                    class="content"
+                    :style="`height: calc(100vh - ${barHeight}px + 30rpx)`"
+                >
+                    <div class="history" v-if="historys.length > 0">
+                        <div class="histroy-title">
+                            <div class="histroy-title-text">搜索历史</div>
+                            <van-button plain size="small" @click="del" color="#BCC1CC">清空记录</van-button>
+                        </div>
+
+                        <div class="history-list">
+                            <div class="tags" @click="goNext(item)" v-for="(item, index) in historys" :key="index">
+                                {{ item }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="history">
+                        <div class="histroy-title">
+                            <div class="histroy-title-text">热门搜索</div>
+                        </div>
+
+                        <div class="history-list">
+                            <div class="tags" @click="goNext(item)" v-for="(item, index) in hots" :key="index">
+                                {{ item }}
+                            </div>
+                        </div>
+                    </div>
+                </scroll-view>
             </div>
         </van-sticky>
-        <div class="content">
-            <div class="history" v-if="historys.length > 0">
-                <div class="histroy-title">
-                    <div class="text">搜索历史</div>
-                    <van-button plain size="small" @click="del" color="#BCC1CC">清空记录</van-button>
-                </div>
 
-                <div class="history-list">
-                    <div class="tags" @click="goNext(item)" v-for="(item, index) in historys" :key="index">
-                        {{ item }}
+        <van-dialog id="van-dialog" />
+
+        <div class="main" id="main">
+            <van-sticky v-if="searchType !== 'information'" :container="main" :offset-top="barHeight">
+                <filter-sort-bar
+                    :sort="sort"
+                    :showType="showType"
+                    @showFilter="showFilter"
+                    @changeSort="changeSort"
+                    @changeShowType="changeShowType"
+                    :pageType="searchType"
+                    :changeShow="false"
+                >
+                    <span slot="filter1">
+                        <product-category-filter
+                            size="small"
+                            v-model="categoryIds"
+                            @input="refreash"
+                        ></product-category-filter>
+                    </span>
+                    <span slot="filter2">
+                        <country-filter
+                            size="small"
+                            v-model="continent"
+                            :country.sync="countries"
+                            @input="refreash"
+                        ></country-filter>
+                    </span>
+                    <span slot="filter3">
+                        <product-brand-filter
+                            v-if="searchType === 'product'"
+                            size="small"
+                            v-model="brand"
+                            @input="refreash"
+                        ></product-brand-filter>
+                        <enterprise-type-filter
+                            v-else
+                            size="small"
+                            v-model="enterpriseType"
+                            @input="refreash"
+                        ></enterprise-type-filter>
+                    </span>
+                </filter-sort-bar>
+            </van-sticky>
+
+            <sort-list
+                :empty="empty"
+                emptyText="敬请期待"
+                :loading="loading"
+                :finish="finish"
+                :top="searchType === 'information' ? '0px' : '172rpx'"
+            >
+                <div class="product-list" v-if="showType === 'grid'">
+                    <div class="clo-2" v-for="item in list" :key="item.id">
+                        <product-grid :info="item" v-if="searchType === 'product'"></product-grid>
+                        <vendor-grid :info="item" v-else-if="searchType === 'vendor'"></vendor-grid>
                     </div>
                 </div>
-            </div>
-            <div class="history">
-                <div class="histroy-title">
-                    <div class="text">热门搜索</div>
-                </div>
-
-                <div class="history-list">
-                    <div class="tags" @click="goNext(item)" v-for="(item, index) in hots" :key="index">
-                        {{ item }}
+                <div class="product-list2" v-else>
+                    <div v-for="item in list" :key="item.id" class="item">
+                        <product-row :info="item" v-if="searchType === 'product'"></product-row>
+                        <vendor-row :info="item" v-else-if="searchType === 'vendor'"></vendor-row>
+                        <news-row :info="item" v-else></news-row>
                     </div>
                 </div>
-            </div>
+            </sort-list>
         </div>
-        <van-dialog id="van-dialog" />
     </div>
 </template>
 <script>
 import { mapState } from 'vuex';
 import Dialog from '../native/vant/dialog/dialog';
 import { matchingName } from '../utils/commont';
+import cnchar from '../native/cnchar.min.js';
+import searchList from '../mixins/searchList';
+import FilterSortBar from '../components/bar/FilterSortBar';
+import SortList from '../components/SortList';
+import ProductGrid from '../components/product/GridNormal';
+import ProductRow from '../components/product/RowNormal.vue';
+import ProductBrandFilter from '../components/filter/ProductBrand';
+import ProductCategoryFilter from '../components/filter/ProductCategory';
+import CountryFilter from '../components/filter/Country';
+
+import VendorGrid from '../components/vendor/Grid.vue';
+import VendorRow from '../components/vendor/Row';
+import EnterpriseTypeFilter from '../components/filter/EnterpriseType';
+
+import NewsRow from '../components/News/Row.vue';
+
 export default {
     data() {
         return {
@@ -72,9 +190,26 @@ export default {
             left: null,
             historys: [],
             focus: false,
-            hots: ['信息通信', '3D打印', '机床', '机加工', '电子器件', '高精度打印机', '量具仪具']
+            hots: ['信息通信', '3D打印', '机床', '机加工', '电子器件', '高精度打印机', '量具仪具'],
+            matchList: [],
+            searchType: 'product',
+            categoryIds: '',
+            countries: '',
+            continent: '',
+            brand: '',
+            url: '/product/show',
+            tagIds: '',
+            applicationField: '',
+            main: null,
+            ratio: 1,
+            vendorInfoId: '',
+            defaultCategoryId: '',
+            enterpriseType: '',
+            showType: 'row',
+            first: true
         };
     },
+    mixins: [searchList],
     computed: {
         ...mapState(['barTop', 'barHeight']),
         narStyle() {
@@ -96,6 +231,57 @@ export default {
             } else {
                 return '';
             }
+        },
+        listQuery() {
+            if (this.searchType === 'product') {
+                return {
+                    productSort: this.sort,
+                    categoryIds: this.categoryIds || '',
+                    countries: this.countries,
+                    tagIds: this.tagIds,
+                    applicationField: this.applicationField,
+                    query: JSON.stringify({
+                        vendorInfoId: this.vendorInfoId
+                    })
+                };
+            } else if (this.searchType === 'vendor') {
+                return {
+                    vendorSort: this.sort,
+                    categoryIds: this.categoryIds,
+                    countries: this.countries,
+                    continent: this.continent,
+                    enterpriseType: this.enterpriseType,
+                    applicationField: this.applicationField
+                };
+            } else {
+                return {
+                    sort: 'createdAt,desc'
+                };
+            }
+        },
+        filterQuery() {
+            if (this.searchType === 'product') {
+                return {
+                    pageType: 'product',
+                    categoryIds: this.categoryIds,
+                    countries: this.countries,
+                    continent: this.continent,
+                    searchTop: this.searchTop,
+                    tagIds: this.tagIds,
+                    applicationField: this.applicationField,
+                    brand: this.brand
+                };
+            } else {
+                return {
+                    pageType: 'vendor',
+                    categoryIds: this.categoryIds,
+                    countries: this.countries,
+                    continent: this.continent,
+                    enterpriseType: this.enterpriseType,
+                    searchTop: this.searchTop,
+                    applicationField: this.applicationField
+                };
+            }
         }
     },
     onShow() {
@@ -106,32 +292,92 @@ export default {
         this.$http.get('/sysConfig/get/SEARCH_HOT').then(res => {
             this.hots = res.value.split(',');
         });
-        this.$nextTick(() => {
-            this.focus = true;
-        });
     },
     onReady() {
         this.left = wx.createSelectorQuery().select('#left');
+        this.$nextTick(() => {
+            this.focus = true;
+        });
     },
     methods: {
         confirm(e) {
-            this.goNext(e.detail);
+            this.first = false;
+            this.goNext(e.detail, false);
+        },
+        changeInfo(type) {
+            this.searchType = type;
+
+            this.categoryIds = '';
+            this.countries = '';
+            this.brand = '';
+            this.tagIds = '';
+            this.applicationField = '';
+            this.enterpriseType = '';
+            this.continent = '';
+            this.sort = 'COMPOSITE';
+            if (type === 'product') {
+                this.url = '/product/show';
+                this.formType = {};
+                this.showType = 'grid';
+            } else if (type === 'vendor') {
+                this.url = '/vendorInfo/show';
+                this.formType = {};
+                this.showType = 'row';
+            } else {
+                this.url = '/information/all';
+                this.formType = {
+                    header: {
+                        'Content-Type': 'application/json'
+                    }
+                };
+                this.showType = 'row';
+            }
         },
-        goNext(info) {
+        goNext(info, changeType = true) {
+            this.first = false;
+            console.log(info);
+            this.focus = false;
+            this.searchKey = info;
             var historys = [...this.historys];
-            historys.push(info);
+            historys.splice(0, 0, info);
             historys = [...new Set(historys)];
+            historys.slice(0, 20);
             var _this = this;
-            this.search = info;
             wx.setStorage({
                 key: 'searchHistory',
                 data: JSON.stringify(historys),
                 success(res) {
                     _this.getHistory();
-                    _this.navigateTo('/pagesHome/ProductList?search=' + info, false);
+                    if (changeType) {
+                        _this.changeInfo('vendor');
+                    }
+                    _this.$nextTick(() => {
+                        _this.submitSearch();
+                    });
+                    // wx.redirectTo({
+                    //     url: '/pagesHome/SearchList?search=' + info
+                    // });
                 }
             });
         },
+        goVendor(info) {
+            this.first = false;
+            this.changeInfo('vendor');
+            this.focus = false;
+            this.searchKey = info;
+            this.$nextTick(() => {
+                this.submitSearch();
+            });
+        },
+        goInformation(info) {
+            this.first = false;
+            this.changeInfo('information');
+            this.focus = false;
+            this.searchKey = info;
+            this.$nextTick(() => {
+                this.submitSearch();
+            });
+        },
         getHistory() {
             var _this = this;
             wx.getStorage({
@@ -164,11 +410,59 @@ export default {
                 });
         },
         changeSearch(e) {
-            // matchingName(e.detail).then(res => {
-            //     console.log(res);
-            // });
+            this.searchKey = e.detail;
+            if (!this.focus) {
+                return;
+            }
+            if (e.detail) {
+                matchingName(e.detail).then(res => {
+                    let searchstr = e.detail.toLowerCase();
+
+                    this.matchList = res.map(item => {
+                        if (item.chName.toLowerCase().indexOf(searchstr) !== -1) {
+                            return item.chName;
+                        } else {
+                            return item.enName;
+                        }
+                    });
+                });
+            } else {
+                this.matchList = [];
+            }
+
             // console.log(e);
+        },
+        clearSearch() {
+            this.focus = false;
+            this.searchKey = '';
+            this.submitSearch();
+        },
+        blurSearch() {
+            if (!this.first) {
+                setTimeout(() => {
+                    this.focus = false;
+                }, 500);
+            }
+        }
+    },
+    onReachBottom() {
+        if (!this.loading && !this.finish) {
+            this.page++;
+            this.getData();
         }
+    },
+    components: {
+        FilterSortBar,
+        SortList,
+        ProductRow,
+        ProductGrid,
+        ProductBrandFilter,
+        ProductCategoryFilter,
+        CountryFilter,
+        EnterpriseTypeFilter,
+        VendorGrid,
+        VendorRow,
+        NewsRow
     }
 };
 </script>
@@ -190,38 +484,49 @@ export default {
 
 .container {
     position: relative;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+}
 
-    .content {
-        flex-grow: 1;
+.product-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px;
+    .clo-2 {
+        width: 50%;
+        padding: 6px;
+        box-sizing: border-box;
     }
 }
 
-.top {
-    position: relative;
-    .text {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        img {
-            width: 30px;
-            height: 30px;
-        }
-        span {
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 20px;
-            margin-left: 10px;
-        }
+.product-list2 {
+    padding: 10px 16px;
+    .item + .item {
+        margin-top: 16px;
     }
 }
+
+// .top {
+//     position: relative;
+//     .text {
+//         display: flex;
+//         align-items: center;
+//         justify-content: center;
+//         position: absolute;
+//         top: 0;
+//         right: 0;
+//         left: 0;
+//         bottom: 0;
+//         img {
+//             width: 30px;
+//             height: 30px;
+//         }
+//         span {
+//             font-size: 14px;
+//             color: #ffffff;
+//             line-height: 20px;
+//             margin-left: 10px;
+//         }
+//     }
+// }
 .history {
     padding: 0 16px;
 }
@@ -255,4 +560,57 @@ export default {
 .histroy-title {
     --button-border-width: 0px;
 }
+.navBar {
+    .content {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 15px;
+        right: 0;
+        transform: translateY(100%);
+        background-color: #fff;
+        z-index: 200;
+        box-sizing: border-box;
+    }
+    .popupPage {
+        width: 100%;
+        padding: 0 16px;
+        position: absolute;
+        left: 0;
+        bottom: 15px;
+        right: 0;
+        transform: translateY(100%);
+        background-color: #fff;
+        z-index: 200;
+        box-sizing: border-box;
+
+        .popuptext {
+            font-size: 14px;
+            color: #878d99;
+            line-height: 20px;
+            padding: 14px 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            word-wrap: normal;
+            span {
+                font-weight: bold;
+                color: #292c33;
+            }
+
+            .important {
+                font-weight: bold;
+                color: #292c33;
+            }
+
+            &.top {
+                padding: 14px 22px;
+            }
+
+            &:not(:last-child) {
+                border-bottom: 1px solid #f2f3f5;
+            }
+        }
+    }
+}
 </style>

src/pagesHome/SearchList.vue

@@ -0,0 +1,207 @@
+<config>
+{
+'navigationBarTitleText': '',
+'navigationStyle':'custom',
+'navigationBarTextStyle':'black',
+'backgroundColorBottom': '#f5f7fa',
+'backgroundColorTop': '#fff',
+}
+</config>
+<template>
+    <div>
+        <div :style="{ height: barHeight + 'px' }">
+            <search-bar v-model="searchKey" :dark="false" :ratio="ratio" @search="submitSearch"></search-bar>
+        </div>
+        <div class="main" id="main">
+            <van-sticky :container="main" :offset-top="barHeight">
+                <filter-sort-bar
+                    :sort="sort"
+                    :showType="showType"
+                    @showFilter="showFilter"
+                    @changeSort="changeSort"
+                    @changeShowType="changeShowType"
+                >
+                    <span slot="filter1">
+                        <product-category-filter
+                            size="small"
+                            v-model="categoryIds"
+                            @input="refreash"
+                        ></product-category-filter>
+                    </span>
+                    <span slot="filter2">
+                        <country-filter
+                            size="small"
+                            v-model="continent"
+                            :country.sync="countries"
+                            @input="refreash"
+                        ></country-filter>
+                    </span>
+                    <span slot="filter3">
+                        <product-brand-filter size="small" v-model="brand" @input="refreash"></product-brand-filter>
+                    </span>
+                </filter-sort-bar>
+            </van-sticky>
+
+            <sort-list :empty="empty" emptyText="敬请期待" :loading="loading" :finish="finish" top="172rpx">
+                <div class="product-list" v-if="showType === 'grid'">
+                    <div class="clo-2" v-for="item in list" :key="item.id">
+                        <product-grid :info="item"></product-grid>
+                    </div>
+                </div>
+                <div class="product-list2" v-else>
+                    <product-row v-for="item in list" :key="item.id" :info="item"></product-row>
+                </div>
+            </sort-list>
+        </div>
+    </div>
+</template>
+<script>
+import SearchBar from '../components/bar/SearchBarWithValue';
+import searchList from '../mixins/searchList';
+import FilterSortBar from '../components/bar/FilterSortBar';
+import SortList from '../components/SortList';
+import ProductGrid from '../components/product/GridNormal';
+import ProductBrandFilter from '../components/filter/ProductBrand';
+import ProductCategoryFilter from '../components/filter/ProductCategory';
+import CountryFilter from '../components/filter/Country';
+import ProductRow from '../components/product/RowNormal.vue';
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            banners: [],
+            categoryIds: '',
+            countries: '',
+            continent: '',
+            brand: '',
+            url: '/product/show',
+            tagIds: '',
+            applicationField: '',
+            main: null,
+            ratio: 1,
+            vendorInfoId: '',
+            defaultCategoryId: ''
+        };
+    },
+    mixins: [searchList],
+    computed: {
+        ...mapState(['barTop', 'barHeight']),
+        firstLevels() {
+            const list = [...this.productCategories];
+            return list.filter(item => {
+                return !item.parentId;
+            });
+        },
+        listQuery() {
+            return {
+                productSort: this.sort,
+                categoryIds: this.categoryIds || '',
+                countries: this.countries,
+                tagIds: this.tagIds,
+                applicationField: this.applicationField,
+                query: JSON.stringify({
+                    vendorInfoId: this.vendorInfoId
+                })
+            };
+        },
+        filterQuery() {
+            return {
+                pageType: 'product',
+                categoryIds: this.categoryIds,
+                countries: this.countries,
+                continent: this.continent,
+                searchTop: this.searchTop,
+                tagIds: this.tagIds,
+                applicationField: this.applicationField,
+                brand: this.brand
+            };
+        }
+    },
+    onLoad(options) {
+        console.log(options);
+        if (options.categoryIds) {
+            this.categoryIds = options.categoryIds;
+        }
+        // if (options.defaultCategoryId) {
+        //     this.defaultCategoryId = options.defaultCategoryId;
+        // }
+        if (options.applicationField) {
+            this.applicationField = options.applicationField;
+        }
+        if (options.search) {
+            this.search = options.search;
+            this.searchKey = options.search;
+        }
+        if (options.vendorId) {
+            this.vendorInfoId = options.vendorId;
+        }
+        this.getData();
+    },
+    onReachBottom() {
+        if (!this.loading && !this.finish) {
+            this.page++;
+            this.getData();
+        }
+    },
+    components: {
+        FilterSortBar,
+        SortList,
+        ProductGrid,
+        ProductBrandFilter,
+        ProductCategoryFilter,
+        CountryFilter,
+        SearchBar,
+        ProductRow
+    }
+    // watch: {
+    //     defaultCategoryId() {
+    //         this.categoryIds = '';
+    //         this.$nextTick(() => {
+    //             this.refreash();
+    //         });
+    //     }
+    // }
+};
+</script>
+
+<style lang="less">
+.tab-content {
+    background: @prim;
+    .van-tabs__scroll {
+        background: @prim;
+        .van-tab {
+            color: #fff;
+            &.van-tab--active {
+                color: @warn;
+            }
+        }
+
+        .van-tabs__line {
+            bottom: 8px;
+            left: 7.5px;
+        }
+    }
+}
+
+.banner-box {
+    padding: 16px 16px 4px;
+}
+.top {
+    height: 44px;
+}
+
+.product-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px;
+    .clo-2 {
+        width: 50%;
+        padding: 6px;
+        box-sizing: border-box;
+    }
+}
+
+.product-list2 {
+    padding: 10px 16px;
+}
+</style>

src/pagesHome/VendorList.vue

@@ -0,0 +1,201 @@
+<config>
+{
+'navigationBarTitleText': '',
+'navigationStyle':'custom',
+'navigationBarTextStyle':'black',
+'backgroundColorBottom': '#f5f7fa',
+'backgroundColorTop': '#fff',
+}
+</config>
+<template>
+    <div>
+        <div :style="{ height: barHeight + 'px' }">
+            <search-bar v-model="searchKey" :dark="false" :ratio="ratio" @search="submitSearch"></search-bar>
+        </div>
+        <div class="main" id="main">
+            <van-sticky :container="main" :offset-top="barHeight">
+                <filter-sort-bar
+                    :sort="sort"
+                    :showType="showType"
+                    @showFilter="showFilter"
+                    @changeSort="changeSort"
+                    @changeShowType="changeShowType"
+                    pageType="vendor"
+                >
+                    <span slot="filter1">
+                        <product-category-filter
+                            size="small"
+                            v-model="categoryIds"
+                            @input="refreash"
+                        ></product-category-filter>
+                    </span>
+                    <span slot="filter2">
+                        <country-filter
+                            size="small"
+                            v-model="continent"
+                            :country.sync="countries"
+                            @input="refreash"
+                        ></country-filter>
+                    </span>
+                    <span slot="filter3">
+                        <enterprise-type-filter
+                            size="small"
+                            v-model="enterpriseType"
+                            @input="refreash"
+                        ></enterprise-type-filter>
+                    </span>
+                </filter-sort-bar>
+            </van-sticky>
+
+            <sort-list :empty="empty" emptyText="敬请期待" :loading="loading" :finish="finish" top="172rpx">
+                <div class="product-list" v-if="showType === 'grid'">
+                    <div class="clo-2" v-for="item in list" :key="item.id">
+                        <vendor-grid :info="item"></vendor-grid>
+                    </div>
+                </div>
+                <div class="product-list2" v-else>
+                    <div v-for="item in list" :key="item.id" class="item">
+                        <vendor-row :info="item"></vendor-row>
+                    </div>
+                </div>
+            </sort-list>
+        </div>
+    </div>
+</template>
+<script>
+import SearchBar from '../components/bar/SearchBarWithValue';
+import searchList from '../mixins/searchList';
+import FilterSortBar from '../components/bar/FilterSortBar';
+import SortList from '../components/SortList';
+import VendorGrid from '../components/vendor/Grid.vue';
+import VendorRow from '../components/vendor/Row';
+import EnterpriseTypeFilter from '../components/filter/EnterpriseType';
+import ProductCategoryFilter from '../components/filter/ProductCategory';
+import CountryFilter from '../components/filter/Country';
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            banners: [],
+            categoryIds: '',
+            countries: '',
+            continent: '',
+            url: '/vendorInfo/show',
+            tagIds: '',
+            applicationField: '',
+            main: null,
+            ratio: 1,
+            showType: 'row',
+            enterpriseType: ''
+        };
+    },
+    mixins: [searchList],
+    computed: {
+        ...mapState(['barTop', 'barHeight']),
+        firstLevels() {
+            const list = [...this.productCategories];
+            return list.filter(item => {
+                return !item.parentId;
+            });
+        },
+        listQuery() {
+            return {
+                vendorSort: this.sort,
+                categoryIds: this.categoryIds,
+                countries: this.countries,
+                continent: this.continent,
+                enterpriseType: this.enterpriseType,
+                applicationField: this.applicationField
+            };
+        },
+        filterQuery() {
+            return {
+                pageType: 'vendor',
+                categoryIds: this.categoryIds,
+                countries: this.countries,
+                continent: this.continent,
+                enterpriseType: this.enterpriseType,
+                searchTop: this.searchTop,
+                applicationField: this.applicationField
+            };
+        }
+    },
+    onLoad(options) {
+        if (options.search) {
+            this.search = options.search;
+            this.searchKey = options.search;
+        }
+
+        this.getData();
+    },
+    onReachBottom() {
+        if (!this.loading && !this.finish) {
+            this.page++;
+            this.getData();
+        }
+    },
+    components: {
+        FilterSortBar,
+        SortList,
+        VendorGrid,
+        EnterpriseTypeFilter,
+        ProductCategoryFilter,
+        CountryFilter,
+        SearchBar,
+        VendorRow
+    }
+    // watch: {
+    //     defaultCategoryId() {
+    //         this.categoryIds = '';
+    //         this.$nextTick(() => {
+    //             this.refreash();
+    //         });
+    //     }
+    // }
+};
+</script>
+
+<style lang="less">
+.tab-content {
+    background: @prim;
+    .van-tabs__scroll {
+        background: @prim;
+        .van-tab {
+            color: #fff;
+            &.van-tab--active {
+                color: @warn;
+            }
+        }
+
+        .van-tabs__line {
+            bottom: 8px;
+            left: 7.5px;
+        }
+    }
+}
+
+.banner-box {
+    padding: 16px 16px 4px;
+}
+.top {
+    height: 44px;
+}
+
+.product-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px;
+    .clo-2 {
+        width: 50%;
+        padding: 6px;
+        box-sizing: border-box;
+    }
+}
+
+.product-list2 {
+    // padding: 10px 16px;
+    .item {
+        padding: 6px 16px;
+    }
+}
+</style>