jjx-web/components/common-header/common-header.vue

<template>
    <view>
        <div class="group-head clearfix">
            <div class="group-inner clearfix">
                <div class="mod-logo">
                    <a href="/" class="logo"><img src="@/static/images/logo.png"></a>
                </div>
                <div class="mod-mini-search">
                    <div class="navigation-top clearfix">
                        <div class="searchBar">
                            <ul class="searchBar-tab clearfix">
                                <li @click="searchTypeChange(1)" :class="{'active': searchType === 1}" class="_shop">
                                    现货
                                </li>
                                <li @click="searchTypeChange(2)" :class="{'active': searchType === 2}" class="_shop">
                                    找供应
                                </li>
                                <li @click="searchTypeChange(3)" :class="{'active': searchType === 3}" class="_shop">
                                    找加工
                                </li>
                                <li @click="searchTypeChange(4)" :class="{'active': searchType === 4}" class="_shop">
                                    旧货
                                </li>
                                <li @click="searchTypeChange(0)" :class="{'active': searchType === 0}" class="_goods">
                                    特产商品
                                </li>
                            </ul>
                            <div class="clearfix">
                                <div class="searchBar-input">
                                    <div class="searchBar-input-inner">
                                        <input type="text" :placeholder="searchList[searchType].placeholder"
                                               maxlength="100" autocomplete="off" v-model="keyword">
                                    </div>
                                    <div class="searchBar-input-list" style="display: none;"></div>
                                </div>
                                <div class="preventButton button" desc=""></div>
                                <div class="button" @click="search">搜索</div>
                            </div>
                        </div>

                        <div class="mod-hot-query">
                            <ul style="width: 480px; overflow-x: auto;">
                                <li v-for="(item, index) in allChildCate" :key="index">
                                    <a href="javascript:;" @click="navTo(item.name)">{{ item.name }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="mod-menu">
                    <div class="hrd">
                        <a href="javascript:;" class="hrd-landing"
                           @click="jump('/pages/index/self-support/self-support')">
                            <img src="@/static/images/logo-left.png">
                        </a>
                    </div>
                </div>
                <!--				<div class="mod-download-icon js-download">-->
                <!--					<a class="download clearfix" href="" target="_blank">-->
                <!--						<span style="float: left;font-size: 13px;padding-top: 27px;padding-right: 10px;">金久信<br>-->
                <!--							手机站</span>-->
                <!--						<img src="/public/upload/image/20210220/80705c8b12d05d0ff67a2758749ef09c.jpg"-->
                <!--							style="height: 90px;width: 90px;float: left;">-->
                <!--					</a>-->
                <!--				</div>-->
            </div>
        </div>
    </view>
</template>

<script>
export default {
    name: "common-header",
    data() {
        return {
            searchType: 1,
            allChildCate: [],
            searchList: [
                {
                    type: 0,
                    name: '商品',
                    placeholder: '请输入商品名称等搜索',
                    page: '/pages/index/shop/shop'
                },
                {
                    type: 1,
                    name: '现货',
                    placeholder: '请输入品名 材质 规格 钢厂等搜索',
                    page: '/pages/spot/goods/goods'
                },
                {
                    type: 2,
                    name: '找供应',
                    placeholder: '请输入品名 材质 规格 钢厂等搜索',
                    page: '/pages/enquiry/list'
                },
                {
                    type: 3,
                    name: '找加工',
                    placeholder: '请输入品名 材质 规格 钢厂等搜索',
                    page: '/pages/process/list'
                },
                {
                    type: 4,
                    name: '旧货',
                    placeholder: '请输入品名 材质 规格 钢厂等搜索',
                    page: '/pages/index/old/old'
                },
            ],
            keyword: null,
            currentPage: '',
            spotCateList: [],
            enquiryCateList: [],
            processCateList: [],
            oldCateList: [],
            goodsCateList: [],
        };
    },
    methods: {
        searchTypeChange(e) {
            this.searchType = e
            switch (e) {
                case 0 : {
                    this.allChildCate = this.goodsCateList
                }
                    break;
                case 1 : {
                    this.allChildCate = this.spotCateList
                }
                    break;
                case 2 : {
                    this.allChildCate = this.enquiryCateList
                }
                    break;
                case 3 : {
                    this.allChildCate = this.processCateList
                }
                    break;
                case 4 : {
                    this.allChildCate = this.oldCateList
                }
                    break;

            }
        },
        search() {
            this.navTo(this.keyword)
        },
        getCateList() {
            vk.callFunction({
                url: 'client/spot/category/pub/getTree',
                title: '请求中...',
                data: {},
                success: (data) => {
                    this.spotCateList = []
                    data.rows.forEach(item => {
                        item.children.forEach(child => {
                            this.spotCateList.push(child)
                        })
                    })
                    this.allChildCate = this.spotCateList
                }
            });
        },
        async getEnquiryCateList() {
            vk.callFunction({
                url: 'client/enquiry/template/pub/getList',
                title: '请求中...',
                data: {},
                success: (data) => {
                    this.enquiryCateList = data.rows
                }
            });
        },
        async getProcessCateList() {
            vk.callFunction({
                url: 'client/process/category/pub/getTree',
                title: '请求中...',
                data: {},
                success: (data) => {
                    this.processCateList = data.rows
                }
            });
        },
        async getOldCateList() {
            vk.callFunction({
                url: 'client/old/pub/getTree',
                title: '请求中...',
                data: {type: 1},
                success: (data) => {
                    this.oldCateList = data.rows.map(item => {
                        item.children.forEach(child => {
                            delete child.children
                        })
                        return item
                    })
                }
            });
        },
        getGoodsCate() {
            vk.callFunction({
                url: 'client/goods/category/pub/getList'
            }).then(res => {
                this.goodsCateList = res.rows
            })
        },
        navTo(keyword) {
            if (this.searchType === 0) {
                vk.navigateTo({
                    url: this.searchList[this.searchType].page + '?cateName=' + keyword
                })
            } else {
                vk.navigateTo({
                    url: this.searchList[this.searchType].page + '?keyword=' + keyword
                })
            }
        },
        jump(url) {
            vk.navigateTo({
                url: url
            })
        }
    },
    mounted() {
        this.getCateList()
        this.getEnquiryCateList()
        this.getProcessCateList()
        this.getOldCateList()
        this.getGoodsCate()
    },
    watch: {
        $route({meta: {pagePath}}) {
            this.currentPage = pagePath
            if (this.currentPage.includes('shop')) this.searchType = 0
            if (this.currentPage.includes('spot')) this.searchType = 1
            if (this.currentPage.includes('enquiry')) this.searchType = 2
            if (this.currentPage.includes('process')) this.searchType = 3
            if (this.currentPage.includes('old')) this.searchType = 4
            // console.log(this.currentPage.includes('process'), this.searchType)
        }
    }
}
</script>

<style lang="scss">

</style>