20261008
This commit is contained in:
@@ -1,115 +1,245 @@
|
||||
<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(0)" :class="{'active': searchType == 0}" class="_goods" >商品</li>
|
||||
<li @click="searchTypeChange(1)" :class="{'active': searchType == 1}" class="_shop">商户</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">
|
||||
</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>
|
||||
<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 class="clearfix">
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=直缝焊管">直缝焊管</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=架子管">架子管</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=无缝管">无缝管</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=方矩管">方矩管</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=钢板">钢板</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=螺纹钢">螺纹钢</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=H型钢">H型钢</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=工字钢">工字钢</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=槽钢">槽钢</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/market/index.html?product_name=镀锌钢管">镀锌钢管</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-menu">
|
||||
<div class="hrd">
|
||||
<a href="/support/index.html" class="hrd-landing">
|
||||
<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>
|
||||
<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: 0,
|
||||
searchList: [
|
||||
{
|
||||
type: 0,
|
||||
name: '商品',
|
||||
placeholder:'请输入品名 材质 规格 钢厂等搜索'
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
name: '商户',
|
||||
placeholder:'请输入商户名或公司名进行搜索'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
searchTypeChange(e) {
|
||||
this.searchType = e
|
||||
},
|
||||
search() {
|
||||
this.$message('这是一条消息提示');
|
||||
}
|
||||
}
|
||||
}
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user