搜索

src/components/bar/SearchBarBtn.vue

@@ -0,0 +1,186 @@
+<template>
+    <div :class="{ fixed: fixed, dark: dark }">
+        <van-sticky :z-index="200">
+            <div class="navBar" :style="narStyle" id="searchBar">
+                <van-icon
+                    name="icon-home"
+                    class-prefix="iconfont"
+                    v-if="isHome"
+                    @click="goHome"
+                    :size="24"
+                    :color="fontColor"
+                />
+                <van-icon v-else name="arrow-left" :size="24" @click="navigateBack(2)" :color="fontColor" />
+                <div class="search" @click="navigateBack">
+                    <!-- <van-icon name="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/search.png" /> -->
+                    <span>{{ value }}</span>
+                    <!-- <span>搜索...</span> -->
+                </div>
+            </div>
+        </van-sticky>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        fixed: {
+            type: Boolean,
+            default: true
+        },
+        ratio: {
+            type: Number,
+            default: 0
+        },
+        dark: {
+            type: Boolean,
+            default: false
+        },
+        isDefault: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            menuButtonInfo: {},
+            search: '',
+            isHome: false
+        };
+    },
+    computed: {
+        ...mapState(['barTop', 'barHeight', 'barInfo']),
+        fixedHieght() {
+            if (this.barInfo.top) {
+                return this.barInfo.top + this.barInfo.height + 15;
+            } else {
+                return 71;
+            }
+        },
+        narStyle() {
+            let style = {};
+            if (this.fixed && this.dark) {
+                style.background = 'rgba(15, 38, 77,' + (0 + 1 * this.ratio) + ')';
+            } else {
+                style.background = 'rgba(255, 255, 255,' + (0 + 1 * this.ratio) + ')';
+            }
+            if (this.barInfo.top) {
+                style.padding = this.barInfo.top + 'px ' + (15 + this.barInfo.width) + 'px 15px 15px';
+                style.height = this.barInfo.height + 'px';
+            }
+            style.visibility = 'visible';
+            return style;
+        },
+        searchStyle() {
+            let style = {};
+            if (this.fixed) {
+                style.opacity = 0;
+                if (this.ratio === 1) {
+                    style.opacity = 1;
+                }
+            }
+
+            return style;
+        },
+        fontColor() {
+            if (this.isDefault) {
+                return !this.dark ? '#000' : '#fff';
+            } else {
+                return !this.dark && this.ratio ? '#000' : '#fff';
+            }
+        }
+    },
+    onReady() {
+        this.isHome = getCurrentPages().length === 1;
+        this.search = this.value;
+    },
+    watch: {
+        value() {
+            if (this.search !== this.value) {
+                this.search = this.value;
+            }
+        }
+    },
+    methods: {
+        inputChange(e) {
+            this.search = e.detail;
+            this.$emit('input', e.detail);
+        },
+        submitSearch() {
+            this.$emit('search');
+        },
+        clearSearch() {
+            this.search = '';
+            this.$emit('input', '');
+            this.submitSearch();
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.navBar {
+    visibility: hidden;
+}
+</style>
+<style lang="less">
+.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 200;
+}
+
+.dark {
+    .van-search {
+        .van-search__content {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .van-icon {
+            color: rgba(255, 255, 255, 0.5);
+        }
+        .van-search__field {
+            .van-field__input {
+                color: #fff;
+            }
+
+            .van-field__placeholder {
+                color: rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+}
+.navBar {
+    display: flex;
+    align-items: center;
+    .logo {
+        width: 48px;
+        height: 100%;
+        transform: translateY(-3px);
+    }
+    .search {
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        background: #f5f7fa;
+        border-radius: 16px;
+        flex-grow: 1;
+        box-sizing: border-box;
+        margin-left: 15px;
+        height: 100%;
+        overflow: hidden;
+        span {
+            font-size: 14px;
+            color: #292c33;
+            line-height: 24px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+</style>

src/mixins/commont.js

@@ -19,10 +19,9 @@ export default {
         }
     },
     methods: {
-        getImport(name) {
-            console.log(name);
-            if (this.search && name) {
-                var searchs = this.search.split('').map(item => {
+        getImport(name, search) {
+            if (search && name) {
+                var searchs = search.split('').map(item => {
                     return item.toLowerCase();
                 });
                 var names = name.split('');
@@ -98,8 +97,10 @@ export default {
                 });
             }
         },
-        navigateBack() {
-            wx.navigateBack();
+        navigateBack(num = 1) {
+            wx.navigateBack({
+                delta: num
+            });
         },
         goHome() {
             wx.switchTab({

src/pagesHome/InformationList.vue

@@ -24,7 +24,7 @@
     </div>
 </template>
 <script>
-import SearchBar from '../components/bar/SearchBarWithValue';
+import SearchBar from '../components/bar/SearchBarBtn';
 import searchList from '../mixins/searchList';
 import SortList from '../components/SortList';
 import NewsRow from '../components/News/Row.vue';

src/pagesHome/Search.vue

@@ -10,35 +10,39 @@
   "van-sidebar": "../native/vant/sidebar/index",
   "van-sidebar-item": "../native/vant/sidebar-item/index"
 },
-'disableScroll': false
+'disableScroll': true
 }
 </config>
 <template>
-    <div class="container" :style="`padding-top:${barHeight}px`">
-        <van-sticky :offset-top="0" :style="`height:${barHeight}px`">
+    <div class="container" :style="{ paddingTop: barHeight + 'px' }">
+        <van-sticky :offset-top="0">
             <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="searchKey"
+                    :value="search"
                     @search="confirm"
                     shape="round"
                     placeholder="搜索..."
                     @change="changeSearch"
                     :maxlength="60"
                     @focus="focus = true"
-                    @clear="clearSearch"
                     @blur="blurSearch"
                 />
 
                 <scroll-view
-                    v-if="searchKey && focus"
+                    v-if="searchKey"
                     scroll-y
                     class="popupPage"
                     :style="`height: calc(100vh - ${barHeight}px + 30rpx)`"
                 >
+                    <div class="popuptext top" @click="goNext(searchKey)">
+                        搜索“
+                        <span> {{ searchKey }}</span>
+                        ”相关的产品
+                    </div>
                     <div class="popuptext top" @click="goVendor(searchKey)">
                         搜索“
                         <span> {{ searchKey }}</span>
@@ -51,172 +55,69 @@
                     </div>
                     <div
                         class="popuptext"
-                        v-html="getImport(item)"
+                        v-html="getImport(item, searchKey)"
                         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>
 
-        <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 class="history-list">
+                    <div class="tags" @click="goNext(item)" v-for="(item, index) in historys" :key="index">
+                        {{ item }}
                     </div>
                 </div>
-                <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 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>
                 </div>
-            </sort-list>
+            </div>
         </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 {
             menuButtonInfo: {},
-            search: '',
+            searchKey: '',
+            searchShow: '',
             activeKey: 0,
             categories: [],
             left: null,
             historys: [],
             focus: false,
             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
+            matchList: []
         };
     },
-    mixins: [searchList],
     computed: {
-        ...mapState(['barTop', 'barHeight']),
+        ...mapState(['barTop', 'barHeight', 'barInfo']),
         narStyle() {
-            if (this.menuButtonInfo.top) {
+            if (this.barInfo.top) {
                 return {
-                    padding: this.menuButtonInfo.top + 'px ' + (10 + this.menuButtonInfo.width) + 'px 15px 15px',
-                    height: this.menuButtonInfo.height + 'px'
+                    padding: this.barInfo.top + 'px ' + (10 + this.barInfo.width) + 'px 15px 15px',
+                    height: this.barInfo.height + 'px'
                 };
             } else {
                 return {};
@@ -285,7 +186,16 @@ export default {
         }
     },
     onShow() {
-        this.menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+        setTimeout(() => {
+            this.$nextTick(() => {
+                this.focus = true;
+                if (this.search) {
+                    this.changeSearch({
+                        detail: this.search
+                    });
+                }
+            });
+        }, 100);
     },
     onLoad() {
         this.getHistory();
@@ -295,9 +205,6 @@ export default {
     },
     onReady() {
         this.left = wx.createSelectorQuery().select('#left');
-        this.$nextTick(() => {
-            this.focus = true;
-        });
     },
     methods: {
         confirm(e) {
@@ -334,48 +241,43 @@ export default {
             }
         },
         goNext(info, changeType = true) {
-            this.first = false;
-            console.log(info);
-            this.focus = false;
-            this.searchKey = info;
             var historys = [...this.historys];
             historys.splice(0, 0, info);
             historys = [...new Set(historys)];
-            historys.slice(0, 20);
+            historys = historys.slice(0, 10);
             var _this = this;
             wx.setStorage({
                 key: 'searchHistory',
                 data: JSON.stringify(historys),
                 success(res) {
                     _this.getHistory();
-                    if (changeType) {
-                        _this.changeInfo('vendor');
-                    }
-                    _this.$nextTick(() => {
-                        _this.submitSearch();
+
+                    wx.navigateTo({
+                        url: '/pagesHome/SearchList?search=' + info,
+                        success: () => {
+                            _this.search = info;
+                            _this.focus = false;
+                        }
                     });
-                    // 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();
+            wx.navigateTo({
+                url: '/pagesHome/VendorList?search=' + info,
+                success: () => {
+                    this.search = info;
+                    this.focus = false;
+                }
             });
         },
         goInformation(info) {
-            this.first = false;
-            this.changeInfo('information');
-            this.focus = false;
-            this.searchKey = info;
-            this.$nextTick(() => {
-                this.submitSearch();
+            wx.navigateTo({
+                url: '/pagesHome/InformationList?search=' + info,
+                success: () => {
+                    this.search = info;
+                    this.focus = false;
+                }
             });
         },
         getHistory() {
@@ -411,9 +313,6 @@ export default {
         },
         changeSearch(e) {
             this.searchKey = e.detail;
-            if (!this.focus) {
-                return;
-            }
             if (e.detail) {
                 matchingName(e.detail).then(res => {
                     let searchstr = e.detail.toLowerCase();
@@ -438,11 +337,9 @@ export default {
             this.submitSearch();
         },
         blurSearch() {
-            if (!this.first) {
-                setTimeout(() => {
-                    this.focus = false;
-                }, 500);
-            }
+            setTimeout(() => {
+                this.focus = false;
+            }, 500);
         }
     },
     onReachBottom() {
@@ -450,19 +347,6 @@ export default {
             this.page++;
             this.getData();
         }
-    },
-    components: {
-        FilterSortBar,
-        SortList,
-        ProductRow,
-        ProductGrid,
-        ProductBrandFilter,
-        ProductCategoryFilter,
-        CountryFilter,
-        EnterpriseTypeFilter,
-        VendorGrid,
-        VendorRow,
-        NewsRow
     }
 };
 </script>
@@ -486,24 +370,6 @@ export default {
     position: relative;
 }
 
-.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 + .item {
-        margin-top: 16px;
-    }
-}
-
 // .top {
 //     position: relative;
 //     .text {

src/pagesHome/SearchList.vue

@@ -56,7 +56,7 @@
     </div>
 </template>
 <script>
-import SearchBar from '../components/bar/SearchBarWithValue';
+import SearchBar from '../components/bar/SearchBarBtn.vue';
 import searchList from '../mixins/searchList';
 import FilterSortBar from '../components/bar/FilterSortBar';
 import SortList from '../components/SortList';

src/pagesHome/VendorList.vue

@@ -50,7 +50,7 @@
             <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>
+                        <VendorGrid :info="item"></VendorGrid>
                     </div>
                 </div>
                 <div class="product-list2" v-else>
@@ -63,7 +63,7 @@
     </div>
 </template>
 <script>
-import SearchBar from '../components/bar/SearchBarWithValue';
+import SearchBar from '../components/bar/SearchBarBtn';
 import searchList from '../mixins/searchList';
 import FilterSortBar from '../components/bar/FilterSortBar';
 import SortList from '../components/SortList';
@@ -189,6 +189,12 @@ export default {
         width: 50%;
         padding: 6px;
         box-sizing: border-box;
+        .bg-white {
+            width: 100%;
+        }
+        .van-image {
+            height: 165px;
+        }
     }
 }
 

src/store/index.js

@@ -22,6 +22,7 @@ export default new Vuex.Store({
         userMoreInfo: {},
         emailInfo: {},
         messageList: [],
+        barInfo: {},
         chatForm:
             '{"phone":"13365135976","sex":"male","nickname":"蒋耀忠","position":"总经理","chCompanyName":"NE洛阳新能轴承制造有限公司","email":"11@qq.com.cn","products":[{"chName":"MS22-8多轴数控机床","enName":"MultiLine MS22-8","id":6296,"mainPicture":"https://imt.oss-cn-hangzhou.aliyuncs.com/image/2020-11-26-18-08-34MaKXCzxH.png"}]}'
     },
@@ -68,6 +69,9 @@ export default new Vuex.Store({
         updateBarTop(state, barTop) {
             state.barTop = barTop;
         },
+        updateBarInfo(state, barInfo) {
+            state.barInfo = barInfo;
+        },
         updateChatForm(state, chatForm) {
             state.chatForm = chatForm;
         },
@@ -144,9 +148,11 @@ export default new Vuex.Store({
         },
         getBarHeight(context) {
             var info = wx.getMenuButtonBoundingClientRect();
+            console.log(info);
             if (info.height) {
                 context.commit('updateBarHeight', info.top + info.height + 15);
                 context.commit('updateBarTop', info.top);
+                context.commit('updateBarInfo', info);
             }
         },
         getArea(context) {

src/utils/commont.js

@@ -68,7 +68,10 @@ function matchingName(str = '') {
                 {
                     search: str,
                     page: 0,
-                    size: 10
+                    size: 10,
+                    query: {
+                        deviceStatus: 'NOW_ON_SHELF'
+                    }
                 },
                 {
                     header: {