247 lines
9.2 KiB
Vue
247 lines
9.2 KiB
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> |